【Javascriptは難しい？】完全初心者から中級者になる為のJavascript学習レシピ集

「Javascriptが難しい…」
「thisってなんなんだ、、、、？」
「ライブラリ？非同期通信？え？」

HTMLやCSSでの学習ではうまくいっていたけれども、
Javascriptの学習に入ってからは思うように進まず、
「これ、自分には無理かも、、」となっていませんか？

私自身もJavascriptに関しては苦労しました。。。
HTML・CSSからすると急に難易度が上がってくるので、
何度も心が折れそうになりました。

この記事ではそんな私自身の経験も踏まえて、
今、まさにJavascriptへの理解に苦しんでいるあなたに向けて、
わからないポイントを明確化して、その問題を解決してもらえるポイントを
ギュッとまとめてお伝えします！

【この記事を読んで欲しい人】
・Javascriptが根本的に理解できない人
・初心者プログラマー
・将来的にJavascriptを使っていきたいと考えている人
・エラーや問題点の解決で悩んでいる人

そもそもJavascriptって何？

Javascriptとは何かと聞かれた時にあなた自身は
説明することができますか？

以外かと思われるかもしれませんが、
Javascriptを難しいと思われている理由の一つとして、
そもそもJavascriptとはどういうものなのかを理解できてい
いないからかもしれません。

心霊写真は怖いと感じますが、
その心霊写真が科学的観点から証明されて、
光の反射でこうなるとわかれば怖くはないですよね？

原理としてはそれと同じことなので、
Javascriptの正体に迫っていきましょう！！

オブジェクト指向の言語

Javascriptは“オブジェクト指向”と言われるプログラミング言語です。

オブジェクト指向をざっくりと雰囲気だけをお伝えするのであれば、
モノ（オブジェクト）を操作する為のステータス（属性）とコマンド（操作）
みたいなものです。

スマブラで言うところの、
ステータスとはキャラクターの移動速度が早いだとか、
ジャンプ力があるとかそう言うものです。
車で言うならば、メーカーや年式、車種などです。

コマンドとは実際の操作です。
コントローラーのAボタンを押せばパンチとか
そう言うものです。
車で言うところの、アクセルを踏んで走るや、
ブレーキを踏んで止まるといった操作です。

このステータスとコマンドをまとめたものがクラスと
言われるものです。

つまりは、
マリオというクラスであれば、
赤色帽子というステータス（属性）があって、
Bボタンを押せばジャンプすると言うコマンド（操作）を
持っているオブジェクトということになります。

このマリオというオブジェクトを複製して、
ステータスを赤色帽子から緑色の帽子にすれば、
ルイージというクラスを作れます。

ステータスをちょこっと変えただけで、
スマブラで必要なキャラを新たに作ることができました。
また、どちらもBボタンを押せばジャンプもしてくれます。

この仕組みがオブジェクト指向とも言えます。
要は共通した部品からクラスを作って、必要なところで
個々にアレンジを加えていきましょう！
といったものです。

オブジェクト指向と聞くと難しく感じるかも知れませんが、
その原因としては、オブジェクト指向そのものが何かを
表す定義ではなくて、「こうしていったらいいよね」
という概念だからです。

大切なのは自分の中で、
こういう考え方だという正解を持って
おくことだと思います。

Javascriptの話に戻りますが、
Javascriptは確かにオブジェクト指向言語ではありますが、
一般的なオブジェクト指向とは違う部分もあります。

それがクラスを持たないという点です。

「え、じゃあさっきのマリオの説明変わるくね？」
と思われたかも知れませんがご安心を！

Javascriptでは確かにクラスは存在しませんが、
それを補うために擬似的にクラスを再現する機能が
ちゃんとあります。

この辺りは、Javascriptの生まれた背景あたりからの
説明が必要になるにで割愛しますが、
ちゃんとオブジェクト指向にそう様に
Javascriptも設計されているということです。

ポイント
Javascriptはオブジェクト指向の言語

言語が動く範囲が広い

通常、プログラミング言語はその言語が動ける範囲が決まっています。
HTMLやCSSであればブラウザ上だけですし、RubyやPythonといった言語は
サーバーサイドで動きます。

つまりはHTMLやCSSはサーバーでは動きませんし、
反対にRubyやPythonはブラウザでは動けません。

ですが、Javasdcriptは例外的にブラウザでも動きますし、
サーバーサイドでも動くことができる言語なんです。

厳密にいうと、サーバーサイドで動いているのはNode.js
と言われるJavascriptとは少し違う言語なのですが、
元を辿ればJavascriptであることに間違いはありません。

Node.jsはWebアプリケーション（Webサーバ）の構築を目的に
設計されたJavaScriptです。

Node.jsが持つ「Webアプリケーション（Webサーバ）が作れる」という
特徴から「Node.jsはサーバサイドのJavaScript」とよく紹介されます。

ところがどっこい、近年では、Node.jsは
クライアントサイドJavaScriptの開発環境としても広く利用されています。

クライアントサイドJavaScriptの開発環境というのは
Babelやwebpackといった「ブラウザで実行するJavaScript」を
開発するための環境のことです。
これらのツールを動かす為にもNode.jsが使われています。

少しややこしくはなりましたが、
Javascriptの開発環境を作るためにJavascriptと組み合わせたツールが
作られているという認識で大丈夫です！

なぜ「Javascriptの開発環境」が必要なのかというと、
Javascriptの最新のバージョンを使った時に、
古いバージョンでも動くようにプログラムを書き換えてくれたり、
古いものを新く書き換えたりする必要があるからです。

また、ちょっとした環境の違いでプログラムが動かなくなることが
ものすごくあるので、そこの問題を解決するためもあります。

モダンは記述ではJavascriptが非常に多く使われていますので、
Javascriptの活動範囲はますます増えてきています。

ポイント
Javascriptはブラウザ、サーバーサイドでも動き、
近年ではWeb開発でよく使われている。

近年ではWebでの活躍がすごい

Javascriptは全章でもお伝えした通り、
ブラウザからサーバーサイドまでと、非常に活動範囲が
非常に広い言語とお伝えしました。

それだけには止まらず、Javascriptではモダンなトレンドでもある、
SPAや非同期通信（Ajax）といった技術を支えています。

SPAとはSingle Page Application（シングルページアプリケーション）の略称です。
ざっくり言うと、Webページで必要なところだけのコンテンツの切り替えを
行うことで、ページ遷移の必要がなく、ブラウザの挙動に縛られないWebでの
表現を可能にする技術です

通常、Webページはページが変わるとページを上から下まで再度読み込みます。
しかしこれだと、一度読み込んで変異がないようなヘッダーといった要素まで
重複して再度読み込むことになります。

なので、ページの中でコンテンツが変わるところだけを抜き出して、
変更してあげられる様になったのがSPAとも言えます。

これにより、スムーズなページの変更ができるので、
使っているユーザーに不便を感じさせないことが出来ます。

こういった技術革命の中でJavascriptはたくさん使われています。

ポイント
モダンな技術の裏側でJavascriptが使われている。

Javascriptが難しい理由

Javascriptがどういったものかは理解してもらえましたか？
ではここからはあなた自身がJavascriptでつまづいてしまうポイントを
お伝えしていきます。

難しいと感じるポイントではありますが、
逆を言えば、ここを理解できればJavascriptの理解は
格段に上がります！

活動範囲が広く覚えることが多い

前の章でもお伝えしましたが、Javascriptはブラウザでも、
サーバーサイドでも動く多種多様な言語です。

また、それに加えて近年の技術革命の中で、
Webアプリケーションを開発する中でも、
実行環境を構築する為にも使われています。

ReactやVueといったSPA（ジングルアプリケーション）の
フレームワークの普及に伴って、
そういったツールの使い方も学ばなくてはいけなくなってきています。

フレームワークだけでなく、
Javascriptのライブラリといったものを沢山あり、
初心者からすると何がなんなのかがわかりにくい欠点があります。

ブラウザ側だけでJavascriptを見ただけでも、
DOMの操作やイベントの処理なども非常に多くあります。

様々なところで使える反面、
それがデメリットとなってしまっています。

覚えることは確かに多いですが、
まずはJavascriptそのもののメカニズムやブラウザでJavascriptを
使うときのDOM操作やイベント処理をまずは抑えて
学習していくのがいいでしょう。

その辺りの基礎の積み重ねがSPAといったフレームワークや
ライブラリで使われている技術になるので、
ベース部分を担保してあげれば問題なく理解できるかと思います！

ポイント
・Javascriptは覚えることが多いが、
基礎基本を担保にすれば十分に理解できる
・基礎基本とブラウザでの動かし方をまずは抑えよう！

活発にバージョンアップがされている

モダンな技術でも多種多様に使われているJavascriptなので、
その分たくさんの不具合の解消や機能充実のアップデートが行われます。

もちろん、ライブラリやフレームワークごとの
アップデートもあります。

活発に技術が発展していっているので、
その辺りは避けられないですが、
初心者からするとなかなか追いつけないのも事実です。

古いバージョンと新しいバージョンとでは
挙動が変わるものもあるので、
常に最新なのかどうかを見定める必要性はあります。

また、新しいから正解というわけでもなく、
テスト運用的に導入されるものもあります。

その場合は多少の不具合などがあるものなので、
基本的には使わないに越したことはありません。

基準とするべきなのは安定板と言われる、
「バグがなく、ちゃんと動きますよ！」と保証された
バージョンを基準としましょう！

初心者の時は情報を集めるの困難な部分もあるかと思いますので、
学習をする教材などは発行年数をみて、古くても3年前くらいのものに
しておきましょう！

特にメルカリなどを利用して買う場合は注意です。
同じタイトルの本でも改訂版であるかどうかなどのチェックは
細かくしてみましょう。

ポイント
・Javascriptではバージョンアップが盛ん
・使う教材は古くても3年以内の新しいものを使う

情報量が多く、またそのバージョンもまちまち

Javascriptはマイナーな言語とは違い、かなりメジャーな言語です。
そして、歴史もある言語です。

比較的新しい言語(Goなど)であれば、情報量が圧倒的に少なく、
また、あったとして英語での文献がほとんどです。

こういった場合は初心者にはかなりハードルが高くなりますが、
Javascriptはそうではありません。

日本語で書かれた文献や教材も多くあり、
最新の情報で書かれたものも沢山あります。

しかしながら、古い情報で書かれた情報も
実際のところかなり多くあります。

例えばですが、現在では非推奨となっている変数宣言の
「var」を用いたコードの紹介も多数見受けられます。

varは現在使われている変数宣言のletやconstとは
挙動が異なる部分があります。

その情報源に書かれたまま実装してしまうと、
他のところで思わぬエラーが発生するなんていう
ケースも考えられます。

なので、
ネットでの情報を検索するときはその情報が最新のもので
あるのかどうかは常に吟味してください。

ネット記事であればその記事が公開された日付などを
参照してみてください。

Qiitaなどの有名なサイトでは、
公開からどれだけの時間が立っているかなどの
アナウンス機能もあったりします。

いずれにせよ、ネットから拾ってくる情報を
見定めるのはその情報を検索した人だけなので、
自分自身で基準値をもうける必要があります。

または、最新の情報でその情報の中身を
書き換えるかだと思われます。

この辺りはJavascriptにいかに触れて、
どれが新しいかをわかるようにするしかないので、
慣れですが、その情報が間違いではないかを確かめる意味でも、
同じことを書いている複数の情報を探しましょう！

ポイント
・ネットでの情報には古いものもあり、それを見分ける必要がある
・ネット記事では公開年月を参考にして判断する。

実行環境によって動作が異なる

Javascriptではプログラムを動かす環境下で動作が異なる
ことがあると言うことです。

Javascriptでの動作の違いとしては
・バージョンの違いによる挙動の違い
・Javascriptを動かすエンジンの違いによるもの
・プログラム内のコントラストなどによるもの（thisなど）
などがあげられます。

バージョンの違いによるプログラムの動作の違いは
Javascriptに限らず、プログラミング全体でも言えることです。

また、基本的にはJavascriptを動かすエンジンも
最近では統一されてきていて、今では「V8エンジン」が
主流になっています。
その背景もあって、こちらの影響は近年ではかなり
問題にはならなくなってきています。

一番Javascriptで気をつけるべき環境下の違いは、
実際に書いているプログラムの中にあります。

それはコントラスト（Javascriptが動いているコード内）や
スコープ（参照範囲）などの違いで、
thisや変数の挙動が異なると言うことです。

こちらに関しては後の章で説明します。

ポイント
・バージョンの違いによる挙動が異なる
・Javascriptを動かすエンジンでも挙動が変わる
・プログラム内のコントラストなどによって挙動が変わる

書き方がたくさんある

Javascriptでの書き方とは主に

・バージョンの古い書き方と新い書き方
・シンタックスシュガーによるもの

の2つが考えられます。

シンタックスシュガーについては、
この章の後半部分で説明しています。

Javascriptはかなりポピュラーな言語なので、
沢山の情報がありますが、
その情報は古いバージョンで書かれたものと、
新いバージョンで書かれたものが混在しています。

まだ、Javascriptを学び始めたばかりの人からすると、
どれが最新のものなのかの判別がつきません。

代表的な例であるなら、変数宣言のvarが有名です。

こちらは古いJavascriptで使われていたもので、
現在ではconst,letの使用が推奨されています。

このバージョンの違いによる書き方の違いが
理解をややこしくしているポイントでもあります。

また、Javascriptの中では実に様々な構文がしています。
その中でもその元々の構文をより簡単に開けるようにした、
シンタックスシュガーと言われる構文もあります。

おそらくですが、このシンタックスシュガーによって、
Javascriptが複雑に見えている部分もあります。

なぜなら、シンタックスシュガーは簡単にかける反面、
その裏側で動いているシンタックスシュガーを動作させる
元々のプログラムが見えないからです。

簡単に言うと、Javascriptが動いているメカニズムです。

シンタックスシュガーでクラス構文をかくと

class A {
constroctor(a){
this.a = a;
}
b(){
console.log(‘hogehoge’);
}
}

このようになります。

このクラス構文の裏では

・コンストラクター関数
・プロトタイプ

の2つが大きな役割をになっています。

クラス構文はJavascriptの機能として
コンストラクター関数と言うオブジェクトを作る雛形と、
その雛形が独自に持つプロパティであるプロトタイプ
と言う2つの機能から作られています。

単にクラス構文をみただけでは上にあげたような、
プロトタイプは出てこないので、
Javascriptのクラス構文のロジカルを理解しにくい
現状が起きてしまいます。

なので上の例を紐解くと

function A(a){
this.a = a;
}

A.prototype.b = function(){
console.log(‘hogehoge’);
}

というコンストラクター関数とプロトタイプの定義が
裏では動いています。

こういった裏側でのJavascriptの動きを理解していないと、
何をやっているのかが見えにくくなるのがシンタックスシュガーの
デメリットでもあります。

また、シンタックスシュガーのように見えて、
実はそうではないものもあります。

代表的なものがアロー関数です。

アロー関数とは関数を簡単にかけるようにしたものですが、
実際には挙動が関数とは異なるので、
違う関数を定義していることになります。

詳しい説明は割愛しますが、
そういったシンタックスシュガーのように見えて、
実はそうではないものもあるのが初心者からすると
余計にややこしくしている原因とも言えます。

この辺りは、仕様としてそうなっているので、
一つずつ理解していくしかないでしょう。

ポイント
・バージョンの古い書き方と新い書き方がある
・シンタックスシュガーによる書き方がある
・簡略化して書ける反面、挙動が変わるものもある

thisやpromise、コールバック関数の挙動が難しい

初心者なら必ずつまづくポイントがJavascriptにはあります。
それがthis、promise、コールバック関数達です。

実際に現場で使われているJavascriptはこれらの機能を
組み合わせたものになりますので、理解は必須と言うことになります。

特にthisはJavascriptにおいて特殊な値であり、
thisを呼び出す実行環境によって、その値が変化します。

数学で言うところの
「頼むから点Pよ、動かないでくれ、、」
に近い感情が湧いてきますね！

このthisですが、基本的には呼び出し元のオブジェクトを参照する
ものではありますが、コールバック関数としてオブジェクトのメソッドを
指定したりすると、また挙動が変わってきたりもします。

thisという言葉の意味合いに惑わされずに、
thisが何を意味しているのかを理解しておきましょう！

Javascriptではこの他にも、
primiseやコールバック関数等もあります。

最初のうちは何をやっているかがわかりにくいですが、
それが何のために存在しているのかを考えてみると、
段々と理解ができてくるかと思います！

また、promiseはサーバーとの通信が関わってくるので、
単にJavascriptが理解できていないのではなくて、
HTTP通信などのサーバーとのやりとりが理解できて
いないケースが多いのではないかとも思います。

ブラウザとサーバー間でどんな動きをしているのかを
理解した上でJavascriptのpromiseは何をしているのかを
初めて理解できます。

意外と見落としがちではありますが、
そういったWebを支えている技術についての学習も
しっかりとしておきましょう！

ポイント
・何のためにその機能を使うのかを理解する
・その機能がどういう動きをしているのかを理解する
・Webでの技術もしっかりと学んでおく

複数の技術が組み合わさって、流れが見えにくくなっている

プログラミングを始めたばかりの頃は、
ちょっとした動作の一つを理解するだけでも骨が折れます。

それなのに、
「変数の挙動からthisの束縛にコールバックが合わさって、、、」
となるともう理解不能になりますよね。

Javascriptで一番難しいポイントはやはり、
「複数の技術が複雑に組み合わさっている」
という点にあるかと思います。

しかしながら、これはJavascriptに限らずプログラミング全体に
おいても言えることでもあります。

なので、ゆくゆくは理解できるようになる、
または、複雑に絡み合っているものを紐解けるようになる
必要性があります。

「じゃあ、僕には無理かも、、、」
と思われるかもしれませんが、
まだ諦めるのは早いです！！

誰だって最初はわからないものなので、
問題はありません！

複雑とは言えそれら一つ一つは基本の積み重ねです。

それにネットには無数の問題解決の為の方法が溢れていますし、
基本的に何かをしようとした時に、それはどこかの誰かが
すでに実装している可能性の方が高いです。

全くもって新しい未知の技術を使うことはまずないので、
落ち着いて調べれば正解へとたどり着けます。

流れがわかりにくい時は
今わかっているところを書き出していくのが
一番理解できます。

頭の中だけで技術の組み合わせを理解するのは
かなり至難の技でもあると思います。

まずはどこまで理解していて、どこが理解できていないのかを
明確化させる意味でもフローを書き出すことが大切ですし、
そこから仮説を立てて調べていくことが理解へと繋がります。

自分の中で間口奥行きを広げていく方法も
考えて、取り組んでみましょう！

ポイント
・複雑なものも基礎の積み重ね
・わからない時はフローを書き出す

初心者がつまづくJavascriptのポイントまとめ

Javascriptにおいて初心者がつまづきやすいポイントをまとめました。
難しいと感じるthisやPromiseも言ってしまえば、基礎の積み重ねで
成り立っています。

各ポイントを抑えて、Javascriptで困った時に、
「何がわからなくて困っているのか？」を明確にしていきましょう！

一つ一つのコードの挙動を明確にする

Javascriptに限らず大切なのは、そのプログラムがどうやって動いているのかを
知っておくことです。

意外と見落としがちな部分でもあるので、
しっかりと理解しておけばエラーなどにも柔軟に対応できます！

全部を説明するのは難しいので、ポイントとなるところを
それぞれピックアップしてお伝えします！

Javascriptの実行環境のメカニズム理解

Javascriptがどういう環境下で動いているのかを
考えたことはありますか？

初心者の頃は考えたこともありませんでしたが、
(そもそもそんなことがあることもわからなかった)
プログラミングでは実行環境下はものすごく重要なテーマでもあります。

ちょっとした環境下の違いで発生するエラーなどもあるので、
ここではJavascriptがどういった環境下で実行されているのかを
簡単に説明していきます！

Javascrptエンジンで動いている。

JavascriptはJavascriptエンジンによって動いています。
このエンジンというのはそのまま、車のエンジンと同じ役割を果たしています。

これがなければJavascriptは動かないということです。
このエンジンは各ブラウザで用意してあるものなので、
私たちがJavascriptを使う上で、インストールしたりするなどの準備は
不要ということになります。

しかし、各ブラウザで用意しているというところがミソです。
車でも様々なエンジンがあるように、Javascriptでもいくつかの
エンジンがあります。

そして、そのエンジンはブラウザによって異なるというのも注意点です。

Javascriptエンジンの主流はV8エンジンと言われるもので、
ほとんどのブラウザがこちらのエンジンを使用しています。

時代背景もあり、むしろ、こちらのエンジンに統一されてきているというのが
正しい言い方かもしれません。

とはいえ、現状ではまだ全てのブラウザで同じエンジンが使われているわけでは
ありませんので、幾らかのJavascriptの挙動の違いというのは出てきます。

「じゃあ、そこまで考えてコードを書かないといけないの？」
と言われると、答えはノーともいえます。

普段使うブラウザはほとんどがV8エンジンですし、
他のブラウザでもそこに合わせて対応を変えてきているので、
大きな問題になることは少ないでしょう。

ポイント
・JavascriptエンジンでJavascriptは動く
・V8エンジンが主流

実行コンテキスト

実行コンテキストとはJavascriptエンジンの中で動いているコンテキストのことです。
簡単にいうと、コードが動ける範囲です。

この実行コンテキストと呼ばれるコンテキストは次の3つがあります。

・グローバルコンテキスト
・関数コンテキスト
・evalコンテキスト

・グローバルコンテキスト
グローバルコンテキストはJavascriptのどこからでも参照することができる、コンテキストです。
このグローバルコンテキストと呼ばれるコンテキスト内にJavascriptが
Web上でも動けるように設定してあるWebAPIsが定義されています。

Javascriptのコンテキストの階層の中では一番上の階層ということです。

・関数コンテキスト
Javasriptで定義された関数の中で有効なコンテキストです。
グローバルコンテキストと比較したときに、こちらの方が、
よりクローズドな範囲となります。
関数コンテキスト内で定義した変数などは関数コンテキストの内部でしか、使用できなくなります。

・evalコンテキスト
文字列で指定したコードを実行できるコンテキストです。
こちらのevalコンテキストは非推奨なコンテキストなので、
実際に使うことはないと言い切れるでしょう。

ではなぜ非推奨なのかというと、悪意のあるコードがevalコンテキストに渡ってしまうと意図も簡単にコードが実行されてしまうからです。
つまりはセキュリティ的に脆弱なコードということです。
使うことが無いので詳しい説明は割愛します。

Javascriptを使う上でコンテキストは非常に重要な部分でもありますし、
全てのコードはこのコンテキストの上で動いています。

ポイント
・Javascriptには3つのコンテキストがある
・evalコンテキストは非推奨

コールスタック

コールスタックとはどの関数が現在実行されていて、
その関数はどの関数から呼び出されているのかなどがわかる
実行中のコードが辿ってきたコンテキストの積み重ねです。

このコールスタックが威力を発揮するのはデバッグの時です。
コールスタックは検証ツールからも確認することができるので、
コードがどこを辿ってきたのかをより簡単にみることが出来ます。

その段階ごとに参照できる変数なども確認することもできるので、
エラーが起きた時に「どこまでコードは動いているのか」などを
確認することが出来ます。

また、ライブラリなどではコードがどこで動いているのかなども
確認することもできるので、コードリーディングなどで
有効に使うことも出来ます。

ポイント
・コードが辿ってきたコンテキストを追跡できる。
・デバッグで有効に使える

ホイスティング

ホイスティングとはJavascriptエンジンが変数や関数の定義をコードが実行される前にメモリ上に配置する挙動のことです。
その挙動から「宣言の巻き上げ」とも言われます。

少しイメージしにくいかもしれませんが、
Javascriptでは一つ一つのコードに対して、それをJavascriptエンジンの
メモリ（保存場所）に配置してあります。

例えばですが、変数Aがあるとしたら、
Javascriptエンジンはホイスティングとして、変数Aを保存する箱（メモリ）を
用意することになります。

実際に変数Aが参照された時はこの箱（メモリ）から値を取り出します。

このホイスティングですが、変数と関でそれぞれ挙動が異なってきますので、
ホイスティングをわからずにJavascriptを触っていると、
よく、エラーの原因にもなります。

意外と聞き慣れない言葉でもあり、教材でも説明していなかったりするので、
しっかりと覚えておいてください！

ポイント
・変数や関数の実行前にメモリに配置する
・変数と関数で挙動が異なる

Javascriptのコードのメカニズムへの理解

前のセクションでは Javascriptのメカニズムの中でも、
Javascriptが動いている環境下に影響するものをピックアップしました。

このセクションではより皆さんがコードを書いている現場を舞台に
Javascriptのメカニズムを紹介していきます。

変数

Javascriptにおいて変数の定義の仕方は3つあります。

・var
・const
・let

・var
ECMAScript 2015(ES6)という新いJavascriptの規格より前に
使用されていた変数の定義の仕方であり、現在では非推奨です。
現在のJavascriptにこの変数定義を使ってしまうと、
バグを生む原因にもなります。

基本的な性質として、ブロックスコープ（変数の有効範囲）を無視したり、再定義が可能となるので、バグを生む原因になります。

・const
新いJavascriptの規格で採用された変数の定義方法です。
基本的に再定義・再代入が不可となります。
なので、基本的に変更しない値や変更されたら困るような値を定義するときに使用します。

・let
新いJavascriptの規格で採用された変数の定義方法です。
再定義はできませんが、constとは違い再代入が可能となります。
再代入した時は後で代入された値が上書きされます。
基本的に変更が伴う値などに使用します。

古いJavascriptの規格で書かれた文献などでは変数の定義としてvarがよく
出てきます。
（jQueryで書かれている場合はvarのみです。$マークが出てきたら、そえれは古い規格のJavascriptではなくて、JQueryです。）

varで宣言された変数は再定義が可能だったり、スコープと言われる、
変数を参照できる範囲を無視したりするので、同じコードを最新のJavascriptに
書き換えたとしても、挙動が異なってきますので注意が必要です。

ポイント
・変数の定義にはvar.const.letの3種類がある
・varは古い規格の為、非推奨。
・varは挙動が異なるのでバグの原因になる

オブジェクト

JavaScriptでは、数値も文字列も配列もすべてはオブジェクトです。
そして、オブジェクトとは関連のあるデータと機能の集合体のことです。

オブジェクトの中身としてはキーと言われるプロパティと、
それの対象となる値がセットで格納されています。

例えばオブジェクトが次のような組み合わせを持っているならば、

コードではこう表現されます

{
name: ‘山田’,
age: ’23’
}

このようにオブジェクトとはキーと値がセットになっている、
データの集合体を表します。

基本的にオブジェクトは変数に代入して使用します。
例えばですが以下のように

const user = {
name: ‘山田’,
age: ’23’
}

とした場合、変数userには代入されたオブジェクトへの参照（データを取得する
アクセス権のようなもの）を持つことになります。

なので、オブジェクトのデータを取得するときは、
オブジェクトのキーを指定することで、値を抜き出すことができます。

console.log(‘userの名前は’ + user[:name] + ‘です’);
// userの名前は山田です

となります。

変数userは指定されたオブジェクトへの参照を持っているので、
キーを指定して、それに対する値を取得することができるわけです。

ポイント
・Javascriptでは全てがオブジェクト
・オブジェクトはキーと値のセットでデータを保持する

関数

Javascriptにおける関数とは、
実行可能なオブジェクトのことです。

関数自体がオブジェクトなので、関数を実行しなければ、
単にオブジェクトのデータとして扱うことができます。

関数を実行するときは

関数名();

と関数名の後ろに()をつけることで、関数を実行することができます。

function example(){
console.log(‘hogehoge’);
}

という関数があったとします。

この関数を実行したいときは

example();

とすればコンソールに「hogehoge」と表示されます。

また実行しなければデータとして扱えるので、変数を用意して、
代入することもできます。

const newExample = function example(){
console.log(‘hogehoge’);
}

これをコンソールで確認すると、
関数の中身を確認することができます。

console.log(newExample);

また、変数に代入した関数も()をつけることで、
実行することができます。

newExample();
// hogehoge

そして、関数の定義方法には

・関数コンストラクタ
・関数式
・関数宣言
・無名関数
・即時関数

と複数あり、これもJavascriptをわかりにくくしている要因とも言えます。

ここでは個々の関数の宣言までは言及しませんが、
関数コンストラクタはほとんど使用されませんので、覚える必要はないです。

ポイント
・関数は実行可能なオブジェクトである
・関数の宣言にはさまざまな方法がある

演算子への理解

演算子とは何らかの処理をする時に使われる記号のことです。

例えばですが、足し算をする時には

a + b

といったように「+」の記号を書きます。
これが演算子です。

また+のような記号だけでなく、

new インスタンス名();

のようにインスタンスを生成する時にはnew演算子が使用されます。
（インスタンスとは機能の塊のようなものだと思ってください。）

なのでJavascriptでは何らかの処理をする時に使用する特定の記号を
演算子だと覚えておきましょう。

何かを比較するときに使用される比較演算子や代入演算子など
演算子はかなり多く存在していますし、頻繁に使用されます。

演算子においては処理の実行の優先順位などがあるので、
思っていた挙動と違う挙動をコードがしたときは、
疑ってみてください。

特に計算をするときは掛け算と足し算の優先順位など、
普段から算数をする上でも意識される優先順位が登場しますので、
間違えないようにしましょう！

ポイント
・演算子は何らかの処理をする時に使用する
・演算子によっては処理の優先順位がある

ループ処理の理解

ループ処理とは繰り返して処理を行う反復処理のことを言います。
プログラミングをする上でも、このループ処理は非行によく出てきます。

Javascriptではループ処理を行うのに

for文
for in文
for of文
forEach文
while文
do while文

など実に様々なループ文が存在しています。

使用する場面は実に様々ではあるので、
各構文の特性を理解しておき、場面ごとに使い分けれるように
していきましょう！

例えばfor文で1〜100までの数字をコンソールに表示するのであれば、

for( let i = 1; i <=100; i++){
console.log(i);
}

となります。

Webの制作での現場では連続したイメージ画像などの表示や、
繰り返されるコンテンツなどに使えます。
(例えば100枚の画像を連続して表示するとしたら、100回も記述するのはめんどくさい！)

何回も同じ記述を連続して書くような場面であれば、ループ分を使って、
少しの記述で済みますので、かなり効率的になります。

また、Q&Aなどによく見かけるボタンを押すと下からコンテンツが出てくるようなイベントの処理でもループ文は使われます。

イベントの登録をループ分を使って、各要素に登録しているわけです。

また、Javascriptではループ処理はイテレータやジェネレータと密接にまた関わっていますので、上級レベルを目指すのであれば、理解は必須です。

ここでは深くはお話はしませんので、興味のある方はイテレーターやジェネレータなどについても調べてみるといいでしょう。

かなり理解が難しいところでもあるので、初心者のうちは、
「そんなのもあるんだな」と思ってもらって大丈夫です！

ポイント
・Javascriptでは様々なループ処理がある
・うまく使うことで作業の効率化にもなる

非同期処理の理解

非同期通信とは通信をしていないようなイメージがありますが、そういうわけではありません。（しっかりと通信はしています！）

通常の通信は同期通信と言います。
この同期通信というのはコンピユータ間で送信者と受信者が息を合わせて通信を行なっている状態です。

少しわかりにくいかもしれませんが、この同期通信というのは一つの通信をしているときに、両者（送信者と受信者）が息を合わせるので、
一つの通信（例えばファイルのダウンロード）が終わるまで、他の通信ができなかったりもします。

つまりは、重い通信が増えるほど、ブラウザの動作は重くなります。

この問題を解決するために作られたのが非同期通信です。
非同期通信では送信者と受信者の息を合わせずに通信を行います。

なので、今まで息を合わせないといけなかった場面がなくなり、
通信自体がスムーズとなります。

もう少し詳しく説明すると、
ブラウザが通信しているステージにはいくつかの段階があります。

その中でもメインとなる通信をするステージからサブとなるステージに
通信を回すものを非同期処理とも言えます。

つまりは、処理が重くなるときに処理をするのではなくて、
処理が軽いときに処理を後回しにするというものです。
これによって、ブラウザが猫の手も借りたい状態の時に、通信をするんではなくて、暇な時に通信をするのでかなりスムーズに行えるということです。

この非同期通信の代表的なものがGoogleMapです。
昔のマップは一つの地図を読み込んで、別のエリアを見ようとすると
いちちレンダリングをして読み込みが終わってから、次のエリアを見れました。

ですが、現在のGoogleMapでは指でスワイプをするだけで、
サクサクと次のエリアも見れます。

この快適さは非同期処理があるおかげで作られているわけですね。

また、Javascriptには同じ非同期処理でもコードでの書き方が
何種類かあります。

ですが、１番のベースになっているのはPromiseを言われるインスタンスです。このPromiseがベースとなってfetchやasyncといった非同期処理が作られています。

Javascriptを使う上ではかなり難しい部分にはなっていきますが、
Promiseについてしっかりと理解をしておくことで、後々の開発や、
ライブラリを使う上でもその使い方を理解できるでしょう。

ポイント
・非同期処理を行うことでブラウザの通信をスムーズにできる
・Promiseがベースとなって非同期処理は作られている

モジュールの理解

モジュールというのは、一つのファイルではなくて、
管理がしやすいように複数のファイル（または部品）に分けたもののことを言います。

木の枝のように分岐していくので、モジュールと呼ばれています。

このモジュールですが、開発を行なっていく上ではものすご重要な考え方です。
なぜかというと、一つのファイルに全ての処理を記述してしまうと、
どこに何が書いてあるのかがわからなくなるためです。

大規模な開発であれば書くコードの量も多くなりますし、
複数人が開発に携わるので、どう管理していくのかがポイントとなります。

そこで、開発に書くコードを機能ごとなどにまとめた部品に分類することで、
どこに何が書いてあるのかを明確化するためにモジュールを使います。

Javascriptに限らずにどんな開発でも必ず出てくるワードでもあるので、
しっかりと押さえておきましょう！

ポイント
・モジュールとは機能ごとなどに分類した部品のこと

Javascriptを理解するためのデバック手法

プログラミングではエラーは日常茶飯事です。
そして、そのエラーを解消するための方法がデバッグです。

このデバッグはエラーに対して、今どういった問題でエラーになっているのかを
確かめるための手法です。

Javascriptでの開発でよく使われるものとしては、「検証ツール」がメジャーです。

この検証ツールではコンソールと言われる、Javascriptのエラーログなどを出力してくれる機能があります。

その他にもブレークポイント（処理を止めたいポイント）を指定することでJavascriptの処理を追いことができる機能や、コールスタックの確認などもできます。

特にクラスのthisなどを使うときはエラーになりやすいので、
コンソールに今取得できている変数などを出力して、確認をするちおいう場面が
たくさん出てきます。

検証ツールは中々奥が深いので、使い方は随時調べるほうがいいでしょう。

検証ツール以外の方法としてはJavascritに組み込んであるdebuggerというメソッドがあります。

このdebbugerは処理を止めたいところに記述することで、そのポイントで処理を止めることができます。

ポイント
・検証ツールを使ったデバッグが主流
・debuggerでもデバッグができる。

Javascriptでわからないに直面した時の必勝解決フロー

プログラミンを学ぶ上で「わからない」は日常です。
この「わからない」をどれだけ自分の力で乗り切れるかで、
プログラマーとしてのレベルが決まります。

実際の現場では確かに先輩社員などに助けてもらうことはできますが、
基本的に自分で問題は解決して行くのがセオリーですし、
わからないが出るたびに聞いていたら、「使えないやつ」と思われてしまうかもしれません。

それに転職などの面接でも自走力をアピールできれば即戦力として認めてもらえるので、強い武器になります。

ここでは私の経験から培ったプログラミングを学ぶ上での「わからない」に対する考え方とフローをお伝えします。

大きく分けると「わからない」を乗り切るためのフローは以下の通りです。

• 解決したいことを明確にする
• エラーまたは問題が起きるまでにたどったルートを明確にする
• エラー文の意味を明確にする
• 考えられる仮説を立てる、わからなければ調べる
• 仮説の優先順位をつける
• 仮説を深掘りして、とるべきアクションを考える
• 仮説⇆アクションを繰り返す。

解決したいことを明確にする

まずはエラーに遭遇したら「今何を解決したいのか？」を明確にすることです。

とにかくググりまくるという人もいるかもしれませんが、
エラーが起きた時にググるのは最後です。

ただ闇雲にググるのは時間の無駄ですし、明確な答えが得られるとは限りません。
それにロジカルに考えてエラーを解決しないと更なるエラーによって、
より作業が進まなくなるということも考えられるからです。

また、全く関係のないことをずっと調べてしまったりするなどのパターンもあるかと思います。

とにかく、一度深呼吸をして解決したい問題は何かを具体的にすることがスタート地点です。

エラーまたは問題が起きるまでにたどったルートを明確にする

エラーが起きるのには色々な原因がありますが、
自分自身がどういったルートを辿ってきて、どの段階でエラーが起きたのかを
明確にする必要があります。

これは後で考えられる仮説を立てるためでもありますし、
実際の現場では誰かにわからないことを聞く上でも、何を考えて、どう実装したらこうなったのかを説明できなければ、聞き手は理解出来ないですし、
解決策の予測も立てられないからです。

できればエラーが起きてからルートを戻るのではなくて、
一つ一つの実装でどういったことをしていくのかなどをメモしておくのが
好ましいです。

人間は忘れる生き物なので、エラーが起きて振り返った時に、
「なんでこれをこうしたんだっけ？」と思い出すのに時間がかかったり、
最悪は思い出せないなんていうケースもあります。

そうなった時にエラーとは関係ないところでつまづいてしまい、
無駄に時間を浪費してしまうので、勿体無いですね。

私はよくメモとしてGitHubのissueをメモがわりに使ったりしています。
エンジニアであればGitHubは使う機会も多いので、そういったところの機能を
有効に活用するのもエンジニアとしてのスキルアップに繋がります。

また、GitHubはチームでも共有できるので、どういったところで問題が起きたのかなどをメモしておくことで、今後の解決柵にもなりますし、
トラブルをチームで共有することもできます。

エラー文の意味を明確にする

意外と多くいるのがエラー分をちゃんと読んでいない人です。

確かにエラー分は英語で出てくるので、どことなく毛嫌いするのはわかりますが、エラー分はエラーの原因になっていることを教えてくれています。

これを読まないとそもそもエラーを解消するのは無理でしょう。。

最近ではDeepLなどの翻訳ツールもかなりハイスペックで、かつ、無料で使えるので、英語がわからなければ翻訳ツールを使って翻訳していきましょう。
（私はいつも翻訳しています。）

そして、翻訳できたら、そのエラー分は何を意味しているのかを考えましょう。

タイポなのか、文法ミスなのか、はたまた値がちゃんと取れていないのかなど、
細かい原因をエラー分は教えてくれています。
それに解決のヒントをくれている場合もあります。

「事件は現場で起きている」という有名な言葉がありますが、
エラー分はこの事件の現場がどこなのか、そして、事件の元になっているものを
教えてくれています。

また、エラー分と一緒にサーバーやデータベースなどから発行されるログも調べておきましょう。
このログには解決のヒントになる情報が詰まっています。

エラー分と照らし合わせてみることで、よりエラーの原因や場所が理解できますので、こちらも毛嫌いせずに読んでいきましょう！

考えられる仮説を立てる、わからなければ調べる

問題解決したこと、辿ってきたフロー、エラー分の明確な意味の３点が揃ったら
次にググるのかと思われますが、まだです。

ググる前に「仮説」を立てます。

なぜ仮説を立てると思いますか？
実はこの仮説、ものすごく大事です。

エンジニアの仕事は要件定義を実装するための一つ一つの仮説と設計図で成り立っています。
つまりは仮説を立てて検証して行くのが仕事のベースです。

仮説を立てることで道筋をはっきりさせることができるのは確かですが、
それ以外にもよきせぬエラーなどに繋がらないようにするためでもあります。

特にデーターベースなど慎重に扱わないといけない部分で、
適当に調べてきたコードをコピペで入れたら壊れた、なんてことになったら
その開発はどうなるでしょうか？
また、適当にコードをねじ込んだあなたの責任はどうなのでしょうか？

常に危機管理をするという意味でも仮説は必要なのです。

ググるなとは言いましたが、この仮説を深堀していく上でググるのはOKです。
先に「何について調べるのか」という仮説の大部分を建ててから調べていきましょう。

ただこの段階では具体的なアクションまでは深堀はせずに、
仮説の大枠だけを立てて、考えられる仮説を洗いざらい出して行きましょう。

例えばですが、お問い合わせのPOSTに値が入っていない場面を考えると、

・サブミット（送信）ができていない可能性がある
→サブミットするための条件とは？
・Formのメソッドはpostになっているのか？
・inputのnameは適切か？
→そもそもname属性とはなんなのか
・値を受け取る時の名前は間違えていないか？
→文法エラーはないか？
→タイポエラーもないか？
→phpのコードは適切か？

などそのエラーの前後にある仮説を立てていく感じです。
その時に自分の中でちゃんとロジックや言葉の意味を説明できないところなどは調べたり、メモしたりするといいでしょう。

理解が足りていない ＝　エラーになるポイント
でもあるので、今後の為にも学習ポイントとしてログを残しておきましょう！

仮説の優先順位をつける

考えられる仮説を立てれたら、処理のフローなどに合わせて、
検証していく仮説の優先順位を決めていきます。

これは実装をする時と同じでフローを具体的にして、ログとして残すためでもあります。

万が一、仮説を検証して解決しなくて、誰かにアドバイスをもらうときも
「こうこう考えて検証しましたが、解決できませんでした」と伝えられます。

聞き手はこの情報をもとにどういった解決策を取るべきかを考えやすいですし、
自分自身の理解が足りていないところを明確にすることにも繋がります。

ロジックを組みてて実装していくのがエンジニアの仕事のベースなので、
練習と思ってトライしていってください！
練習でできないことは絶対に本番でもできませんし、
ある日突然、ロジカルに仕事ができるということもないですので。。

仮説の優先順位を考える時にも処理のフローを考えながら、
優先順位をつけて行ってください。

仮説を深掘りして、とるべきアクションを考える

仮説の優先順位が決まれば仮説に対して具体的なアクションを考えていきましょう。

ここの実際にとるアクションが大事なのはさながら、
検索で調べて出てきたコードに対して、本当にあっているのか？と常に
疑いの目を持ちましょう。

公式のドキュメントであればいいですが、ブログや記事などを参考にするときは間違っているものも多くあるので、複数の記事を見比べて審議していきましょう。

また、そのコードを実行することで考えられることも考えられればベストです。
仮説を検証して行く上で、違うエラーに遭遇することも多いので、
そういったエラーなどを予測することも大切です。

ここではググりまくって、必要な情報を集めていきましょう！

ググる時には必要な情報をヒットさせられるように、
どういったキーワードで検索するかも大切です。

また、
「wordpressやワードプレス、　javascriptやjs」などの
略語や英語などでも検索結果が変わってくるので、
そういったところにも注目して見てください。

時には英語の文献にぶち当たることもあるかもしれませんが、
英語文献の方が質がいいものも多いので、そこは翻訳アプリなどを
使いながら読み進めていく感じです。

仮説⇆アクションを繰り返す。

一つの仮説でエラーが解決すればいいですが、
なかなか思うようにいかないことも多いです。
（後者の方が多いですが。。）

立てた仮説の結果から新く仮説を立てられる時もありますが、
基本的には最初に立てた仮説を検証してから、新く立てた仮説を検証して行くのがいいでしょう。
（ケースバイケースなところもあります。）

基本的にはこれの繰り返ししかないと思います。
うまくいかない時は時間をおいてからやってみるとうまくいくこともあります。

なかなか解決できない場面に出くわしたら、いかに自分のメンタルを
心地よく保てるかもエンジニアとしての素質が問われます。

イライラすることもありますが、エラーがあるからこそ
自分自身の理解が足りていないところがわかるわけですし、
そこを補うことでスキルアップにも繋がります。

エラーに多く遭遇して、解決してきたエンジニアの方が
現場でも活躍できますし、色々な場面でも柔軟に対応できるスキルを持っています。

そういう意味ではエラーは起こしてなんぼです。
作る制作物の欠点をできるだけゼロにしていくことが大切です。

ここを乗り切れればエンジニアとしてはかなり強くなれますので、
挫けそうな時はここで言ったこと思い返しながら、トライして見てください！

jQueryを使うという手もある

Javascriptがどうしても難しいと感じる方には、
Javascriptを簡単に扱えるようにしたライブラリとして、
jQueryがあります。

実際のところ、プレーンなJavascriptで書くとかなり複雑な処理をしないと
いけないような処理をたったの一行で実装できてしまうのも、jQueryの魅力の一つです。

jQueryのメリットについて

実際のところ、このJqueryはかなり現場でも普及しています。
web制作（HPやLPを想定）であればjQueryは必須とも言えるくらい使われています。

ブラウザでの動きを出すのはプレーンなJavascriptだとかなり複雑な処理をしないといけないので、jQueryは救世主のような存在です。

複雑なことを書かずに一行で実装できることから、開発スピードも大幅に上が理ますし、正直、これでいいと私も思います。

色々なサイトのソースコードを調べたりもしますが、十中八九jQueryで書かれていますね。

となると、ソースコードを読み解くにもjQueryの知識は必須ということになってきます。

初心者のうちであれば無理に難しいJavascriptを書くよりもJqueryで慣れ親しんでからの方がいいのかもしれません。

jQueryのデメリットについて

このjQueryですが基本的にはJavascriptのライブラリなので、
プレーンなJavascriptとは別の言語として考える必要があります。

また、制作の現場ではたくさん使われてきていると言いましたが、
現状ではかなり下火になってきているのも事実としてあります。

プログラミングの世界では良くも悪くも流行り廃りがあるので、
これは仕方のないことでしょう。

また、jQueryはかなり簡単にJavascriptが書けるのはいいのですが、
簡単すぎるが故に本質が身につかないのも事実です。

本質とはJavascriptのメカニズムや実装を考える上でのロジカルな操作です。

実際のアプリなどでは複雑な処理が多くあります。
機能同士の互換性等も考えたりします。

そういう時にjQueryの中にあるパッケージ（ここではJavascriptの複雑な処理を一行にまとめたようなものとします）同士を組み合わせることで実現することもできますが、動作として不具合を起こすこともあります。

こうなった時に何が原因になっているのかを考えた時に
Javascriptの一つ一つの処理を追えないと不具合は解消できません。

Javascriptは確かにめんどくさい処理も多いですが、
そう言っためんどくささの中に機能を拡張しやすい利点などもあるのは事実でしょう。

応用を効かすという意味で、jQueryの選択肢は初期段階だけにして、早めに捨ててもいいのではと思います。

まとめ

長くはなりましたがJavascriptについて難しいと感じる方に向けて、
学習のポイントやわからないの解消の仕方などをお伝えしてきました。

Javascriptって奥が深い！と感じる方もいれば、
Javascriptはちょっと無理かもしれないと感じた方もいるかもしれません。

まずはご自身が楽しいと思える言語を勉強するのがベストでしょう。

ただ、HPの制作などではマストな技術となるので、諦めるか、
粘り強く学んでいくかの二択でもあります。

最初は誰だってわからない状態から始まっているので、
今季強く学んでいきましょう！！