JavaScript（ジャバスクリプト）は、インターネット上のウェブサイトを作るためによく使われるプログラミング言語です。
私たちが日々見ているウェブサイトの多くは、JavaScriptを使って作られています。
この記事では、JavaScriptがどんな言語なのか、何ができるのか、基本的な書き方や学び方について、やさしく説明します。
- 現役のフルスタックWebエンジニア
- もちろん JavaScript も得意
- プログラミングスクール講師として多くの受講生に JavaScript をレクチャー
初心者に向けてわかりやすく説明することが得意ですので、はじめて JavaScript につい知りたいという方でも大丈夫です！
それではみていきましょう！
JavaScriptとは
JavaScriptは、ウェブブラウザで使われるプログラム言語です。
ウェブサイトを見るときに、画面に突然現れる小さいウィンドウや、写真が次々に変わるような動きがあるでしょう。
これらはJavaScriptが指示を出して動かしています。
最近では、ウェブサイトだけでなく、スマホのアプリやパソコンのアプリにも使われています。
JavaScriptは、1996年に人気が出始め、ウェブページをもっと活動的にするために使われるようになりました。
例えば、ボタンをクリックすると新しいウィンドウが開いたり、写真が自動で次々に表示されたりする機能があります。
また、ウェブサイトの裏側で動くシステムやアプリの開発にも使われるなど、非常に広い範囲で使える言語です。
JavaScriptは初心者におすすめのプログラミング言語
JavaScriptは、初心者にもおすすめのプログラミング言語です。
なぜかというと、動きのあるプログラムを作るのに使われるけれど、始めるのはとても簡単だからです。
この言語を使うためには、コードを書くためのエディタ（書き込みソフト）と、インターネットを見るためのブラウザ（例えば、Google ChromeやInternet Explorer）があれば大丈夫です。
サーバーを使わなくても、自分が書いたプログラムがどう動くかをすぐに確認できるので、初心者にとっては学びやすい言語です。
さらに、JavaScriptは世界中のエンジニアにも人気があります。
たくさんの人が使っている開発プラットフォーム「GitHub」でも、一番使われている言語として知られています。
JavaScriptの特徴と強み
JavaScriptの一番の特徴は、いろいろな場面で使えることです。
昔はウェブブラウザを動かすための言語がたくさんありましたが、今ではJavaScriptが主流になっています。
JavaScriptは、HTMLやCSSという他のプログラミング言語と一緒に使うことで、ウェブブラウザ上で動くアニメーションを作ることができます。
そして、最近ではNode.js（ノードジェイエス）という新しいタイプのJavaScriptも人気です。
これは、ウェブブラウザだけでなく、サーバー側でも動くようになっています。
JavaScript と Javaの違い
JavaScriptとJavaは名前が似ていることから同じものだと勘違いされやすいのですが、全く違うプログラミング言語です。
JavaScriptとJavaは、使われる場所や目的が違います。
JavaScriptは主にウェブページで使われ、Javaはウェブサービスやアプリ開発など、もっと広い範囲で使われます。
また、動作する環境も違うので、これらは全く別の言語だと覚えておくといいでしょう。
JavaScriptとは
JavaScriptは、ウェブページに動きをつけるための言語です。
例えば、ウェブサイトで写真がスライドするような動きや、ボタンを押すと何かが表示されるような機能は、JavaScriptで作られています。
この言語は、ブラウザだけで動くので、特別なプログラムをインストールする必要はありません。
Javaとは
Javaは、ウェブサービスやシステム開発、業務システムなどに使われる言語です。
Javaで書かれたプログラムは、JVM（Java Virtual Machine）という特別なプログラムの上で動きます。
これは、どんなコンピュータでも同じようにプログラムが動くようにするためです。
Javaのプログラムは、コンピュータが理解できる言語に変換する「コンパイル」という作業が必要です。
名前の由来
JavaScriptはもともと「LiveScript」という名前でしたが、当時人気だったJavaの名前を借りて「JavaScript」という名前になりました。
しかし、JavaとJavaScriptは全く別の言語なので、名前が似ていることには注意しましょう。
表でみるJavaScriptとJavaの違い
以下の表で、それぞれの言語の特徴と違いをわかりやすくまとめました。
| 特徴 | JavaScript | Java |
|---|---|---|
| 開発会社 | Netscape Communications社 | Sun Microsystems社 |
| 主な用途 | ウェブページの動きや機能を追加（例：スライドショー、フォームの動作） | 様々なアプリケーションの開発（例：業務システム、Androidアプリ） |
| 実行環境 | ウェブブラウザ（追加のソフトウェア不要） | Java Virtual Machine（JVM）が必要 |
| コードの実行 | ソースコードがそのまま実行される | コンパイルしてJavaバイトコードに変換後、実行 |
| 変数の処理 | 動的（実行時に型が決定） | 静的（コンパイル時に型が決定） |
| 開発の目的 | ウェブサイトに動きをつける | ハードウェアに依存しないアプリケーション開発 |
JavaScriptでできること
JavaScriptを使うと、ウェブページに動きや便利な機能を追加できます。
例えば、アニメーションをつけたり、検索機能や拡大表示などを実装できます。
これから、JavaScriptがどのように使われているか、具体的な例を見てみましょう。
日常的によく使われているので、知っていると便利です。
まずは、基本的な使い方から説明します。
ボタンを押したときの動作
JavaScriptを使うと、ボタンを押したときに新しいページに移動せずに処理を行うことができます。
たとえば、フォームに入力した内容の確認画面を、別のページに移動せずに表示させることが可能です。
さらに、ボタンをクリックすると小さなウィンドウが画面上に現れる「ポップアップ」も作れます。
これにより、ユーザーはページを移動することなく、必要な情報をすぐに見ることができます。
文字入力の制限機能
JavaScriptを使うと、ウェブページの入力フォームでの文字入力に制限をかけることができます。
たとえば、コメント欄に「100文字まで」というような文字数制限を設定することが可能です。
さらに、入力される文字の種類も制限できます。
例えば、ひらがな、カタカナ、半角英数字のみを許可するように設定することができます。
これにより、入力エラーを減らすことができます。
例として、郵便番号の入力フォームでは、半角数字以外が入力された場合にエラーメッセージを表示させることができます。
文字や画像のアニメーション効果
JavaScriptを使うと、文字や画像に動きをつけることができます。
例えば、文字を浮かび上がらせたり、色を変えたり、タイピングのように表示させることが可能です。
特定の文字にだけアニメーションを加えたい場合も、JavaScriptを使えば簡単に実現できます。
このように、JavaScriptはウェブページをより魅力的にするための多彩な機能を提供します。
スライドショーの作成
ウェブサイトのトップページでよく見られる、画像が横に流れる「スライドショー」は、JavaScriptを使って作ることができます。
この機能では、定められた時間ごとに画像が自動的に切り替わります。
これにより、ウェブサイトがより魅力的で動的な印象を与えることができます。
検索機能と並べ替え機能
データが多いウェブサイトでは、JavaScriptで検索機能や並べ替え機能を追加すると便利です。
検索機能を使えば、特定のキーワードで情報を絞り込むことができます。
また、並べ替え機能では、データを特定の順序で表示することが可能です。
これらの機能は、指定された範囲内でキーワードが含まれているかどうかをチェックし、該当するデータを取り出して表示します。
JavaScriptだけでこれらの機能を実装するのは複雑な場合がありますが、「DataTables（データテーブル）」のようなjQueryのライブラリを利用することで、より簡単に実現できます。
メニューの開閉機能
JavaScriptを活用すると、ウェブサイト上でメニューの開閉機能を作ることができます。
この機能は、ユーザーがメニューを開いたり閉じたりできるようにするものです。
例えば、プロフィール画像をクリックすると、マイページへのリンクやログアウトボタンなどが現れるドロップダウンメニューがあります。
このようなメニューの開閉は、JavaScriptを使って実装されています。
Ajaxを用いた非同期通信
Ajaxは「Asynchronous JavaScript and XML」の略で、JavaScriptとXMLを使った非同期通信の手法です。
非同期通信とは、サーバーからデータを取得している間も、ウェブページの他の部分を操作できることを意味します。
Ajaxを使うと、例えばGoogle Mapで地図を拡大・縮小したり、移動したりする際に、画面が一時的に白くなることなくスムーズに表示を更新できます。
これにより、ユーザー体験が大幅に向上するというメリットがあるため、Ajaxは最近のWebアプリではよく使われている機能の一つです。
JavaScriptが使われているWebサイトやサービス例
JavaScriptは、インターネット上のたくさんのWebサイトで使われています。
ここで、JavaScriptが使われている有名なサイトやサービスの例を紹介します。
- Google Map
- YouTube
- X(Twitter)
例えばYouTubeでは、動画を再生する際にJavaScriptが使われています。
動画の再生ボタンをクリックすると、ブラウザを更新することなく、すぐに動画が再生されますよね。
また、X(Twitter)では、ツイートを投稿する際にJavaScriptが使われています。
ツイートボタンをクリックすると、ブラウザを更新することなく、すぐにツイートが投稿されます。
このように、JavaScriptはインターネット上の様々なサイトやサービスで使われており、なくてはならない存在となっています。
そのため、JavaScriptを学ぶことで、インターネット上の様々なサイトやサービスを作ることができるようになります。
JavaScriptの使い方の基本
JavaScriptを使うときには、大きく分けて2つの方法があります。
それは、外部のファイルに書いて読み込む方法と、HTMLの中に直接書く方法の2つがあります。
それぞれの方法の特徴やメリット・デメリットを見ていきましょう。
外部から読み込ませる
最初の方法は、JavaScriptを別のファイルに書いて、それをHTMLから読み込むやり方です。
これを外部定義と言います。
別のファイルを作って、その中にJavaScriptのコードを書くのが特徴です。
このファイルの名前は「.js」という拡張子をつけます。
例えば、「sample.js」という名前です。
そして、HTMLのタグの中に次のように書いて、そのファイルを読み込みます。
<body>
<script src="sample.js"></script>
</body>「sample.js」には、例えばこんな風に書きます。
alert("Hello World!");この方法の良い点は、一度書いたJavaScriptをいろいろなページで使えることや、HTMLとは別のファイルで管理できるので、整理しやすいことです。
特に、たくさんの人で一緒に作業する時に便利です。
注意点は、ファイルが多くなると、ページが開くのが遅くなることがあることです。
HTML内に直接書き込む
次の方法は、HTMLの中に直接JavaScriptを書くやり方です。
これを直接定義と言います。
HTMLの<body>タグの中に、<script>タグで囲んで、JavaScriptのコードを書きます。
例えば、こんな風にします。
<body>
<script>
alert("Hello World!");
</script>
</body>この方法の良い点は、ページが早く開くことです。
注意点は、HTMLとJavaScriptが一緒になってしまうので、管理が大変になることです。
そのため、一人で小さいプロジェクトをする時や、ちょっとしたテストをする時に使うといいでしょう。
JavaScriptの基本的な書き方
JavaScriptでプログラムを書くときの基本的な方法について説明します。
書き方の基本ルール
JavaScriptで命令を書くときは、ほとんどの場合、命令の最後に「;（セミコロン）」を付けます。
これは、命令がここで終わるという意味です。
例えば、こんな感じです。
alert("Hello World!");文字を表示する
JavaScriptで文字を画面に表示するには、「alert()」という命令を使います。
この命令の中に表示したい文字を書きます。
alert("Hello World!");文字を書くときは、ダブルクォーテーション（”）かシングルクォーテーション（’）で囲みます。
どちらを使っても大丈夫ですが、ダブルクォーテーション（”）を使うことが多いです。
また、ブラウザの「コンソール」という画面に文字を表示することもできます。
コンソールは、ブラウザの開発者ツールにあります。
開発者ツールは、キーボードの「F12」キーを押すと開くことができます。
console.log("Hello World!");このように、JavaScriptでは簡単な命令で文字を表示することができます。
これがJavaScriptの基本的な書き方の一つです
コメントを書く
JavaScriptでプログラムを書くとき、コメントを入れることができます。
コメントは、プログラムにメモを書くようなもので、コンピューターはこれを無視します。
コメントを使うと、自分や他の人が後でプログラムを見たときに、何をしているのか理解しやすくなります。
なお、コメントには2種類あります。
1行だけのコメントと、複数行にわたるコメントです。
1行のコメントは、//（スラッシュ2つ）で始めます。
このスラッシュの後ろに書いたものは全部コメントになります。
// これは1行のコメントです
alert("Hello World!"); // この後ろもコメントです
複数行のコメントは、/（スラッシュとアスタリスク）で始めて、/（アスタリスクとスラッシュ）で終わります。
この間に書いたものは全部コメントになります。
/*
これは
複数行にわたる
コメントです
*/このように、コメントを使うと、プログラムの中に説明を書いたり、一時的にコードを無視したりすることができます。
変数を使う
JavaScriptでプログラムを書くとき、変数を使うことがよくあります。
変数とは、データを一時的に保存するための「箱」のようなものです。
変数を使うと、データを保存しておいて、後で使うことができます。
変数を作るときは、letというキーワードを使います。
そして、変数に名前を付けて、どんなデータを保存するかを決めます。
let message = "Hello World!";
alert(message);この例では、「message」という名前の変数を作って、「Hello World!」という文字列を保存しています。
変数の名前は、英字、数字、アンダースコア（_）を使って自由に決めることができます。
ただし、数字から始めることはできません。
また、大文字と小文字は区別されます。
さらに、変数には新しい値を入れる（上書きする）ことができます。
新しい値を入れると、前に入っていた値は消えて、新しい値に置き換わります。
let message = "Hello World!";
alert(message); // => Hello World!
message = "こんにちは";
alert(message); // => こんにちは定数を使う
JavaScriptでは、定数も使うことができます。
定数は、変数に似ていますが、一度値を入れると、その値を変えることができないという違いがあります。
定数を作るときは、constというキーワードを使います。
const message = "Hello World!";
alert(message); // Hello World!
message = "こんにちは"; // これはエラーになるこの例では、「message」という名前の定数を作って、「Hello World!」という文字列を保存しています。
定数には新しい値を入れることができないので、message = "こんにちは";の行はエラーになります。
JavaScriptを効率的に身につける勉強法は？
JavaScript には興味があっても、プログラミング学習をはじめたばかりであれば、以下のような疑問を持つかもしれません。
- JavaScript を身に付けてエンジニアになるには何をすればいい？
- 何から勉強すればいいんだろう？
- 効率よく勉強するには？
JavaScriptは学ぶべき内容が非常に多いため、勉強法の選び方を間違うと時間・労力・お金が無駄になってしまいます…。
そのため、こちらの記事を参考に、ご自身に最適な学習方法を選んでみませんか？
