こんにちは、HAIRCAMPでバックエンドを担当している川村です！今回はデータベース管理ソフトウェア「TablePlus」を利用して簡単にER図を生成する方法ご紹介させていただきます。 <h2 id="h07236ab67b">参考になる方</h2> ER図の手動生成が面倒に感じている方。TablePlusを利用しているが、テーブル毎のみでなくリレーションも含めて確認したいと思っている方。 <h2 id="hc77da15f6e">TablePlusとは</h2> TablePlusは下記の中のデータベースをGUI上で操作、閲覧ができるツールになります。 <img src="https://images.microcms-assets.io/assets/4af1edcbfdf74d1e92f009a007b2dded/b73b09458ccd4347a239c28fee5b24f3/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-08-26%2019.00.10.png" alt=""> CUI上では見にくいデータも本ツールを利用すると閲覧しやすくなり、本ツール上でSQLも実行できます。 <h2 id="h10268a6914">TablePlusでのER図の自動生成方法</h2> ①TablePlusを起動する。②画面上部のメニューにある<code>Plugins</code>→<code>Manage Plugins...</code>をクリックする。 <img src="https://images.microcms-assets.io/assets/4af1edcbfdf74d1e92f009a007b2dded/9b38c5901ee24a4dbeec2ca2b631dd3e/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-08-26%2019.06.17.png" alt=""> ③<code>Available Plugins</code> から<code>Diagram Generator</code>のドロップダウンボタンをクリックする。 <img src="https://images.microcms-assets.io/assets/4af1edcbfdf74d1e92f009a007b2dded/2123cfa3ce6c400ba067c0a7b7e36a34/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-08-26%2019.13.37.png" alt=""> ④<code>install</code> をクリックする。※自分の環境では既に<code>install</code>しているため<code>reinstall</code>と表示されますが通常は<code>install</code>と表示されます。 <img src="https://images.microcms-assets.io/assets/4af1edcbfdf74d1e92f009a007b2dded/477aea0675f6449792a2b7183133427b/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-08-26%2019.12.51.png" alt="">⑤<code>Install Plugins</code>に<code>Diagram Generator</code>があることを確認する。⑥適当なテーブル右クリックし、表示されたメニューから<code>Generate Diagram</code>をクリックする。 <img src="https://images.microcms-assets.io/assets/4af1edcbfdf74d1e92f009a007b2dded/b636321a0fdd4c5484d5a8f61f0b1ec1/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-08-26%2019.29.01.png" alt=""> ⑦自動でER図が生成される。 <img src="https://images.microcms-assets.io/assets/4af1edcbfdf74d1e92f009a007b2dded/6b9d7a8564c3494d9f538b4d83360f4b/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-08-26%2019.38.34.png" alt=""> 以上です！ 自分は以前手動でER図を生成していたことがありました。手動で生成するのは最初の作成も面倒ですが、何よりもテーブル構造が変わった際に変更する作業が面倒でした。上記の方法を使用すればこの問題は両方解決され、時短にもなったのご紹介させていただきました。機会がありましたら試してみてください！

ER図の自動生成に関して

こんにちは、HAIRCAMPでフロントエンドを担当している阿部です！今回は弊社で使用している技術スタックに関して、公開していきたいと思います！ <h2 id="h490873bfb8">弊社で使用している技術スタック</h2> <h4 id="hf01129d447">プロジェクトA</h4> フロントエンド: Nuxt.js, TypeScript, Stylusバックエンド: Express, TypeScript, Prisma(ORM)テスト: mochaDB: PostgreSQLインフラ: AWSその他: Docker, Github, Backlog, Slack <h4 id="hdda6d70a28">プロジェクトB</h4> フロントエンド: Nuxt.js, TypeScript, Stylusバックエンド: Express, TypeScript, Prisma(ORM)テスト: jestDB: PostgreSQLインフラ: AWSその他: Docker, circleCI, Github, Backlog, Slack <h4 id="h25be67776b">プロジェクトC </h4> フロントエンド: Nuxt.js, TypeScript, Vuetifyバックエンド: Express, TypeScript, TypeORM(ORM)テスト: jestDB: PostgreSQLインフラ: AWSその他: Docker, Github Actions , Github, Backlog, Slack <h4 id="hfaf7877c36">プロジェクトD</h4> フロントエンド: Next.js, TypeScriptバックエンド: microCMSインフラ: Vercel 各プロジェクトを1〜5名体制で進めています。 <h2 id="hef3312d402">フロントエンドに関して</h2> フロントエンド部分に関しては、Nuxt.jsを中心に使用しており、最近立ち上げたプロジェクトではNext.jsを使用しております。全てのプロジェクトのリポジトリが独立しており、TypeScriptの使用率は100%です。 大規模なプロジェクトではフロント部分でマイクロサービス化をしており、ユーザー画面と法人側で使う管理画面を分けて開発しております。 SSRモードで開発しているプロジェクトとSPAモードで開発しているプロジェクトの2パターンがあります。 現在は全てのプロジェクトがNuxt.js2系で開発しており、来年春に3系に段階的にアップグレードをする予定です。2系→3系のマイグレーション経験が積める良い機会になると思います！フロントエンドは随時募集しておりますので、気になる方はお気軽にお問い合わせください！ 今後の新規プロジェクトではNext.jsの採用も検討しております。 <h2 id="ha70d5d49c0">apiに関して</h2> バックエンドですが、全てのプロジェクトをapiサーバーとしており、REST API通信でJsonデータを返すだけにしております。こちらもTypeScriptを使用しており、全てのプロジェクトで使用率は100%です。 少ない人数で複数プロジェクトを回している為、DBは全てのプロジェクトでPostgreSQLで統一しております。主にPrismaのORMを使用しており、一番直近のプロジェクトでは新しい試みとして、TypeORMを導入いたしました。 設計方針ですが、積極的にクリーンアーキテクチャを採用して開発しており、apiのテストのカバレッジ率は100%のプロジェクトもございます。 課題としては、api側とフロントエンド側の型が統一されていないので、将来的にはapi側の型定義をnpmのmodule化し、フロントエンド部分と型情報を統一しようと考えております！ <h2 id="h765295c1c3">インフラに関して</h2> インフラに関してはメインはAWSを使用しており、Next.jsを使用した小規模プロジェクトではVercelを使用しております。CI・CD部分ではcircleCIとGithub Actionsを使用しており、Vercelで動くプロジェクトに関してはVercelのCI・CDに任せる形にしております。 プロジェクトによってEC2で動いているものやECSを使ってコンテナ基盤で動いているプロジェクトと様々です。現在社内にインフラに強い人材がいなく、外部の技術顧問や業務委託にアドバイスいただきながら進めていっている状況です。 <h2 id="h495085175b">TypeScriptを選定した理由</h2> 弊社では全サービスでTypeScriptを採用しております。フロントエンドではTypeScriptを使うことがデファクトスタンダードになりつつありますが、api側でもTypeScriptを使っている背景に関して次の理由があります。 <ul><li>少人数体制での開発において、キャッチアップや技術共有がやりやすい</li><li>サービスが大規模化してきても堅牢にアプリケーションを保てる</li><li>エコシステムが充実している</li><li>アプリ化を視野に入れている</li></ul> 小規模な開発体制をとっている為、プロジェクトによっては分業体制をとっておらずフロントエンドとapi側の両方を実装します。 その際に言語が統一されているのは、キャッチアップや技術共有の観点からメリットが非常に大きいです。またサービスを高速で作るにあたりNode.jsのnpmの巨大なエコシステムがあるのも大きな魅力の一つです。またTypeScriptの型の怨念を受けられるのでサービスが肥大化しても、ある程度は堅牢に保つことができます。ただライブラリーを取り入れすぎると、バージョンアップ等の保守の工数が嵩む可能性があるので、使う部分と使わない部分の線引きはしっかりと行っております。 HAIRCAMPでは少人数で開発を進めている為、手をあげれば積極的に様々な実装を経験することができます！リーダーポジションや設計の経験が積みやすいのも魅力の一つです😄エンジニアは随時募集しておりますので、気になりましたらお気軽にお問い合わせください！ <a href="https://corp.haircamp.jp/recruit/engineer" target="_blank" rel="noopener noreferrer">https://corp.haircamp.jp/recruit/engineer</a>

弊社で使用している技術スタックに関して

こんにちは、HAIRCAMPでフロントエンドを担当している阿部です。この度、外部発進向けに技術ブログを開設いたしました！ 今回は記念すべき1回目の投稿ということで、どのような技術で実装したかお話していきます😄 <h2 id="h48162eced8">使用技術</h2> 使用技術に関しては下記です。フロントエンド: Next.js, TypeScriptバックエンド: microCMSインフラ: Vercel コンテンツ部分はmicroCMSからapiでデータを取得し、jamstackな実装にしております。 <h3 id="h3a8bd022d0">なぜこの技術構成にしたか</h3> 理由としては大きく分けて3つあります。 <ul><li>コスト面</li><li>パフォーマンス面</li><li>自由度</li></ul> <h3 id="h303ecdc5c4">コスト面に関して</h3> まずコスト面に関してです。ブログを構築するにあたり、以下の3パターンがあるかと思います。 <ul><li>バックエンドサーバーを立てて実装する</li><li>WordPressを使用する</li><li>ヘッドレスCMSを使用して実装する</li></ul> まずバックエンドサーバーを立てて実装するパターンですが、こちらは明らかにオーバースペック過ぎました。スケールするサービスであれば問題ないですが、今回はブログの記事コンテンツの投稿がメインの為、フロントエンドのサーバーとバックエンド側の両方のサーバーを立ててしまうと、サーバー料金が肥大化し、さらに両方のソースコードを管理するという保守の観点からも技術的負債が残ってしまいます。 次にWordPressを使用するパターンですが、こちらもサーバーを立てるコストもそうですが、MySQLのデータベースを管理しなくてはならなくなります。またデプロイの仕組みも一から構築しなければなりません。これらを管理しなくて済むに越したことはありません。 ヘッドレスCMSを使用して実装する こちらを採用することにより、上記にあげたデメリットをカバーすることができます。 今回であれば、microCMSを使用したのですが、こちらを使用すれば利用者側はサーバーやDBの管理をする必要がありません。つまりサーバーレスです！これにより無駄にソースコードの管理等をしなくてよくなります。 今回程度の規模であればmicroCMSは無料で使用することが可能です。 またインフラにVercelを使用することにより、CI・CDのパイプラインを爆速で作ることが可能になります。これでデプロイ時のコストを最大限に抑えることができます。 またVercelはブランチ毎にプッシュする度に、プレビューURLを発行してくれます。 <ul><li>mainにプッシュした際は自動デプロイ</li><li>それ以外のブランチにプッシュした場合はプレビューURLを発行</li></ul> のような形にすれば、この規模のサービスであればstg環境も不要になります。こちらもコストを削減できる大きなメリットです。 Vercelですが、個人利用であれば無料範囲、チーム利用だと1ユーザー20$になっています。 <h3 id="ha7eb573e68">パフォーマンス面に関して</h3> パフォーマンス面に関してはいうまでもなく、フロントエンドにNext.jsを採用し、裏側をヘッドレスCMSにするのが現時点だと一番良い選択だと思っています。 WordPressと違い、ヘッドレスCMSを活用することによりフロントエンドは自由に実装することができるのでNext.jsを使い、SPAライクなアプリケーションを実装することができます。 今回、データの取得部分に関しては全てNext.jsのSGで行っています。ここでCSR, SSR, SGのおさらいをしていきましょう。 <h4 id="h25fe895df0">CSR</h4> CSR(クライアントサイドレンダリング)は従来のSPAアプリケーションで広く使用されています。今までのMPAでは単一のHTMLファイルをレンダリングしていたので、レスポンスまでの時間がかかっていました。CSRはJavaScriptでページを生成することにより、高速にページを表示することができ、動的なデータに関してはローディング表示を見せることができます。 <img src="https://images.microcms-assets.io/assets/4af1edcbfdf74d1e92f009a007b2dded/9f9b26ebbdd64876aa423ce7bd447314/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-08-15%2018.35.10.png?w=960&amp;h=601" alt=""> メリットとしては、ページをJavaScriptで生成しているので早いです。デメリットとしては、初期リロードで一気に全てのHTMLファイルを読み込むので初期ロードが遅いのと、SEO上は弱いです。(最近はクローラが判断できるようにはなってきているらしい) <h4 id="hd9bd67a9a7">SSR</h4> SSR(サーバーサイドレンダリング)は従来のMPAアプリケーションで使われており、リクエストに対して、単一のHTMLファイルをレンダリングしてクライアント側に返すという一般的な形式です。 SPAが注目されるようになってから注目され始めましたが、実態としては今までのRuby on RailsのようなMVCで構築したアプリケーションと変わりません。Next.js等のフレームワークは簡単にCSRかSSRかを場所によって変更することができます。 <img src="https://images.microcms-assets.io/assets/4af1edcbfdf74d1e92f009a007b2dded/9570d4869133466ebaaa0145cf48cafb/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-08-15%2021.19.31.png" alt=""> メリットとしてはHTMLをサーバー側でレンダリングするのでSEO上強いです。CSRでは動的な部分をOGP等に設定することは出来ないですが、SSRであればOGPに設定できる等も大きいです。 デメリットとしては、サーバー側でHTMLをレンダリングしている分、CSRに比べて遅いです。 <h4 id="he28484f1a6">SG</h4> SSRでは処理速度が遅いですが、それを改善したのがSG(Static Gneration)です。以前まではSSGと呼ばれていましたが、最近はNext.jsの公式ドキュメントでもSGとなっています。今回、データの取得に関しては全てSGで行っています。 SGはビルド時に静的なHTMLファイルを先に生成しておきます。クライアント側からレスポンスがあった際には、元々生成されているHTMLファイルを返すだけです。 非常に高速な上、元々HTMLファイルが生成されているので、SEO上も強いというメリットがあります。(もちろんOGPでも使えます) デメリットに関してはほぼなく、使う場面の向き不向きがある程度です。SNSなどのリアルタイム性が求められるアプリケーションでは、SGは向かないですが、ブログのような、更新頻度が少ないコンテンツに関しては向いている技術です。 <img src="https://images.microcms-assets.io/assets/4af1edcbfdf74d1e92f009a007b2dded/f753f926519042b0ab67ae04ee08bdfa/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-08-15%2021.18.18.png?w=960&amp;h=597" alt=""> 今回のサービスは下記のような構成になっています。 <img src="https://images.microcms-assets.io/assets/4af1edcbfdf74d1e92f009a007b2dded/d345d903d33a45759bf83f19a9afc8d8/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-08-15%2021.41.12.png?w=960&amp;h=598" alt=""> ソース管理はgithubで行い、mainブランチにプッシュされたタイミングでCI・CDが走ります。記事更新時にはwebhookを利用し、microCMSとVercelを連携させ、記事が更新されると自動でビルドが走るようにします。ビルドしたタイミングでSGで静的なHTMLが生成されるので、再度手動でビルドする必要はありません。大体記事更新から本番反映までが1分あるかないかくらいです。 <h3 id="h4d6786f0c9">自由度に関して</h3> 最後に自由度です。いうまでもなく、ヘッドレスCMSを使うことで、通信がapiベースになるのでフロントエンドの自由度が増し、SGのような技術が活用できるようになります。 また今回であれば、予定はないですが、webだけではなく、IOSやAndroidアプリを作りたいとなった際もapiの同じデータでフロントエンド部分の実装のみで管理することが可能になります。 HAIRCAMPでは、フロントエンド部分には積極的にNext.jsやNuxt.js等の最新技術を取り入れ、全てのプロジェクトでTypeScriptを使用しております。ご興味ある方はお気軽にお問い合わせください😄 <a href="https://corp.haircamp.jp/recruit/engineer" target="_blank" rel="noopener noreferrer">https://corp.haircamp.jp/recruit/engineer</a>

最近の投稿

カテゴリ