【JavaScript初心者向け】今日から作れる！実践開発プロジェクト

JavaScriptのチュートリアルを「読むこと」と「やり遂げること」は、まったく異なる体験です。

前者は生産的に感じられますが、実際に学びが得られるのは後者です。JSのレッスンをしばらく頑張っているのに、自分のコードがまだ誰かの練習問題の中に閉じこもっていませんか？ それも、もうすぐ終わりです。

ループの仕組みを知っていても、それを使って何かを動かしてみるまでは意味がありません。チュートリアルは「単語」を教えてくれますが、プロジェクトは「その言語を話せるように」してくれます。

そこで今回は、初心者向けのJavaScriptプロジェクト18選をご紹介します。それぞれ簡単な作り方も解説しているので、どこから始めればいいかが分かります。1つ選んで作り、終わったら次のプロジェクトに挑戦してみましょう。

まずはJavaScriptの基礎を固めよう

初心者向けのJSプロジェクトはすべて、変数、関数、条件分岐、ループ、配列、オブジェクト、そしていくつかのDOMメソッドに依存しています。これらがまだ直感的に使えない状態だと、物を作る時間よりも、構文（シンタックス）のエラーと戦う時間の方が長くなってしまいます。

CoddyのJavaScriptコースは、まさにこのために作られました。1回5分のレッスンで、言語の核心を一歩ずつ学べます。ブラウザ上でコードを書いてその場で実行できるため、環境構築や「まずNodeをインストールする」といった面倒な作業は一切不要です。

理解できない部分があれば、すべてのレッスンに常駐しているAIアシスタントの「Bugsy」がいつでもサポートします。

以下の項目を迷わずに読み、書き、説明できるなら、準備は万端です。もし自信がなければ、できるようになるまでCoddyでJSの基本をおさらいしましょう。

• 変数とプリミティブ型（string、number、boolean）
• if/else 文と switch 文
• for、while、for...of ループ
• 関数とアロー関数
• 配列とよく使われるメソッド（push、pop、map、filter、find）
• オブジェクトとドット記法／ブラケット記法
• 基本的なDOM操作（querySelector、addEventListener、textContent）

準備はいいですか？素晴らしい。さあ、作っていきましょう！

初級プロジェクト：Hello, DOM

これらのプロジェクトは、あえて規模を小さく抑えています。1つか2つのコンセプトに絞っているため、何か不具合が起きてもすぐに原因を特定できます。「簡単そうだから」とスキップしないでくださいね！

1. 定番のカウンター

概要： 画面上に数字が表示され、プラスボタンとマイナスボタンで増減できるアプリ。

おすすめの理由： HTML、CSS、JavaScriptを組み合わせて作る、最もシンプルなアプリです。状態（変化する変数）、DOMの更新、イベントリスナーに触れることができます。コードはだいたい20行前後です。

作り方： 数字を表示する span タグを1つと、ボタンを2つ用意します。let count = 0 を定義し、各ボタンにクリックリスナーを紐づけて count を増減させ、span の textContent を更新します。応用： リセットボタンの追加や、0未満にならない（マイナスにいかない）制限を設けてみましょう。

2. チップ計算ツール

概要： お会計の金額とチップの割合（％）を入力すると、チップの額と合計金額が表示されるツール。

おすすめの理由： フォーム入力と parseFloat の使い方を学べます。これは初心者が最初によくつまずくポイントです。また、NaN（Not a Number）を考慮し忘れると、簡単に計算がバグってしまうことにも気づくでしょう。

作り方： 数値入力欄（お会計、チップの割合）を2つ、ボタンを1つ、出力用の span を2つ用意します。クリック時に両方の入力をパースして計算し、.toFixed(2) で小数点以下2桁に丸めて結果を表示します。応用： 複数人で割り勘（割り算）できる機能を追加してみましょう。

3. カラーパレットジェネレーター

概要： ボタンをクリックすると、ランダムな新しい色がカラースウォッチ（色見本）とカラーコード（HEX）で表示されるツール。

おすすめの理由： 乱数、テンプレートリテラル、インラインスタイルを1つの小さなアプリで学べます。結果が視覚的に分かりやすいため、楽しく開発できます。

作り方： 0から255の間のランダムな整数を3回取得し、rgb(${r}, ${g}, ${b}) のような文字列を返す関数を作ります。それをスウォッチの背景色（background-color）に設定します。応用： 1色だけでなく、5色のカラーパレットを生成できるようにしてみましょう。

4. ランダム名言ジェネレーター

概要： ボタンを押すと、あらかじめ用意した配列からランダムに選ばれた名言に表示が切り替わるアプリ。

おすすめの理由： 配列と Math.random の練習になり、実際に誰かにシェアして楽しんでもらえる手軽なプロジェクトです。

作り方： text（本文）と author（著者）を持つ名言オブジェクトの配列を定義します。クリック時にランダムなインデックスを選択し、2つの要素（本文と著者）を更新します。応用： 「この名言をツイートする」リンクを設置し、テキストが事前に入力された状態でX（旧Twitter）の投稿画面を開くようにしてみましょう。

5. デジタル時計

概要： 画面に現在の時刻が表示され、1秒ごとに更新される時計。

おすすめの理由： 今後ずっと使うことになる setInterval と Date オブジェクトに初めて触れるのに最適です。1桁の分や秒の頭に「0」をつけて2桁にする（ゼロパディング）処理は、ちょっとしたパズル感覚で楽しめます。

作り方： new Date() を取得し、時・分・秒をフォーマットして span に書き込む関数を作ります。それを setInterval(updateClock, 1000) で囲みます。応用： 12時間表示と24時間表示を切り替えるトグルボタンを追加してみましょう。

6. BMI計算ツール

概要： 身長と体重を入力すると、BMI値と肥満度の判定ラベルが表示されるツール。

おすすめの理由： 条件分岐を使って、どの判定ラベルを表示するかを決定する実用的な例です。また、フォームのレイアウトをきれいに整える練習にもなります。

作り方： 身長（cm）と体重（kg）の数値入力欄を作ります。送信時に標準的な計算式でBMIを算出し、if/else の条件分岐でカテゴリ（痩せ型、普通、肥満など）を判定して、両方の値を表示します。応用： ヤード・ポンド法（インチ・ポンド）に切り替えられるトグルを追加してみましょう。

中級プロジェクト：より複雑な仕組みに挑戦

いくつかのプロジェクトをこなしていくと、同じパターンの繰り返しに気づくはずです。「ボタンをクリックすると変数が変わり、その変数に基づいて関数がUIを更新する」の繰り返し。これがフロントエンド開発の大部分を占めています。ここからのプロジェクトでは、一度に扱う「状態（ステート）」が少し増えます。

7. To-Doリスト

概要： タスクを入力してEnterキーを押すとリストに追加され、項目をクリックすると完了マークがつき、「X」をクリックすると削除できるアプリ。

おすすめの理由： フロントエンドフレームワークの「Hello World」と呼ばれるのには理由があります。配列を操作し、それをDOMにレンダリングし、2〜3個のイベントを処理します。To-Doリストをゼロから作れるようになれば、完全な初心者からは卒業です。

作り方： id、text、done（完了フラグ）を持つタスクオブジェクトの配列を保持します。変更があるたびに <ul> として再レンダリングします。Enterキーが押されたら新しいタスクを push し、クリックされたら完了状態を切り替えるか、配列から splice で削除します。応用： localStorage にデータを保存し、ページをリロードしてもタスクが消えないようにしてみましょう。

8. ラップタイム機能付きストップウォッチ

概要： スタート、ストップ、リセット、そしてラップタイム計測ボタンを備えたストップウォッチ。

おすすめの理由： システムの時刻を取得するだけの時計よりも難易度が上がります。経過時間の変数を自分で管理する必要があるからです。Date.now()、インターバル、一時停止のロジックを学びます。

作り方： startTime と経過時間を蓄積する elapsed を保持します。スタート時に startTime = Date.now() を設定してインターバルを実行します。ストップ時には elapsed += Date.now() - startTime を計算します。ラップ時には、現在の表示時間を配列に push してレンダリングします。応用： ミリ秒まできれいにフォーマットして表示してみましょう。

9. ポモドーロタイマー

概要： 25分間の作業と5分間の休憩を繰り返すタイマー。切り替えのタイミングでアラーム音が鳴ります。

おすすめの理由： 初心者向けの「ステートマシン（状態遷移）」の練習になります。「作業中」「休憩中」「一時停止中」の状態があり、どのモードにいるかによってUIが変化します。

作り方： ストップウォッチと同じインターバルのパターンですが、カウントダウンを行います。現在のモードを追跡し、タイマーがゼロになったらモードを切り替え、new Audio('beep.mp3').play() で短い音を鳴らします。応用： その日に完了した作業セッションの数をカウントする機能を追加してみましょう。

10. クイズアプリ

概要： 選択式のクイズに答えていき、最後にスコアが表示されるアプリ。

おすすめの理由： 配列のループ処理、条件分岐、そして「画面の状態」（現在の質問画面、結果画面）という概念を組み合わせる練習になります。

作り方： text、options（選択肢）、correctIndex（正解のインデックス）を持つ質問オブジェクトの配列を定義します。質問を1問ずつ表示し、回答がクリックされたら correctIndex と照合してスコアを加算し、インデックスを進めます。すべての質問が終わったら結果画面を表示します。応用： 1問ごとに制限時間を設けるタイマー機能を追加してみましょう。

11. パスワードジェネレーター

概要： 長さと含める文字の種類（英大文字、小文字、数字、記号など）を選択し、ランダムなパスワードを生成するツール。

おすすめの理由： 文字列操作、ランダム処理、チェックボックス入力を一度に学べます。練習用プロジェクトとしては珍しく、実際に役立つツールです。

作り方： 4つの文字プール（小文字、大文字、数字、記号）を用意します。チェックされたボックスに応じて、使用するプールを結合します。指定された長さ（n回）だけループを回し、結合したプールからランダムに文字を抽出します。応用： 生成されたパスワードの強度（安全度）を判定して表示するインジケーターを追加してみましょう。

12. フォームバリデーター（入力検証）

概要： 新規登録フォームで、入力内容が正しくないフィールドを赤くハイライトし、その下にエラーメッセージを表示する仕組み。

おすすめの理由： 実務のJavaScript開発で非常によく使われる技術です。正規表現、フォーカスイベント、DOM操作を、おなじみのフォームレイアウトを通じて学べます。

作り方： 各フィールド（メールアドレスの形式、パスワードの長さ、パスワードの再入力の一致など）を検証する小さなバリデーション関数を作ります。入力欄からフォーカスが外れた（blur）時に検証を実行し、入力欄のクラスを切り替え、エラー表示用の span を更新します。送信（submit）時は、すべての検証をクリアしている場合のみ処理を進めます。応用： 一度フォーカスが外れた後は、リアルタイム（入力中）に検証が行われるようにしてみましょう。

ミニゲーム：開発がさらに楽しくなる領域

ゲーム開発は、継続的な状態管理、タイミング、インタラクションが必要になるため、スキルをさらに引き上げてくれます。キャンバス上で初めてピクセルを動かしたとき、JavaScriptが実際に何をしているのかが腑に落ちるはずです。

13. じゃんけんゲーム

概要： グー、チョキ、パーのいずれかを選ぶと、コンピュータもランダムに手を選び、勝敗を判定するゲーム。

おすすめの理由： 条件分岐とランダム処理の素晴らしい練習になり、勝敗が決まる瞬間を楽しく実装できます。

作り方： プレイヤーの選択用に3つのボタンを用意します。クリック時に、コンピュータも同じ3つの選択肢からランダムに選びます。シンプルな対応表（またはネストされた if/else）を使って勝敗を判定します。対戦ごとの勝敗数を記録します。応用： 3本先取（5回勝負）で最終的な勝者を決める画面を作ってみましょう。

14. 三目並べ（○×ゲーム）

概要： 定番の3x3マスのグリッドゲーム。同じ画面で2人のプレイヤーが交互にプレイします。

おすすめの理由： 要素数9の配列をフラットな2次元グリッドとして扱う方法や、勝利条件の判定ロジックを学べます。誰もが知っているゲームを完成させるのは達成感があります。

作り方： 9つのセルをレンダリングします。どちらのターンかを追跡し、セルがクリックされたら現在のプレイヤーのマークを配置し、8つの勝利ライン（縦・横・斜め）のいずれかが揃っているかをチェックします。揃ったら勝者のバナーを表示します。応用： 空いているセルをランダムに選ぶ、シンプルなコンピュータ対戦AIを作ってみましょう。

15. 神経衰弱（カード合わせ）

概要： 裏返しに並んだカードをクリックして2枚めくり、一致すれば表のまま、一致しなければ再び裏返るゲーム。

おすすめの理由： 配列のシャッフル、タイムアウト処理、明確な勝利条件の実装を学べます。「1秒後にカードを裏返す」ロジックを実装することで、setTimeout の仕組みが本当によく理解できるようになります。

作り方： ペアを作るために配列の値を2倍にし、フィッシャー–イェーツ（Fisher-Yates）のシャッフルアルゴリズムでシャッフルします。カードを裏返しでレンダリングし、クリック時にカードを表にします。2枚めくられたら比較し、一致していればそのまま固定、一致していなければ少し時間を置いてから両方を裏返します。すべてのペアが揃ったらゲーム終了です。応用： 手数（クリック回数）をカウントし、ベストスコアを localStorage に保存できるようにしてみましょう。

16. 数当てゲーム

概要： コンピュータが1から100の間の数字をランダムに選び、プレイヤーがそれを当てます。当たるまで「もっと大きい」または「もっと小さい」というヒントが表示されます。

おすすめの理由： シンプルですが、入力値の処理、比較、そして「正解するまで繰り返す」という、あらゆるプログラムで使われるパターンを学べます。

作り方： 最初に正解となる数字を生成します。プレイヤーの推測回数を記録し、入力されるたびに正解と比較してフィードバックメッセージを更新します。正解したら入力を受け付けないようにします。応用： 挑戦回数を7回までに制限し、回数が切れたらゲームオーバー画面を表示するようにしてみましょう。

17. ハングマン

概要： コンピュータが選んだ単語を、アルファベットを1文字ずつ推測して当てるゲーム。間違えるたびにハングマン（首吊り台の絵）が描き進められます。

おすすめの理由： 文字列操作への苦手意識を克服できるプロジェクトです。「推測された文字」の表示を作ることで、split、map、join を一度にマスターできます。

作り方： 配列から単語を1つ選び、文字数分のアンダースコア（_）を表示します。プレイヤーが文字を入力するたびに、一致する位置の文字を表示するか、お手つき（間違い）を記録します。CSSやCanvasを使って、ハングマンの絵を段階的（通常は6回のお手つきまで）に描画します。応用： 公開されている辞書APIから単語を動的に読み込むようにしてみましょう。

18. スネークゲーム

概要： 定番のスネークゲーム。エサを食べるとヘビが長くなり、自分自身の体や壁にぶつかるとゲームオーバーになります。

おすすめの理由： 初心者向けプロジェクトの「ラスボス」的存在です。グリッド（CanvasまたはCSS）、キーボードイベント、ゲームループ、衝突判定、そしてヘビが成長する仕組みなど、多くの要素に触れることができます。

作り方： CSSまたは <canvas> を使ってグリッドを描画します。ヘビの体を座標オブジェクトの配列として保持します。ゲームの1フレーム（ティック）ごとに、ヘビを現在の進行方向に1マス進めます。新しい頭の位置がエサの位置と一致したら、ヘビを成長させて新しいエサを出現させます。頭が壁や自分の体に衝突したらゲームオーバーです。矢印キーの入力を監視して進行方向を切り替えます。応用： スコアが上がるにつれてゲームのスピード（更新レート）が速くなるようにしてみましょう。

おまけ：お天気アプリ

概要： 都市名を入力すると、現在の気温と天気の詳細情報が返ってくるアプリ。

おすすめの理由： 公開APIと非同期処理（async/await）を体験する最初のステップとして最適です。無料のお天気APIを使えば、十分に楽しめます。

作り方： 無料のAPIキーを取得します。送信時に、URLに都市名を含めて fetch を実行します。レスポンスを await し、JSONをパースして、必要な情報をDOMに反映します。存在しない都市名が入力されてもUIがクラッシュしないよう、try/catch で囲みます。応用： 5日間の天気予報を表示できるようにしてみましょう。

始めたプロジェクトを最後までやり遂げる方法

上記のリストも、途中で投げ出してしまっては意味がありません。最後まで作りきるためのコツをいくつか紹介します。

• 「ワクワクする、一番小さなもの」を選ぶ。 ワクワク感が行動を起こさせ、規模の小ささが完成へと導きます。それを繰り返しましょう。
• スコープではなく、時間を区切る（タイムボックス）。 初級プロジェクトには、集中して取り組む1〜2時間を割り当てましょう。もし時間内に終わらなくても、それは「どこで行き詰まったか」を知る手がかりであり、失敗ではありません。
• まずは作り、磨くのは後回し。 CSSをいじる前に、まずは見た目が不格好でも動くバージョンを完成させましょう。「見た目はきれいだけど動かない」よりも、「見た目はイマイチだけどしっかり動く」方がはるかに価値があります。
• チュートリアルをハシゴしない。 同じプロジェクトのために3つの異なるチュートリアルを見るのは、コードを書かずに時間を浪費しているのと同じです。不完全でもいいのでまずは自分で作り、分からない部分だけをピンポイントで調べましょう。
• 開発する時間がない日は、基礎を練習する。 通学・通勤中のバスの中でCoddyを5分間進めるだけでも、立派な学習です。毎日の積み重ねが大きな力になります。

最後のポイントは、すべてを繋ぐ重要な要素です。プロジェクトを作ることで学んだことが実感として身につきますが、それらはすべて基礎の上に成り立っています。毎日の短いレッスンこそが、難しいプロジェクトを「手の届くもの」にしてくれるのです。

Coddyがサポートできること

これは、特定の開発ツールを押し売りするためのものではありません。エディタはお好きなものを使い、ブラウザで実行し、好きな場所にホストしてください。

Coddyがサポートするのは、その前段階です。「クイズアプリを作る」となったときに、「.map の使い方を調べるだけで2時間かかる」という状態を防ぐために、JavaScriptの基礎をしっかりと固めるお手伝いをします。

Coddyは、Web、iOS、Androidを通じて、何百万人もの学習者にJavaScriptを教えてきました。どのデバイスから開いても、同じレッスン、同じ進捗、そして同じBugsyがあなたを待っています。

無料プランでも、環境構築なしですべてのJSレッスンを受講できます。制限は、数時間で回復するエネルギーシステムのみです。

制限なしで学習を進め、すべてのプロンプトでBugsyのサポートを受けたいですか？有料プランは、類似のプラットフォームの約半額でご利用いただけます。いずれにせよ、「まずは基礎、次にプロジェクト」です。