Python関連のプログラミングを中心にやってきたこのブログですが、Pythonの話題と平行して他のプログラミング言語も扱っていこうと思います。そこで、近年とても重要な位置を占めるようになって人気の言語でもあるJavaScriptを扱っていきます。
JavaScriptは軽量でクロスプラットフォームのオブジェクト指向プログラミング言語です。HTML、CSSと合わせて、JavaScriptはWeb開発のコアテクノロジーの1つとなっているスクリプト言語です。
以前は、JavaScriptはクライアントサイドでのみ使用されていて、ブラウザ上でのwebページの動的な処理をするくらいでしたが、近年ではnode.jsのおかげで、サーバーサイドでも利用されるようになり、動的な効果やインタラクティブな動きを持つ現代のWeb開発、Webアプリケーションに不可欠なものとなっています。インターネット初期の頃と比べると隔世の感がありますね。
最近のWeb開発で利用されているReactやAngular、Vue.jsのようなフレームワークやライブラリはJavaScriptをベースにしているので、これらを活用するにはJavaScriptの内容をしっかり習得する必要があります。
これからJavaScriptを入門的な知識から順にしっかり学んでいきましょう。速習的に扱っていくので書籍やネットのドキュメントなどにも合わせて目を通すことをおすすめします。WebやHTMLの知識も別で学ぶ必要がありますね。
JavaScriptの実行環境を整える
まずはJavaScriptの実行環境を整える必要があります。といっても、他のプログラミング言語と違って難しいものはありません。ターミナルでコマンドなどを打って操作するような初心者に抵抗のあるようなものはありません。
ブラウザとテキストエディタ
用意するものは、webブラウザとテキストエディタです。該当するサイトからダウンロードしてインストールするだけのものです。
ここで利用するブラウザはGoogle Chromeを利用します。テキストエディタはAtomエディタを利用してみようと思います。他にはVisual Studio Codeでも構いません。このあたりはPythonのところでも触れました。使い慣れたエディタを用意しましょう。
ちなみに私のここでの環境はMac上でのものです。
作業ファイル – htmlファイル, jsファイル
作業ファイルの雛形のとして、ここではindex.htmlファイルとscript.jsのスクリプトファイルを作業ディレクトリの中に用意します。JavaScriptファイルの拡張子は.jsです。これらのファイルに加えて文字装飾などにcssファイルも必要になってきますが、ここでは使いません。
index.htmlファイルには次のような定型のコードを記述します。htmlの詳細については別で学習する必要があります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>JavaScriptの基礎</title>
</head>
<body>
<h1>JavaScriptの基礎</h1>
</body>
</html>
script.jsファイルは、今のところは何も記述しません。
このファイルをブラウザから開いて、テキストエディタのコードと並べて表示してみるとこうなります。
左側にエディタ(Atom)に記載したコード、右側にindex.htmlファイルををブラウザ(Google Chrome)で開いています。
右側のブラウザ表示の下側は、JavaScriptコンソールを表示しています。メニューの[表示]→[開発/管理]→[JavaScriptコンソール]を選択すれば表示されます。Macは[command]+[option]+[J]のキーを押しても表示されます。
このJavaScriptコンソールにはまだ何も表示されていません。
コードを書いてJavaScriptコンソールに表示してみよう!
それでは、初めてのJavaScriptコードを書いてみます。
JavaScriptコンソールに文字列を表示してみます。それにはconsole.log()を使います。
書き方はhtmlファイルに埋め込む方法と別のjsファイルに記述する方法があります。
htmlファイルにJavaScriptコード埋め込む
index.htmlファイルにJavaScriptコード埋め込んでみます。インラインスクリプトと言います。ここで、console.log()を使って、「Hello JavaScript!」と表示するコードを書いてみます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>JavaScriptの基礎</title>
</head>
<body>
<h1>JavaScriptの基礎</h1>
<!-- JavaScriptコード -->
<script type="text/javascript">
console.log("Hello JavaScript!");
</script>
</body>
</html>
ここでは</body>閉じタグの直前に<script>要素でタグで挟んでconsole.log()を記述しています。文末にセミコロン(;)を記述します。セミコロンは省略しても動きますが、コードスタイルとしては良くないとされていますので記述しましょう。
ファイルを保存して、ブラウザを更新します。
JavaScriptコンソールに「Hello JavaScript!」と表示されているのがわかります。右側にはコードがindex.htmlファイルの11行目を実行していることが示されています。
外部ファイルで読み込む
今度は外部ファイルのscript.jsにJavaScriptコードを定義して、インポートする方法を試してみます。
script.jsファイルに次の1文を記述して保存します。
console.log('Hello JavaScript!!!');
このファイルをindex.htmlファイルから読み込みます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>JavaScriptの基礎</title>
</head>
<body>
<h1>JavaScriptの基礎</h1>
<!-- 外部ファイルとして読み込む -->
<script type="text/javascript" src="script.js"></script>
</body>
</html>
<script>要素に、srcを使って外部のスクリプトファイルのパスを指定して読み込んでいます。
ファイルを保存して、ブラウザを更新するとこうなります。
JavaScriptコンソールに「Hello JavaScript!!!」と表示されているのがわかります。今度は右側に外部ファイルであるscript.jsの1行目のコードを実行していることが示されています。
このようにhtmlのレイアウトとスクリプトコードを分離することで、コードの再利用がしやすくなったり、htmlファイルの見通しが良くなるというメリットがあります。
アプリ開発ではこのようにJavaScriptファイルを外部化して行います。ただし、コードが短い場合などは、外部化することが冗長になるのでインライン記述するなど状況に応じた使い分けも必要となります。
なお、今回のコードはJavaScriptコンソールの表示されるだけで、ブラウザ上の表示には何も起こらないものとなっています。
まとめ
JavaScriptは軽量でクロスプラットフォームのオブジェクト指向プログラミング言語で、Web開発のコアテクノロジーの1つとなっているスクリプト言語です。
MDNのサイトにJavaScriptのドキュメントがあります。

近年、クライアントサイドだけでなくサーバーサイドでも利用されるようになり、重要な人気の言語になっています。
ここではJavaScriptを学んでいく為に、JavaScriptの実行環境を整え、Google ChromeのJavaScriptコンソールを利用して、実行結果を確認しました。
JavaScriptコードの文末にはセミコロン(;)を記述します。
JavaScriptコードは、HTMLファイルにインライン記述で埋め込む方法と、外部ファイルに記述して読み込む方法がありますが、アプリ開発には外部ファイルに分離して開発するのが通常の方法です。