この間、JavaScriptの学習ができるWeb漫画を読んでしっかりと学習をしたので、実際にコードを書いてみようかと思います。JavaScriptってなんぞや？とお思いの方もいるかと思いますので、まずは基礎知識からみていきましょう。
ちなみに、Web漫画はこれです。
1. JavaScriptとは？
JavaScriptは、さまざまな環境で動作する軽量なプログラミング言語です。主にWebブラウザ上で使われており、Webページに動きをつけたり、計算をさせたりと色々なことができます。
2. JavaScriptの使い方
①HTML上で読み込む
HTML上で動かす場合は、2つの書き方があるそうです。
1つ目はJavaScriptをそのままHTMLの中に書く方法で、<script></script>で囲まれた部分にJavaScriptのコードを書いていきます。
<script type="text/javascript">
// ここにコードを書く
</script>
2つ目は外部ファイルとして読み込む方法で、HTMLとは別のファイルにJavaScriptを書いておき、それを読み込みます。
<script type="text/javascript" src="JavaScriptのファイルパス"></script>
②ブラウザのコンソールを使う
手軽にJavaScriptを動かして、試してみたい時にはブラウザで用意されたコンソールに打ち込みましょう。例えば、Google Chrome の場合、以下のようなコンソールです。このように打ち込んでいけばJavaScriptを試すことができました。
③JavaScript練習用ツール
ブラウザのコンソールではないのですが、JavaScriptを試すことができるサービスはいくつかあります。今回、私はJavaScriptを練習するのに「CODEPEN」というサービスを使用しました。
アカウント登録の必要がないので気軽にサービスを使えるところがお気に入りです。
では実際に書いていきましょう。
3. データ構造
・配列
配列は、いくつかの値を一緒にまとめておくための構造です。
var a = [8, 17, 13];
数値がコンテナに格納されているイメージですね。
・オブジェクト
配列では番号でアクセスしましたが、今度は名前でアクセスできるオブジェクトを書いていきます。
オブジェクトとは、その名の通り「もの」です。例えば、本であれば、タイトル、ページ数、著者など、様々な情報を持っています。それの情報が組み合わさって、本というひとつの「もの」ができているわけです。ここでも同じように、それらの情報をプロパティとしてオブジェクトに登録しておくことで、現実世界と同様に扱えます。
実際に書いてみました。
var textbook = { title: "shunとサル", page: 1, author:"shun" }; // 1行でも書けるし、
textbook = { //複数行でも書ける
title: "shunとサル",
page: 1,
author:"shun"
};
ここから、実際に情報を取り出すときは次のように書きます。
var textbook = { title: "shunとサル", page: 1, author:"shun" };
textbook.title; // => "shunとサル" (.の先に要素の名前を書く)
textbook["page"]; // => 1 ([]の中に文字列で要素の名前を書く)
要素の変更・追加もできます。
var textbook = { title: "shunとサル", page: 1, author:"shun" };
textbook.title = "shunとサルは仲良し" // 要素の変更
textbook.price = 10; // 要素の追加
4. 条件文
JavaScriptのプログラムは、基本的に上から順番にすべて実行していくのですが、条件によって実行のフローを変えたいことがあります。そこで出てくるのが条件文です。
・if文とif-else文
if文は、条件式（比較演算などの true/false を返すもの）の結果に応じて実行のフローを変更します。
var a = 1;
var b = 2;
if(a < b) { // a < b なら中身を実行
a = b;
}
このときの実行フローは、次のような形になります。
5. まとめ
今回は、JavaScriptの基本知識の説明と、簡単なコードを書きました。少しややこしい部分もありましたが、落ち着いて冷静に考えると、どれもさほど難しい内容ではないと思います。ただ、情報量が多いので、今後もインプットとアウトプットをバランスよくしていかなければいけないと思います。
ですが、JavaScriptはおもしろいことがわかりましたので、引き続き学習をしていこうと思います。それでは！