JavaScript基礎講座 - 初学者向けプログラミング入門
初学者向けの JavaScript 基礎講座です。基本構文とよく使う考え方を学び、ページに簡単な動きを付けられるところまで進めます。
無料で始めるこの講座について
プログラミング未経験の方でも理解しやすいよう、JavaScript の基礎から段階的に学べます。
- ゴール: JavaScriptの基礎知識を習得。基本構文を理解し、ページに簡単な動きを付けられるようになります
- 伸ばす力: JavaScript を追加・修正できる
できるようになること
- 変数、データ型、演算子を使って簡単な処理を書ける
- 条件分岐とループで、処理の流れを組み立てられる
- 配列とオブジェクトで、まとまったデータを扱える
- 関数を定義して、処理を呼び出せる
- DOM 操作とイベントの基礎で、クリックなどに反応する動きを付けられる
よくある質問(FAQ)
このコースは 12 レッスン、クイズ 11 回(計 112 問)、練習問題 24 問です。全体の学習時間はおおよそ 15 時間です。1 日 1 レッスン+その日のクイズ・練習なら、およそ 2〜3 週間で一通り終えられます。
ペースや理解度は人によって違います。焦らず、理解してから次のレッスンへ進んでください。
はい。この JavaScript 基礎講座は無料で利用できます。登録料や月額料金はかかりません。
レッスン、練習問題、クイズ、コードエディタも無料です。学習を続けるためのアカウント作成も無料です。
いいえ。名前は似ていますが、別の言語です。
JavaScript は主に Web ブラウザで動き、ページに動きを付けるために使います。Java は別の用途で使われる言語です。
レッスン一覧
1. JavaScriptの基本
JavaScriptの基本概念と実行環境を学びます
2. 変数とデータ型
JavaScriptの変数とデータ型について学びます
let, const, String, Number, Boolean
3. 演算子
JavaScriptの演算子について学びます
4. 条件分岐
JavaScriptの条件分岐について学びます
if, else, else if, switch, case, default
5. 繰り返し処理(ループ)
JavaScriptの繰り返し処理(ループ)について学びます
for, while, break, continue
6. 配列
JavaScriptの配列について学びます
array, length, push, pop, shift, unshift, forEach, includes, indexOf
7. 関数
JavaScriptの関数について学びます
function, arguments, return, arrow function
8. オブジェクト
JavaScriptのオブジェクトについて学びます
object, property, method, constructor, this
9. DOM操作(1)
JavaScriptのDOM操作について学びます
DOM, querySelector, querySelectorAll, textContent, setAttribute
10. DOM操作(2)
JavaScriptのDOM操作について学びます
style, classList, createElement, innerHTML, appendChild, remove
11. イベント処理
JavaScriptのイベント処理について学びます
click, mouseover, input, keydown, keyup, submit, change, preventDefault
12. 非同期処理
JavaScriptの非同期処理について学びます
クイズ一覧
JavaScript基礎 基本構文
JavaScriptの基本構文について
JavaScript基礎 変数とデータ型
JavaScriptの変数とデータ型について
JavaScript基礎 演算子
JavaScriptの演算子について
JavaScript基礎 条件分岐
JavaScriptの条件分岐について
JavaScript基礎 繰り返し処理
JavaScriptの繰り返し処理について
JavaScript基礎 配列
JavaScriptの配列について
JavaScript基礎 関数
JavaScriptの関数について
JavaScript基礎 オブジェクト
JavaScriptのオブジェクトについて
JavaScript基礎 DOM操作(1)
JavaScriptのDOM操作(1)について
JavaScript基礎 DOM操作(2)
JavaScriptのDOM操作(2)について
JavaScript基礎 イベント処理
JavaScriptのイベント処理について
練習問題一覧
JavaScript練習問題 文字の出力
メッセージを出力する練習問題です。ドラッグ&ドロップでコードを正しい位置に配置してください。
JavaScript練習問題 変数の定義
変数の定義方法を理解する練習問題です。ドラッグ&ドロップでコードを正しい位置に配置してください。
JavaScript練習問題 定数の定義
定数の定義方法を理解する練習問題です。ドラッグ&ドロップでコードを正しい位置に配置してください。
JavaScript練習問題 比較演算子
比較演算子を理解する練習問題です。ageが20歳以上である条件を満たす比較演算子を選択してください。
JavaScript練習問題 比較演算子(未満)
比較演算子を理解する練習問題です。scoreが60点未満である条件を満たす比較演算子を選択してください。
JavaScript練習問題 比較演算子と論理演算子
比較演算子と論理演算子を組み合わせた練習問題です。年齢が20歳以上の男性という条件を満たすコードを完成させてください。
JavaScript練習問題 比較演算子と論理演算子(OR)
比較演算子と論理演算子(OR)を組み合わせた練習問題です。18歳以下、または学生という条件を満たすコードを完成させてください。
JavaScript練習問題 条件式
条件式を正しく選択する練習問題です。年齢に応じたメッセージを表示するコードを完成させてください。
JavaScript練習問題 switch文
switch文を正しく選択する練習問題です。numberの値に応じたメッセージを表示するコードを完成させてください。
JavaScript練習問題 三項演算子
三項演算子を正しく選択する練習問題です。ageの値に応じて「成人」または「未成年」を表示するコードを完成させてください。
JavaScript練習問題 for文
for文を正しく選択する練習問題です。1から5までの数字を表示するコードを完成させてください。
JavaScript練習問題 for文とcontinue
for文とcontinue文を使って、1から10までの偶数のみを表示するコードを完成させてください。
JavaScript練習問題 while文
while文を使って、1から3までの数字をカウントして表示するコードを完成させてください。
JavaScript練習問題 配列
配列のインデックスを使って、りんごを表示するコードを完成させてください。
JavaScript練習問題 配列メソッド
配列の末尾に「メロン」を追加するメソッドを選択してください。
JavaScript練習問題 配列の検索
配列に「りんご」が含まれているか確認するメソッドを選択してください。
JavaScript練習問題 配列のforループ
forループを使って配列のすべての要素を表示するコードを完成させてください。
JavaScript練習問題 配列のforEach
forEachメソッドを使って配列のすべての要素を表示するコードを完成させてください。
JavaScript練習問題 関数
2つの数値を足し算する関数を完成させてください。
JavaScript練習問題 アロー関数
アロー関数を使って2つの数値を足し算する関数を完成させてください。
JavaScript練習問題 オブジェクト
オブジェクトのプロパティとメソッドを定義するコードを完成させてください。
JavaScript練習問題 DOM
IDで要素を取得するDOMメソッドを選択してください。
JavaScript練習問題 querySelector
querySelectorメソッドでID、クラス、タグ名で要素を取得するセレクタを選択してください。
JavaScript練習問題 querySelectorとquerySelectorAll
querySelectorとquerySelectorAllメソッドの違いを理解して、適切なメソッドを選択してください。
コース概要
- 学習時間: 約15時間(レッスン・クイズ・練習問題込み)
- ゴール: 基礎知識(ページに簡単な動きを付けられる)
- レッスン数: 12レッスン
- クイズ数: 112問
- 練習問題数: 24問
- 難易度: 初級レベル
インストラクター
学習に役立つリソース
JavaScript練習問題
JavaScript の練習問題で、学んだ知識を定着させましょう。
JavaScript練習問題を解くJavaScriptクイズ
学習した内容の理解度を確認したい場合は、クイズページでテストしてみましょう。
JavaScriptクイズを受けるJavaScriptリファレンス
関数やメソッドの詳しい使い方について知りたい場合は、リファレンスページをご確認ください。
JavaScriptリファレンスを見るコードエディタ
学んだ内容を自由に試してみたい場合は、コードエディタをご利用ください。
コードエディタを使う