2. 環境構築

Tweet

本章では、javascriptを使うための環境構築について説明します。

え？apacheをインストールして、apacheの公開ディレクトリにjavascirptのファイルを置いてブラウザで動作確認するんじゃないの？と思った方は、遅れています。

最近は、そんなことをしません。

node.jsを使います。

node.jsとは何か？ということについて、ググれば概ね、パッケージ管理ソフト、と言えますが、C言語しか弄っていない人にはパッケージ管理ソフトというものがそもそもピンとこないかもしれません。

でも、大丈夫(図1)。

図1 「でも、大丈夫」さわやかな取り立てのCM

使ったほうが理解は早いです。

そして、便利さに感動します。

pythonを使ったことがある人にとっては、pipみたいなもの、と思ってもらえればよいかと思います。

node.jsのインストール

https://nodejs.org/ja/にブラウザでアクセスします。

上記のリンク先から、12.18.3 LTSをダウンロードします(図2)。

図2 12.18.3LTSのダウンロード

ダウンロードしたnode-v12.18.3-x64.msiをダブルクリックして実行します。
nextボタンを押下します(図3)。

図3 Node.js Setup画面

「I accept the terms in the License Agreement」にチェックをつけて、Nextボタンを押下します(図4)。

図4 End-User Licence Agreement画面

インストールするディレクトリを選択します。変更がなければデフォルトのままでOKです(図5)。

図5 Destination Folder画面

インストールモジュールを選択します。デフォルトではすべてインストールされるので、そのままNextボタンを押下します(図6)。

図6 カスタマイズ画面

いくつかのモジュールは、C/C++のコンパイラが必要になります。Automatically…と書かれているチェックボックスをつけると必要なツールを自動的にダウンロードしてくれます。
今回はチェックをつけずにNextボタンを押下します(図7)。

図7 Tools fot Native Modules画面

Installボタンを押下します(図8)。

図8 Ready to install Node.js画面

管理者権限を求められるので、「はい」を選択します。

インストールが完了すると図9の画面が表示されます。
Finishボタンを押下して、インストールを終了します。

図9 インストール完了画面

node.jsの動作確認

コマンドプロンプトを起動して、以下のコマンドを実行してみます。

node -v

12.18.3と表示されれば、インストールできています(図10)。

図10 node -v実行画面

ここが衝撃

javascirptというと、従来はHTMLファイルに以下のようなコードを記述して、ブラウザで実行して確認することが多かったと思います。

<script>
    console.log("hello world!");
</script>

そのため、本質とは違うHTMLファイルを書いて、その中にスクリプトを埋め込んで、ようやくテスト！
というのがすごく面倒だったと思います。

特にpythonやphpなどインタプリタ系の言語に慣れている方は面倒だったのではないかと思います。

node.jsはコマンドラインからjavascirptを実行できます。
試しにやって見ましょう。

まず、コマンドラインを起動して以下のコマンドを実行します。

node

すると、入力待ちになると思います。
以下の一文を入力してenterキーを押してみましょう。

console.log("hello world!");

図11のような実行結果は得られたでしょうか？

図11 コマンドラインから実行した結果

node.jsはjavascriptをインタプリタとして実行してくれます。これは便利!

コマンドラインから実行したなら、次はファイルからの実行です。

任意のパスにjavascriptのファイルを作成して、次のスクリプトを書いてみましょう。
ここでは、ファイル名をC:\Users\konishi\typescriptSample\hello.jsとしています。

console.log("hello world!");

次に、コマンドプロンプトを起動して以下のコマンドを実行してみましょう。

cd C:\Users\konishi\typescriptSample
node hello.js

図12のような実行結果を得られたと思います。便利ですね。

図12 コマンドラインからスクリプトファイルを実行した結果