WEBの勉強をしている方であれば、何度も『JavaScript』という言葉を聞いたことがあるのではないでしょうか？
『いつか勉強しよう』『たぶん理解できないし』など何となく諦めていたり、勉強を先延ばしにしているのではないでしょうか？
ですが、そんなことはありません。誰でも必ず理解できます！今やりましょう！！
今回はウェブのフロントエンドで必ず使われる『JavaScript』について、初心者でも分かりやすく理解できるようにプログラミング初学者が躓きがちな『変数』『配列』『連想配列』『関数』についての概念と応用方法をサンプルコードと共に分かりやすく解説していきたいと思います。
JavaScriptとは？
『JavaScript』とはウェブサイトのフロントエンドで実行されるインタプリタ方式のプログラミング言語で、ブラウザで手軽に実行できるという特徴があります。
具体的な利用範囲としてはHTMLとCSSと組み合わせることによって動的な動きのあるサイトを制作する場合によく利用されます。
最近では3Dデータの描画、サーバーサイド、スマホアプリ制作で使われる場合もあり、その利用範囲は多岐に渡ります。
-
WordPressを始めるなら必須知識！！初心者でも理解できるHTMLとCSSの使い方
突然ですが、みなさんはHTML、CSSという言葉を聞いたことはありますか？ ウェブについて勉強を始めた方や中学や高校の時に学校で多少触れたとい方であれば、ある程度何に使えるものなのかはご存知かと思いま ...
続きを見る
ちょっと解説
インタプリタ方式とはプログラムが機械語に変換されながら実行されるという意味です。
また、別のプログラミング言語であるC言語などはコンパイル方式という方法が使われており、コードが機械語に変換されてから実行されるので速度が高速という特徴があります。
インタプリタ方式は実行速度でコンパイル方式のプログラミング言語には劣るのですが、実行した際にエラー箇所の確認(デバッグ)がしやすいなどの特徴があります。
JavaScriptの書き方と用語の解説
まずここでは『JavaScript』の書き方と基本的な用語についての説明をしていきます。
ここで解説することは基本的に他のプログラミング言語にも共通する部分がありますので、『JavaScript』だけというよりはプログラミング全体を理解するつもりで学習することをオススメします。
ファイルの拡張子
HTMLの場合は『.html』でCSSの場合は『.css』でしたがJavaScriptの場合は『.js』と拡張子を書いてファイルを保存しましょう。
JavaScriptの実行方法
まず『JavaScript』をファイルに記述して実行できる状態にしなければなりません。
そのためにはJavaScriptで記述されたファイルとは別でHTMLで記述されたファイルも必要になります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>JavaScriptの実行方法</title>
<script src="index.js"></script>
</head>
<body>
</body>
</html>console.log('JavaScriptの実行方法');
上の例のように『index.js』という名前のファイルと『index.html』という名前のファイルを同一の階層に作成して、『<script src="index.js"></script>』という風に記述してJavaScriptファイルを読み込みましょう。
そうすると『index.js』に記述されたJavaScriptを『index.html』を開くことによってブラウザ側で確認できるようになります。
ちょっと解説
上の例であげたようにindex.jsには『console.log('JavaScriptの実行方法');』と記述されていますが、これをブラウザで確認するためにはindex.htmlのファイルを開いた状態で、Macなら『command + option + i』、Windowsなら『F12』のキーを押すことによってデベロッパツールが利用できるようになります。
その中にある『Console』という欄にJavaScriptで記述した『console.log』の内容が表示されます。
コメントの書き方
『JavaScript』には2種類のコメントアウト(コメント)の方法があります。
一つは『/*〜*/』の中に記述するタイプと『//〜』のように隣接する形で記述する方法があります。
/* ここにコメントを記述します */ //ここにコメントを記述します
変数の書き方
変数とは値を代入できる箱のようなもので、箱(変数)に値を保存しておいて後からそれを参照する場合などに利用されます。
現在『JavaScript』の変数の書き方は3種類存在します。
ここでは変数の書き方と、代入方法、出力方法について学んでいきましょう。
上の記述例で書いたように『変数宣言キーワード 変数名 = 代入する値;』の形になっていることが分かるかと思います。
そのような形にして変数の代入を行い、『console.log(変数名);』でブラウザのコンソールに代入した値が出力されます。
文字を代入する場合は文字列を『'〜' (シングルクォーテーション)』か『”〜” (ダブルクォーテーション)』で囲みます。
また、数字の場合は裸のまま数を記述して代入します。
//変数宣言キーワード(var) 変数名 = 代入する値; var hoge = 'var'; //文字列”var”をhogeという変数に代入 console.log(hoge); //文字列”var”が表示される //変数宣言キーワード(let) 変数名 = 代入する値; let fuga = 'let'; //文字列”let”をfugaという変数に代入 console.log(fuga); //文字列”let”が表示される //変数宣言キーワード(const) 変数名 = 代入する値; const piyo = 'const'; //文字列”const”をpiyoという変数に代入 console.log(piyo); //文字列”const”が表示される let hiragana = 'あいうえお'; let katakana = "アイウエオ"; console.log(hiragana); //文字列”あいうえお”が表示される console.log(katakana); //文字列”アイウエオ”が表示される let number = 1; console.log(number); //数字の”1”が表示される
ちょっと解説
変数に値を代入する場合は『=』を使いましたが、よく勘違いされるのが数学の場合『=』は何々と何々が等しい(イコール)という意味を持ちますが、プログラミングでの『=』は代入という意味なので間違いのないように注意しましょう。
変数宣言キーワード(var)
『var』での変数宣言は、宣言した変数名と同じ変数名で宣言することが可能で、再代入も可能という特徴があります。
var hoge = 'var'; var hoge = 'a'; console.log(hoge); //文字列”a”が表示される hoge = 'b'; console.log(hoge); //文字列”b”が表示される
変数宣言キーワード(let)
『let』での変数宣言は、宣言した変数名で同じ変数名を宣言することが出来ず、再代入は可能という特徴があります。
let fuga = 'let'; let fuga = 'a'; //同じ変数名が使えないのでエラーになる fuga = 'b'; console.log(fuga); //文字列”b”が表示される
変数宣言キーワード(const)
『const』での変数宣言は、宣言した段階で変数名が定数として扱われ、宣言した変数名で同じ変数名を宣言することも出来ず、代入された値は再代入不可の状態になるという特徴があります。
const piyo = 'const'; var piyo = 'const'; //同じ変数名が使えないのでエラーになる piyo = 'var'; //再代入ができないのでエラーになる
定数
定数とはプログラム側で定まった固有の名前のことで、その内容を後から変更することや同じ名前で利用することはできません。
例えば『var』『let』『const』などはプログラム側で、定数の扱いになっているので、同じ名前で変数名を書くことは出来ません。
/* 『var』『let』『const』は定数なのでエラーになる */ var var = 'var'; let let = 'let'; const const = 'const';
変数を使って演算をしてみよう(四則演算)
変数がどのようなものなのかがある程度は理解できたと思いますので、ここでは数字を使って足し算や引き算などの簡単な四則演算をやってみましょう。
四則演算をすることによって変数の振る舞いを理解しやすくなりますので、面倒くさがらずにチャレンジしてみましょう！
足し算(加法)
算数でいうところの『1 + 1 = 2』を表現してみましょう。
let a = 1; let b = 1; let c = a + b; //『1 + 1』の結果が変数cに代入される console.log(c); //数字の”2”が表示される
引き算(減法)
算数でいうところの『2 - 1 = 1』を表現してみましょう。
let a = 2; let b = 1; let c = a - b; //『2 - 1』の結果がcに代入される console.log(c); //数字の”１”が表示される
掛け算(乗法)
算数でいうところの『2 × 2 = 4』を表現してみましょう
let a = 2; let b = 2; let c = a * b; //『2 × 2』の結果がcに代入される console.log(c); //数字の”4”が表示される
割り算(除法)
算数でいうところの『4 ÷ 2 = 2』を表現してみましょう
let a = 4; let b = 2; let c = a / b; //『4 ÷ 2』の結果が変数cに代入される console.log(c); //数字の”2”が表示される
配列の書き方
配列とは変数のように値を保存することができ、その値を複数保持できるという特徴があります。
例えば、『変数の書き方』のところで『変数は箱のようなもの』と説明しましたが、配列はその箱を複数持っておけるというイメージです。
let a = 'あいうえお'; let b = 1; let c = 2; let array = []; //空の配列を作成 array[0] = a; //配列の0番目の要素に変数aを代入 array[1] = b; //配列の1番目の要素に変数bを代入 array[2] = c; //配列の2番目の要素に変数cを代入 console.log(array[0]); //文字列”あいうえお”が表示される console.log(array[1]); //数字の”1”が表示される console.log(array[2]); //数字の”2”が表示される
上の例のように、配列の要素一つ一つには番号ふられており、左から順番に『0, 1, 2, 3, 4 ...』のようになっています。
値にアクセスする場合は『変数名[添字];』添字をブラケットで囲むように書くことで要素の中身を得ることができます。
ちょっと解説
普段数字を数える時は『1, 2, 3, 4, 5 ...』と数えて行くことが当たり前ですが、コンピューターの場合は『0』から数字を数えます。
この振る舞いは他のプログラミング言語でも使われる共通の概念なので、必ず覚えるようにしましょう。
多次元配列
多次元配列とは階層構造をもった配列のことです。
例えば配列の中に配列をもつということができ、『変数名[添字][添字];』のようにして要素の値にアクセスができます。
let array_01 = [1, 2]; //0番目と1番目の要素に数字の”1と2”を代入した配列を作成 let array_02 = [3, 4]; //0番目と1番目の要素に数字の”3と4”を代入した配列を作成 let array_03 = []; //空の配列を作成 array_03[0] = array_01; //配列の0番目の要素に変数名array_01(配列)を代入 array_03[1] = array_02; //配列の1番目の要素に変数名array_02(配列)を代入 console.log(array_03[0][0]); //数字の”1”が表示される console.log(array_03[0][1]); //数字の”2”が表示される console.log(array_03[1][0]); //数字の”3”が表示される console.log(array_03[1][1]); //数字の”4”が表示される
関数の書き方
関数とは命令をパッケージ化して一つにまとめることによって後から実行できるようにするための機能です。
例えば、プログラムで同じような命令を何度も書いていると良くないので、一つにまとめて実行する場合などに使用されます。
現在JavaScriptには二種類の関数の書き方があります。
function main() {
let string = '関数の書き方';
console.log(string);
}
main(); //文字列”関数の書き方”が表示される
main(); //文字列”関数の書き方”が表示される
let main = () => {
let string = '関数の書き方';
console.log(string);
}
main(); //文字列”関数の書き方”が表示される
main(); //文字列”関数の書き方”が表示される
上の例であげたように関数を書く場合が『function 関数名() {命令}』の形と『let 関数名 = ()=> {命令}』の形になっています。
引数
引数とは関数の実行の際に値を関数内で受け取れる機能のことです。
引数を受け取る時は関数作成時に仮引数を定義してから関数実行の時に引数を渡すようにしなければなりません。
function main(value) {
let string = value; //引数valueの値を変数stringに代入
console.log(string);
}
main('あいうえお'); //文字列”あいうえお”が表示される
main('あいうえお'); //文字列”あいうえお”が表示される
戻り値
戻り値とは関数実行の際に『return文』によって返される値のことです。
function main() {
let string = 'あいうえお';
return string; //文字列”あいうえお”を返す
}
let result = main(); //戻り値を変数resultに代入
console.log(result); //文字列”あいうえお”が表示される
コールバック関数
コールバック関数とはある特定の関数を呼び出すための関数です。
例えば、『A関数』を『B関数』の実行が終わった後に呼び出す場合などに使用されます。
function sub() {
console.log('sub関数');
}
function main(callback) {
console.log('main関数');
callback(); //sub関数が実行される
}
main(sub); //文字列”main関数”が表示された後に、文字列”sub関数”が表示される
連想配列の書き方
連想配列とはオブジェクトのことで『物』のように扱うことができます。
例えば『物』の状態(プロパティー)を定義したり、関数(メソッド)を定義することができます。
let hoge = {
a: 1,
b: 2
};
console.log(hoge.a); //数字の”1”が表示される
console.log(hoge.b); //数字の”2”が表示される
上の例のように『let 変数名 = {プロパティー: 値};』という形で記述します。
オブジェクトのプロパティーの値を得る場合は『変数名.プロパティー名』の形でアクセスできます。
プロパティー
プロパティーとはオブジェクトの状態を表したものです。
let hoge = {
a: 'あいうえお' //変数hogeのプロパティーaに文字列”あいうえお”
};
console.log(hoge.a); //文字列”あいうえお”が表示される
メソッド
メソッドとはオブジェクトが持っている関数のことです。
let hoge = {
a: function() {
return 'あいうえお'; //変数hogeのプロパティーaに文字列”あいうえお”を返す関数を定義
}
};
let fuga = hoge.a();
console.log(fuga); //文字列”あいうえお”が表示される
JavaScriptでHTMLを操作してみよう
ここからはJavaScriptでHTMLを操作する方法を学習していきます。
今まで得た知識を組み合わせながら、実践的な使い方を学んでいきましょう！
HTML(DOM要素)を取得してみよう
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTML(DOM要素)を取得してみよう</title>
</head>
<body>
<div id="wrap"></div>
<script src="index.js"></script>
</body>
</html>
let $wrap = document.getElementById('wrap'); //wrapというidのHTML要素を取得
console.log($wrap); //『<div id="wrap"></div>』と表示される
HTMLの内容を変えてみよう
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTMLの内容を変えてみよう</title>
</head>
<body>
<div id="wrap"></div>
<script src="index.js"></script>
</body>
</html>let $wrap = document.getElementById('wrap'); //wrapというidのHTML要素を取得
$wrap.innerHTML = '1';
console.log($wrap); //『<div id="wrap">1</div>』と表示される
Windowオブジェクトの機能を使ってみよう
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Windowオブジェクトの機能を使ってみよう</title>
</head>
<body>
<div id="wrap"></div>
<script src="index.js"></script>
</body>
</html>let width = window.innerWidth; //windowの横幅を変数widthに代入
let height = window.innerHeight; //windowの縦幅を変数heightに代入
console.log(width); //windowの横幅が数字として表示される
console.log(width); //windowの縦幅が数字として表示される
window.setInterval(function() {
console.log('あいうえお');
}, 1000); //一秒ごとに文字列”あいうえお”が表示される
時計を作ってみよう
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>時計を作ってみよう</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="wrap"></div>
<script src="index.js"></script>
</body>
</html>#wrap {
padding: 50px 0px;
color: #fff;
text-align: center;
background-color: #000000;
}let $wrap = document.getElementById('wrap');
function update() {
$wrap.innerHTML = new Date(); //日付データを取得して、wrapの中を書き換え
}
update();
window.setInterval(function() {
update();
}, 1000); //一秒ごとにupdate関数が実行される
まとめ
今回は初心者でもJavaScriptを理解できるように基本的な書き方や応用方法にして解説してまいりましたが、いかがでしたでしょうか？
一度、記事を読んだだけでは完全に理解できないかと思いますので、何度も読み直して、サンプルコードを実行してみることをオススメします。
HTML、CSSの勉強はある程度しているけどプログラミングの概念が上手く理解できなかったりして前に進めず不安な気持ちに押しつぶされそうになって、『自分にはプログラミングの才能ないんじゃ！？』とか『JavaScript勉強しなくてもHTML、CSSだけできたらいいじゃん』と思っている方がいるかもしれません。
ですが、JavaScriptが習得できなということは今後WEB業界で生き残ることは、まず不可能に近いです。
最初は理解できなくても、色々な書き方を目にするうちに大体『これは、こういう意味かな？』とか『こう書いたら、効率よく書けるよね』などがわかってくるはずです！
ですので、直ぐに諦めずに何度も挑戦して数を重ねていきましょう！！