Open12

フロントエンド何も知らない状態から、Next.jsでポートフォリオサイトを作るまで勉強したことのメモ

zerebomzerebom

背景

  • 新しい技術を勉強したい
  • 最近AIとUX両方扱えるような人材が世の中的に & 個人の経験によりこれからより希少性が高くなってきそうな感覚がある
  • ChatGPTや周辺技術の進化によりフロントエンド学びやすくなっているのではないか

→ 自分でもフロントエンドやUXについての理解を深めるために & 新しい技術を学びたい気持ちを満たすために、モダンなフロントエンドを勉強してみよう
→ 自分に取って役に立つ、かつ難易度的にちょうど良さそうなポートフォリオサイトから作ってみる

参考:
https://comemo.nikkei.com/n/n72374ef7b2d9

zerebomzerebom

インプット

Reactチュートリアル

確実に必要になりそうなReactのチュートリアルをやった。そもそもCSSもHTMLもJSもよくわかってないことに気づく。あと素のReactで実装するのは大変そうと理解した。

https://ja.react.dev/learn

動画による全体的なインプット

そもそも何がわかってないのかわからないので、動画で広くインプットした。しまぶーさんの動画がわかりやすく、カバレッジも広かったので、ざっくり下記のプレイリストの動画を見た。(10時間分くらい?)

各技術が何のために使われるのか、詳しい人からみて、初心者にはどの技術がおすすめなのかなどがわかった。

  • CSS基礎
  • HTML & CSSレイアウト
  • モダンJavaScript
  • Tailwind CSS
  • Next.jsと一緒に学ぶReact講座

https://www.youtube.com/@shimabu_it/playlists

他の方の実装

Next.jsをどうやって使うと良いのか知るため & 世の中のポートフォリオサイトってどんな実装構成になっているか漁ってみた。とくにcatnoseさんのコードはCloneしてCopilot chatにかけながら理解した。

https://vercel.com/templates/next.js/nextjs-portfolio

https://zenn.dev/dala/articles/ux-portfolio

https://leerob.io/

https://zenn.dev/catnose99/articles/cb72a73368a547756862

フロントエンドの勉強の仕方

https://zenn.dev/y_ta/articles/e58576b3288500

Tailwind CSS

便利だが、各コンポーネントに奔放に書いていいのだろうか?お作法を知りたくていくつか調べた
https://zenn.dev/ixkaito/articles/advanced-tailwindcss

https://zenn.dev/junseinagao/articles/efde96dc22e1de62d649

https://zenn.dev/msy/articles/64cdfa4cb36917

↓
大丈夫らしい
https://frontstuff.io/no-utility-classes-arent-the-same-as-inline-styles

Figma

モックを作るためにFigmaも勉強した。多機能でわくわくするが難しい

https://www.youtube.com/watch?v=BKxH5wK8VJQ&ab_channel=HIROCODE.ヒロコード

https://www.figma.com/community/file/1228577958737472070

CSS grid & flex

https://zenn.dev/tonkotsuboy_com/articles/css-subgrid-all-browsers

fonts

https://bestfolios.medium.com/10-great-fonts-for-portfolio-design-2debfe2f1bb9

UIコンポーネント

https://zenn.dev/mottox2/articles/react-shadcn-ui

zerebomzerebom

Next.jsを動かす

まず、公式ドキュメント見ながら、Next.jsを動かしてみる。その中で気になった内容はまとめる
https://nextjs.org/docs

https://nextjs.org/docs/getting-started/installation

環境構築

https://zenn.dev/var/articles/616b6c6ae78c02

App Router vs Pages Router

https://zenn.dev/yamadadayo123/articles/6cb4f586de0183
https://zenn.dev/takepepe/articles/practical-nextjs-book

今回は未来のデファクトになりそう & 現在recommendされているapp routerを選択した。

zerebomzerebom

Blog欄の作成

zennやnoteで書いたブログを、ポートフォリオサイトに集約したい。
RSSで取得して、整形し、リンクにするのが楽そうなのでこれで進める。

できました

https://zerebom.vercel.app/blog

参照したブログ

https://next-blog-starter.vercel.app/

https://zenn.dev/catnose99/articles/cb72a73368a547756862

RSSから情報を抽出し、json形式にする
https://zenn.dev/hrkmtsmt/articles/fa7d8y9crypnib

参照した親の要素を継承したくないときは下記を利用する
https://zenn.dev/leaner_dev/articles/235fd4f98e78d2

zerebomzerebom

勉強した感想・所感

免責: まだ、静的サイトを作った上での感想に過ぎない

  • アニメーション・大規模システムでの開発・セキュリティなどプロダクションレディな状況をを加味した・チーム開発等をしたら、もっと難しさと向き合う必要がありそう
  • 学んで良かったこと
    • 他のエンジニアが話していることがわかるようになった
      • フロントエンドで気にするところがどんな部分なのか
        • stateの持たせ方
        • SSR, SSGなど
    • やりたいことのアイディアが広がった
      • どういうアイディアなら実装が簡単で、何なら大変かちょっとわかるようになった
      • StreamlitやGradioなどフレームワークではやりづらいことも、実装したらいいやと思えるようになった
  • 気づいたこと
    • 勉強のしやすさ
      • 他の人のコードを参考にしやすい。
        • Next.jsというフレームワークに乗っているなら、どこを見ればいいか大体わかる
        • npm run devでlocalで動かせるし、書き換えるとすぐに結果が反映される(MLなら計算資源・データを用意し、学習を待つ必要がある)
      • ML系に比べ、Zennなどにたくさん情報が落ちている
    • 一方で流れが速いので、今何が主流かを追うのが難しい(ex. App Router vs Pages Router)
    • 静的サイトを作ることは簡単になっていると感じた
      • TailwindCSSなど、簡単にコンポーネントを作れる技術の発展
      • Vercelのような簡単にデプロイできるサービスの登場
    • 認証などは全く別の技術だが、フロントを触ることで関心を持つようになる
      • 他にもデザインや、Figmaなど
zerebomzerebom

設計について

  • AIにばこばこコードを書いて貰って、これってどうやって保守するんだと気になり設計などを勉強した

https://speakerdeck.com/tooppoo/consideration-of-software-design-in-web-front-end

  • フロントエンドが難しくなってる理由
    • ユーザ操作の複雑化(操作・入力バリデーションの増加・リッチなUI)
    • 画面状態の複雑化
    • 複数状態の組み合わせ
  • フロントエンドは、ユーザへの表示と操作による状態遷移を達成させる
  • ユーザがしたと思ったことを画面に表す
  • フロントエンドの設計とは、画面の設計 + 画面の奥にあるソフトウェアをどのように組み立てるという二つが存在する
    • OOPのような既存の設計が利用出来る
      • 表示･操作･状態を分けるなど
    • UIパーツの設計方法論にはAtomic Designなどが存在する
  • クリーンアーキテクチャ的な思考も活用できそう
    • 例えばUI, View, Controller, Stateの依存方向を一方向にするなど

https://zenn.dev/moneyforward/articles/e97dd1c0412071

  • ディレクトリ構造と依存方向を揃える

Refs

https://zenn.dev/makotot/scraps/966401cc10672e

zerebomzerebom

テストについて

https://zenn.dev/moneyforward/articles/e97dd1c0412071

  • テストの効能
    • 動作確認のフィードバックが高速になる
    • 保守のための機能を保証する
    • 仕様書が役に立つ
  • テストの種類
    • ビジュアルリグレッション
      • Chromaticなどが利用出来る
    • インタラクションテスト
      • Storybookのinteraction testsを利用
    • ロジックテスト

Storybookについて

https://zenn.dev/moneyforward/articles/2d7f3ece1a1b93

  • コンポーネントを生成することが出来る
  • プロダクトに組み込まなくても独立した環境でコンポーネントの開発が出来る
  • 開発環境として、品質検査として、コミュニケーションツールとして使っている