プログラミングを始める方が入門として始めるのは、比較的簡単に覚える事が出来る事から、WEBページの基本となる「HTML/CSS」を選択するのが一番多いのではないでしょうか。私もそうでした。
しかし、「HTML/CSS」は「マークアップ言語/スタイルシート」と呼ばれており、厳密に言えばプログラミングでは無いそうです。
したがって、後々「JavaScript」等の本当のプログラミングに手を付けた際に、挫折する事が多いみたいです。
そういう事から、プログラミングを始めるなら「JavaScript」等から入った方が良いとの声も上がっています。他のプログラム言語も、文法の違いはあれど基本的な構成としては似た部分があるため、応用が効きやすいのですね。
また、プログラミング言語の中でも「JavaScript」は様々な分野で利用される事から、実用的かつ人気の高い言語でもあります。
そこで今回から複数回にかけて、「JavaScript」について、どのような場面で使われているのか、また基本的な文法はどんな感じか（ざくっと）、実践もかねてWEBサイトでよく見かける「ハンバーガーメニュー」の作成方法までをまとめてみようかと思います。
私はどこぞのIT企業に勤めている訳でもなく、完全な独学ですのでプログラムの記述には粗さ（スリムでない）があると思いますが、これからJavaScriptを始める方の理解が少しでも深まればいいなと、ステップアップする為の踏み台にでもなれば幸いでございます。
※jQueryなどのライブラリは使用しません。俗にいう「ネイティブなJavaScript」について進めていきます。
目次
初めに
JavaScriptとは
WEBページのほとんどは、文章構造を作るHTMLと、それをスタイリングするCSS、そしてそれに操作を加える事が出来る「JavaScript」で成り立っています。
冒頭に書いたWEBサイトのハンバーガーメニュー等は、「JavaScript」によって実現しています。
また、FecebookやGoogleマップなどのWEBサイトでは、検索結果がリアルタイムに表示されたり、画面上で操作が出来たりしますが、これにもJavaScriptが利用されています。
他にも用途はあるようですが、主にブラウザ上で動作するプログラミング言語としての役割が多いです。
JavaScriptで可能になること
HTML/CSSの変更
HTML/CSSのみのWEBサイトであれば、ブラウザで読み込んだ際には基本的にその後は変化する事はありません。
そこで前途したメニューボタンなどを設置したい場合は、「ボタンを押したら表示が変わる」動作を付けなければなりません。
これを可能にするのがJavaScriptであり、動作原理としてはボタンのクリックなどによって「HTML/CSSをリアルタイムに変更をかける」事ができるのです。
Ajax(非同期通信）
エージャックスとかアジャックスと呼ばれてます。
通常であれば、新しい情報を得るためにはページ（URL）の移動が必要ですが、JavaScriptを使うことによって、ページを移動せずそのままの状態で通信が可能になり、再読み込みを行わずにWEBページの一部を動的に書き換える事が可能になります。
例えば、検索エンジンでキーワードを入力する際、入力の途中で検索候補が表示されます。
Googleマップではスクロールするとその部分の地図が自動的に表示されますね。
これを「Ajax(非同期通信）」と呼びます。
計算処理
他のプログラム言語と同じく、データの検証や計算が可能です。
例えば入力された文字数をカウントしたり、グラフで表示させたりすることができます。
Twitterでは文字数の上限をの丸い円グラフで表示していますね。あれもJavaScriptです。
基本的な文法について
JavaScriptの読み込み
HTML/CSSの知識が少しある事を前提に進めます。
※過去記事にてhtml/cssをまとめているのでよければ参考にして下さい↓
JavaScriptの読み込みには大きくわけて2種類あり、HTMLに直接記述する「インラインスクリプト」と、外部ファイルを読み込ませる「外部スクリプト」があります。
インラインスクリプトでは、HTMLのbodyの閉めタグ直前に、直接scriptを埋め込みます。
|
1 2 3 4 5 6 |
<body> <script></script> //ここに直接記述 </body> </html> |
変わって外部スクリプトの場合は、HTMLのbody閉めタグ直前に、scriptファイルがある場所をsrcで指定して外部より読みこませます。
|
1 2 3 4 5 6 7 8 |
<body> <script src="js/main.js"></script> //ここに外部スクリプトの位置を記述 </body> </html> |
以前ではheadタグに記述しているのが主流でしたが、HTMLの描画遅延の面でbody閉めタグ直前に配置するのが主流となっているようです。
基本的には、外部スクリプトとして読み込ませるのが一般的のようです。
また、jQuery使用時も同じく、body閉めタグ直前にWEB上のソースコードを記述するか、DLしたファイルの位置をsrcで指定してやります。
定数と変数
プログラミングでは、数値や文字列のデータを格納する「変数」をよく使用します。この変数は、任意の名前を付けることができるので、長ったらしい記述などを格納しておけば、必要なタイミングでいつでも簡単に呼び出せる事が出来るメリットなどがあります。
javascriptでは、定数と変数があり、「定数は不変的なデータ用」で使います。つまり、一度入れたデータは変える事が出来ません。
「変数は反対に中身の入れ替えが自由に出来る」ことが特徴です。
実際に見てみましょう。
まず、VSコード等のテキストエディタと、ブラウザはchromeを準備しておきます。
簡単なHTMLと、javascriptを作成します。適当なフォルダを作成し、その中に「index.html」と「jsフォルダ」を作成し、jsフォルダの中に「test.js」を作成しておきます。ファイルはテキストファイルで作成後、拡張子を変更すればOKです。
|
1 2 3 4 5 6 7 8 9 10 11 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>javascript</title> </head> <body> <script src="js/test.js"></script> </body> </html> |
|
1 2 3 4 5 6 |
"use strict";{ const name = "太郎"; console.log(name); } |
htmlは至って簡単に記述していますので説明は割愛します。
jsですが、始めの”use strict”｛｝は、jsすべての記述を囲んでやる事で、エラーが発生した際にどこが原因かを判断しやすくするための記述になります。
「const」が定数になります。「name」は定数の名前を宣言したもので、＝で右側にある太郎の文字列を「name」に代入しています。
ちなみに、javascriptでは、文字列として扱う場合は、「’」か「”」で囲んでやります。数値の場合は逆で囲んではいけません、文字列として認識してしまいます。
console.log();は、カッコ内の値を結果としてブラウザのコンソールに出力してくれます。
この状態でhtmlを開けば、body閉じタグ前のjavascriptが実効され、chromeのデベロッパーツールからコンソール画面を開くと「太郎」と結果が出るはずです。
続いて、nameに違う名前を代入してみて下さい、エラーが出るはずです。これはconstが定数である為です。
続いて定数を変数に変えてみましょう。
|
1 2 3 4 5 6 7 8 |
"use strict";{ let name = "太郎"; name = "次郎"; console.log(name); } |
変数は「let」で表します。この記述であれば、変数nameを宣言し、「太郎」を代入後、「次郎」を代入しています。
コンソールで結果を見ると、「次郎」と出力されているはずです。
これは変数が、中身の変更を許可できている事が分かります。
ちなみに、昔は変数で「var」が使われていましたが、現在は使われていないため、「let」で宣言するのがマストらしいです。
分岐文if
プログラミングでよく目にするif文の分岐の記述です。
if（条件）｛真の場合に実行する内容｝else｛偽の場合に実行する内容｝
のように記述します。
それでは、1000円の買い物に支払う金額を入力させて、金額が多ければお釣りを返す、足りなければ足りません、とアラートが出る簡単な分岐を作成してみます。
|
1 2 3 4 5 6 7 8 9 10 11 |
"use strict";{ let box = prompt("金額を入力してください"); if(box >＝ 1000){ alert(box - 1000 + "円のお釣りです"); } else { alert("金額が足りません"); } } |
初めに変数boxを宣言し、「prompt」と呼ばれる入力画面が出る関数を代入します。prompt()のカッコ内の文字列は、入力画面に反映されます。
続いてif文に入ります。boxには、promptで表示された入力画面で入力した金額が反映されるので、1000以上なら、「真」の結果、box-1000+”円のお釣りです”がアラート関数によって表示されます。
つまり、2000と入力したなら、「1000円のお釣りです」とアラート表示されます。
ここで注意するのが、前途したように「数値には ’ を付けない」です。－なら問題ないみたいですが、+の場合だと、例えばboxに+”1000”とした場合、入力金額を1000とすれば、結果のアラートは「10001000円のお釣りです」と表示されるはずです。
これは、文字列として判別してしまうためですね。
入力金額が1000未満だと、「偽」となり、elseのアラート「金が足りません」と表示されると思います。
また、「else if」というのもあり、「偽」判定の後にまたif分岐をつなげる事が可能です。
ループ文While
ifに続き、これもプログラミングには欠かせない要素になりますね。繰り返し文のWhileです。
While(条件）｛条件が真の場合に繰り返し実行する内容；条件に変化を加える｝偽になれば終了
のような記述になります。
それでは、1～10の数字を、奇数と偶数に分けるプログラムをWhileで作ってみましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
"use strict";{ let box = 1; while(box <= 10){ if(box % 2 === 0){ console.log(box + "偶数") } else { console.log(box + "奇数") } box = box + 1 } } |
変数boxに1を代入します。
その後のWhile文で、boxが10になるまで、中身のif分岐のプログラムを実行します。
「box % 2===0」は、２で割った時の整数値の余りを示します。つまり、２で割って余りが0なら真。boxの値は偶数とconsoleに表示。
elseは必然的に２で割って余りが出るので、そのままboxの値は奇数とconsoleに表示。
最後に重要なのが、ifの分岐を抜けた後、boxの値を１増やす事です。増えた値でまたループに入り、同じ事をboxの値が10になるまで繰り返します。
コンソールの結果は、1～10の数字に奇数、偶数が表記されているはずです。
注意するのが、記述ミスで永久にWhile文の繰り返しが終わない事があります。PCが唸りを上げ計算しまくるので、直ぐにブラウザを閉じて強制終了させてください。クラッシュする事もあるそうです。
ループ文for
もう一つの繰り返し文に「for」があります。whileにも似ていますが、「決められた回数ループ処理する」といった特徴があります。
すこし記述が複雑ですが、下記のような感じです。
for(カウント初期値、繰り返しの条件、カウントを増やす）｛実行する内容｝
では9回フラれて10回目でイケた感じにしてみます。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
"use strict";{ for(let i = 1; i <= 10; i++){ if(i < 9){ console.log("ごめんなさい") } else if(i < 10){ console.log("・・・") } else { console.log("よろしくネ♡") } } } |
カウント初期値で変数iを宣言、1～始まり10になるまでif文を繰り返す感じになります。if文を抜けたらiに１加算されて、iが11になれば終了です。
配列
配列は、下記のように１つの定数、変数に「複数の情報」を入れることができます。
const box = [“a”, “b”, “c”, “d”, “e”];
配列の場合は、カッコに[]を使用します。
この中から一つを取り出すこともできるし、全て取り出すこともできます。
また、配列の中の数を取り出すこともできます。
|
1 2 3 4 5 6 7 |
"use strict";{ const box = ["山", "川", "空", "海", "陸"]; console.log(box[3]); console.log(box); console.log(box.length); } |
配列は[0]からカウントされる為、”山”が0になります。したがって、box[3]のコンソール表示は、海になります。
配列を入れた定数、変数名を指定すれば、そのまま中身の配列が全て表示されます。
また、定数、変数名.lengthを入力すれば、配列の数が反映されます。
これは、例えばおみくじとかビンゴゲームなど、ランダムで配列を抽出する記述を加えれば、そういった事が可能になります。
まとめ
以上、本当にざっくりと説明しただけですが、どれも基本中の基本ですので、覚えておくと良いと思います。
次回は実際にjavascriptを使って、html/cssを操作する「イベント処理」について詳しく掘り下げていこうと思います。
