GAMESでゲームプラットフォーム開発プロジェクトのフロントエンドエンジニアとして働いています。リニューアルに取り組んだ話を紹介したいと思います。集約するポートフォリオサイトを作りました。これは当時、バックエンドエンジニアとしての外部活動の成果物が様々な場所に分散している課題の解決策として実施しました。情報をAPI経由で取得と表示を行うことで、新たな成果物が生まれても、サイト自体の更新は不要というお手軽さが非常に気に入ってました。一方でサイトパフォーマンスの低さとデプロイ作業の複雑さの課題がありました。login"}これらの課題を解決するために、ポートフォリオサイトのリニューアルを決め、技術選定を行いました。選ばれたのはGatsbyJSでした更新の手間がかからないという当初のコンセプトを維持しつつ、サイト構築が簡単に行えて、ページパフォーマンスも高いという条件で検討したところ、GatsbyJSを採用することにしました。(ちょうどこの時期にフロントエンドエンジニアに転身して、プロジェクトでTypeScriptとGraphQLを使用することになり、学習が必要という状況も採用を後押ししました)ポートフォリオサイトの技術スタックは以下のとおりです。Actionsここからポートフォリオサイト構築のポイントを紹介したいと思います。外部サイト情報をAPI経由で取得し、GraphQLでアクセスするGatsbyJSではCMSやAPIなどの外部のデータソースから取得したデータを、GraphQLでアクセスする仕組みを提供しています。それらはソースプラグインと呼ばれ、自分で開発することも可能です。Deck、Blogの4つのサイトからデータを取得するために以下のプラグインを使用しました。(rss2json経由)ソースプラグインを使用した、Qiitaからの記事取得例Qiitaからの記事取得を例に、ページに記事一覧を表示するまでの流れを見ていきます。Qiitaのソースプラグインをインストールします。gatsby-source-qiita次にgatsby-config.jsでソースプラグインの設定を追加します。今回だと、QiitaのAPIトークンとユーザー名の設定が必要でした。],}最後にデータを使用したいコンポーネントでGraphQLのクエリを記述します。取得したデータはdataという名前のpropsとして、コンポーネントに渡されます。あとはページで表示するための処理を記述すれば、作業完了です。APIからの記事取得とGraphQL経由の記事データへのアクセスが確認できると思います。他の外部データソースもソースプラグインを追加することで、データの取得が可能です。developGraphQLのデータ取得確認はGUI上でも可能GatsbyJSではGraphiQLと呼ばれるGraphQLのクエリ実行環境をサポートしているので、GUI上からもデータ取得の確認を行うことができます。ソースプラグインの導入時のデバッグで役立つので、覚えておくと良いと思います。Pagesへのデプロイを行う仕組みを作りました。Pagesにポートフォリオサイトがデプロイされます。定期的な成果物の追加に対応するため、毎日ジョブを実行するスケジュール設定も追加しています。'./report'GatsbyJSのビルドでは外部APIをコールするので、それぞれのAPIトークンをSecretsに登録しておきます。Tokenもあわせて必要です。CIのジョブを追加しています。デプロイのたびにパフォーマンス、アクセシビリティ、ベストプラクティス、SEO、PWA対応の5つの観点でスコアを計算してくれるので、継続的にパフォーマンス改善を行いたい場合に使えそうです。リニューアルでサイトパフォーマンス向上&シンプルなデプロイフローを実現GatsbyJSでポートフォリオサイトをリニューアルした結果、Lighthouseで高スコアとれるようになりました。本記事では触れていませんが、画像最適化やPWA対応などをGatsbyJSプラグインを使用して行っています。Actionsを使用することで、シンプルにできました。さいごに今回ポートフォリオサイトをリニューアルして、抱えていた課題の解決ができ、業務で使用するTypeScriptやGraphQLなどの学習もあわせてできたので、大変満足しています。今後はアクセシビリティやi18n対応、Storybookなど最近興味のある技術を試す「技術の実験場」としても活用していこうと思います。本記事で使用したソースコードは以下にあります。Forkして設定ファイルを変更すると、ご自身の成果物がまとまったポートフォリオサイトが作れるので、もし興味があれば、お試しください。2019はyyh-glさんが、golangci-lintについて書くようですよ。