JavaScriptに興味を持ってこのページをご覧になっている方は、HTMLは理解できたけどJavaScriptが分からない、もしくはデザイナーだけどプログラミングを始めてみたい、といったような初心者さんだと思います。
はじめに言っておくとJavaScriptは難しくありません。
が、結構奥が深く、どの程度まで習得すべきかは業務レベルによって全く異なってきます。
入門レベルではありますが、後々自分がどんなキャリアパスを描いているのかで必要な知識にかなりの差が出るので、一概にこれをおさえておけば大丈夫！とは言い切れないのが現実です。
筆者が業務でよく使う文法や構文、プラグインなどを考慮しつつ、ウェブデザイナーやHTMLコーダーがフロントエンドエンジニアから一目置かれるようなレベルになるにはどうしたら良いかを紹介・解説していきます。
実際に僕の妻はウェブデザイナー・コーダーですが、ポイントを教えたところ、ある程度の理解や小さなプログラムの修正などが出来るようになったので、皆さんのお役にも立てるかと思います。では、少しずつJavaScriptの世界へ踏み込んでいきましょう。
JavaScriptとは
JavaScriptとは何か？という話になると「長くなる」＆「収集がつかなくなる」のでサラッと紹介します。だいたいのユーザーはこの段落はすっ飛ばすとも思いますので……（笑）
JavaScriptは従来ブラウザ依存のプログラミング言語のひとつで、Internet ExplorerやFirefox、Safari、Google Chrome上で実行可能なスクリプト言語でした。しかし、最近ではサーバーサイドのプログラミングにも利用されることが多く、ひとえにフロントエンドの枠に留まらなくなっています。
（聞いたことがある方もいるかと思いますが）Node.jsというプラットフォームは、近年エンジニアの習得のしやすさから注目を集め、サーバー上のプログラミングにもJavaScriptが用いられるようになりました。
ですので、「JavaScriptエンジニア」といった場合、必ずしもHTML+CSSの延長線上の仕事内容ではなく、Node.js上で動作するプログラムのエンジニアである可能性があるので注意が必要です。
JavaScriptは簡単だと先ほど言いましたが、Node.jsが絡むとHTML+CSSのフロントエンドでの業務より飛躍的に（仕事の）難易度が上がるので、今回はフロントエンドに絞ってポイントをつかんでいきましょう。
初心者がJavaScriptを始めるには何から勉強すべきか
僕は初心者の方にJavaScriptを教えるときはいつも「JavaScriptを勉強するんじゃなくてプログラミングの仕方を学ぶ」ように口をすっぱく伝えています。
JavaScriptを始めるぞ！と意気込んでいる方に釘を刺してしまいますが、JavaScriptを勉強するより、プログラミングの概念を学ぶ意識でJavaScriptと向き合うようにしてください。
何なら「オブジェクト指向」の初級を学んでからJavaScriptを始めることをお勧めします。ですが、そんなハードルの高いことも言ってられないので、プログラムがどういうものかを紹介しつつ、順を追ってJavaScriptに触れていきましょう。
JavaScriptの勉強を始める上で、下記の項目が重要になるのでポイントをおさえておく必要があります。
- プログラムは英語と数学の子供
- プログラムは上から順に実行される
- プログラムの流れを把握する、繰り返しを理解する、分岐を理解する
- 変数と関数の基本をおさえる
- スコープについて知っておく
- HTMLのDOM構造を理解する
- jQueryの知識はマスト
- Google Chromeのデベロッパーツールを使いこなす
JavaScriptの習得で挫折する人の多くは、プログラム本質を理解しようとしていない方が多いような気がします。「プログラムが楽しい」「プログラムが書きたくなる」という人はJavaScriptだけでなく、PHPやエクセルのマクロの習得も格段に早いです。
プログラムアレルギーの方は、ソースコードを線（時系列）ではなく面（塊）で目に入れてしまっている場合が多いです。
プログラムを塊で見ることも大事にはなってくるのですが、初めのうちは一行一行丁寧に確認していくようにしてください。「この行は何をしているのか？」が理解出来て初めて塊が何をしているのかが見えてきます。慣れないうちは「線」（もしくは「点」）でソースコードを見る癖をつけてください。
JavaScript入門手順
JavaScriptを勉強するために必要なものを揃えましょう。ブラウザはInternet ExplorerではなくGoogle Chromeを推奨します。IEは2022年の6月にサポート終了のため、どうしても使いたいのであればEdgeでも良いですが、Chromeの方が圧倒的に勉強に使いやすいツールが多いです。
- Visual Studio Code（VSCode）等のテキストエディタ
- HTMLファイル（.html）、JavaScriptファイル（.jsファイル）、必要であればCSSファイル（.css）
- Webブラウザ（Google Chrome推奨。後述のデベロッパーツールを利用するため。）
上に挙げた3つがあればとりあえずはJavaScriptの勉強に困ることはありません。サーバーはあってもなくてもOKです。JavaScriptはブラウザで動作するためサーバーは必須ではありません。
テキストエディタは極論「Windows標準のメモ帳」でも構いません。ただし、VSCodeは無料な上に、コードの補完など便利な機能が満載ですので、是非VSCodeを使ってください。VSCodeは公式サイトから無償ダウンロード出来ます。
JavaScriptの勉強を始めるにはすべてお金がかからないツールでOKです。入門用でも熟練者のテスト用でも無料でことが足ります。
用意ができたら早速JavaScriptを書いていきましょう。以下、サンプルコードを掲載しますので、例にならって自分で入力してください。注意点としてはコピペは絶対にやめてください。慣れることが目的なのでコピペはNGです。
入門ポイント（1）：JavaScript（プログラム）は英語と数学の子供
早速ですが次のコードを見てください。
let onamae = 'スーパークリーク';JavaScriptの最も簡単な一行です。数学でおなじみの「=（イコール）」が登場しますね。おそらく算数・数学を知っているプログラミング初心者の方は「let onamaeは、スーパークリーク」と脳内で和訳したのではないでしょうか。
実はプログラミングの世界における「=（イコール）」は数学で言う「=（等しい）」とは意味が違うので注意が必要です。上の文章を和訳しても「let onamaeは、スーパークリーク」にはならないということです。
では、どのように和訳するのが正しいのでしょうか？
正解は「onamaeにスーパークリークを入れる（代入する）」です。プログラムでは「=」は「代入する」という意味になります。onamaeがスーパークリークと等しいのではなく、onamaeにスーパークリークを割り当てるってことですね。ちなみに「等しい」を表すプログラムは「==」が相当します。
では、続きを書いてみたので下記をご覧ください。
let onamae = 'スーパークリーク';
alert(onamae);alert(onamae);が追加されました。JavaScriptのalert()はブラウザで小窓を開く関数です。カッコの中身が小窓で表示されます。
同じような出力の確認にconsole.log()というメソッドがあります。これはブラウザのコンソールというエラーやログを表示する機能で、モダンブラウザのデベロッパーツール・開発ツール上で確認が出来ます。alert()は音とともにポップアップが起動するので、最近ではconsole.log()の方が主流になっています。
let onamae = 'スーパークリーク';
console.log(onamae);この記事では単純なalert()を記載していますが、音やポップアップが煩わしい場合にはconsole.log()で置き換えて確認してください。
Chromeのデベロッパーツールの起動は、Chromeを開いて「F12」キーを押してください。
- ①「F12」キーを押してデベロッパーツールウィンドウを表示
- ②↑コンソールタブをクリック
- ③↑ここにconsole.log()の内容が表示されます
「関数」が何か分からない場合は「入力によって出力が決まるルール（引用：関数 | 和から株式会社｜大人のための数学教室）」だとイメージしてみてください。この場合は「onamaeを小窓で出力するalertというルール」といったところでしょうか。
実は、この章の見出しに「英語の子供」と付けた理由は「和訳できる」という意味だけではありません（もちろんアルファベットで書かれているからという訳でもありません……）。このalert()関数を例に説明します。
英語には主語＋述語＋目的語という「S+V＋O」という形があるのは中学校で習ったかと思います。（参考：英語の基本5文型を徹底おさらい！特徴と見分け方をわかりやすく解説 シェーンのお役立ち情報｜英会話教室・英会話スクール【シェーン英会話】）プログラミングの関数にも同様の規則が見られ、述語＋目的語の型が関数に当てはまるのです。
alert(onamae);
// alertは動詞・述語
// (onamae)は目的語
// S（省略）+ V（alert）+ O（onamae）
// S（主語）は省略する上記のalert()を例にとると「alert」が動詞、「onamae」が目的語になります。つまりalert(目的語)のように「()」の中に対象となる事象（=目的語）を入れるということです。もう少し複雑にしてみましょう。
function ouen(musumeName){
alert('がんばれ' + musumeName + '！');
// console.log('がんばれ' + musumeName + '！');
}
ouen('ミホノブルボン');
この場合、「がんばれミホノブルボン！」というアラートが表示されます。1行目～3行目はouen()という独自の関数を定義しています。先ほどのalert()関数はJavaScriptデフォルトの関数でした。今回はouen()関数を作っています。関数は自分でも作成出来るのですね。
「ouen」が動詞、「’ミホノブルボン’」が目的語になります。日本語にすると「ミホノブルボンを（=目的語）応援する（=動詞）」という具合です。ちなみにこの「目的語」はプログラムでは「引数（ひきすう）」と呼んでいます。
入門ポイント（2）：プログラムの流れを理解する（条件分岐と繰り返し）
当然ですがプログラムは書いた順に上から一行一行実行されていきます。ですが例外があり「条件分岐」や「繰り返し」は、行をすっ飛ばしたり、下から上に戻ったりすることがあります。
条件によるプログラムの流れ（ifとswitch）
プログラムの実行される行をすっ飛ばすのが「if」「switch」の２大文法です。
if(条件){…} else if(条件){…} else{…}
let yourScore = 80;
if(yourScore < 100){ // (1)
alert('100点満点じゃないのでやり直し！'); // 条件が合うので実行される
// console.log('100点満点じゃないのでやり直し！');
} else if(yourScore == 100){ // (2) // (1)で条件が合ったので以下すべてすっ飛ばし
alert('すごい！パーフェクト！まぁ当然だけど。'); // 既に上で条件が合ったのですっ飛ばし
// console.log('すごい！パーフェクト！まぁ当然だけど。');
} else { // (3)
alert('チートはずるいです。出禁です。'); // 既に上で条件が合ったのですっ飛ばし
// console.log('チートはずるいです。出禁です。');
}
(4)上の例を見て、「ああ、もう駄目だ」と少しでも感じた人は、プログラムを面で見てしまっています。線で見ることに集中してください。1行1行追っていけば全くもって難しいことなどありません。ゼロです。読書をするとき1文1文読みますよね？（速読の人除く）それと一緒です。何にも怖いことはありません。
1行目は先ほどやりましたね。「yourScoreに80を代入する」です。
1行目yourScoreの値を80に設定したので、以降の条件による分岐が可能になります。この例では、あなたの点数が80点で100点未満のため、「100点満点じゃないのでやり直し！」とキツめのお叱りをうけることになります。
ではどこでそんな条件を定義しているのでしょうか。
- ①
if(yourScore < 100){ - ここではあなたのスコアが100点に届かなかったかどうかを厳正に審査します。
あなたは80点ぽっちなので、まさにこの分岐に当てはまって𠮟られてしまいます。あぁ怖いなぁ…… - ②
} else if(yourScore == 100){ - 出ました「==」。今回は代入するではなく「等しいという意味」です。あなたは100点じゃないのでここのプログラム内容をすっ飛ばされます。残念でしたね……
- ③
} else (yourScore > 100){ - さらに、100点より良い点を取ってしまった場合の分岐がこのブロック内のプログラムです。たったの80点なので同じくこの分岐は無視されます。今回はセーフですが120点なんて取ってしまうと、チート認定され、生涯このゲームを出禁になるので要注意です。しかし、あなたは80点ぽっちしか取っていないため、このブロックはすっ飛ばされますのでご安心を。危ない危ない……
- ④
- いずれかの条件に引っかかってブロック内の処理が終了した直後に、最終的には(4)で終着します。
switch(判別式) { case: 1 ... break; case 2 ... break; default ... break; }
let yourScore = 80;
swich (yourScore) {
case 10: // （1）10点の場合
alert('10点って……');
// console.log('10点って……');
break; // ←この行に来ると（5）にすっ飛びます
case 50: // （2）50点の場合
alert('50点かぁ……');
// console.log('50点かぁ……');
break; // ←この行に来ると（5）にすっ飛びます
case 80: // （3）80点の場合
alert('80点惜しいなぁ……');
// console.log('80点惜しいなぁ……');
break; // ←この行に来ると（5）にすっ飛びます
default: // （4）（1）（2）（3）以外の場合
alert('10点、50点、80点以外ですね。');
// console.log('10点、50点、80点以外ですね。');
break; // ←この行に来ると（5）にすっ飛びます
}
(5)- (1)
case 10: - yourScoreが10点だった場合にこのブロックでプログラムは立ち止まり、処理を実行します。上記の例ではyourScoreが80なのでスルーされます。
- (2)
case 50: - yourScoreが50点だった場合にこのブロックでプログラムは立ち止まり、処理を実行します。上記の例ではyourScoreが80なのでスルーされます。
- (3)
case 80: - yourScoreが80点だった場合にこのブロックでプログラムは立ち止まり、処理を実行します。上記の例ではyourScoreが80なので「80点惜しいなぁ……」とアラートが表示されますね。
- (4)
default: - 「
case XX:」で指定された条件以外に当てはまる場合、プログラムは立ち止まり、処理を実行します。この場合、yourScoreは80なので既に(3)で処理されているため、スルーされます。 - (5)
- 各「case XX:」の最後に「break;」とありますね。このbreak;は分岐をすり抜けて(5)へぶっ飛ぶ流れになります。ちなみにbreak;が無いと処理が続行され、上記の場合は「case 80:」の次の「default:」も処理が走ってしまします。予期せぬバグの温床になるため、必ずbreak;を入れるようにしましょう。（慣れて意図的にbreak;を入れないトリッキーな場合もなくはないです。初級者の皆さんは必ず入れるとだけ覚えておいてください。）
繰り返し（forとwhile）
同じ処理（または同じような処理）をする場合、下記のように記述すると日が暮れてしまいます。2つ3つならまだ書けなくもないですが、エレガントではありません。
let i = 0;
alert(i); // iは0
i = i + 1;
alert(i); // iは1
i = i + 1;
alert(i); // iは2
i = i + 1;
alert(i); // iは3
i = i + 1;
alert(i); // iは4
i = i + 1;
alert(i); // iは5
.
.
.
// 綺麗じゃない、エレガントじゃない、スマートじゃないこのダメダメコードをスマートにするのがfor文となります。下記では、上の動作と同様の処理をたった3行でまとめています。
for (let i = 0; i < 9; i++) { // (1)
alert(i); // (2)
} // (3)
// (4)- (1)
for (let i = 0; i < 9; i++) { - 「i」は変数で、初期値を0に指定しています。
i<9はiが9未満の間繰り返しますよ、という指定です。最後のi++は繰り返しが1セット終わったら「i」に1を足すという意味です。 - (2)
alert(i); - 「i」をアラート表示するっていうことですね。
繰り返しにはif文の他にwhile文もあるので念のため押さえておきましょう。
if文との違いは「()」の中に加算（足し算）や、初期値を設定しないことです。次の例を見てください。
let i = 0; // for文と違い、初期値はwhile文の上部で指定してあげること
while (i < 100){ // 繰り返す条件のみを()の中に記載します
alert(i); // iの数字がアラートで表示されます
i = i + 20; // 最後に i に20を足してあげます
}
// 出力される数字
>> 0
>> 20
>> 40
>> 60
>> 80
>> Q : 100は出るでしょうか？？ → 実際にやってみて答え合わせしてみましょう。これはさっくり済ませたいので、上記ソースコードの中に説明を記述しておきました。for文が分かった方なら何ら問題ないですね。①初期設定の数値を()に書かない。②カウントアップの式を()に書かない。という違いだけです。
入門ポイント（3）：変数と関数とスコープについて知っておく
意外と重要なのがスコープです。JavaScriptを書いたけど、期待通りの結果が出力されない……などの場合はスコープを疑うのも1つです。スコープとは変数が有効なのか無効なのか、使用するブロック（関数など）内での有効範囲のことです。
説明すると非常に長くなるのでザックりサンプルコードを見てみましょう。
function yourFunction() {
const x = 1;
alert(x); // これは正常に「x」をアラート表示できます。「1」がアラートで出ますね。
// console.log(x);
}
yourFunction(); // 上で定義した関数yourFunctionを実行
// しかし、以下のコマンドをyourFunction()関数の下（外）に書くとJavaScriptエラーになります。
alert(x); // JavaScriptエラーになり実行できない。「x」は「yourFunction関数」内部で定義しているので、関数の外では使えないんですね。初歩の初歩なので覚えておいてください。
入門ポイント（4）：jQueryの知識・習得はマスト
最近では脱jQueryという動きがありますが、おそらくここ数年はjQueryに頼らざるをえない状況が続くはずです。脱jQueryを行う場合、JavaScriptの深い理解が必要なので、扱える人間（人材）があまり多くありません。ほとんどのコーダーはjQueryのプラグインを使って、画面に動きを付けたり、クリックの挙動を実装したりしているはずです。
脱jQueryをするにはそれなりの高いスキルが要求されるため、日本に浸透するのはまず無いと思っておいて良いかと思います。誰でも手軽にダイナミックなページが作れるのがjQueryの最大のメリットなので……
jQueryって何？って方もいらっしゃるかもしれないので別途まとめた記事のリンクを何個か貼っておきます。色々と画面に動きが付けれて楽しいですよ。
入門ポイント（5）：Google Chromeのデベロッパーツールは使えるように！
Google ChromeはWebに関わる人すべてに有用なツールをデフォルトで備えています。
中でもデベロッパーツールは使用すべき便利なツールです。Chromeを開いてキーボードの「F12」キーを押すと開始できます。
使い方や、ショートカットについては別途記事にまとめておいたので、そちらを参照してください。
一人では習得が難しかったら無料のレッスン動画を活用する
JavaScriptの入門のためにお金を払って講義を受けるのはあまり関心しません。無料のオンライン講座を活用してもう一歩踏み込むのがおすすめの勉強法です。
progate
プログラミングに特化したオンライン講座です。有料もありますが、基礎の基礎なら無料で受けられます。無料版を受けて、有料版を受けるよりも、基礎を学んだら別の書籍などで勉強を進めるのも手です。https://prog-8.com/
ドットインストール
プログラムについて結構幅広く講義が無料で受けられます。プレミアム会員は有料ですが、ソースコードの閲覧やセリフの文字起こしなどの機能が追加されるだけなので、無料で十分勉強できます。https://dotinstall.com/
Youtube
意外にためになるのはYoutubeのJavaScript関連の動画です。有志（というか広告収入）のYoutuberがJavaScriptについての解説をしているので、Youtube内でJavaScriptと検索してみてください。自分と相性の良いYoutuberのチャンネルを登録して視聴するのもひとつの選択肢です。
最初は書籍を1冊のみに絞ること
本を利用して勉強するのが定石ですが、書籍は必ず1冊を反復して勉強するようにしてください。何冊も本を購入する必要はありません。書いてあることは基本的に同じはずですから、1冊を丸々暗記する勢いで学べばかなりプログラミングが上達します。
以下におすすめの書籍を上げておきますので、どれか1冊を5回くらい読みつぶしてみてください。
『JavaScript 第7版』については非常に分厚いので何度も読むにはかなり苦労するかもしれませんが、もしやる気があればかなりの上達っぷりになるのはまず間違いありません。
オライリーという出版社が出しているのですが、オライリーは技術書の中でもTOPを走る名著連発の出版社です。自身があれば是非トライしてみてください。
まとめ
JavaScriptを習得したいと思う初心者に向けて、要点をポチポチとお伝えしました。もう一度おさらいすると下記について必ずおさえておいてください。
- プログラムの本質を理解しながらJavaScriptと接する
- プログラムの流れを線で追う（分からないことは必ず調べる）
- 分岐・繰り返しなどプログラムの実行される順番をきちんと確認する
- 記号1つにも必ず意味があるので、思い込みで解釈しないこと
- Google Chromeのデベロッパーツールを駆使してテストスクリプトを書いてみる（オーバーライド機能推奨）
- 関数・変数・スコープを理解する
- jQueryは必ず使う（仕事現場で禁止されているときは使わない）
まずは上記の7つについて意識しながら本を読んだり、講習を受けたりすると良いでしょう。ただ、高額な講習はおすすめしません。なぜなら独学でも十分対応出来るのがJavaScriptの良いところなんですから。書店に行って、立ち読みしつつ気に入った本を1冊買って、その本だけを5周するくらいの勉強をすれば誰だって出来るようになります。是非、頑張ってくださいね！この記事が皆さんの役に立てることを祈ってます！
