《初心者必見》JavaScriptの勉強手順や実際に使えるコード例などまとめ

プログラミング初心者やWebサイト作成に興味のある方におすすめの「JavaScript（ジャバスクリプト）」。Webサイトなどに動き(動的要素)を追加するために用いられるプログラミング言語であり、数あるプログラミング言語の中でも比較的習得しやすい人気言語です。

本記事では、そんなJavaScriptの概要、学ぶべき理由、初心者の勉強方法、コードの書き方、記述方法を解説しつつ、JavaScriptでそのまま使えるサンプルコードも紹介します。

JavaScriptに興味がある方は、ぜひ最後までご覧ください。

そもそもJavaScriptとは？

JavaScriptとは、Webブラウザ上で実行できるプログラム言語の1つで、もともとは文書の構造を指示するHTMLを変化させて動的な要素を追加するために登場した言語です。

現在では、Webサイトへの動的要素を追加する役割の他に、Webアプリケーションの開発に用いられる言語としても活用されています。

ちなみに、名前がよく似ている「Java（ジャバ）」は全く異なるプログラミング言語であり、JavaScriptはフロントエンド開発（※1）、Javaはバックエンド開発（※2）に使われます。

JavaScriptでできることについては「Java Scriptできること」で詳しく解説しています。ぜひ併せてご覧ください。

※1フロントエンドとは、ユーザーが触れる部分のこと。Webページ上のボタンなど。

※2バックエンドとは、ユーザーからは見えないサーバー側の部分のこと。データベースやプログラムなど。

JavaScriptは、なぜ学んだ方がいいの？

JavaScriptを学ぶべき理由として、習得してしまえば仕事に困ることがほぼなくなるということが挙げられます。

JavaScriptはあらゆるプログラム言語の中でも常に人気上位に位置しているもので、毎年実施される「もっとも使用されているプログラミング言語ランキング（GitHub社）」でも長期にわたりトップに君臨し続けています。

またJavaScriptはWebブラウザがあれば開発できるため、プログラミング初心者の登竜門としてもおすすめです。

習得しやすいこと、習得すれば仕事に困らなくなることが、JavaScriptを学ぶべき理由です。

JavaScript初心者が勉強していく手順

JavaScript初心者が勉強するなら、以下の手順で学習を進めていくのがおすすめです。

1. 開発環境を整える
2. JavaScriptの書き方を練習する
3. 学習サイトや本を活用して理解を深める
4. JavaScriptでオリジナルのWebサイトを作ってみる

以下で、各手順について詳しく解説します。

JavaScriptの開発環境を整える

まずは、JavaScriptの開発環境を整えます。

JavaScriptの開発環境は、Webサービス、デベロッパーツール、HTMLファイル・JSファイル(※)です。

※JSファイル：JavaScriptで書かれたプログラムを記録しておくファイルのこと

Webサービス

JavaScriptの開発環境を構築する必要がないため、Webサービスを使うのはおすすめの方法です。

例えば「Online PHP Editor | ブラウザでプログラミング・実行ができる「オンライン実行環境」| paiza.IO」にアクセスすると、すぐにJavaScriptのコーディング練習を始められます。

他にもWebサービスでコーディングができる場所はたくさんあるので、自分に合ったWebサービスを探してみてください。

デベロッパーツール

Webブラウザの「デベロッパーツール」を使うと、JavaScriptでWebサイトの開発ができます。

例えばGoogle Chromeでも、JavaScriptでWebサイトの開発が可能です。

Google Chromeを開いて右上の点が三つ縦に並んでいる所をクリックします。メニューが表示されるので、「その他のツール」から「デベロッパーツール」をクリックしましょう。

デベロッパーツールが表示されたら、「Console」をクリックして表示を切り替えます。

画面上に入力画面が表示されるので、そこにJavaScriptを入力してEnterキーを押せば実行結果を確認できます。

ブラウザのデベロッパーツールを使えば、簡単にJavaScriptの練習ができるのでぜひ試してみてください。

HTMLファイル・JSファイル

実際に案件を受けるときに備え、HTMLファイルやJSファイル(※)を作成、読み込み、書き込みする練習も必要です。

JavaScripをHTMLファイルに書き込んだり、JSファイルを外部に作成してHTMLファイルに読み込ませたりする作業は、実際の案件では避けて通れません。

JavaScriptをHTMLに書き込む場合は「<script></script>」タグでJavaScriptのコードを囲めばOKです。

外部ファイルを利用するなら、HTMLファイルとは別でJSファイルを作成し、JavaScriptを書きます。その後HTMLファイル内にJSファイルを読み込む手順が必要です。

※JSファイル：Webページで実行するためのJavaScriptコードを含むファイルのこと

JavaScriptの書き方を練習する

開発環境が整ったら、実際にJavaScriptの書き方を練習して覚えていきましょう。

サンプルコードを真似て書いたり、実行したり、エラーを解決したりするのを繰り返しながら、基本的な書き方からスタートしてください。

そのまま使えるJavaScriptのサンプルコードは、本記事の後半「そのまま使用できる！JavaScriptのサンプルコード」で紹介しています。

学習サイトや本を活用して理解を深める

JavaScriptの基本的な書き方を覚えたら、さらに応用や実践的なスキルを磨きます。

学習サイトやJavaScriptの専門書を活用し、楽しみながら理解を深めましょう。

インターネット上には動画やスライドなどを用いた学習サイトが充実しており、無料で使えるものもあります。また、YouTubeの解説動画なども参考になるものが増えています。

書籍は持っておけば困った時や突然忘れてしまった時に辞書のように使うこともできるため、持っておくと安心です。

JavaScriptでオリジナルのWebサイトを作ってみる

JavaScriptの学習を一通り終えたら、オリジナルのWebサイトを作成してみてください。

Webサイトの作成には、HTMLやCSS(※)などの基本知識が必要です。あらかじめ備えておきましょう。

ただし、Webサイトの開発にはエラーがつきものです。エラー表示が出ても諦めず、書籍やインターネットを駆使して解決していってください。実際にWebサイトを作成することで、知識やスキルの習得だけではなくエンジニアとしての問題解決能力を養えます。

また作成したWebサイトは就職や転職でポートフォリオ（※）として使えるため、最低でも1〜3つ程度は作っておくと良いでしょう。

※CSS：色やサイズ等の装飾を指示する言語、HTMLと一緒に使用する

※ポートフォリオ：ITにおいては、自分で製作したものをまとめた作品集のこと

JavaScriptの書き方について

JavaScriptの書き方は、大きく分けて2種類あります。

1つは、JavaScript用のファイルを用意して外部から読み込む方法、もう1つは、HTML内に直接JavaScriptを書き込む方法です。

前者を「外部定義」、後者を「直接定義」と呼びます。以下では、外部定義と直接定義の例とともにメリット、デメリットについて解説します。

外部定義

JavaScript用のファイルを用意して外部から読み込む方法は「外部定義」と呼ばれ、JavaScriptの主流な書き方として知られています。HTMLファイルとは別に「.js」拡張子のファイルを用意し、そこにJavaScriptを記述します。

HTML内で以下のように記述することで、指定のJavaScriptファイルを読み込むよう指示できます。

外部定義の場合、修正や管理がしやすいというメリットがあり、複数人での開発でも内容を共有しやすいことが特徴です。ただし、読み込むファイルの数が多いと読み込み速度が遅くなってしまうことがデメリットです。

直接定義

JavaScriptをHTML内に直接書き込む方法は「直接定義」と呼ばれ、HTML内に直接以下のようなJavaScriptを記述します。

直接定義は読み込みが速いというメリットがありますが、1つのファイル内にHTMLとJavaScriptが一緒に記載されるため管理が難しいというデメリットがあります。

一人で開発する場合や動作テストをおこなう際などには、自分さえ管理できれば読み込みが速いのでおすすめの方法です。

《初心者向け》JavaScriptの基本的な記述方法

JavaScript初心者向けの、基本的な記述を6つ紹介します。

実行する内容	記述方法
文字の出力	console.log(“表示する文字列”);
アラートを表示	alert(“アラート”);
コメントアウト(※)	// を冒頭につけるまたは「/*」「*/」で囲う
文字列	“任意の文字列”　もしくは‘任意の文字列’ 例：console.log(“任意の文字列”);
四則演算（※）	コードの()内に任意の式を記述する 例：console.log(1+1);
変数(※)	「let」「const」「var」のいずれかで変数を宣言し、その他のコードで変数を記述する 例：let a = 1; let b = 5; console.log(a+b);
条件分岐（if文）	「if」を使った条件と、それ以外とで異なる内容を指示する 例：let evaluation = “good”; if(evaluation == “good”){    console.log(“購入する”); } else {    console.log(“購入をやめる”); }
条件分岐（switch文）	複数の条件を「switch」で指定し、変数を用いて記述する 例：let sns = ‘X’;   switch( sns ) {    case ‘X’:       console.log(‘https://twitter.com/‘);    break;    case ‘Facebook’:       console.log(‘https://ja-jp.facebook.com/’);       break;    case ‘Instagram’:       console.log(‘https://www.instagram.com/’);       break; }

※コメントアウト：コードを一時的に無効にすること

※四則演算：足し算(+)、引き算(-)、掛け算(×)、割り算(÷)のこと

※変数：データを入れておく箱のようなもの、変数には数値を代入する

文字の出力

文字の出力では、以下の記述を用います。

console.log(“表示する文字列”);

これを実行すると、「表示する文字列」の部分が表示されます。

また画面をロックしてダイアログボックスを表示させるには、以下のように記述します。

alert(“アラート”);

これを実行すると、画面がロックされたうえでアラートのダイアログボックスが表示され「アラート」部分の文字列が表示されます。

コメントアウト

コメントアウトは、JavaScriptの記述を一旦無効にしたいときに使う記述方法です。メモ書きや、チームへ共有するべき情報を書いておきたいときなどに使えます。

// console.log(10”);

これで「console.log(10”);」が無効化されます。

複数行を無効にしたい場合は、以下のように記述します。

/*

 console.log(10);

 console.log(20);

*/

これで「console.log(10); console.log(20);」の部分が無効化されます。

文字列

JavaScriptで文字列を記述するときは、「”（ダブルクォーテーション）」か「’（シングルクォーテーション）」のどちらかで文字列を囲みます。

“任意の文字列”

‘任意の文字列’

文字列の記述は、以下のように他のコードと組み合わせて使います。

console.log(“任意の文字列”);

四則演算

JavaScriptで四則演算をおこなう場合は、「”」や「’」で囲わずに式を記述します。

console.log(1+2);

これを実行すると、「3」が表示されます。

変数

変数を使えば、同じ数値、計算式、文字列を繰り返し記述する手間が省けます。

ある変数に内容を記述すれば、その後は変数を記述すればその中身が反映されるので必ず覚えておきましょう。

変数の宣言には「let」「const」「var」があり、「let」がもっとも一般的です。

let a = 1;

let b = 5;

console.log(a + b);

上記のコードを実行すると、console.logの式に「let」で宣言した変数が代入されて「6」が出力されます。

「let」はローカル変数と言われるもので、宣言されたブロック（ { } ）内でのみ利用できる変数のことです。上記の例のように、文字列や値を代入して使用します。

「let」「var」「const」の違いを一覧表にまとめました。

		let	var	const
再宣言	一度宣言した変数の名前で、再び宣言をする	×	○	×
再代入	値が入っている変数に、上書きで代入する	○	○	×
スコープ（※）	宣言した変数を利用できる範囲	ブロックスコープ（各ブロック内でのみ反映できる）	関数スコープ（ブロックは関係なくファイル内で変数を使用できる）	ブロックスコープ（各ブロック内でのみ反映できる）
繰り返し構文	指定した条件と回数に該当する間、決められた処理を繰り返す	○	○	×

※スコープ：実行中のコードから参照できる範囲のこと

条件分岐

条件分岐とは、「もし○○したら△△する」というような指示です。条件によって、実行結果が分岐すると覚えましょう。

条件分岐には「if文」と「switch文」があります。

if文

「if文」は条件や値で処理を分岐するもので、条件に一致するかどうかで処理が分岐します。

let evaluation = “good”;

if(evaluation == “good”){

   console.log(“購入する”);

} else {

   console.log(“購入をやめる”);

}

上記では、「evaluation」がgoodなら「購入する」と表示し、そうでないなら「購入をやめる」と表示するようにする指示です。

switch文

複数の選択肢がある場合には「switch文」を使います。

例えばSNSリンクの表示に条件分岐を用いたいときは、以下のように記述します。

let sns = ‘X’;

switch( sns ) {

   case ‘X’:

      console.log(‘https://twitter.com/’);

      break;

   case ‘Facebook’:

      console.log(‘https://ja-jp.facebook.com/’);

      break;

   case ‘Instagram’:

      console.log(‘https://www.instagram.com/’);

      break;

}

「sns」の値が「X」の場合は「https://twitter.com/?lang=ja」を返す命令のため、snsにXを指定する「let sns = ‘X’」にはswitch文で指定したXのURLが表示されます。

そのまま使用できる！JavaScriptのサンプルコード

JavaScriptでそのまま使用できるサンプルコードを8つ紹介します。

ぜひ実際に書き込んで試してみてください。

実行する内容	サンプルコード	実行結果
指定する文字列を出力する（ここでは「Hello,World！」という文字列を出力）	// コンソールに「Hello!World!」を表示console.log(‘Hello!World!’);	Hello!World!
現在時刻を表示する（ここでは「Thu Jul 18 2024 10:44:20 GMT+0900(日本標準時)」時点を表示）	// Dateオブジェクト生成var now = new Date();// コンソールに現在時刻を表示console.log(now);	Thu Jul 18 2024 10:44:20 GMT+0900(日本標準時)
条件分岐（if文）条件によって異なる動作を指定する（ここでは変数ageは20以上という条件により、成年・未成年を分岐）	// 変数ageに年齢を設定var age = 25;// 20歳以上であれば成年、20歳未満であれば未成年と判断するif (age >= 20) {    console.log(“成年です。”);}else{    console.log(“未成年です。”);}	成年です。
繰り返し処理（for文）（ここでは、変数iが10未満の場合に「*を1つ追加する処理」を繰り返す）	let str = ”;// 変数iが10以下の場合は繰り返すfor (let i = 0; i < 10; i++) {    str = str + ‘*’;    console.log(str);}	*********************************************
クラスとメソッドデータの種類を定義するコマンド「class」の後に変数や定数、関数を記述することでデータの種類と動きを指定する（ここではaddメソッドに指定した「3」「7」の合計がコンソールに出力される）	// クラス Samuraiを定義するclass Samurai {  // 引数を加算するメソッド add を定義する  add(x, y) {    return x + y;  }}// クラスSamuraiのオブジェクトを生成するvar samurai_class = new Samurai();// addメソッド呼び出しsamurai_class.add(3, 7);	10

ITを基礎から学ぶなら、開志創造大学 情報デザイン学部（仮称・設置構想中）

開志創造大学 情報デザイン学部（仮称・設置構想中）は完全オンラインで卒業できる通信制大学です。

一度も大学に通わずに、「学士（情報学）」の取得が可能です。

授業は1回15分のオンデマンド授業のため、場所を問わず、スキマ時間を活用して自由に学修を進めることができます。

初心者でもITを基礎から学べるカリキュラムのため、ITの知識がない方でも一から学ぶことができます。

基礎を学んだあとは、JavaScriptを使用してWebアプリケーションを開発するカリキュラムも予定されています。その他のプログラミング言語も学んだり、学んだことを実践していくことで、高度なIT知識をつけたり、エンジニアやプログラマーを目指すことができます。

通信制大学なので、一人で学修を進められるか不安に思う方もいるかもしれませんが、サポート体制が充実していることや、分からないことがあった際にチャット形式でいつでも質問することができます。

開志創造大学 情報デザイン学部（仮称・設置構想中）では、一人ひとりの都合に合わせて学修を進められることや、学び直しにかかる費用を抑えられるため、今から将来活かせるスキルを身につけたいという方におすすめです！

まとめ

JavaScript（ジャバスクリプト）とは、Webサイトに動き(動的要素)を追加するために生まれたプログラム言語です。最近ではWebアプリなどにも使われており、長期的に高い人気を集め続けています。

JavaScriptは人気言語であり汎用性が高く、多くの求人が出されているプログラム言語です。習得してしまえば仕事に困らないこと、また習得の難易度が高くないことがJavaScriptを学ぶべき理由と言えます。

はじめてJavaScriptを学ぶなら、開発環境を整えてから基礎を覚え、最後にはオリジナルのWebサイトを作成するのがおすすめです。自作のWebサイトは就活や転職でポートフォリオとして使えるため、いくつか作っておくと良いでしょう。

本記事ではJavaScriptの基本的な記述方法やサンプルコードを紹介しました。まずは基本中の基本である記述を試してみて、興味がわけばそのまま学習を本格化するのがおすすめです。

IT業界での需要が高いJavaScriptを習得し、自分の価値を高めましょう。