概要

技術に関する学習の議事録、開発を行っている中での気付きや新しい知識のアウトプット、自分の興味や関心のある内容に関する発信などを気軽に行えるようなサイトが欲しかったので、開発に至りました。

また、本サイトを通じて私の人となりやこれまでの経歴・経験、スキルを知って頂きたいという思いも含んでいます。

制作期間

• 仕様・デザインの決定・・・約1週間
• 開発に関する設計 (技術選定, コンポーネント設計, ディレクトリ構成等)・・・約3日
• 開発・・・約3ヶ月 (週10 ~ 20時間)
• リリース / デプロイ・・・約1週間 (不具合の修正等含む)

合計：3 ~ 4ヶ月

使用技術 (言語、ツール、フレームワーク・ライブラリ)

言語

• TypeScript
• GraphQL (クエリ言語)

フレームワーク・ライブラリ

• React.js (Next.js - Static Generation)

テスト環境

• Storybook (UI)
• Jest
• React Testing Library

インフラ構成

• AWS CDK (Infrastructure as Code)
• S3 (静的サイトホスティング)
• CloudFront
• Route53 (DNS)
• Amazon Certificate Manager (SSL証明書)
• Lambda (Path解決)

CI / CD

• Github Actions

Headless CMS

• Hygraph (旧GraphCMS)

その他ツール

• React Hook Form
• zod (バリデーション)
• urql (GraphQL Client)
• nodemailer (メール送信)
• emotion (CSS)
• framer-motion (アニメーション)

こだわりポイント

ユーザー体験 (UX)

SPA + 静的サイト生成(SSG)の技術を用いてページ遷移・表示速度を高速化することによってユーザー体験が高まる工夫を行っています。

印象的なデザイン

ユーザーが直感的にコンテンツを閲覧でき、尚且つ印象に残るようなデザインになるように工夫しました。

• スクロールによって目次の該当箇所がハイライトされる。
• 要素のアニメーション
• ブログカードの動的生成（記事詳細ページ）

今後の課題

パフォーマンスチューニング

現状、サイト内で「不要なページの再レンダリングが発生している箇所がいくつかある」、「画像の表示が遅い」等の課題が見られるため、ユーザーにより良い体験を提供するため、パフォーマンスチューニングに取り組んでいきたいです。