.net column

.NET開発者のためのブログメディア
C# プログラミング

Javascriptとは?実行環境の作り方も紹介!

2020年08月27日

SE
JavaとJavascriptは同じ言語だと思っていました。

PM
よく間違えられますが、両者は全く別の言語です。では、詳しく見ていきましょう。

javascriptとは?

javascriptは、主にWebサイトの通信やユーザーの入力を受け取り表示を変更するなど、動的処理に使われているプログラミング言語です。様々なWebサイトで、javascriptは利用されています。

javascriptはWeb限定の言語だと誤解されがちですが、他にもスマホアプリの開発など、多岐にわたって利用することが出来ます。また、よくある誤解としてJava言語と誤解されがちですが、全く別の言語です。

1995年にJavaが目立っていたことを受け、元々の「LiveScript」から「JavaScript(=javascript)」に改名したことが由来のようです。

この記事では、javascriptで出来ることを紹介したのち、javascriptをコンソールで実行する実行環境構築の方法を紹介します。

javascriptでできること

Web上での非同期通信処理

Ajaxという通信のための仕組みを用いることで、javascript上で非同期通信を行うことが出来ます。非同期通信というのは、Webサイトのレンダリング(画面を描画する処理)をしている間に裏で通信をすることです。

通信中にレンダリングが出来ずに画面が真っ白になってしまう同期通信と比べ、ユーザーにストレスを与えません。

この非同期通信は、Google Mapで最新の地図を受け取ったり、Amazonで検索結果をデータベースから受け取ったりするために使われます。

Web上での動的処理

動的処理は、近日のWebサイトで見かける、ユーザーの入力に対して表示、挙動が変化するレスポンシブデザインを実装するために必要になります。

例えば、パスワードの入力欄で8文字以上入力したらOKと表示したり、検索結果に基づいてデータ群の中から必要なものだけを抽出して表示したり、といったことをjavascriptで実装できます。

javascriptでHTMLの構造に干渉するためには、ReactやJQueryといったライブラリや、Vue.jsといったフレームワークを用います。

実行環境構築を楽に!node.jsを紹介

javascriptを実行したいだけであれば、Windows(wscriptでも、Mac(osasscript)でもデフォルトで実行環境は存在しています。

しかし、ここではnode.jsを用いた環境構築を推奨し、紹介します。

Node.js はスケーラブルなネットワークアプリケーションを構築するために設計された非同期型のイベント駆動の JavaScript 環境です。

https://nodejs.org/ja/about/

とされています。

先ほど「javascriptは非同期通信が出来る」と述べましたが、Node.jsは非同期通信を簡潔に書くためのライブラリです。この項では、Node.jsを用いるメリットを示します。

パッケージマネージャが付属している

Node.jsには、「npm」(node package manager)であったり、少し新しい「yarn」(yet another resource negotiatior)の二つのパッケージマネージャが付属しています、これらを用いて、javascriptで利用できるライブラリを管理でき、多くのOSで互換性を持って実行環境の構築を容易に行うことが出来ます。

そのため、Web開発を行う際にはNode.jsのnpmまたはyarnを用いて実行環境構築することが普遍的な方法となっています。

人口が多い

Web開発者の人口はどんどん上昇しており、比例してNode.jsを利用する人の人口も増えています。国内外問わずそうなっているため、Node.js自体が日本製でないにもかかわらず、Node.jsで用いることが出来る様々なライブラリには日本語に翻訳された公式ドキュメントがついていますし、いくらでも日本語の解説記事を見つけることが出来ます。

つまり、人口が増えていることにより情報収集や新機能の開拓が非常に楽になっている、というメリットがあります。

javascriptの実行環境構築

javascriptは、Node.jsを用いることでC言語やJava言語のようにコンパイルを行い、コンソール上で出力を行うことが出来ます。いきなりWebのjavascriptに触れるとWebのこととjavascriptの文法構造を同時に勉強することになってしまうため、まずはjavascript単体が動く実行環境を作っていきましょう。

筆者の実行環境はWindows 10 Homeですが、MacOSやLinux系でも同じような手順で実行できます。

node.jsをダウンロードする

先ほど示した、node.jsをWindows上にインストールします。まず、インストーラーをダウンロードするために、以下のサイトにアクセスしてください。

Node.js ダウンロード

「xx.xx.xx LTS 推奨版」(xには何らかの数字が入っています)と書かれているボタンをクリックし、ダウンロードします。.msiファイルがダウンロードされますので、クリックして実行します。

Node.jsをインストールする

実行したら「Welcome to Node.js Setup Wizard」といった表示が出てきますので、「Next」を押します。次にEnd-User License を確認してチェックを入れたら「Next」を押します。インストール場所は、問題が発生した時それが複雑になる場合があるため、何か変える必要がある場合以外は変えない方がいいでしょう。

「Custom Setup」は何も変えずに「Next」を押して大丈夫です。次の「Tools for Native Modules」はネイティブ拡張の開発に必要なツール類をインストールするかを選択しますが、通常は不要です。チェックしないまま「Next」を押します。最後に「Install」を押して、しばらく待ちましょう。

「Completed the Node.js Setup Wizard」と出てきたらインストール、実行環境は完成です。

実際に実行してみる

任意のディレクトリに「test.js」というファイルを作って、実際に実行してみましょう。まずそのディレクトリまで移動する必要があるため、Windows + Rキーを押して「ファイル名を指定して実行」というウインドウが出てきたら、
cmd
と入力してEnterを押します。

黒背景に白い文字が書いてある「コマンドプロンプト」と呼ばれるウインドウが出てきますので、とりあえずファイルを作ってみましょう。
notepad test.js
と入力してEnterを押します。

「ファイル「test.js」が見つかりません。新しく作成しますか?」と出たら「はい」を押します。メモ帳の画面が開きますので、
console.log(""Hello, World!!"");
と入力して、ウインドウ左上の「ファイル」から「保存」を選びます。

そうしたらコマンドプロンプトに戻り、
node test.js
と入力してEnterを押します。

Hello, World!!
と出力されたら成功です。今回使ったconcole.logという関数は実はnode.jsによって定義されたもので、通常のjavascriptはこういった風にコンソールに出力を行うことが出来ません。

ですがNode.jsを使ってnodeコマンドを用いることで、Node.jsで定義された出力関数を用い、javascriptの簡単な練習や実行が可能になります。これで、実行環境構築から簡単なプログラムの実行までが完了しました。

SE
毎日使っているWebサイトで利用されているのが、Javascriptだったのですね。

PM
はい。私たちがストレス無しにWebを利用できるのもJavaScriptのおかげです。

javascriptでWebプログラミング!

今回は、javascriptを用いてできることや、Node.jsの紹介、そしてjavascriptをコンソール(=コマンドプロンプト)上で実行する実行環境構築の方法の紹介をしました。Node.jsを使った実行環境が出来てしまえばあとはどんどん情報を得て、javascriptで色々なWebサイトを作っていけます。今回紹介したことを基礎にして、Webプログラミングを極めていきましょう!


.NET分野でのキャリアアップをお考えの方は、現在募集中の求人情報をご覧ください。

求人一覧

また、直接のエントリーも受け付けております。

エントリー(応募フォーム)