<h3 id="h9707d3a59a">概要</h3>出来るだけ専門性を減らし一目でそのワインの特長を誰にでも分かりやすくする事で気軽にワインを楽しんでもらおうというコンセプトです。ログインすると自分でも記事投稿が出来る為、ワインの布教ツールとしても使っていただけます。お気に入り機能もある為、自分だけのワインサイトを作る事もできます。マネタイズを想定していない今までのサイトと異なり、このサイトは今後Amazonアフィリエイトや通販会社とのスポンサー契約でのマネタイズを前提にデザイン、機能設計、技術選定等を行いました。その為、中々のアプリケーションに仕上がりましたが月額費用等を考えると仕事を見つけてからでないと本番運用は難しそうです。<h3 id="h70589a8995">機能</h3><ul><li>ログイン/ログアウト</li><li>記事投稿</li><li>投稿記事一覧</li><li>投稿記事編集</li><li>カテゴリー検索</li><li>カテゴリーの解説と各カテゴリー内人気のワイン紹介</li><li>日本語でのワイン名検索</li><li>お気に入り登録</li></ul><h3 id="h48162eced8">使用技術</h3>- フロントエンド フレームワークはNext.js(App Router)を使用、CSSはTailwind CSSとUIライブラリにMantine UIを採用しています。 状態管理にはクライアントサイドにzustand、非同期処理にtanstack/queryを採用しています。 App Routerはcache-control等のheaderの書き換えを許可しない上、edge runtimeを使用すると静的生成が出来ない問題がありキャッシュ周りにかなり苦戦しています。 当面はedge runtimeを中心にしようしつつもPPRがstableになり次第、個別ページや「ワインの選び方」ページ等はPPRにシフトしていく予定です。- バックエンド supabaseを採用。 当初はNest.jsを採用し、バックエンドも出来る所を魅せるポートフォリオに仕上げる予定でしたが、今回のアプリケーションはマネタイズを目指しており転職活動終了以降も継続的に保守運用する必要があること、 今回ユーザー投稿の画像を保存及び処理する必要がある事、 現時点での私のインフラ知識ではそこまでのインフラ環境を整える事に不安があった事等から今回は見送りsupabaseを採用しました。 supabaseには画像処理APIもある為、将来的にはsupabase側で画像処理を行い画像の通信をsupabase→クライアントサイドとすることでVercel←→supabase間のトラフィックを抑制していく予定です。 日本語検索にはPostgreSQL拡張のPGroongaを採用。- インフラ 背伸びせず今回もVercelを使用。- テスト スタイルガイドにStorybookを使用、テストフレームワークはJestを使用。 Vitestを使ってみたかったのですが、Next.js上でTailwind CSSを使う場合PostcssがcommonJSでの動作になってしまいVitestを動作させることが叶わなかったのでいつも通りJestを使用。 テスト戦略として、コンポーネント設計をatomic designによる階層を意識して行い、templatesレイヤー以下でスタイルガイドの作成とJestで単体テストと結合テスト、pagesレイヤー以上はplaywrightに任せる事にしました。 海外の記事を見てもRSCのテスト戦略は非同期処理を行うレイヤーとそれを受け取るレイヤーでコンテナを分ける実装が主張されていた為、これが一番安パイだと考えました。<h3 id="hb570a6676d">デザイン</h3><figure><img src="https://images.microcms-assets.io/assets/b8062b1c31f14720ac3b5b7dc1190da8/4f67949647c84b08b102b04d6747584c/design_image.png" alt="" width="1915" height="1034"></figure>デザインも3度目となるとFigmaと少し仲良くなれた感じがします。配色イメージは<a href="https://www.winekingdom.co.jp/" target="_blank" rel="noopener noreferrer nofollow">ワイン王国</a>様を参考にさせていただきました。今回はgridレイアウトを意識して全体のレイアウトを決めており、初めての2カラムレイアウトだったのですが、gridレイアウトとTailwind CSSとの相性があまり良くなく、シンプルな見た目に反してCSSはかなり苦戦しました。機能設計もFigmaの中で行っており、デザインを作りながら機能を考えていくやり方は実際に使用しているシーンをイメージ出来てその後のDBの設計もスムーズに進める事が出来ました。:hasや:not等の新しいCSSの機能も存分に活用できたので、苦労しながらも中々良い経験になりました。<h3 id="h0ab79d7345">ER図</h3><figure><img src="https://images.microcms-assets.io/assets/b8062b1c31f14720ac3b5b7dc1190da8/5f3cd93d19924e35b93b9775a96c488f/erchart.png" alt="" width="1352" height="654"></figure>userはsupabase authのテーブルをそのまま流用の為簡易的に記載しています。データベース設計は初めてですが、一応第三正規系まで正規化しています。ただし、winesテーブルのtagsがMantine UIのTagsInputの仕様で複数入力の内容が一つの文字列として結合してFormDataに渡される所については扱いに大分悩みました。ユーザーの自由入力欄であり、このカラムでソートする事はないであろうことと分割してsupabaseに送るとなると少し処理が複雑化する事から、一つの文字列としてデータベースに登録し、クライアントサイドで分割する仕様に決定。supabaseを使うにあたって、設計段階の想定以上にSDKの基本機能では不足しpostgreSQLの関数を使用した実装が増えました。MySQLを少し触っていた為なんとか対応できましたが、今後はフロントエンドエンジニアであってもSQLの理解度が求められる場面が増えてくるのではと感じました。<h3 id="hec95416674">今後</h3>このサイトはインフラではなく内部実装を変更していく事でスケーリングに対応していく設計の為、保守性が命です。 その為、しばらくはリファクタリングや不足しているテストの追加、E2EテストやVRTの追加等を中心に保守性を改善していくのが当面の計画です。また、スマートフォンでの挙動がUX上好ましくないものとなってしまっている為、細かいインタラクション制御についても詰めていければと思っています。 その後はまだ未実装のLPデザインや記事の削除機能に着手し、本番環境に進めていきたいです。

ワインを飲む人が減っているニュースを見て、少しでもカジュアルにワインを楽しめるサイトを作り間口を広げていければと思い制作しました。

WINE GATE

<h3 id="hb58d8dfae2">アプリ概要</h3>ポートフォリオを載せるサイトです。ナチュラルモダンのイメージでFigmaでデザインしNext.jsとMicroCMSを使用し開発しました。私がフロントエンドエンジニアを目指すきっかけになったのは色々なエンジニアが作る数々のポートフォリオサイトでした。始めはどんなエンジニアを目指そうか、その目標を探すべくポートフォリオサイトを見ていたのですが、いつしかポートフォリオを入れる箱であるポートフォリオサイトの方に魅せられていましたいつか、あんなサイトを作ってみたい。そんな思いでずっとプログラミングの勉強をしてきましたがまだまだ道半ば。プログラミングはもちろんですが、凄いポートフォリオサイトを作るにはデザインスキルやアニメーションのスキルも必要で、このサイトを作るにあたって非常に力不足を感じた所です。なんかちょっと足りないな、そう思って付け足して見てもなんか違う。その繰り返しで四苦八苦しながら作ったこのサイトは未だ目標とするようなクリエイティブなサイトには遠く及ばないけれど凄く愛着が湧くサイトになりました。<h3 id="h48162eced8">使用技術</h3><ul><li>Next.js(Page Router)</li><li>TypeScript</li><li>Tailwind CSS</li><li>Framer Motion</li><li>lottie-react(Lottie)</li><li>MicroCMS</li><li>zustand</li><li>Storybook</li><li>Jest</li></ul>フロントエンドはNext.jsとTypeScriptを使用、バックエンドはMicroCMS及びNext.jsのAPI Routesを使用しています。Next.jsはPage Routerを採用しています。もう一つのポートフォリオであるGit EmptyがApp Routerだった為こちらはPage Routerを採用しました。今後はJamstackサイトもApp Routerが採用されていくのか、Page Routerがこれからも使われていくのか動向を見守りたいです。API RoutesはContactページのフォームのバックエンドに利用、さらにnodemailerを使用し通知をメールで送るように設定しています。ハンバーガーメニューやモーダル等の状態を管理する必要がありzustandを使用しています。状態管理ライブラリには色々な種類があるようで今後色んなライブラリを使ってみたいです。CSSはTailwind CSSを使用。一部疑似要素のプロパティが多いタグに対してはCSS Modulesを使用しています。CSS loaderが今後CSS Modulesについて対応しないと明言しReact公式でも非推奨になった為忘れ去られつつあるCSS ModulesですがNext.jsやViteは独自に対応してくれている為、今後もピンポイントで使う機会も出てくるのかなと思い採用。ページ遷移アニメーションにはFramer Motion、オープニングアニメーションにはLottieを使用しています。今回Lottieを初使用したのですが、このライブラリの本質は恐らくデザイナーとの対話。デザイナーとエンジニアの合わせ技で最大の力を発揮する、フロントエンドエンジニアの在り方を象徴するようなライブラリだと感じました。とはいえデザイナーの居ない今回はLottieFilesにかわいいアニメーションがあったので使用させていただきましたが、いつかデザイナーと一緒に素晴らしいアニメーションを実装したいものです。テストはJestによるスナップショットテストと結合テストに重点を置きました。機能面のテストは慣れてきたのですが、ビジュアルが中心のこうしたJamstackサイトの場合のテストはどういう戦略で行うのがいいのか？現場の皆様の意見も聞いてみたいです。無駄に覚えたてのDockerを設定していますが、デプロイ先がVercelなので完全に遊びです。ただ、Next.jsが内部的に使用しているsharpがWindowsとLinuxで別の実行ファイルを持つ為、両方の実行環境を同時に揃える事に無駄に苦戦しました。本当無駄に……とはいえnpm rebuildで別環境用のファイルも同時にインストールできる事を知ったのは大戦果でした。<h3 id="h1f48361077">デザインについて</h3><figure><img src="https://images.microcms-assets.io/assets/b8062b1c31f14720ac3b5b7dc1190da8/4070994fe3cd40f58b2a2897a0e163b8/figma-image.jpg" alt="Figmaによるサイトデザインのイメージ画像" width="1920" height="1030"></figure>文字で「自分はこういう人間です」と言うよりも作風で見せられたらと思い、シンプルモダンで、かつ見る人がリラックスできるようなデザインをコンセプトにFigmaでデザインをしました。全体的に「見えない線」を意識しつつ、少しでもCSSのテクニックを見せられたらという意図とアクセントで所々にブロークングリッドレイアウトを入れています。Next.jsにはnext/fontという神機能がある為、タイポグラフィでは惜しみなく3つのフォントを使用しています。止まった時のデザイン先行でアニメーションは後回しにしてしまったのが今回のデザインの最大の失敗点。レスポンシブデザインまで考慮するとあまり派手なアニメーションを付ける事が出来ませんでした。この経験は今後のデザインに生かしていきたいです。<h3 id="h28b62bc2c0">今後の課題</h3>デザインスキルやアニメーション周りのスキルの不足もあり、全体的に地味というか物足りないサイトになってしまったのが残念なポイント。将来的にwebデザインやモーショングラフィックス等を勉強し、今度こそ見た人があっと驚くようなポートフォリオサイトを作りたいです。最近Figmaのアップデートがあり、ただでさえ覚束ないFigmaの操作がさらに覚束なくなりました。Figmaの習熟も今後の課題です。

figmaにてデザインから行いNext.jsで開発しました。
訪れた人が癒されるようなコンセプトです。
デザインから作る事でフロントエンドエンジニアとして、デザインへの理解を深めるいい機会になりました。


ポートフォリオサイト

<h3 id="hb58d8dfae2">アプリ概要</h3>Gitコマンドを空打ちで練習できるアプリです。メインターゲットは私同様の駆け出しエンジニアを想定しました。始めはエンジニア版寿司打を想定していましたが、分からないコマンドは都度調べて欲しかった為時間制限は撤廃しました。遊んでいるうちにGitが覚えられ、タイピングも早くなるアプリとして駆け出しエンジニアに愛されるアプリを目指しましたがユーザー数は50人程度。少し自信はあったのですがユーザー数を増やすのは簡単ではないと思い知らされたアプリ開発でした。ロジックは正直ただのクイズアプリに近いですが、コマンドプロンプト感にはかなり拘って作りました。刺さる人には刺さってくれたようで、何件か感想のコメントも頂けて、今でもたまに遊んでくれているようでとても嬉しかったです。簡単なアプリではありますが、私のユーザーエクスペリエンスへの拘りを示せる作品になったのではないかなと思っています<h3 id="h48162eced8">使用技術</h3><ul><li>Next.js (App Router)</li><li>TypeScript</li><li>Tailwind CSS</li><li>Firebase</li><li>Jest</li><li>Playwright</li><li>storybook</li><li>GitHub Actions</li></ul>フロントエンドにはNext.jsを選択、バックエンドはFirebaseを選択しました。バックエンドについて、ポートフォリオとしてはもっと難しい技術(Nest.js)や新しいSupabase等を使うべきか悩みましたが初めて作る人に使ってもらうサービスであるということとサービスの継続性の観点から安価（無料）で維持できるFirebaseを選択しました。現時点では全てフロントに持っていてもいい程度のデータ量ですが、今後のデータ更新や機能拡張を意識してFirebaseにデータを置いています。Firebaseとの非同期通信ですが、Firebase SDKがedge runtimeに対応していなかった為REST APIでデータフェッチを行っています。中々マニアックなFirebaseの使い方で情報も少なかったのですが、Nest.js等サーバーサイドの勉強も含めた非同期全般の勉強が少しは実を結んだのか何とかedge runtimeで実装する事ができ、SSRながら中々のパフォーマンスを実現する事が出来ました。対して、フロントエンドに関しては完全に興味本位でNext.jsのApp Routerを選択。サービスの継続性の観点からフロントもViteを使ってレンタルサーバーなどでもデプロイできるようにし維持費を抑えるべきと考えていましたが、React本家がこれからの方針としてNext.jsのようなレンダリングフレームワークを前提としていく発言をしたのもあってNext.jsでの開発にシフトしました。App RouterとPage Router、名前から前者はwebアプリ、後者はweb制作に向いているのかと思っていましたが使ってみると思いのほかApp Routerのコンポーネント単位でのデータフェッチやメタデータの生成機能が便利で、これからはJamstackサイト制作もApp Routerでもいいのかなというのが今回使ってみた感想です。テスト周りはロジックを最下層のコンポーネントに集中させていたのもあって単体テスト中心で殆どのテストがカバーできました。その為、結合テストは控えめ。又、単体テストと結合テストでカバレッジカバー率100％となっていた為e2eテストも接続が確認できる最小限にしました。<h3 id="h154ba1f187">今後の改良点</h3>ノリと勢いで、初級編、中級編とそれぞれのページを名付けましたが上級編は思いつかず。何かいいアイデアがあったら上級編を追加する予定です。X(旧Twitter)で軽く宣伝しただけとはいえ、ユーザーを伸ばしていくには開発も勿論ですがSEO等のマーケティングの知識も必要なのだと実感しました。とはいえ、まだまだエンジニアとして学びたい事も沢山ある中マーケティングまで手を伸ばすのは難しいので現状では地道にXでポストを続け宣伝していこうと考えています。

Gitコマンドを空打ちで練習できるアプリです。Gitの練習はもちろんタイピングの練習にも丁度いいです。コマンドプロンプト感に拘って作りました。

LeafField

Portfolio

WINE GATE

ポートフォリオサイト

Git Empty