JavaScriptは、数あるプログラミング言語の中の一つです。
一般的に、動的なWebページやアプリを開発する際に使われてるというイメージがありますが、時代と共に進化していき、今ではJavaScript一つとってもできることは多様です。

今回は第一回目として、そもそもJavaScriptとは何か、JavaScriptでどのようなことができるのか紹介していきます。

このJavaScript入門シリーズでは、これからJavaScriptを学びたい初心者の人向けに、内容を掘り下げながら、順を追って解説していきます。

「これからJavaScriptの学習をはじめたい」
「そもそも何から始めたら良いのか分からない」
「初心者向けの学習資料が少なくて困っている」

上記に当てはまる方は、ぜひ参考にしてみてください。

プログラミングとは

プログラミング言語
そもそもプログラミングとはなんでしょうか。

「プログラミング」とは、コンピューターに処理させるための指示（プログラム）を作成する作業のことです。プログラムを作成する際に用いられるのが、「プログラミング言語」です。

作成したプログラムは、「言語処理系（プログラムをコンピューター上で実行するためのソフトウェア）」を通して、コンピューターに指示を与えます。最終的に、このような流れでソフトウェアが開発されていきます。

もう少し日常生活でプログラムをイメージしてみましょう。料理のレシピを想像してみてください。

あるレシピを参考に、カレーを作るとします。
説明に沿って、野菜や肉を切り、切った具材を炒めたり、煮込んだりしていきます。これを順番に行っていくと、最終的にレシピ通りにカレーが出来上がるはずです。

プログラムは料理のレシピと似ていて、一つの成果物を作るための指示の集合ということになります。

JavaScriptの歴史

JavaScriptロゴ
JavaScriptは、Webサイトのブラウザ上で動くプログラミング言語の一つです。

元々は、1995年にFireFoxの前身であるNetscapeというブラウザにプログラムを加えるために生まれました。その後、 Google CromeやInternet Explorerなど、さまざまなブラウザに搭載される中で、標準的な言語の仕様が定まりました。

このJavaScriptの標準言語仕様を「ECMAScript」と呼び、略してESと呼ばれることもあります。ECMAScriptは時代とともにバージョンアップしており、例えば「ES2021」または「ES11」のように、バージョンがリリースされた年で表記されています。

他のプログラミング言語との違い

JavaScriptとJavaは違う言語

時々、JavaScriptのことをJavaと略す人がいるように、JavaScript = Java と考える人がいますが、これらはまったく別の言語です。

当時からプログラミング言語として人気のあったJavaに便乗して、LiveScriptという名前からJavaScriptという名前に変更されたという経緯があります。

実際には、JavaScriptとJavaでは、プログラムの記述方や仕組みが異なるため、混同しないように注意が必要です。JavaScriptを省略する場合には、JSと記述するようにしましょう。

JavaScriptとPHPの違い

JavaScriptとPHPは、どちらもWebサイトに動的な機能を加えるために使われています。

その中でもJavaScriptは、フロントエンド言語と呼ばれており、Webブラウザ側で処理が行われます。
一方でPHPは、バックエンド言語と呼ばれており、Webサーバー側で処理が行われることが大きな違いです。

例えば、ショッピングサイトに訪問したとします。
季節のおすすめやセール情報などの画像がスライド式で表示されているのを見たことがあるのではないでしょうか。
このように画像を一定時間ごとに切り替えることができるのがJavaScriptです。

また、ショッピングを終えて支払いを行うために、ユーザーIDやパスワードを入力して会員専用ページにログインするとしましょう。
ここで入力したユーザーIDとパスワードをサーバー側で受け取り、入力した情報が正しいか判断し、正しければ会員専用ページに移動させることができるのがPHPです。

このように、Webサイトの中でもページの表側で動作しているのがJavaScript、裏側で動作しているのがPHPという違いがあります。

補足ですが、WordPressは、PHPで開発されているCMS（コンテンツマネジメントシステム）です。
WordPressを深く知りたい人や、テーマの開発を行いたい人は、PHPを学んでいくのもおすすめです。

JavaScriptでできること

JavaScriptは、主にWebブラウザ内で処理を行うためにクライアントサイド（フロントエンド言語として）で使われています。

一般的には、クライアントサイドで使用されるJavaScriptですが、Node.jsと言われる環境を使うことで、JavaScriptをサーバーサイドで動かすことができます。

JavaScriptでできることは多岐に渡りますが、まずはフロントエンド言語としてJavaScriptの使い方を身につけることをおすすめします。

では、具体的にJavaScriptではどのようなことができるのでしょうか。
フロントエンド開発では、「HTML」「CSS」「JavaScript」がお互いを補う形で用いられています。HTMLは、ブラウザで表示するコンテンツや構造などを表現し、CSSは、そのコンテンツの色を指定したり大きさを変えるなどのスタイルを定義します。

そして、JavaScriptは、コンテンツやスタイルに動きを付けるような役割があります。例えば次のようなことが可能です。

・Webサイト上でコンテンツがクリックされたら、コンテンツの色を変える
・ページがスクロールされたら、ポップアップを表示する
・画像のスライドショーを再生する
・Cookieを操作して、Webサイトに訪問したユーザーの情報を取得する
・Webサーバーにフォームのデータを送信する

いかがでしょうか。
普段私たちが目にしているWebサイトも、JavaScriptでできている動きがたくさんあることがイメージできるのではないでしょうか。

デベロッパーツールを使ってみよう

さいごに、ブラウザでJavaScriptの検証をしてみましょう。

Google Chromeのデベロッパーツールを使うと、JavaScriptを書いたり、反応を見ることができます。使用方法は至ってシンプルです。

まず、ブラウザでページを開き、画面上で右クリックをし、「検証」を選択します。JavaScriptの検証を行うため、「Console」をクリックします。

Developer Tools

これで準備完了です。

実際に以下のプログラムを書いて、実行してみましょう。ブラウザ上に文字を表示するプログラムですが、ここではコード内容を理解していなくても問題ありません。

const hi = 'Hello, World!';

function sayHi() {
  document.write(hi);
}

sayHi();

上記のコードをコピーしたらDeveloper Toolsの余白部分にコピーしてEnterキーを押してください。

console

画面左上に「Hello, World!」と表示されることが確認できました。

このように、Developer Toolsを用いることで、WebページののHTMLの構造やスタイルの確認、JavaScriptでの検証などができるようになります。

まとめ

今回は、JavaScriptとは何か、歴史や特徴などを解説しました。

JavaScriptは、ブラウザ専用の言語として誕生しましたが、今ではもっとも広く利用されているフロントエンド言語として確立しています。JavaScriptは凡用性が高いだけでなく、見た目でも変化が分かるため、楽しく学びやすい言語でもあります。

一方で、使いこなすには幅広い知識が必要のため、これを機にしっかりと学んでいきましょう。まずは、はじめに今回ご紹介した「Hello, World!」を実際に書いて、JavaScriptに触れてみてください。

合わせて読みたいJavaScript事前知識シリーズ

第1回：はじめてのJavaScript（当記事）
第2回：プログラムを実行する準備
第3回：JavaScriptの構造
第4回：コードを書く時の基本ルール
第5回：コメントの書き方