2023-05-05T07:08:29
sgw studio
CSSGraphQLHTMLReactSCSSTailwind
個人や案件で受けたプロジェクト、スキル、実績などを見やすく公開するために、ダークモード対応の多言語ポートフォリオサイトを作成しました。WordPressのAPIを利用し、GraphQLを介してデータを取得することで記事の更新を容易にしました。さらに、高パフォーマンスなサイトを実現するために、ReactベースのSSGフレームワークであるGatsby.jsをフロントエンドに採用しました。
フロントエンド
- HTML
- CSS
- SCSS
- JavaScript
- React
- Gatsby.js
- Tailwind
バックエンド
- PHP
- WordPress
主なnpmパッケージ
苦労したこと
急遽作成したのでgatusbyのテンプレートを使って最低限作成して、その後tailwindで必要なコンポーネントを追加していく計画でしたが利用したテンプレートのコンポーネントが再利用性が低くカスタマイズしづらかったのですべてTailwindで作成。現行ではTailwindのすべてのスタイルを読み込む状態になってるのでPurgeすることで今後のパフォーマンス改善につながると考えています。
react-i18nextを使って日本語と英語のjsonファイルを作成してボタンひとつで変更できるような仕様にする予定でトップページのデータはjsonで取得しています。しかし、worksページはWordPressからデータを取ってくる必要があるためi18nextにsource-wordpressでもってきたデータを変換する必要があり、現状では難しそうだったのでwordpressの1ページ内に日本語と英語のデータをもたせてそれをreact-i18nextのメソッドで日英のページの状態を取得して分岐をして表示することにしました。
今後の展開
- SEOに完全対応させる
- TailwindのPurgeして必要なスタイルのみ適応させる
- SaaSもしくはWordPressを使ってヘッドレスなコンタクトフォームの作成
- トップページに外部ブログの記事の一部をAPIから取得して表示
