JavaScriptとは?初心者向けにできることや基本的な書き方を解説

  • 2021.12.24
       
JavaScriptとは?初心者向けにできることや基本的な書き方を解説

JavaScriptとは、動的なWebページを作成でき、ほとんどのWebサイトで取り入れられているプログラミング言語です。
通常はブラウザ上で実行され、JavaScriptを使えば、ユーザーの操作に応じたコンテンツの表示やブラウザ上で表示される地図やグラフィックアニメーションなども表示できます。
JavaScriptは企業やユーザーからの評価も高く、今も廃れること無く使われています。
この記事では、初心者向けにJavaScriptについて、できることや例を交えて基本的な書き方までを解説します。

JavaScriptとは?

先述したように、JavaScriptとはブラウザを「動かす」ためのプログラム言語です。
例えば、Webサイトを閲覧した際、ポップアップ画面のようなWebサイト上でアニメーションが動いていたり、入力フォームが設置されているのを見たことがあるでしょう。
このようにブラウザを動的にするのがJavaScriptで、「ユーザーの操作で内部処理が発動する」というWebサービスにとってとても重要な機能を備えています。
JavaScriptは非常に凡庸性が高く、一番身近なのはHTMLやCSSなど、他のプログラミング言語と組み合わせて使用することで、ブラウザ上で動作させるプログラム(クライアントサイド・スクリプト)ですが、近年では、Node.js(ノードジェイエス)といってブラウザ上だけでなくサーバーでも動くJavaScriptも普及しています。
また、JavaScript言語を使うための開発環境も充実してきており、スマホアプリからデスクトップアプリまで、幅広く開発できるようになりました。

JavaScriptの歴史
JavaScriptはインターネットが普及し始めた1990年代はじめにNetscape Navigatorというブラウザ専用に開発されました。
当初の名称はLiveScriptでしたが、当時人気のあったプログラミング言語「Java」を開発した企業との提携に伴い、現在の名称に変更されました。
当時はHTMLとCSSだけのWebサイトが一般的でしたが、JavaScriptによって表現の幅が広がると注目されました。
1996年にMicrosoftのInternet Explorer3.0に搭載され、1997年には、国際標準化団体ECMAインターナショナルがJavaScriptのコア部分を標準化したこともあり、爆発的に普及し、その後もさまざまなライブラリやフレームワークが続々と誕生し、より便利に活用できるようになっていきました。
2010年以降はサイト上に動きを追加するクライアントサイド・スクリプトだけでなく、サーバーサイドの実行環境が整理され、バックエンドシステムやアプリ開発などでも使用されるようになりました。

ブラウザで実行される3つの言語
Webページを開いた時、クライアント側のブラウザは以下3つの言語を翻訳して、ページを表示させます。
HTML・・・「見出し」や「段落」といった構造と意味を持たせる言語
CSS・・・HTMLに「文字や背景の色」や「余白」といったデザインやレイアウトを設定するための言語
JavaScript・・・「入力フォームの表示」や「コンテンツの操作」、「地図」など、様々な動的コンテンツを作成する言語
「HTML」、「CSS」、「JavaScript」の順で実行されます。

JavaScriptとJavaの違い
JavaScriptの歴史で名前の挙がった「Java」ですが、どのような違いがあるのか見ていきましょう。
Javaは、JVM(=Java Visual Machine)という仮想マシン上で動くプログラミング言語で、Webサービスやシステム開発などに利用されています。
Javaは、どのようなOSを使っていても、JVMが入っていなければ動作しません。
また、実際に動かすにはコンパイル(プログラミング言語をコンピュータが理解できる言語に変換すること)が必要です。
一方、JavaScriptは仮想マシンを使う必要はなく、コンパイルも基本的に不要であるため、手軽さを重視して開発された言語といえます。

JavaScriptの将来性
ここまででJavaScriptは、本来Webに動きを与えるプログラミング言語でしたが、現在ではアプリやゲームなど、幅広くい分野で活用され、多くのエンジニアにとって非常に将来性の高い言語であるということが、おわかりいただけたでしょうか?
JavaScriptは汎用性が高く、幅広い分野で使われますが、その中でも需要が高いのはフロントエンド部分の設計・開発です。
また、WEBアプリの開発において不可欠な点やさまざまなアプリケーションを作れるという点で需要が高く、ほかの言語を扱うエンジニアよりも平均年収が高いのです。

JavaScriptでできること

WEBサイトに「動き」をつける
HTML、CSSのみでサイトを作ることはできますが、JavaScriptを使えば、表示されているボタンやメニューにアニメーションや効果を追加することで、動きが出て、より魅力あるサイトを作ることができます。

ユーザー操作で内部処理が発動する
JavaScriptは、ユーザーがブラウザ上で行った操作によって、さまざまな処理を発動させることができます。
検知できる操作には、下記のようなものが挙げられます。
・マウス移動
・フォーム送信
・フォーム入力値が間違っている場合、申し込みボタンを押した際エラー項目を表示する
・住所取得ボタンを押すと、郵便番号から自動的に住所を入力する

サーバーサイドの開発
Node.jsなどの出現によって、サーバーサイドの開発でも使用されるようになり、フロントエンドもサーバーサイドも両方JavaScriptで書くといった開発も可能になりました。

IOS/Android用アプリも開発可能
React NativeやAppcelerator、MonacaなどによってAndroidとIOS両方で利用が可能なスマホ用アプリの開発も可能になり、さまざまなアプリの開発に使われています。

非同期通信
非同期通信とは、サイト自体を更新することなく一部分だけの画面更新ができるというものです。
例えば、Google Mapではいちいち更新せずとも、フォーカスしている位置をずらすだけで、足りない部分だけを通信し、新しい情報が浮かび上がってきます。
この処理に、非同期処理が使われています。
ユーザーのストレスを軽減させることで、ユーザー体験の向上にも繋がります。

基本的な書き方

ここからはJavaScriptがどのようなプログラミング言語なのかをより理解するために、基本的な書き方について紹介していきます。
JavaScriptは非常にシンプルで、メモ帳やエディタというテキスト編集ソフトを使い、HTMLの中に命令を書いてブラウザで表示させればすぐに実行されるので、すぐに学習が始められます。

必要なアプリケーション
JavaScriptを学習するにはプログラムを記述する「テキストエディタ」というアプリケーションと、「ブラウザ」というWebサイトを閲覧するアプリケーションの2つが必要です。
JavaScriptは基本的にはブラウザで動くスクリプト言語であるため、テキストエディタで命令を記述し、ブラウザで実行して確認するという流れになります。
ちなみに今回はWindowsにもとからインストールされている「テキストドキュメント」を使用します。

エディタ
エディタとは、テキストを編集するソフトウェアのことです。
WindowsやMacに標準搭載されているソフトウェアでも書けますが、主にメモ帳のような使い方を想定して作られているため、JavaScriptの開発には不向きです。
それぞれのプログラミング言語に適したエディタを用意しましょう。

おすすめのエディタ
JavaScriptに限らず、効率的にプログラミングを行うにはエディタが必要です。
おすすめのエディタは、Microsoft社が開発した「Visual Studio Code」は拡張機能が豊富で、自分好みにカスタマイズできます。
また、GitHub社が開発した「Atom」も人気です。

実際に書いてみよう!
それでは、実際にプログラムを書いてみましょう。
JavaScriptの記述には、HTMLファイルの中に書く方法と、HTMLファイルとは別にjsファイルを作って、HTMLに参照させる方法があります。
どちらの方法でも動きますが、はじめはHTMLファイルの中に書き込む方法がいいでしょう。
1.テキストファイルを作成する
デスクトップ画面右クリックするとメニューが表示されるので「新規作成」を選択し、「テキストドキュメント」を選択します。ファイル名は、仮にhelloとしておきます。

2.コードを書き込む
テキストドキュメント内にコードを書き込んでいきます。

以下のコードをそのままコピぺで構いません。

HTML ファイル上に書く合、ソースコードの赤字の部分(まで)がJavaScriptです。

でJavaScriptの命令を挟むというのが書き方の基本です。
“”(ダブルクォーテーション)で挟まれた”Hello”の部分は文字列を表します。

3.HTMLファイルを作成する
作成したファイルをHTML形式にして保存します。
名前をつけて保存を選択し、ファイル形式を「テキストファイル」から、「すべてのファイル」にします。
次に、ファイル名の後ろに.htmlをつけて完成です。

デスクトップ画面に戻り、作成したhtmlファイルを開いてみましょう。
以下のようなポップアップが表示されれば成功です。

これで基本的なJavaScriptを使ったHTMLファイルができました。

終わりに

ここまでJavaScriptについて、できることや基本的な書き方などを解説してきましたがいかがでしたか?
JavaScriptはブラウザさえあれば実行でき、難しい部分を内部で処理してくれるので、プログラミング初心者にもオススメです。
そしてJavaScriptを習得できれば、他の言語でも共通する部分が多いため、Webサイト作成時以外でも非常に役に立ちます。
また、JavaScriptの基礎が身につけば、Webページが動くのを確認しながら学べ、楽しみながら学びを進められるでしょう。

     

Otherカテゴリの最新記事