一覧と詳細だけのアプリで、フロントエンドの全体像を掴む（第0回）

技術を1つずつ順番に勉強しても、「で、これいつ使うの」が解けないまま終わることがあります。

この連載は逆から進みます。小さなアプリを1つ決めて、それを毎回作り直しながら必要な技術に出会っていくやり方です。

そもそもフロントエンドエンジニアとは#

ひとことでいうと、ユーザーが目で見て指で触る部分を作る人です。

Webサービスは大きく2つに分かれます。画面を作る「フロントエンド」と、データを保管・計算する「バックエンド」。レストランに例えるなら、フロントエンドはホールと内装、バックエンドは厨房です。料理そのものは厨房が作りますが、お客さんの体験を決めるのはホールでもあります。

だから、技術力と同じくらい「見やすいか」「押しやすいか」が仕事の評価に直結します。この連載は、その両輪を扱います。

最終回に手元に残るもの#

この連載を最後まで進めると、こういうものが自分のURLで動いています。

• 一覧ページ（検索・絞り込みつき）
• クリックすると開く詳細ページ
• データはAPIから取得。読み込み中・データなし・通信失敗の表示も用意
• スマホでもPCでも崩れない
• GitHubに履歴が残り、pushすると自動で本番に反映される

「チュートリアルを写経したもの」ではなく、仕様を自分で説明できるアプリです。面接でもレビューでも、これ1つあれば話が持ちます。

なぜ一覧と詳細なのか#

地味に見えますが、実務のWebアプリはほとんどこの形の組み合わせです。商品一覧と商品ページ、記事一覧と記事ページ、管理画面の一覧と編集画面。

そして、この小さなアプリを作る過程で、フロントエンドエンジニアに求められる技術がひと通り登場します。逆に言えば、技術を1つずつバラバラに学んでも「で、これいつ使うの？」が解けません。同じアプリを毎回作り直しながら進むのが、この連載のやり方です。

積み上げの順番#

[土台]       HTML → CSS
[動かす]     JavaScript → DOM → API通信
[道具]       CLI → Git → Node/npm → TypeScript → React
[守る]       テスト → ネットワーク → パフォーマンス
[広げる]     バックエンド → クラウド → Docker
[仕事にする] デザインツール・CMS

上から順に進みます。下の段は上の段がないと理解できないので、飛ばさないでください。逆に、下の段を知らないことは今の時点で何の問題もありません。

各パートのゴール#

進め方#

更新は週1回。各回はこの形で統一します。

1. この回で解ける困りごと
2. よくある書き方（Before）
3. 直した書き方（After）
4. なぜそうなるか
5. 手を動かす課題
6. 自己チェックリスト

読むだけだと必ず抜け落ちます。5の課題だけは必ずやってください。 逆に、解説が難しく感じたら読み飛ばして課題に進んで構いません。手が先、理解は後から追いつきます。

必要なもの#

パソコン、Google Chrome、Visual Studio Code。これだけです。有料ツールは使いません。

次回はセマンティックHTMLです。divだらけで書いたページを、意味のあるタグに置き換えていきます。

本連載の構成は、セイト先生（AIプログラミングスクールSiiD）の動画「フロントエンドエンジニアに必要なスキル」を参考に、独自の学習順序で再構成しています。

今回の学び#

まず、作るものを先に決めると、学ぶ順番が自動で決まるということ。技術の一覧から選ぼうとすると優先順位が付きませんが、1つのアプリを完成させると決めれば、次に必要なものはそのアプリが教えてくれます。

次に、一覧と詳細という形は、実務のほとんどを覆っていること。商品一覧と商品ページ、記事一覧と記事ページ、管理画面の一覧と編集画面。地味に見える題材ですが、ここに出てこない技術は当面要りません。

そして、下の段を知らないことは、いま何の問題でもないこと。順番に積む前提で書いているので、飛ばさないことだけを守ってもらえれば足ります。