【Web開発の基礎】JavaScriptについて学ぼう

JavaScriptとは

JavaScript（ジャバスクリプト）は、動的なWebページを作るためのプログラミング言語の一つです。主に動作や処理といった機能面を実装する時に使うプログラミング言語です。「ボタンを押したら"こんにちは"と表示する」や「特定の条件になったら画面を暗くする」などとWebページ実装する機能の部分を担当するのがこのJavaScript(略してjs)です。Webページのシステム部分を扱うので、みんながよくイメージするプログラミングの部分がここに当たると思います。

JavaScriptを実際に使ってみよう

JavaScriptは、HTMLファイル内に直接書き込むこともできますし、外部ファイルとして分離する(cssの時と同じ)ことも可能です。以下は、HTMLに直接JavaScriptを埋め込む方法の例です。

console.logの説明は一旦置いておいて、このように<script>タグで囲んだ部分がjsとして実行(処理が走る)されます。今回でいうとこのconsole.log(~)という処理が実行されたんだなという認識でOKです。

ですがこれだと、HTMLファイルが肥大化(いろんなコードがごっちゃに溜まる)ため、もう一つの外部ファイルとして分離する方法を紹介し、こちらの方法でこれ以降の講座や課題に取り組んでいきましょう。

今回もHTMLやCSSの講座で使用したフォルダーを使います。まずは好きな場所にjsフォルダーを準備し、その親(一階層上)のフォルダーをVSCodeで開いてください。

※例ではデスクトップのprofactフォルダ→jsフォルダとなっています。 デスクトップ |- profact ←ここをVSCodeで開く(VSCodeにドラッグアンドドロップする) 　|- html 　|- css 　|- js

次に、htmlフォルダーにはindex.htmlを、jsフォルダーにはscript.jsを作成する。

デスクトップ |- profact 　|- html 　~~ 省略 ~~ 　　|- index.html 　|- js 　　|- script.js

これでjsの準備ができました。早速jsを書いていきましょう。まず、index.htmlを開き、中身を以下のようにします。(コピペしちゃってください)

このようにscriptタグのsrcに対象のjsファイルを指定しています(cssの時の同じ)。 この時、scriptタグはbodyタグの中でなくheadタグの中でも使えるのでそちらに置くこともできますが推奨はしません。詳しい話は省きますが、headタグにおくと表示が遅くなることがあるからです。最も良い場所は、bodyタグの一番最後です。なので困ったらここにおきましょう。 ※詳しく知りたい方はメンタリングにて。

HTMLでjsが呼び出せるようになったので、試しにjsファイルの中身を以下にしてください。

その後、開いたページで右クリック→「検証」をクリックし、「コンソール」タブを開いてみましょう。 すると「Hello World!」が表示されています。実はこのconsole.log(〜)というのは「〜を出力する」といった処理をするためのでした。 なので今回は処理「Hello World!というメッセージを出力する」が実行されました。

これ以降はこのjsファイルに処理を書いていき、ここのコンソールで確認するといった流れになります。 また、一般的な処理の流れとして、

1. 変数を使いデータを保持する
2. そのデータをわちゃわちゃいじる
3. 条件によってする処理を決める
4. 処理を動かす

なことをしていきます。このイメージを元にこれからの各章を学んでいきましょう。

※「ERR_ACCESS_DENIED」のようなエラーが発生したなどjsが反映できない場合、 ファイルが読まれていない（アクセス拒否されている）可能性があるので 自分のPCの設定→「セキュリティとプライバシー」→「プライバシー」→「ファイルとフォルダ」から 対象が含まれているフォルダ(今回:デスクトップ)にアクセス許可を与えればOK

変数とデータ型を学ぶ

JavaやPythonといった他のプログラム言語でも出てくる、プログラミングの超基礎的な概念である変数がJavaScriptでも出てきます。変数は、数値や文字などの値を入れられる領域でわかりやすくいうとデータを入れる箱です。 また、変数を使う時によく出てくる言葉もあるのでそれも覚えておきましょう。

• 宣言: こんな変数を使うよ！というアピールすること
• 初期化(定義): 宣言と同時に初期データを設定すること
• 代入: 変数の中身を更新すること

まず、JavaScriptの変数の宣言にはvarもしくはletを使用します。

※JavaScriptでは文の終わりに ; (セミコロン)をつけるのが基本です。(なくても正常に動きます)

こうすることで「nameという名前の変数とageという変数をこれから使います」というアピールをしました。そうすることでこの名前の変数を使えるようになります。 また、宣言と一緒に初期データを変数の中に入れておきたい時(初期化)は以下のようにvarもしくはlet、constを使用します。

※JavaScriptでは、「太郎」といった文字列を扱う際はダブルクォーテーション(") で囲む必要があります。 ※シングルクォーテーション(') で囲むでもOKです。"太郎"も'太郎'もどちらでもOKです。

これによって、例えば「"太郎"という文字が入ったnameという名前の変数を準備」することができました。さっそく、その変数にデータがちゃんと入っているのか確認してみましょう。先ほど使ったconsole.log(〜)を使ってこの変数の中身を出力させてみましょう。 先ほどのコードを

にして保存→ブラウザを更新(F5を押す or 左上の再読み込みボタンを押す...etc)してみると、先ほどの「コンソール」タブで「太郎」と表示されていることがわかります。他の変数を入れてみても同じように設定した値が表示されると思うので試してみてください。 ※先ほど使ったvar,let,constの説明は後ほどします。今は「宣言・初期化で使うものか」でOKですが、とりあえず宣言も初期化も共通してletを使っていきます。

さて、「変数はデータを入れておく箱」というイメージを持てたところで、入れるデータの型(種類)についても紹介します。変数に入れることができるデータは様々あり、主に以下のようなものがあります。

• 数値（Number）
• 文字列（String）
• 論理（Boolean）
• オブジェクト（Object）
• 未定義（Undefined）
• Null

先ほど出てきた、nameは文字列型、ageは数値型、isStudentは論理型です。 他にも、オブジェクトはいったん置いておいて、未定義は箱(変数)が空っぽのもの、Nullは「何もない」という意味になります。※未定義とNullの違いの理解は難しいので、のちの講座で解説します。今はどちらも「データがないもの」という認識でOKです。

ちなみに「この変数は今どんなデータ型？」かを確認するときは以下のようにすると確認できます。

これをすると「number」が表示されるので数値型だということがわかります。

次に、代入について解説します。これは「変数の中身を更新すること」です。実際にやっていきましょう。

これにより、初期化で「ageの最初の値は25」としたものを「ageの値を30に変更」しました。このように変数のデータを変更・更新する際は変数 = 値とするだけでOKです。注意として、算数や数学で使う=(イコール)とは若干意味が異なり、「左辺と右辺が等しい」ではなく「左辺(変数)に、右辺(変更先)を入れる(当てはめる)」という意味になります。 また、変数の代入は変数 = 変数でもすることができます。試しに先ほどの部分を以下のように変更してください。

このようにして変数の値(※例外あり)を左辺の変数にすることができます。

いろいろな演算子を学ぶ

超基礎的な概念である演算子がjsでも出てきます。算数的な計算で使う演算子(+や-とか)や、二つのデータを比較するのに使う比較演算子、「AかつB」のような数学の「集合、命題」の時に使った論理演算子をプログラミングでもよく使います。それぞれみていきましょう。

算数的な計算で使う演算子(算術演算子)は以下のように使います。

基本的な四則演算で使います。使い方は算数の時とほぼ同じです。他にも乗数や余りの計算もできますが今回は割愛します。 また、変数への代入の場合はa = a + 3をa += 3のように省略して書くことができます。さらにその代入で加える(+)もしくは引く(-)値が1の場合はそれぞれ、a++,a--のように省略することができます。こちらよく使うので覚えておきましょう。 ※// 〜はコメントアウトです。のちに解説するので一旦放置でOKです。

比較演算子は、２つの値を比較して論理値（trueまたはfalse）を出す時に使います。

それぞれ解説します。まず==は、二つの値が等しいときはtrueになり、等しくないときはfalseになります。似たようなもので===は、二つの値と型が等しいときはtrueになり、等しくないときはfalseになります。そのため、x === zは値は同じ5だが、形が違うためfalseになっています。 二つの値を比較する>では、左側が右より大きければtrueになり、それ以外はfalseとなります。<を使った場合はその逆です。 似たようなもので>=は、左側が右以上(右の値を含む)ならtrue、それ以外はfalseとなります。<=を使った場合はその逆です。 例えば、x < 5の場合は「xは5より小さい(5未満)か」なのでfalseとなりますが、x <= 5は「xは5以下か」なのでtrueとなります。

論理演算子は、論理値を操作するために使います。

それぞれ解説します。AND条件にしたい(両方trueでないとtrueにならない)場合は&&を使います。これによりAND条件の判定をすることができます。 OR条件にしたい(どちらかがtrueならtrueになる)場合は||を使います。NOT条件(論理値の逆転)をしたい場合は、その論理値の前に!を置きます。似たようなもので比較演算子で「xとyが等しくないとき」としたいときは、x != yとします。１個目の=を!にすることで、比較した結果の否定値になります。

また、今回は変数のみで論理演算子を使いましたが、実際は比較したものに対して論理演算子を使用します。具体的に、AND条件でいうと

このように「xが3以上かつ10未満か？」という複合した比較をする際に使用します。細かい使い方は次の制御構文の章で解説します。 これらの使い道としては、算術演算子は数値などのデータの四則演算に、比較演算子と論理演算子は変数などの中身によって処理を変えるために使います。

制御構文を学ぶ

超基礎的な概念、制御構文を解説します。制御構文は、プログラムの実行内容を制御するための構文です。主な制御構文には、条件分岐（if文、switch文）とループ（for文、while文）などがあります。

if文は、条件に基づいて異なるコードを実行するために使います。先ほどの変数xを使って、

このようにif文を書くことができます。大きく分けて三つのブロックに分かれていて、

• if( 条件 ) { 条件を満たす時の処理 }: カッコ( )内に書いた条件を満たす場合のみ、波括弧{ }内に書いた処理を実行します。
• else if( 条件2 ) { 条件2を満たす時の処理 }: 前の条件を満たさなかったが、条件2を満たす場合のみ、波括弧{ }内に書いた処理を実行します。
• else { それ以外の時の処理 }: 全ての条件を満たさなかった際はこの波括弧{ }内に書いた処理を実行します。

内容としては下の図のように、 ・xが3以上、10未満なら、「3以上、10未満です」と出力する(水色) ・それ以外で5より大きい場合(実質的には10以上)なら、「5より大きいです」と出力する(濃い赤) ・それ以外なら「それ以外」と出力する(黄緑) 今回は「3以上、10未満です」が表示されますね。 試しに、if文の直前でxを違う値にして(違う値を代入)してみましょう。

こうすると「5より大きいです」と表示されるはずです。もっと複雑に書いてみると、

このようにして、条件に合わせた処理を的確に実行することができます。

switch文は、いろいろな条件をピッタリ合うものと比較し、一致した時だけ特定の操作をすることができます。これにより、多くの「もし〜の場合」といった複雑な条件分岐を簡単に書けるようになります。よく使うのは「たくさんの選択肢の中から選ぶ」時の処理とかで役立ちます。 switch文は以下のような仕組みになっています。

このように「特定の対象」に対して合致したパターンでの処理を行うことができます。例として、

というように調べたい対象がどんなものか、case ～に一致すればその処理を、すべて一致しなければdefaultでの処理が実行されます。ポイントとしては、

• switch(): 比較したい対象を指定します。
• case: パターンを指定します。
• break: 処理をそこで終了させるための命令です。breakがない場合、一致したcase以降の処理を無条件ですべて実行されます。
• default: どのcaseにもマッチしなかった場合の処理を指定します。

for文は、一定の回数だけループさせる時に使います。何回も繰り返し処理を実行したりする時に使います。例えば、「1~3の数字を出力して」は以下のように書くことができます。

では、「1~100の数字を出力して」だとちょっと面倒ですね。素直にconsole.log(1)からconsole.log(100)を書けばできますが大変です。そんな時に使うのがこの繰り返し(ループ)であるfor文です。for文でやった例は以下です。

たった３行で1~100の数字を出力できます。どうなっているか解説すると「変数iが100以下ならconsole.log(i)して、その後にiを1増やす」ということを繰り返しています。もっと詳しくすると、for文の構造は、

となっていて今回の場合は、

• for文内でのみ使える変数i =0を定義(初期化)
• i <= 100がtrueなら処理実行
• { ~処理~}の処理を実行
• i = i + 1の省略形i++: iに1を加算
• iが100を超えたのでfor文を抜ける(forでの処理が終了)

といったことをしています。このようにして繰り返し処理をしていきます。

似たようなもので、while文というものがあります。こちらは条件がtrueの間、永遠にループさせる時に使います。先ほどの「1~100の数字を出力して」をwhile文で書くと以下のようになります。

やっていること自体はfor文の時と変わらないのですが、動作や状況は少し異なり、以下の違いがあります。

• while文内のみの変数を定義する場所はない
• データの更新はwhile文内どこでもおける

そのため、以下のようにしても同じように「1~100の数字を出力して」ができます。

このように、繰り返しに関係するデータをいつでも変更できる自由度が高いのがwhileです。注意点としては、今回でいうi++;のような繰り返しに関するデータの更新部分を書き忘れると、繰り返す条件i < 100が永遠にtrueのままになるため、処理が永遠に実行されてしまいます。無限ループといわれる現象です。 こうならないために、繰り返し文を書く際はちゃんと終わることを確認しながらやりましょう。 ※無限ループを起こした場合、Webページやブラウザを閉じるなどしてプログラムを切断・終了させて再度開けばOKです。

変数・定数を学ぶ

先ほどの変数の時に出てきたvar,let,constが一体何なのかを解説します。どれも宣言と初期化で使うものですが、これらを使うことで変数の種類を決定していました。種類が決まったことにより以下のような違いが生まれます。

※再宣言:一度宣言した変数名で再度宣言すること。

まず、letとvarの違いとしては「再宣言ができるかどうか」です。同じ名前の変数をまた宣言できるかどうかの違いです。

※実は、varは公式から非推奨となっています。 理由は「再宣言できることでエラーの可能性が増える」「スコープの問題」です。 ここら辺は難しいので別の講座で解説しますがとりあえずvarは使わないようにしましょう。

また、letとconstの違いは「代入ができないこと」です。つまり、初期値に設定したものを代入等で変更することができない、ということです。

このように、初期値から変更できないものを定数と言います。なので実は、constで作ったものは変数ではなく定数でした。変数は「変更できるもの」で、定数は「定まったもの」とイメージしましょう。

まとめ

この講座で、JavaScriptの基礎を学ぶことができました。変数と定数、データ型、演算子、制御構文といった基本的な概念を理解することで、システムチックなプログラミングへの第一歩を踏み出すことができました。これからは、これらの知識を基により高度なJavaScriptの機能や実践的なコーディングテクニックを学んでいきましょう。