JavaScript のコーディングを始めるための 40 個のやさしい JS プロジェクト (初心者向け)

原文: 40 JavaScript Projects for Beginners – Easy Ideas to Get Started Coding JS‌‌
原著者: Jessica Wilkins‌‌
翻訳・翻案: Manabu Matsumoto

プロジェクトの構築こそ新しいプログラミング言語を学ぶ最善の方法です。

そこで、純粋な JavaScript、React、TypeScript を使用する、初心者にやさしい 40 個のプロジェクトチュートリアルの一覧を作成しました。

チュートリアルについてのアドバイスなのですが、ビデオを見て、プロジェクトを構築し、それを分解してから独自の方法で再構築してみてください。新しい機能を追加したり、違う方法を試したりしてください。

そうすることで、プロジェクトの概念をつかめたかどうかテストできます。

なお、以下のリストの各プロジェクトの上でクリックすれば、対応する記事のセクションまでジャンプできます。

純粋な JavaScript のプロジェクト

1. カラーフリッパーの作り方
2. カウンタの作り方
3. レビューカルーセルの作り方
4. レスポンシブなナビゲーションバーの作り方
5. サイドバーの作り方
6. モーダルの作り方
7. FAQ ページの作り方
8. レストランのメニューページの作り方
9. 背景動画の作り方
10. スクロールについてくるナビゲーションバーの作り方
11. いろいろなコンテンツを表示するタブの作り方
12. カウントダウンタイマーの作り方
13. 独自のロレム・イプサム (Lorem ipsum) の作り方
14. 食材リストの作り方
15. 画像スライダーの作り方
16. じゃんけんゲームの作り方
17. サイモンゲームの作り方
18. プラットフォーマーゲームの作り方
19. Doodle Jump の作り方
20. Flappy Bird の作り方
21. 神経衰弱の作り方
22. もぐらたたきの作り方
23. 四目並べの作り方
24. Snake (蛇) ゲームの作り方
25. インベーダーゲームの作り方
26. フロッガーの作り方
27. テトリスの作り方

React プロジェクト

1. React のフックを用いてまるばつゲームを作る方法
2. React のフックを用いてテトリスを作る方法
3. 誕生日通知アプリの作り方
4. ツアーページの作り方
5. アコーディオンメニューの作り方
6. ポートフォリオページ用のタブの作り方
7. レビュースライダーの作り方
8. カラージェネレーターの作り方
9. Stripe 風の決済メニューページの作り方
10. 買い物かごページの作り方
11. カクテル検索ページの作り方

TypeScript プロジェクト

1. React と TypeScript を用いてクイズアプリを作る方法
2. TypeScript を用いてアルカノイドゲームを作る方法

純粋な JavaScript のプロジェクト

JavaScript の基礎を学習されていない場合は、プロジェクトの構築を進める前に、こちらのコースのご視聴をお勧めします。

以下のスクリーンショットの多くはこちらから引用しています。

カラーフリッパーの作り方

この John Smilga のチュートリアルでは、ランダムに背景色を変化させる方法を学習します。これは DOM を扱い始めるのにふさわしいプロジェクトです。

Leonardo Maldonado の記事の中で、DOM について学ぶことの重要性について、次のように述べられています:

DOM を操作することによって、無限の可能性を手に入れます。ページの再読み込みをせずにデータを更新するアプリケーションを作成できます。また、再読み込みしないで、ユーザーが、ページのレイアウトを変更することでカスタマイズできるアプリケーションも作成できます。

プロジェクトで扱う重要な概念:

• 配列
• document.getElementById()
• document.querySelector()
• addEventListener()
• document.body.style.backgroundColor
• Math.floor()
• Math.random()
• array.length

プロジェクトの構築を開始する前に、John がすべてのプロジェクトの設定ファイルにアクセスする方法を説明している、導入部をご覧になることをお勧めします。

カウンタの作り方

この John Smilga のチュートリアルでは、カウンタの作り方を学習します。また、プロジェクトの中で、正か負かに応じて、表示されている数字の色を変えるために、条件文を記述します。

このプロジェクトは、より多く DOM を扱う練習を提供してくれます。また、ポモドーロタイマーのような他のプロジェクトの中で、この単純なカウンタを活用できます。

プロジェクトで扱う重要な概念:

• document.querySelectorAll()
• forEach()
• addEventListener()
• currentTarget プロパティ
• classList
• textContent

レビューカルーセルの作り方

このチュートリアルでは、レビューカルーセルの作り方を、ランダムにレビューを生み出すボタンを作成する方法と一緒に学習します。

e コマースサイトで顧客のレビューを表示したり、個人のポートフォリオページでクライアントの評価を表示するという重要な機能を、このカルーセルは備えています。

プロジェクトで扱う重要な概念:

• オブジェクト
• DOMContentLoaded
• addEventListener()
• array.length
• textContent

レスポンシブなナビゲーションバーの作り方

このチュートリアルでは、 小さなデバイスの画面ではハンバーガーメニューを表示する、レスポンシブなナビゲーションバーの作り方を学習します。

ウェブ開発者になるにあたって、レスポンシブなウェブサイトの作り方の学習は、重要な部分です。レスポンシブであることは、一般的な機能として多くのウェブサイトで使用されています。

プロジェクトで扱う重要な概念:

• document.querySelector()
• addEventListener()
• classList.toggle()

サイドバーの作り方

このチュートリアルでは、アニメーションをともなうサイドバーの作り方を学習します。

これは、ご自身の個人用ウェブサイトに追加できる素晴らしい機能です。

プロジェクトで扱う重要な概念:

• document.querySelector()
• addEventListener()
• classList.toggle()
• classList.remove()

モーダルの作り方

このチュートリアルでは、ウェブサイト上で、ユーザーに入力を促したり、何か特定のものを表示するために使用される、モーダルウィンドウの作り方を学習します。

モーダルウィンドウの良い例は、ユーザーがサイト内で変更を加えてから、それを保存せずに他のページへ移動しようとする場合です。変更を保存しなければ、その情報が失われてしまうことをユーザーに警告するために、モーダルウィンドウを表示できます。

プロジェクトで扱う重要な概念:

• document.querySelector()
• addEventListener()
• classList.add()
• classList.remove()

FAQ ページの作り方

このチュートリアルでは、よくある質問 (frequently asked questions - FAQ) ページの作り方を学習します。 事業についてユーザーを教え導いたり、質問の内容に関連のある検索結果を通じて、ウェブサイトへの往来を活発にします。

プロジェクトで扱う重要な概念:

• document.querySelectorAll()
• addEventListener()
• forEach()
• classList.remove()
• classList.toggle()

レストランのメニューページの作り方

このチュートリアルでは、さまざまな食事のメニューを選別できる、レストランのメニューページの作り方を学習します。この楽しいプロジェクトは、map、reduce、filter のような高階関数について教えてくれます。

Yazeed Bzadough の記事の中で、高階関数について次のように述べられています:

高階関数の最大の利点は、再利用性が高いことです。

プロジェクトで扱う重要な概念:

• 配列
• オブジェクト
• forEach()
• DOMContentLoaded
• map、reduce、filter
• innerHTML
• includes メソッド

背景動画の作り方

このチュートリアルでは、再生／一時停止機能を含んだ背景動画の作り方を学習します。これは多くのウェブサイトに見られる、一般的な機能です。

プロジェクトで扱う重要な概念:

• document.querySelector()
• addEventListener()
• classList.contains()
• classList.add()
• classList.remove()
• play()
• pause()

スクロールについてくるナビゲーションバーの作り方

このチュートリアルでは、スクロール中に、特定の高さに固定したままスライドする、ナビゲーションバーの作り方を学習します。

これは、多くのプロのウェブサイトに見られる、人気のある機能です。

プロジェクトで扱う重要な概念:

• document.getElementById()
• getFullYear()
• getBoundingClientRect()
• slice メソッド
• window.scrollTo()

いろいろなコンテンツを表示するタブの作り方

このチュートリアルでは、シングルページアプリケーションを作る際に便利な、いろいろなコンテンツを表示できるタブの作り方を学習します。

プロジェクトで扱う重要な概念:

• classList.add()
• classList.remove()
• forEach()
• addEventListener()

カウントダウンタイマーの作り方

このチュートリアルでは、新製品を発売しようとしている時や、e コマースサイトでの販売が終了しようとしている時に使用できる、カウントダウンタイマーの作り方を学習します。

プロジェクトで扱う重要な概念:

• getFullYear()
• getMonth()
• getDate()
• Math.floor()
• setInterval()
• clearInterval()

独自のロレム・イプサム (Lorem ipsum) の作り方

このチュートリアルでは、独自のロレム・イプサムの作り方を学習します。

ロレム・イプサムとは、ウェブサイト用のプレースホルダーテキストとして使われるものです。この楽しいプロジェクトで、創造力を発揮して独自のテキストを作成します。

プロジェクトで扱う重要な概念:

• parseInt()
• Math.floor()
• Math.random()
• isNaN()
• slice メソッド
• event.preventDefault()

食材リストの作り方

このチュートリアルでは、食材リストの項目を更新または削除する方法について学習し、単純な CRUD (Create - 生成、Read - 読み取り、Update - 更新、Delete - 削除) アプリケーションを作成します。

CRUD は、フルスタックアプリケーションの開発において重要な役割を演じます。それがなければ、お気に入りのソーシャルメディアプラットフォームで、投稿を編集または削除するといったようなこともできなくなってしまいます。

プロジェクトで扱う重要な概念:

• DOMContentLoaded
• new Date()
• createAttribute()
• setAttributeNode()
• appendChild()
• filter()
• map()

画像スライダーの作り方

このチュートリアルでは、どのウェブサイトにも追加できる、画像スライダーの作り方を学習します。

プロジェクトで扱う重要な概念:

• querySelectorAll()
• addEventListener()
• forEach()
• if/else 文

じゃんけんゲームの作り方

このチュートリアルでは、じゃんけんゲームの作り方を Tenzin が教えてくれます。この楽しいプロジェクトは、より多くの DOM を扱う練習を提供してくれます。

プロジェクトで扱う重要な概念:

• addEventListener()
• Math.floor()
• Math.random()
• switch 文

サイモンゲームの作り方

このチュートリアルでは、定番のサイモンゲームの作り方を Beau Carnes が教えてくれます。 これは、ゲームの背後にあるいろいろなコンポーネントと、それらの各機能を構築する方法について考えさせてくれる、優れたプロジェクトです。

プロジェクトで扱う重要な概念:

• querySelector()
• addEventListener()
• setInterval()
• clearInterval()
• setTimeout()
• play()
• Math.floor()
• Math.random()

プラットフォーマーゲームの作り方

このチュートリアルでは、Frank Poth がプラットフォーマーゲームの作り方を教えてくれます。このプロジェクトでは、オブジェクト指向プログラミング (OOP) と、Model - View - Controller  (MVC) ソフトウエアパターンについて紹介します。

プロジェクトで扱う重要な概念:

• this キーワード
• for ループ
• switch 文
• OOP の原則
• MVC パターン
• Canvas API

Doodle Jump と Flappy Bird の作り方

この一連のビデオでは、Ania Kubow が Doodle Jump と Flappy Bird の作り方について教えてくれます。

これらのゲームを作ることで、多くのポピュラーな JavaScript のメソッドを扱いながら、JavaScript についてさらに楽しく学習できます。

プロジェクトで扱う重要な概念:

• createElement()
• forEach()
• setInterval()
• clearInterval()
• removeChild()
• appendChild()
• addEventListener()
• removeEventListener()

Ania Kubow と作る 7 つのクラシックゲーム

Ania Kubow によるこのコースの中で、楽しみながら 7 つのゲームを作成できます:

1. 神経衰弱
2. もぐらたたき
3. 四目並べ
4. Snake (蛇) ゲーム
5. インベーダーゲーム
6. フロッガー
7. テトリス

プロジェクトで扱う重要な概念:

• for ループ
• onclick イベント
• アロー関数
• sort()
• pop()
• unshift()
• push()
• indexOf()
• includes()
• splice()
• concat()

React のプロジェクト

もし React の基礎にあまり詳しくなければ、以下のプロジェクトを進める前にこのコースの視聴をお勧めします。

React のフックを用いてまるばつゲームを作る方法

この freeCodeCamp の記事の中で、Thomas Weibenfalk による Scrimba のまるばつゲームのチュートリアルについて、Per Harald Borgen が解説してくれます。Scimba の YouTube チャンネルでは、このプロジェクトのビデオコースを見ることができます。

これは React の基本に慣れ、フックを扱い始めるのにふさわしいプロジェクトです。

プロジェクトで扱う重要な概念:

• useState()
• import / export
• JSX

React のフックを用いてテトリスを作る方法

このチュートリアルでは、Thomas Weibenfalk が React のフックと styled components を用いてテトリスを作る方法を教えてくれます。

プロジェクトで扱う重要な概念:

• useState()
• useEffect()
• useRef()
• useCallback()
• styled components

誕生日通知アプリの作り方

https://react-projects.netlify.app/ からのスクリーンショット

この John Smilga のコースでは、誕生日通知アプリの作り方を学習します。これは React の基本に慣れ、フックを扱い始めるのにふさわしいプロジェクトです。

このプロジェクト用のスタートアップファイルを準備する方法についても、John のビデオを見ることをお勧めします。

プロジェクトで扱う重要な概念:

• useState()
• import / export
• JSX
• map()

ツアーページの作り方

https://react-projects.netlify.app/ からのスクリーンショット

このチュートリアルでは、興味のないツアーをユーザーが削除できる、ツアーページの作り方を学習します。

このプロジェクトで、React のフックと async/await パターンを練習できます。

プロジェクトで扱う重要な概念:

• try...catch 文
• async/await パターン
• useEffect()
• useState()

アコーディオンメニューの作り方

https://react-projects.netlify.app/ からのスクリーンショット

このチュートリアルでは、質問と解答用のアコーディオンメニューの作り方を学習します。 モダンな方法でユーザーにコンテンツを表示する際に、このメニューが役に立ちます。

プロジェクトで扱う重要な概念:

• React Icons
• useState()
• map()

ポートフォリオページ用のタブの作り方

https://react-projects.netlify.app/ からのスクリーンショット

このチュートリアルでは、模擬のポートフォリオページ用のタブを作る方法について学習します。タブは、シングルページアプリケーション内でさまざまなコンテンツを表示する際に役に立ちます。

プロジェクトで扱う重要な概念:

• async/await パターン
• React Icons
• useEffect()
• useState()

レビュースライダーの作り方

https://react-projects.netlify.app/ からのスクリーンショット

このチュートリアルでは、数秒ごとに新しいレビューにスライドする、レビュースライダーの作り方を学習します。

これは e コマースサイトやポートフォリオの中に組み込める、すばらしい機能です。

プロジェクトで扱う重要な概念:

• React Icons
• useEffect()
• useState()
• map()

カラージェネレーターの作り方

https://react-projects.netlify.app/ からのスクリーンショット

このチュートリアルでは、カラージェネレーターの作り方を学習します。このプロジェクトは、フックと setTimeout を扱う練習を続けるのに適しています。

プロジェクトで扱う重要な概念:

• setTimeout()
• clearTimeout()
• useEffect()
• useState()
• try...catch 文
• event.preventDefault()

Stripe 風の決済メニューページの作り方

https://react-projects.netlify.app/ からのスクリーンショット

このチュートリアルでは、Stripe 風の決済メニューページの作り方を学習します。このプロジェクトは、React のコンポーネントを用いて、プロダクトランディングページをデザインする良い練習になるでしょう。

プロジェクトで扱う重要な概念:

• React Icons
• useRef()
• useEffect()
• useState()
• useContext()

買い物かごページの作り方

https://react-projects.netlify.app/ からのスクリーンショット

このチュートリアルでは、買い物かごの中の商品を更新したり削除できるページの作り方について学習します。このプロジェクトは、 useReducer フックの導入にも適しています。

プロジェクトで扱う重要な概念:

• map()
• filter()
• <svg> 要素
• useReducer()
• useContext()

カクテル検索ページの作り方

https://react-projects.netlify.app/ からのスクリーンショット

このチュートリアルでは、カクテル検索ページの作り方について学習します。このプロジェクトでは React Router の使い方を紹介しています。

React Router は、ウェブサイトにナビゲーションを作成して、about (アバウト) ページや連絡先ページのような、さまざまなコンポーネントに表示を変更する機能を提供してくれます。

プロジェクトで扱う重要な概念:

• <Router>
• <Switch>
• useCallback()
• useContext()
• useEffect()
• useState()

TypeScript プロジェクト

もし TypeScript にあまり詳しくなければ、以下のプロジェクトを進める前にこのコースの視聴をお勧めします。

React と TypeScript を用いてクイズアプリを作る方法

このチュートリアルでは、Thomas Weibenfalk が React と TypeScript を用いたクイズアプリの作り方について教えてくれます。このプロジェクトは、TypeScript の基本を練習するよい機会になってくれます。

プロジェクトで扱う重要な概念:

• React.FC
• styled components
• dangerouslySetInnerHTML

TypeScript を用いてアルカノイドゲームを作る方法

このチュートリアルでは、Thomas Weibenfalk が TypeScript でアルカノイドゲームを作る方法について教えてくれます。これは TypeScript の基本概念を扱う練習の場を提供してくれる、優れたプロジェクトです。

プロジェクトで扱う重要な概念:

• 型 (Type)
• クラス
• モジュール
• HTMLCanvasElement

純粋な JavaScript、React、TypeScript を使用する 40 個のプロジェクトチュートリアルをお楽しみください。

ハッピーコーディング！