KAWAICHI PORTFOLIO
僕のポートフォリオサイトです
WEB:
STORYBOOK:
| フロントエンド | React 18, TypeScript, SCSS, Atomic Design |
| バックエンド | Node.js, REST API, SendGrid |
| インフラ | AWS(API Gateway / Lambda / SSM 等), Netlify |
| モニタリング | CloudWatch, SNS, Chatbot |
| プロビジョニング | Terraform |
| 主要パッケージ等 | Recoil, @emotion/react, React Hook Form, Zod, destyle.css(リセットCSS) |
| 品質保証 | Jest, React Testing Library, Storybook, Chromatic, Hygen(コードジェネレーター) |
| ビルド | CSR(SPA) |
| コーディング規約 | ESLint & Prettier |
| その他 | reCAPTCHA(v3), GoogleAnalytics(GA4), GoogleSearchConsole, Illustrator |
フロントエンドはNetlifyでホスティングし、バックエンド(お問い合わせフォーム)はAWS API GatewayとLambdaでデプロイしています。また、IaCであるTerraformを用いてインフラをコード化しています。
ブランチは開発と本番で分け、リポジトリへのプッシュをトリガーに、それぞれでWebサイトおよびStorybookをデプロイしています。
コンポーネントの再利用性向上のため、コンポーネント設計およびディレクトリ構成として「Atomic Design(※1)」を採用しています。
UIの構造をatoms・molecules・organisms・templates・pagesという5段階に分割するという考え方で、これにより、デザインの一貫性を保つとともに、コンポーネントの再利用性・疎結合性が高まることによる、コンテンツの追加やデザインの変更などの開発スピードを向上させています。
よく議論される問題点として、「バケツリレー、データフェッチ問題」「開発メンバー間のコンポーネント分割単位の認識ズレ」「エンジニア・デザイナー間のコミュニケーション齟齬」がありますが、バケツリレーはCompositionパターンで解消でき、かつデータフェッチのない静的サイトであるということ、コーディング・デザインを一人で担当する個人開発であるということを踏まえて、これらの問題点をカバーできると考え採用しました。
※1: 出典: Atomic Design
サイトの品質向上のため、想定したレイアウトや色のズレがないか、適切なスタイルが当てられており再利用できるコンポーネントとなっているか、などをすばやくブラウザでチェックできるツールである「Storybook」を導入しています。
また、Atomic Designによって作成されたコンポーネントは全てストーリー化し、コンポーネントライブラリとしてStorybookをWeb上で公開しています。
- Illustratorを用いたロゴの作成
- AWS、Terraform、SendGridを使ったお問い合わせフォームの実装
- reCAPTCHA(v3)によるスパム対策
- GoogleAnalytics(GA4)を導入、内部トラフィックは「Google アナリティクス オプトアウト アドオン」によって除外
- EmotionによるCSSのスクラッチ
- ダークテーマ/ライトテーマを切り替えできるボタンの実装
- SVG形式およびWebP形式による画像サイズ最適化
- 画像のプリロードによるUX向上
- コードジェネレーター HygenによるJestおよびStorybookテンプレートの自動生成
- OGP対応
など...
| 年月 | 内容 |
|---|---|
| 〜現在 | 現在も継続してアップデート中(デザイン変更やコンテンツ追加など) |
| 2024年5月 | お問い合わせフォームをAWS & Terraformで実装 |
| 2024年3月 | 状態管理をReact Context API から Recoil へ変更 |
| 2022年8月 | React & emotion へリプレイス |
| 2022年7月 | Vue.js 3 & Tailwind にて初回リリース |