【JavaScript入門】実行方法や文法の基本などを解説！

JavaScript入門のための基礎知識

JavaScriptはプログラミング言語の1つで、ユーザー側のWebブラウザとWebサービスのやり取りをスムーズに行うために使用されることが多い言語です。近年では、IT技術の急激な発展に伴い、データをブラウザに表示し、見たり読んだりする体験のほとんどがJavaScriptの処理によって実現されています。

例えば、Netflix・Hulu・U-NEXTなどの動画配信サービスの情報表示などにもJavaScriptが使用されています。ここでは、JavaScriptの入門ということで、JavaScriptの概要や間違われやすいJavaScriptとJavaの違いについて詳しく紹介します。

JavaScriptは、Netscape Communications社とSun Microsystems社が共同で開発したプログラミング言語です。JavaScriptが誕生したのは、インターネットが普及し始めた1990年代始め頃です。

当初はNetscape Navigatorというブラウザ専用に開発されており、LiveScriptという名称でした。その後企業との提携があり、JavaScriptという名称に変わりました。

JavaScriptは主にWebサイトを制作する際に使用するHTMLの中に組み込んで使うスクリプト言語であり、 オブジェクト指向型言語の1つでもあります。

JavaScriptは初心者におすすめ？その理由と作れるものを紹介

JavaScriptの特徴とは？何ができるのか、メリット・デメリットも解説

「JavaScript」と「Java」は名称が似ていますが、全く異なるプログラミング言語です。JavaはSun Microsystems社によって開発された言語で、JavaScriptが主にWebブラウザ上で動作するサービスの開発に使用されるのに対し、Javaは銀行や証券会社などの大規模システムの開発に使用されることが多い言語です。

また、変数の処理においてJavaScriptが動的処理を行うのに対して、Javaは静的であるといった違いもあります。JavaScriptとJavaは文法や使用方法も全く異なる言語だと言えるでしょう。

JavaScriptとJavaの違いは？質問されたときの説明方法

JavaScriptの実行方法

JavaScriptは、プログラムを実行する際にコンパイルが必要ありません。そのため、簡単に実行できます。

JavaScriptの実行方法は主に2種類で、HTMLを用いて実行する方法とWebブラウザに付属する開発ツールを利用して実行する方法があります。

JavaScriptは主にHTMLのコードに組み込んで使います。組み込み方は2通りで、HTMLファイルに直接JavaScriptのコードを書き込むか、別でJavaScriptのファイルを準備し、それをHTMLファイルから読み込むことができます。

前者の場合、HTMLの記述の中にscriptタグ（）を用意し、その中にJavaScriptのプログラムを入力します。

<script>
（JavaScriptのコードを記述する）
</script>

HTMLはテキストエディタとブラウザがあれば記述・実行することができます。

後者の場合、JavaScriptのコードを別ファイルに記述し、HTMLファイルからそれを読み込みます。このとき、タグのsrc属性を使って外部のJavaScriptファイルを指定します。

<script src="（JavaScriptファイル名）">
</script>

なお、JavaScriptファイルの拡張子は「 .js」とするのが一般的です。

Google ChromeなどのWebブラウザに付属する開発ツール（コンソール）でJavaScriptコードを入力・実行することもできます。主要なブラウザには開発ツールが備わっていることが多いです。コンソールの開き方は次の通りです。

【Google Chromeの場合】 1．画面右上のメニュー→「その他のツール」→「デベロッパーツール」 2．画面下部もしくは右側に表示されるデベロッパーツールから「Console」を選択

【FireFoxの場合】 1．画面右上のメニュー→「その他のツール」→「ウェブ開発ツール」 2．画面下部に表示されるウェブ開発ツールから「コンソール」を選択

【Microsoft Edgeの場合】 1．画面右上のメニュー→「その他のツール」→「開発者ツール」 2．画面下部もしくは右側に表示され開発者ツールから「コンソール」を選択

これらのコンソールでは簡単なJavaScriptコードを記述・実行することができ、コードを記述してEnterキーを押せばすぐに実行されます。

JavaScriptの文法の基本

それでは、JavaScriptの文法の基本について詳しく紹介します。

プログラミング言語では一般的にコメントを記述でき、JavaScriptも例外ではありません。コメントは、レビューやコードを更新するときに役立ちます。JavaScriptのコメントの書き方には、1行と複数行のものがあります。1行の場合、「//」以降の行末までがコメントアウトです。

一方、複数行の場合

「/`*」と「`*/」

の間がコメントアウトされます。コメントアウトされた部分は、実行結果に表示されません。

JavaScriptの演算子には、算術演算子・比較演算子・インクリメント演算子・デクリメント演算子・条件演算子・文字列連結演算子などがあります。それぞれの概要は次の通りです。

【算術演算子】加減乗除を行う演算子のこと 【比較演算子】2つの式や値の大小比較を行い、結果を真偽で評価する演算子のこと 【インクリメント演算子・デクリメント演算子】数字を1だけ加減算するための演算子のこと 【条件演算子】条件によって処理を変えることができる演算子のこと 【文字列連結演算子】文字列を結合するための演算子のこと

JavaScriptには、8種類のデータ型があります。それぞれの名称と概要は次の通りです。

【Boolean型】「true」もしくは「false」の真偽値を表すデータ型のこと 【Number型】整数や浮動小数点数を表すデータ型のこと 【BigInt型】精度が自由である整数値を表すデータ型のこと 【String型】文字列を表すデータ型のこと 【Symbol型】固有の識別子を表すデータ型のこと 【Object型】データまたはデータをやり取りするデータ構造を表すデータ型のこと 【null型】null値を表すデータ型のこと 【undefined型】値が定義されていないことを表すデータ型のこと

JavaScriptでは、値を表現するためにリテラルを使用します。リテラルには次のような種類があります。

【リテラル】特定のデータ型の値を直に記述したもの 【真偽値リテラル】trueまたはfalseのこと 【配列リテラル】0個以上の式のリストのこと 【数値リテラル】10進数・16進数・8進数・2進数で記述できる数値のこと 【浮動小数点リテラル】浮動小数点のこと 【Symbolリテラル】固有の識別子のこと 【文字列リテラル】一般的な文字列のこと

JavaScriptでは、変数に「var」「let」「const」の3種類を使用します。「let」「const」を使用すれば、意図していない変数の上書きを未然に防ぐことができます。

「var」は再宣言と再代入ができる変数 「let」は再代入はできるが、再宣言ができない変数 「const」は再宣言と再代入ともにできない変数

プログラムのエラーや不具合を防止するためにも、変数の使い分けは重要です。変更する予定のない変数は「const」を選ぶのがおすすめと言えます。

JavaScriptで何ができる？

近年ではJavaScriptを利用してできることは増加傾向にあります。理由として、IT機器の性能が向上したことや、JavaScriptの言語自体が発展を遂げたことが挙げられます。ここでは、JavaScriptを活用してできることについて詳しく紹介します。

HTML・CSSをJavaScriptで操作し、画面に動きを与えることができます。例えば、ユーザーがスクロールする際に画面背景のデザインを変化させたり、ローディングする際にアニメーションを導入したりすることが可能です。

JavaScriptはサーバーと通信を行い、データを取得できます。Webコンテンツは一般的に「サーバーサイド」と「フロントエンド」で構築されています。サーバーサイドとは、サーバー側で動作しているプログラムのことです。

サーバーサイドのプログラムは、URLに対してどのWebページを表示するかを制御したり、データベースから特定のデータを取得したりする役割を担います。

一方、フロントエンドのプログラムは、サーバーサイドから取得したデータをWebブラウザ上に表示する役割を主に担うことが多いです。Webブラウザ上で動作するJavaScriptは、フロントエンドとサーバーサイドの間をやり取りすることができる言語と言えます。

JavaScriptを利用して、Webブラウザ上に複雑なアプリケーションを作ることが可能です。例えば、「Googleスプレッドシート」や「Googleドキュメント」などは、JavaScriptによって動的なコンテンツを生成しています。

近年では、Webブラウザ上で動作する複雑なアプリの需要が高まりつつあります。Webアプリでは端末や機器の違いを気にする必要がないため、オフィスではPCで業務を行い、通勤中はスマートフォンで作業するといった使い方が可能です。

一般的に、JavaScriptはWebブラウザ上で動作するものです。しかし近年では、JavaScriptの活躍する領域は拡大し、Webブラウザ以外の環境でも使用されるケースが増加しています。その1つがスマホアプリの開発です。

スマホアプリは、Androidの場合「Java」「Kotlin」、iOSの場合「Swift」「objective-C」などのプログラミング言語を用いて開発されることが多いです。しかし、AndroidとiPhoneで使用するプログラミング言語が違うのは、エンジニアにとって不便であるとも言われています。

そんな中、JavaScriptのスマホアプリ開発用のフレームワーク「React Native」が登場したことによって、エンジニアはAndroid・iOSのどちらにも対応したスマホアプリを制作できるようになりました。

「React Native」のフレームワークを使用して作成されたスマホアプリの代表例として、Facebook・Instagramなどが挙げられます。

KotlinとJavaの違いは？それぞれのメリット・デメリットと勉強方法も紹介

Swiftとは？特徴・できること・学習方法をまとめて解説！

React Native入門！将来性やアプリ開発環境について解説

JavaScriptがよく使われている場面

JavaScriptの使用場面として最もわかりやすいのは、やはり「画面に動きを加える」例です。ここでは、誰もが1度は目にしたことがあるような例をいくつか挙げてみます。

Webサイトでは、画像も多く使われます。こうした画像の表示をJavaScriptを用いてカスタマイズすれば、より見やすく、魅力的な画面になります。

■画像の拡大表示 Webサイト上で画像をクリックすると、拡大表示できるようにJavaScriptで設定できます。例えば、ECサイトの商品画像などで細部までよく見せることができます。

■画像スライダー 複数の画像が自動的に切り替わっていく表示方法です。Webサイトのトップページなどでよく見られます。

画像の拡大表示や画像スライダーのように表示の仕方をカスタマイズするだけでなく、表示・非表示を切り替えることもできます。よく見られるのは、カーソルの動きに伴うメニューの表示・非表示切り替えです。

カーソルを合わせると詳細メニューが表示され、離すと表示が消える、という動きは、JavaScriptによって実現されています。

「サーバーとデータを送受信する」例についても紹介します。多くの人が経験したことのあるものとして、入力フォームのエラー表示が挙げられます。会員登録や商品の購入ページで必要項目を入力して送信しようとしたら、入力不備があると表示された、といった経験があるのではないでしょうか。

これは、JavaScriptによってユーザーが入力した内容（入力値）を取得し、さらにそれを特定の条件にもとづいてチェックして、OKなら送信、NGならエラーメッセージの表示、という設定をしているからです。

Googleマップなどの地図アプリでは、地図の縮小・拡大や他の場所の表示への移動がスムーズにできます。このような動きは、JavaScriptを利用した非同期通信「Ajax」によって可能になっています。

ブラウザでWebページなどを表示するとき、通常はデータを読み込むために多少の待ち時間が発生します。これは、特定の処理が終了してから次の処理に進む「同期通信」が行われているためです。

対して地図アプリでは非同期通信によって、サーバーから情報を取得しつつもユーザーの操作も受け付けることができます。そのため、リロードをせずにリアルタイムで地図の表示範囲を変えることができるのです。

JavaScript入門者におすすめの勉強方法

さまざまな用途に使えるJavaScriptですが、どのように習得すれば良いのでしょうか。入門者におすすめの勉強方法について紹介します。

JavaScriptは広く使われているプログラミング言語なので、専門の参考書や学習サイトも多数あります。入門者向けのものもたくさんあるので、まずは参考書や学習サイトを見てみると良いでしょう。ここではおすすめの入門本やサイトをいくつか紹介します。

■1冊ですべて身につくJavaScript入門講座 最初の1冊目に最適な、丁寧な解説が特徴の入門本です。難しい言葉や考え方も分かりやすくかみ砕いて解説されているので、初心者でも挫折せずに学習することができます。

▪著者：Mana ▪ページ数：344ページ ▪出版社：SBクリエイティブ ▪発売日：2023年3月1日

【参考】：1冊ですべて身につくJavaScript入門講座｜SBクリエイティブ

■いきなりプログラミング JavaScript タイトルの通り、いきなり自分のアプリやゲームを作り始めることができる新感覚の入門本です。ゲームアプリなど初心者でも作れるものが掲載されていて、これらを作成していくうちに基本知識が自然と身につきます。

▪著者：高岡 佑輔 ▪ページ数：216ページ ▪出版社：翔泳社 ▪発売日：2025年1月24日

【参考】：いきなりプログラミング JavaScript（高岡 佑輔）｜翔泳社の本

JavaScriptでゲーム作成に最適なライブラリ6選！初心者も必見

■ドットインスクール 1講座3分程度の短い動画で気軽に学習できるサイトです。無料で視聴できる動画もあるので、気になる方はまず無料から始めてみるのも良いでしょう。

【参考】：ドットインスクール

■CODEPREP プログラムを書いて動かしながら学ぶ、実践型の学習プラットフォームです。「ブック」という1冊10分程度で学習できる教材が用意されており、実際にコードを書き込みながらスキルを身につけていきます。

【参考】：CODEPREP

参考書や学習サイトでの独学が難しいと感じる場合、プログラミングスクールに通うのもおすすめです。コストはかかりますが、あらかじめカリキュラムも決められており、プロから直接学べるメリットも大きいです。

モチベーションが続かずフェードアウトしてしまったり、不明点を解消できず挫折してしまうような心配もないでしょう。独学には不安がある人、確実にスキルを身につけ、転職に繋げたい人におすすめです。

JavaScriptの基礎やできることを理解して業務に役立てよう

本記事では、JavaScriptの概要や文法、できることについて解説しました。JavaScriptは、Webサイトに動きを加えるために使用されることが多い言語です。しかし、それ以外にも活用の領域は広がりつつあります。

なお、本記事で解説したJavaScriptの文法は一部のみのため、本格的にJavaScriptを習得したい場合には、専門書籍や学習サイトを利用して、手を動かしながら学習するのがおすすめです。JavaScriptを使いこなせるエンジニアとして活躍するために、本格的に学習をスタートさせましょう。

その他の関連記事

その他に関連する内容は、下記の記事でも紹介しています。ぜひ参考にしてください。

JavaScriptおすすめ資格4選！資格の特徴や難易度を解説

JavaScriptのおすすめ開発環境ツール9選！おすすめのエディタや必要な準備も紹介

JavaScriptをスマホで有効化/無効化？意味と方法を解説

JavaScriptでポップアップメッセージやウィンドウの表示方法