HTML、CSS、JavaScript、Reactで作る初心者向けWeb開発プロジェクト20選。それぞれで学べることと、貼り付けて育てられる短いスターターコードを紹介します。
1つのプロジェクトで新しい考え方を1つ学べるものから始めましょう。HTMLとCSSなら自己紹介ページ、JavaScriptのイベントと状態ならカウンターとTodoリスト、その次にfetchとJSONを学ぶ天気アプリやクイズアプリです。素のJavaScriptが簡単に感じられるようになったらReactに進みましょう。下のどのプロジェクトにも、貼り付けて拡張できるスターターコードが付いています。
おすすめの順番
初心者向けプロジェクトの一覧は、たいていタイトルだけで終わっています。ここでは各プロジェクトについて、どのスキルを練習できるか、だいたいどのくらい時間がかかるかを示し、動くコードを数行用意しています。最初の1時間を空のファイルを眺めて過ごすのではなく、作ることに使えます。レベルや練習したい言語で絞り込んでください。
素のHTMLとCSSで作る、自分についての1ページのプロフィールです。テキストエディターとブラウザー以外の準備は不要で、見出し、段落、リンク、画像、基本的なスタイル付けを一通り学べます。
それだけでは、はい。ほとんどの学習者が作るからです。期限、絞り込み、ドラッグでの並べ替え、localStorageへの保存などを加えて自分らしくし、改善したい点を短くまとめておきましょう。
カウンター、Todoリスト、fetchを使うアプリを、チュートリアルなしで素のJavaScriptで作れるようになったときです。DOMを手作業で更新する苦労を経験してからのほうが、Reactのありがたみがずっとよくわかります。
いいえ。20個すべてがブラウザー内で動きます。データを扱うプロジェクトは無料の公開APIかローカルのJSONファイルを呼び出し、保存するプロジェクトはlocalStorageを使います。localStorageは文字列のデータを期限なしでブラウザーに保存します。
決まった数はありません。異なるスキルを示す、完成して磨き込まれたプロジェクト3〜4個のほうが、中途半端な20個より多くを伝えることが多いです。
これをindex.htmlとして保存してブラウザーで開き、HTMLのプロジェクトをbodyの中に貼り付けてください。
スマートフォンで正しいサイズに表示されるようviewportタグを含み、JavaScriptのプロジェクト用にscriptタグも入っています。
初級
HTML/CSS
1〜2時間
ページの構造、見出し、画像、リンク
prefers-color-schemeでダークテーマを追加する。
初級
HTML/CSS
1時間
番号付きリストと箇条書きリスト、意味のあるセクション
写真を隠す印刷用スタイルシートを追加する。
初級
HTML/CSS
3時間
Flexbox、余白、ボタン、レスポンシブな文字
600px未満では機能の行を縦に積む。
初級
HTML/CSS
1時間
CSSグリッド、auto-fit、object-fit
写真をクリックすると拡大表示を開く。
初級
HTML/CSS
2時間
ラベル、入力の種類、組み込みの検証
各入力欄の下に独自のエラーメッセージを表示する。
初級
JavaScript
30分
要素の取得、クリックイベント、テキストの更新
リセットボタンを追加し、ゼロで止める。
初級
JavaScript
2時間
フォームの送信、配列、リストの描画
再読み込みしても消えないようTodoを保存する。
初級
JavaScript
1時間
入力イベント、数値、金額の書式設定
複数人で割り勘できるようにする。
初級
JavaScript
45分
クラスの切り替え、設定の保存
初回訪問時はシステムの設定に合わせる。
中級
JavaScript
1時間
setInterval、日付、タイマーの解除
目標の日付を利用者が選べるようにする。
中級
JavaScript
3時間
オブジェクトの配列でのデータ管理、採点、状態
問題をシャッフルし、進捗バーを表示する。
中級
JavaScript
2時間
localStorage、JSON.stringifyとJSON.parse
検索と、メモごとの削除ボタンを追加する。
中級
API
3時間
fetch、async/await、エラー状態
読み込み中のメッセージと、わかりやすいエラーを表示する。
中級
API
2時間
JSONのフィールドの読み取り、データからのカード作成
そのユーザーの最新リポジトリを5つ一覧表示する。
中級
JavaScript
1時間
配列の絞り込み、入力イベント、結果がないときの表示
一致した文字を強調表示する。
次のステップ
React
30分
コンポーネント、useState、イベントハンドラー
増減の幅を入力できる欄を追加する。
次のステップ
React
3時間
keyを付けたリスト、制御された入力、イミュータブルな更新
すべて、未完了、完了の絞り込みを追加する。
次のステップ
React
2時間
useEffect、読み込み中とエラーの状態
名前で絞り込む検索ボックスを追加する。
次のステップ
React
4時間
状態のリフトアップ、リスト間での項目の移動
列の間でドラッグ＆ドロップできるようにする。
次のステップ
React
4時間
派生値、reduce、複数の入力欄を持つフォーム
カテゴリー別の支出をグラフにする。
レベルやスキルで絞り込み、プロジェクトを開いてスターターコードを確認してください。
レベルで絞り込む
スキルで絞り込む
{total}件中{n}件のプロジェクトを表示
コピー
{level} · {skill} · {time}。学べること：{teaches}。発展課題：{stretch}
無料で始める · クレジットカード不要