前の記事では、
JavaScriptが
・Webページに動きを与える
・ユーザー操作に反応する
ための言語であることを学びました。
ここからは、
実際にJavaScriptを書くために必要な
基本文法 を整理していきます。
この記事の目的は、
「すべて覚えること」ではありません。
コードを見て意味が分かり、
簡単な処理を書ける状態になること
を目標に進めていきましょう。
この記事で学べること
・JavaScriptの書き方の基本
・変数とは何か
・条件分岐の考え方
・繰り返し処理の概要
・エラーを怖がらないための考え方
JavaScriptはどこに書くのか（簡単に復習）
JavaScriptは、
HTMLファイルと一緒に使われます。
学習段階では、
次のどちらかで問題ありません。
・HTML内に直接書く
・別ファイルとして読み込む
実務では
JavaScriptは別ファイル管理
が基本になります。
JavaScriptの基本構文
JavaScriptは、
上から順番に処理される言語です。
処理は
「文（ステートメント）」
の集まりで構成されます。
1行ずつ
「何をするか」
を書いていくイメージです。
変数とは何か
変数とは、
値を一時的に保存しておく箱です。
JavaScriptでは、
変数を使ってデータを扱います。
なぜ変数が必要なのか
変数を使うことで、
・同じ値を何度も使える
・後から値を変更できる
・処理の意味が分かりやすくなる
といったメリットがあります。
変数の考え方（基本）
JavaScriptでは、
変数に名前を付けて値を保存します。
イメージとしては、
・名前付きの箱
・中身は後から変えられる
という理解で問題ありません。
データの種類（概要）
JavaScriptで扱う値には、
いくつかの種類があります。
代表的なものは次のとおりです。
・文字（文字列）
・数字
・真偽値（true / false）
最初は
「種類がある」という認識だけで十分です。
条件分岐とは何か
条件分岐とは、
条件によって処理を分ける仕組みです。
「もし○○なら、△△する」
という考え方です。
Web開発では、
・入力が正しいか
・条件を満たしているか
といった判定で
頻繁に使われます。
条件分岐のイメージ
条件分岐は、
次のような場面で使われます。
・入力欄が空ならエラー表示
・チェックが入っていれば表示する
・条件に応じて処理を変える
JavaScriptは、
この「判断」が得意な言語です。
繰り返し処理とは何か
繰り返し処理とは、
同じ処理を何度も実行する仕組みです。
例えば、
・複数の要素に同じ処理をする
・一覧を順番に処理する
といった場合に使われます。
なぜ繰り返しが必要なのか
繰り返し処理を使うことで、
・コードが短くなる
・ミスが減る
・変更に強くなる
というメリットがあります。
「同じことを何度も書いている」
と感じたら、
繰り返し処理の出番です。
JavaScriptはエラーが出て当たり前
JavaScript学習で
最初に伝えておきたい重要な点です。
エラーが出るのは普通です。
・タイプミス
・指定ミス
・構造の勘違い
これらは、
誰でも必ず通ります。
エラーが出たときの基本姿勢
エラーが出たら、
・慌てない
・原因を一つずつ確認する
・開発者ツールを見る
JavaScriptでは、
エラー文がヒントになります。
「何が分からないか」を
教えてくれていると考えましょう。
学習初期に覚えるべきことまとめ
現時点では、
次の点を理解できていれば十分です。
・変数は値を入れる箱
・条件分岐で処理を分ける
・繰り返しでまとめて処理する
・エラーは怖くない
細かい書き方は、
次の記事以降で
実際に使いながら学びます。
まとめ
JavaScriptの基本文法は、
「考え方」を理解することが最重要です。
・順番に処理される
・値を変数に保存する
・条件で分ける
・繰り返して処理する
この考え方が分かれば、
JavaScriptは一気に身近な存在になります。
次は、
JavaScriptがHTMLをどうやって操作しているのか
という核心部分に進みます。
次に読むべき記事
▶ 次の記事
5-3 DOMとは何か｜JavaScriptがHTMLを操作する仕組み
▶ 関連記事
5-1 JavaScriptとは何か
コメント