スキルアップカレッジ JavaScript基礎
公開日： 最終更新日：
コース概要
「HTML・CSS入門」で作った静的なページに、JavaScriptで動きと対話を加えるコースです。ボタンを押すと数字が変わる、入力した内容がその場で表示される、ToDoリストを足したり消したりできる——これらはすべてJavaScriptで実現できます。本コースでは、変数・条件分岐・繰り返し・関数といった基本文法から、配列とオブジェクト、DOM操作、イベント処理までをひと通り学びます。最終レッスンでは小さなToDoアプリを実装し、コースの締めくくりとしてJavaScriptがブラウザ以外でも動くことを紹介します。
学習の流れ
レッスン1〜2でJavaScriptを動かす環境とデータの扱い方を整え、レッスン3〜5で条件分岐・繰り返し・関数・配列・オブジェクトといった基本文法を順に身につけます。レッスン6〜7で、JavaScriptをHTMLと結びつける核心であるDOM操作とイベント処理を学び、ページが「動く」体験をします。最後のレッスン8で、これまでの知識を総動員して小さなToDoアプリを完成させ、JavaScriptの広がりを案内します。前半（レッスン1〜5）は「JavaScriptという言語そのもの」を、後半（レッスン6〜8）は「ページを動かす力」を身につける流れです。
このコースで学べること
- ✓ JavaScriptが何のための言語か、どこで動くかを説明できる
- ✓ 変数・データ型・条件分岐・繰り返し・関数の基本文法を使える
- ✓ 配列とオブジェクトでデータをまとめて扱える
- ✓ DOMを操作してHTMLを動的に書き換えられる
- ✓ クリックや入力などのイベントに反応する処理を書ける
- ✓ ToDoリストのような小さなWebアプリを自分で実装できる
- ✓ JavaScriptがブラウザ以外でも動くことを知り、次の学習方向を選べる
対象者
HTML・CSSで静的なページが作れるようになり、次に「動き」を付けたい初学者。HTML・CSS入門コースを修了した方を主な対象とするが、HTMLとCSSの基本がわかっていれば独学でここから入っても進められる
レッスン一覧
-
1
JavaScriptをはじめよう——HTMLに動きを与える第一歩
JavaScriptとは何かを理解し、HTMLにJavaScriptを埋め込む方法（script要素・外部ファイル）を学ぶ。ブラウザのDevToolsコンソールを使って、はじめてのJavaScriptコードを動かす
-
2
変数とデータ型——値に名前を付けて使い回す
let・constによる変数の宣言、文字列・数値・真偽値・null・undefinedといった主要なデータ型、算術・比較・論理演算子、テンプレートリテラルを学ぶ
-
3
条件分岐と繰り返し——プログラムに判断と反復を持たせる
if・else if・elseによる条件分岐、for・while・for...ofによる繰り返しの書き方を学ぶ。条件と反復を組み合わせて、状況に応じた処理を書けるようになる
-
4
関数——処理のかたまりに名前を付ける
function宣言とアロー関数、引数と戻り値、スコープの基礎を学ぶ。同じ処理を関数にまとめることで、コードを再利用しやすくする
-
5
配列とオブジェクト——データをまとめて扱う
配列の作成・要素の追加削除・forEach・mapと、オブジェクトのプロパティ・メソッド・ドット記法を学ぶ。複数のデータをまとめて扱う考え方を身につける
-
6
DOM操作——JavaScriptでHTMLを書き換える
DOMの考え方、querySelectorによる要素の取得、textContent・innerHTML・valueによる中身の操作、styleとclassListによる装飾の操作を学ぶ
-
7
イベント処理——利用者の操作に反応する
addEventListenerによるイベント登録、click・input・submitといった主要イベント、フォーム入力の取得、preventDefaultによるデフォルト動作の抑制を学ぶ
-
8
ToDoリストを作る——小さなWebアプリでコースの締めくくり
これまでの知識を組み合わせて、項目の追加・削除ができるToDoリストを実装する。最後にJavaScriptがブラウザ以外でも動くこと（Node.jsなど）を紹介し、次の学習方向を案内する
-
✓
総復習テスト
全レッスンの内容を振り返るテスト
このコースの用語集（64語）
- アロー関数（あろーかんすう）
- `=>` を使った関数の書き方。`(引数) => { 処理 }` の形で記述する。引数1つ・1行返すだけの場合は省略形が使えて短く書ける。
- イベント
- ブラウザで起きる出来事の総称。クリック・入力・送信・マウス移動・キー入力・ページ読み込みなどがある。
- イベントハンドラ（いべんとはんどら）
- イベントが起きたときに呼び出される関数。`addEventListener` で登録する。
- 引数
- 関数に渡す値。関数の括弧 `()` の中に並べて宣言し、呼び出すときに対応する位置に値を渡す。
- インデックス
- 配列の各要素に割り振られる番号。0から始まる。`配列[0]` が最初の要素を指す。
- 演算子
- 値の計算や比較を行う記号。算術演算子（`+ - * / %`）、比較演算子（`=== !== < <=` など）、論理演算子（`&& || !`）がある。