【基礎から理解】初心者のためのJavaScript入門

監修者

NEUTRAL編集部

NEUTRALは、株式会社ニュートラルワークスが運営するデジタルマーケティング情報メディアです。

JavaScriptでプログラミングをできるようになりたいと思っている。
JavaScriptという言葉は聞いたことがあるが内容はまったく知らない
Webページで使われるJavaScriptを勉強したい
プログラミング言語のJavaScriptの特長をしりたい

人気プログラミング言語のJavaScriptとは何でしょうか？また、どのようにプログラミングしていくのでしょうか？なぜ、Webでは、頻繁に使われるのでしょうか。Webによる調査で人気言語のランキングを示す TIOBE　Indexを確認すると、2022年度3月時点で、JavaScriptは、7位と上位に位置しています。

出典:TIOBE Index

本記事ではJavaScriptの概要、JavaScriptの初歩的な文法のプログラミング方法について詳しく解説していきます。この記事を読めば、JavaScriptの概要と初歩的な文法の使用方法について理解できるようになります。

JavaScriptとは？

JavaScriptの特長は、どのようなものでしょうか。例をあげると

・ブラウザで動き加えることができる唯一のプログラミング言語

・大多数のWebサイトで使用されており将来性がある

・環境構築が必要ない

・フレームワークが豊富

の4つがあります。Webページでは、必ず使われている言語といっていいでしょう。動きがあるWebページに使われており、Webマーケティングが重要視されている昨今では、案件数も多くあります。サーバー側で逐次実行されますので、プログラム開発における環境構築の必要がありません。

また、ソフトウェアの固まりであるライブラリ・フレームワークがあるので、豊富な機能がすでに用意されているところから開発が始められます。有名なフレームワークやライブラリが存在します。非常に有名なものですと、React、Vue.jsがあります。

JavaScriptの開発は、パソコンのみで作業できることから、他のアプリケーション開発と違い大きな機材なども不要です。JavaScriptの案件は、テレワーク、フリーランス向けであるといえます。

実際のプログラムを見てみよう

早速、JavaScriptのプログラムを書いてみましょう。まずは、Hello World!!をブラウザに画面出力するプログラムを記載します。このファイルをブラウザにドラッグすると、”Hello World!!”と表示されるプログラムです。

<html lang =” ja”>
<head>
<title> はじめての JavaScript </title>
<meta http-equiv =” Content-Type”
content =” text/ html; charset = UTF-8″>
<script>

alert(” Hello World!!”);

</script>
</head>
<body>
</body>
</html>

HTML ファイル上に記載しているので、HTML言語の記載もありますが、JavaScryptは<script>から</script>までです。プログラムを見ると、文字を表示する関数のalert() 関数を利用します。alert()関数は、JavaScriptが事前に用意している関数です。alert()関数の括弧の中に、ダイアログに表示する”Hello World”を記述しています。

JavaScriptを勉強するならおすすめのプログラミングスクール

JavaScriptを勉強するのに最も効率的なのはプログラミングスクールにて経験豊富な講師の方に教わることです。おすすめなプログラミングスクールを3つ紹介していきます。

TECH CAMP エンジニア転職
TECH CAMP プログラミング教養
TechAcademy

それぞれ解説します。

TECH CAMP エンジニア転職

テックキャンプでは初心者でもわかりやすいカリキュラムを用意しているプログラミングスクールです。プログラミングに今までふれたことの無い方はもちろん、パソコンを使うことに自信の無い方でも安心して受講できます。学習を挫折させないサポート体制、あらゆる人に合わせた学習スタイル、学習方法はライフスタイルに合わせて選べます。

実際の開発現場で使える技術を学べ、Ruby言語を作った世界的に有名な「まつもとゆきひろ氏」が日本で唯一監修したカリキュラムを使用しています。

テックキャンプエンジニア転職は厚生労働省指定講座の専門実践教育訓練給付制度の対象です。3,200名を超える転職決定実績や、転職成功率は99%といわれており、上場企業から急成長ベンチャーまで幅広い企業への転職実績があります。

HP	TECH CAMP エンジニア転職
コース	短期集中コース
入会金	なし
料金	短期集中コース 657,800円(税込) 夜間・休日スタイル 877,800円(税込)
受講方式	オンライン学習

TECH CAMP プログラミング教養

テックキャンプはテクノロジーが主役の時代に成果の出せる人材を育成する新しいスクールです。これからの時代に不可欠なプログラミングスキルを最高の学習環境で学ぶことが出来ます。確実なプログラミングスキルの習得を約束しており、普通のスクールなら学ぶのに10万円近く必要なコンテンツが月額制ですべて学び放題です。

例えば、Webサービスの開発ではプログラミングを身につけて、SNSやレビューサイトなどあらゆるWebサービスを開発できる汎用的な知識を身につけます。プログラミングの仕組みの全体像を理解することができます。

ほとんどの人は自分の意思だけでは「学習継続できない」とうたっており、テックキャンプではパーソナルメンターが学習進捗を確認し、サービスを作りきるまで学習をサポートします。

HP	TECH CAMP プログラミング教養
コース	TECH CAMP プログラミング教養
入会金	217,800円(税込)
料金	21,780円(税込)※月額
受講方式	オンライン学習

TechAcademy

オンライン型のプログラミングスクールで、副業コースとエンジニア転職保証コースがあります。各コースにエンジニアのメンターを配置しており、挫折しやすいプログラミング学習をサポートしてくれます。オンラインでは、一人で学習することになり、不安になることが多いですが、メンターと一緒に乗り越えることができるでしょう。

副業コースでは、プログラミング初心者でも最短4週間で副業に役立つスキルを習得できるカリキュラムが用意されています。受講終了後のサポートでは、副業の案件紹介、専属のキャリアカウンセラーからの転職サポート、1000社以上の未経験者向け求人から最適な求人を案内するなど、充実しています。

エンジニア転職保証コースは、経産省の認定講座のため最大30万円キャッシュバックされるなど、金額面でのサポートがあるのも、受講者にとってうれしい特徴です。

HP	TechAcademy
コース	はじめての副業コース、エンジニア転職保証コース
入会金	なし
料金	はじめての副業コース(社会人) 4週間コース　174,900円(税込) 8週間コース　229,900円(税込) 12週間コース 284,900円(税込) 16週間コース 339,900円(税込) エンジニア転職保証コース 16週間プラン 437,800円(税込)
受講方式	オンライン学習

変数とは？

よくプログラミングを学習すると、変数がまず始めに紹介されます。変数は、プログラムの中で扱う数字を留める、箱のようなものです。まずは、変数を使ってプログラムを見ていきましょう。

// 変数 test を宣言　
var test = 40;

// 表示　
alert( test ); // 40を出力

</script>

変数に「40」という数値を代入し、その変数値を表示するプログラムです。変数の使い方は、まず変数を宣言します。プログラムでは、”Test”と宣言しています。変数を利用するには、箱を利用し、変数名はTestですと宣言します。宣言しないと利用できません。変数に「40」の値を代入します。

変数を入れる箱にもサイズもあります。文字だったり、数字だったり、0以下の数値だったり、数の大小によって箱のサイズは変化します。例えば、変数の値と箱のサイズが小さすぎたりすると、うまく入らないイメージと同じです。プログラムでは、計算結果がおかしくなる原因になります。

JavaScriptは、変数宣言した際に、その変数のサイズに自動で合わせてくれます。変数には、var、let、constの3パターンがあります。その３パターンをまずは理解しましょう。

var、let、constの違いとは？

変数宣言には、var、let、constがあります。varとletは似ていますが、変数の有効な範囲がletは、より厳密であるといえます。厳しい取り決めの方が、勘違いが起こりにくく、不具合の発生が抑えられるといえるでしょう。constは定数の宣言です。const宣言は、一度宣言すると変更ができません。

// 定数を扱う変数を宣言　
const PI = 3.14;

// 変数 test を宣言　
var test = 1;

// 変数 i を宣言。繰り返しの処理ブロックを実行　
for( let i=1; i<=100; i++ ) {
test++;
}

// 表示　
// testの存在範囲である為、testを参照できる。
alert( test ); // 101を出力

// iの存在範囲ではない為、iを参照できない。
// alert( i );

</script>

上記のサンプルプログラムを見ると、const 宣言されたPIは、「3.14」の値になります。定数で扱うと都度設定する必要がなく、変更する際も、一か所の修正で済むので、効率的です。let は、{} の処理スコープ内でしか、有効ではありません。その処理外では、使えません。Varは、処理スコープ外で利用できます。

サンプルプログラムを見てください。Var宣言された「test」は、alert 関数で表示しています。let宣言した「i」は、alert関数をコメントアウトしています。これは、有効にすると文法エラーになるからです。「i」は、処理ブロック外では、有効ではない為、エラーが発生します。

変数のスコープが狭いと、どの変数が有効でどの値なのか、わかりやすい効果があります。管理の観点もあり、現在は letが使われます。

var	変数の宣言。スコープが変数を宣言したところから、処理ブロック以外でも有効
let	変数の宣言。スコープが変数を宣言したところから、処理ブロックまでしか有効でない
const	定数を扱う宣言。一度設定したら値は変えられない。

演算とは？

プログラムのメリットとして、計算を実施することが特長といえます。プログラムの計算をすることで、人が自分で計算する必要がなくなります。演算は、プログラム上で一連の処理を計算することを意味しています。例えば、誕生日を西暦で入力すると、元号で計算し直してくれたり、インターネットショッピングで金額を合計してくれて、間違わないようにしてくれたりします。

演算をする為の、演算子にはどのような種類があるのでしょうか。今回紹介する演算の種類は、以下の

代入演算子
比較演算子
算術演算子
ビット演算子
論理演算子
文字列演算子
条件演算子

の7つです。それぞれ解説していきます。また、演算の際、一つの式の中で複数の演算子が使われている場合、どのような順番で演算を行うのかによって結果が異なる場合があります。その為、JavaScript では演算子の優先順位が決められており優先順位が高いものから順に演算を行います。

let num;
num = 5 + 4 * 3;

alert(num); //出力 17

</script>

サンプルプログラムの場合であれば「*」の演算子のほうが「+」の演算子よりも優先順位が高いために先に「*」の演算が行われます。その為、numの値の出力は、「17」となります。

代入演算子

代入演算子とは「=」の演算子使って、数値や文字を代入するという演算をおこないます。演算子の前に記述した変数に対して演算子の後に記述したオペランドを代入する場合に使用します。

// 変数 test を宣言　
var test = 40;

// 表示　
alert( test ); // 40を出力

</script>

サンプルプログラムを見てください。実際に演算をして演算結果を画面出力しているプログラムを見ると、「test」という変数に「40」が代入されています。その変数値が読みだされ、「40」を出力します。

■代入演算子

内容	演算子
代入	=
加算代入	+=
減算代入	-=

比較演算子

比較演算子を使って、値の比較をおこないます。2 つの値を比較し true または false を返します。比較演算子は条件分岐やループ文などの条件式を記述するところで利用されます。

// 定数を扱う変数を宣言　
const PI = 3.14;

// 変数 test を宣言　
var test = 1;

// 変数 i を宣言。繰り返しの処理ブロックを実行　
for( let i=1; i<=100; i++ ) {
test++;
}

// 表示　
// testの存在範囲である為、testを参照できる。
alert( test ); // 101を出力

// iの存在範囲ではない為、iを参照できない。
// alert( i );

</script>

サンプルプログラムを見てください。for文の繰り返しで、「i<=100」という比較演算子を使用しています。これは、「i」が「100」以下かどうかを確認しています。このように値を比較するのが比較演算子です。

■比較演算子

内容	演算子
等しい	==
等しくない	!=
より大きい	>
より小さい	<
以上	>=
以下	<=

算術演算子

加算や乗算といった四則演算を行う算術演算子です。算術演算子は演算子の前および後ろに値を取る二項演算子です。それぞれの種類と使い方について解説します。

// 変数 test を宣言 testに40を代入　
var test = 40;

// 変数を加算
test = test + 40;

// 表示　
alert( test ); // 80を出力

</script>

加算演算子( +)は演算子の前の値と後の値がどちらも数値だった場合には数値の加算が行われます。サンプルプログラムを見ると、「test」が宣言した際に「40」を代入しています。その後、加算する算術演算子を使ってさらに「40」を足しています。結果として「test」の変数値の「80」が出力されます。

■算術演算子

内容	演算子
加算	+
減算	–
乗算	*
除算	/
剰余	%

ビット演算子

ビット演算子とは変数のビットを制御、演算する演算子です。JavaScript では内部的に数値はすべて 64 ビットの浮動小数点数として処理されます。ビット演算では数値を 2 進数の形式で表示し、各ビットに対して演算を行います。

let num1 = 27543;
let num2 = 19024;

//0000 0000 0000 0000 0110 1011 1001 0111 = 27543
//0000 0000 0000 0000 0100 1010 0101 0000 = 19024
//—————————————
//0000 0000 0000 0000 0100 1010 0001 0000 = 18960

alert(num1 & num2); //出力 18960

</script>

ビット論理積(&)は演算子の前と後ろのオペランドの同じ位置にあるビットを比較し、両方のビットが共に 1 の場合だけ 1 にします。それ以外は 0 にします。

サンプルをみると数値 27543 と 19024 のビット論理積を行った結果を出力しています。ビット単位で 2 つの数値を比較し、同じ位置のビットで両方とも 1 の場合だけ 1 としています。結果としてコンソールには 0b100101000010000 ( 10 進数で 18960 ) が出力されました。

■ビット演算子

内容	演算子
ビット論理積(AND)	&
ビット論理和(OR)	\|
ビット排他的論理和(XOR)	^
ビット論理否定(NOT)	~
左シフト	<<
符号あり右シフト	>>
符号なし右シフト	>>>

論理演算子

論理演算子とは２個以上の条件の組み合わせを比較する演算子です。論理積は演算子の前および後ろの式が共に true の場合に全体が true となります。論理和は演算子の前または後ろの少なくともどちらかの式がtrueの場合に true となります。論理否定は演算子の後の式が true ならば false、false ならばtrueとなります

// 変数を宣言　
let test = 1;
// 変数を宣言　
let test2 = 2;

// testが1であり、かつtest2が2だったら
if( test ==1 && test2 ==2 ){
test = 0;
}

// 表示　
alert( test ); // 0を出力

</script>

プログラムを見ると、変数宣言された「test」,「tese2」の値が「test」が「1」でありかつ「test2」が「2」であることを(AND)を確認しています。

■論理演算子

内容	演算子
NOT	!
AND	&&
OR	\|\|

文字列演算子

文字列演算子とは、文字列を結合する演算子です。算術演算子の一つである加算演算子(+)は 2 つの値がともに数値の場合には数値の加算として使用されますが、1つまたは2つの値が文字列の場合には文字列の連結として使用されます。

// 文字列結合 “Hello “、”JavaScript”
alert( “Hello ” + “JavaScript” ); //”Hello JavaScript”を出力

</script>

サンプルプログラムを見ると、「Hello」と「JavaScript」が連結されて表示されます。１つまたは２つの値が文字があると自動で+演算子が、文字列を結合します。

■文字列演算子

内容	演算子
文字列結合	+

条件演算子

条件演算子とは、プログラムの分岐などを行う為の演算子です。条件分岐を行う方法のひとつである if 文では、記述した条件式が true か false かによって実行する処理を分けることができます。

if 文では複数の条件式を使ってより複雑な条件分岐を行う if .. else if 文が用意されています。次に繰り返しの処理です。繰り返し処理は決まった回数や条件を満たしている間、同じ処理を繰り返し行う場合に使う構文です。繰り返し処理に使用できるものとして for 文や while 文が用意されています。

// 定数を扱う変数を宣言　
const PI = 3.14;

// 変数 test を宣言　
var test = 1;

// 変数 i を宣言。繰り返しの処理ブロックを実行　
for( let i=1; i<=100; i++ ) {
test++;
}

// 表示　
// testの存在範囲である為、testを参照できる。
alert( test ); // 101を出力

// iの存在範囲ではない為、iを参照できない。
// alert( i );

</script>

プログラムを見ると繰り返しの演算子であるforループを使用しています。「i」に「1」を代入し、「1」ずつ加算されながら「100」になるまで、処理ブロックの処理をおこないます。

■条件演算子

内容	演算子
条件分岐	if-else, if – else if – else、switch
ループ処理	forループ、whileループ、do-whileループ

プログラミングにおいてコメントを書くことは重要です。その処理が何をしているのかコメントを残すことで、他の人から読みやすいプログラムになるので、メンテンナンスがしやすくなるからです。また別の使い方として、一次的にその処理を無効にする時にも使われ、コメントアウトと言われています。

コメントのやりかたも、２種類あります。

一行コメント
複数行コメント

それぞれを解説しましょう。

一行コメント

一行コメントは、「//」を記述します。これ以降、改行までが実行対象から外されます。プログラムの上部や右側に添えられることが多くあります。そのプログラムの説明や代入する意図などを説明します。

// 定数を扱う変数を宣言　
const PI = 3.14;

// 変数 test を宣言　
var test = 1;

// 変数 i を宣言。繰り返しの処理ブロックを実行　
for( let i=1; i<=100; i++ ) {
test++;
}

// 表示　
// testの存在範囲である為、testを参照できる。
alert( test ); // 101を出力

// iの存在範囲ではない為、iを参照できない。
// alert( i );

</script>

上記のプログラムでは、一行コメントで、処理の説明やプログラム自身を無効にしています。コメントをすることで、可読性が高いプログラムになります。

複数行コメント

複数行コメントは「/*」と[*/]で囲みます。囲まれた範囲が実行対象から外されます。ある範囲を無効にしたり、コメントを残すことに使えます。ある機能をまとめて、無効にするとか、プログラムの説明を長文で説明したい場合につかいます。

/*
// 定数を扱う変数を宣言　
const PI = 3.14;

// 変数 test を宣言　
var test = 1;

// 変数 i を宣言。繰り返しの処理ブロックを実行　
for( let i=1; i<=100; i++ ) {
test++;
}

// 表示　
// testの存在範囲である為、testを参照できる。
alert( test );

// iの存在範囲ではない為、iを参照できない。
// alert( i );

</script>

上記のプログラムを参考にすると、すべての処理を無効にしています。複数行コメントを書いたり、一部の機能を無効にするなどの際に使用します。

Webエンジニアを目指すのであれば、JavaScriptは習得必須！

JavaScriptの基本を記載しました。JavaScriptは、わかりやすい言語といわれています。また、JavaScriptはWebの動的なページを作成する際に必ず使われている言語なので、Webエンジニアを目指すのであれば必ず習得しましょう。JavaScriptは実行結果がWebで確認できるためとても勉強がしやすい言語です。

本記事の内容以外にもJavaScriptでできることはまだまだあるため少しづつ学んでいきましょう。