- 目標: JavaScript基礎を習得し、React/Next.jsの準備。
- 期間: 4週間（週5日、週末は復習）。
- 進め方: リンクで学び、問題で確認。
**目的: 基本文法とプログラミング思考を身につける。
- 参考リンク:
- 学ぶこと: var, let, const、文字列、数値、ブーリアン。
- 確認問題:
let age = 25;とconst name = "太郎";を書いて、コンソールに出力してみよう。varとletの違いを簡単に説明して。
- 参考リンク:
- 学ぶこと: +, -, *, /, if文,===,!==
- 確認問題:
let num = 10;で、numが5より大きいかチェックするif文を書いて。3 === "3"の結果を予想して、理由も考えてみて。
- 参考リンク:
- 学ぶこと: 関数の定義、引数、戻り値。
- 確認問題:
- 2つの数を足す関数
add(a, b)を書いて、add(3, 4)を試して。 - 引数なしで
"こんにちは"を返す関数を作ってみよう。
- 2つの数を足す関数
- 参考リンク:
- 学ぶこと: for, while。
- 確認問題:
- 1から5までコンソールに出すforループを書いて。
let i = 0;でwhileを使って、iが3になるまで増やすコードを書いて。
- 参考リンク:
- 学ぶこと: 配列の作成、push, pop, インデックス。
- 確認問題:
let colors = ["赤", "青"];に"緑"を追加して、全て出力してみて。- 配列の2番目の要素を取り出すコードを書いて。
- 週末: 復習＆「名前を5回表示するコード」を書いてみる。
**目的: 実践的な操作とES6を学ぶ。
- 参考リンク:
- 学ぶこと: オブジェクトの作成、プロパティ、メソッド。
- 確認問題:
let car = { brand: "Toyota", year: 2020 };でbrandを取り出してみて。sayHelloというメソッドを追加して呼び出してみよう。
- 参考リンク:
- 学ぶこと: アロー関数、テンプレートリテラル。
- 確認問題:
const greet = (name) => "こんにちは " + name;を書き換えて動かして。let age = 20;で「私は20歳です」をテンプレートリテラルで出力。
- 参考リンク:
- 学ぶこと: forEach, map, filter。
- 確認問題:
[1, 2, 3]の各要素を2倍にするmapを書いて。[1, 2, 3, 4]から偶数だけ取り出すfilterを書いて。
- 参考リンク:
- 学ぶこと: getElementById, addEventListener。
- 確認問題:
<p id="text">をJavaScriptで「こんにちは」に変えてみて。- ボタンクリックでアラートを出すコードを書いて。
- 参考リンク:
- 学ぶこと: try-catch。
- 確認問題:
- 未定義変数をtry-catchで囲んでエラーをキャッチしてみて。
- throw "エラーだよ";を試してみて。
- 週末: ミニプロジェクト「ボタンで数字が増えるカウンター」。
**目的: Reactで使う非同期処理をマスター。
- 参考リンク:
- 学ぶこと: Promise, then/catch。
- 確認問題:
- 1秒後に「できた」を返すPromiseを書いて。
- エラーをcatchで拾うPromiseを試して。
- 参考リンク:
- 学ぶこと: 非同期処理の簡略化。
- 確認問題:
- Promiseをasync/awaitで書き換えてみて。
setTimeoutをawaitで2秒待つ関数を書いて。
- 参考リンク:
- 学ぶこと: APIからデータ取得。
- 確認問題:
fetch("https://jsonplaceholder.typicode.com/posts/1")でデータをコンソールに出して。- 取得したデータのtitleだけ表示してみて。
- 参考リンク:
- 学ぶこと: 変数のスコープ、クロージャ。
- 確認問題:
- 関数内で
let x = 10;を定義し、外から見えないことを確認。 - カウンターをクロージャで作ってみて。
- 関数内で
- 参考リンク:
- 学ぶこと: import/export。
- 確認問題:
add.jsで関数をexportし、main.jsでimportして使ってみて。- 定数を別のファイルからimportしてみて。
- 週末: ミニプロジェクト「APIからデータ表示」。
**目的: 総合力をつけ、次のステップへ。
- 参考リンク: これまでのリソース復習。
- 実践: TODOリスト（追加・削除）。
- 確認問題:
- 配列にTODOを追加する関数を書いて。
- TODOを削除するボタンをDOMで追加。
- 参考リンク:
- 学ぶこと: console.log, デバッグツール。
- 確認問題:
- TODOリストにバグを入れて、見つけて直して。
- ブレークポイントを使って変数をチェック。
- 参考リンク: Week 2のES6リンク。
- 実践: TODOリストをmapやアロー関数で改良。
- 確認問題:
- forループをmapに書き換えて。
- アロー関数で短くしてみて。
- 参考リンク:
- React: コンポーネント（予習）
- 学ぶこと: 関数の分離。
- 確認問題:
- TODOリストの表示を別関数に分けて。
- 入力処理を別の関数にしてみて。
- 参考リンク:
- 学ぶこと: Node.js, npm。
- 確認問題:
npm initでプロジェクトを作ってみて。npx create-react-appを試して動かして。
- 週末: 自由制作（例：計算機）。
補足
-
環境: VS Code、Chrome、Node.js（Week 4用）。
-
進め方: リンク先で学び、問題を解いて確認。答えは自分で試して確かめてね！
これでJavaScriptの基礎がしっかり身につきます。進める中で質問があれば、気軽に教えてください！