【JavaScript入門】JavaScriptを始めよう！実行環境構築とコンソール表示

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の実行環境を整える
1. ブラウザとテキストエディタ
2. 作業ファイル – htmlファイル, jsファイル
コードを書いてJavaScriptコンソールに表示してみよう！
1. htmlファイルにJavaScriptコード埋め込む
2. 外部ファイルで読み込む
まとめ

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>

ファイルを保存して、ブラウザを更新するとこうなります。