【取材】JavaScriptが難しい理由は3つだけ？エンジニアが教える挫折しない学習のポイント

JavaScriptはフロントエンドで実質的に動く唯一の言語です。Webサイトに機能をつけたい場合はJavaScriptが必須。

なので、Web開発に携わるならば避けてはとおれません。

Twitterで例えるならば、アカウント登録やログインなどです。

アカウントを作るときは、ユーザーが入力した情報を保存しますよね。保存自体はバックエンドで他の言語がおこなうんですが、バックエンドまでデータを送るのがJavaScriptです。

また、ホームページをスクロールすると「トップに戻る」っていうボタンが出てくることもありますよね。クリックすると上まですっと移動するのは、JavaScriptでつけた機能です。

いや、他の言語と比べたらとっつきやすい方だと思います。

というのも、開発環境を構築する必要がないからです。ブラウザさえあればコードを書いて動作確認ができるので、始めやすいんですよね。

言語の難しさは他のものとそこまで変わりません。PHPやRubyと同じレベルだと思います。

最低限のキーワードを覚えてしまえば、30分くらいでもなんとなく読めるようにはなると思います。もちろんプログラムの仕組みがわからないとつまずきますが、言語自体はそこまで難しくありません。

つまずきやすいポイントは3つ。

• コールバック関数
• 非同期処理
• Promise

で苦労する方が多いですね。

コールバック関数は、関数に対して関数を渡すんですよね。なので流れがわかりにくく、苦戦する方もいます。

ではまたTwitterで例えてみますね！

アカウントをフォローするときって、自分のIDとフォローしたいユーザーのID情報をバックエンドに投げるんですよね。

で、フォローがうまくいったらボタンを「フォロー中」に書き換えます。逆に電波が悪かったりしてうまく行かなかったら「失敗しました」って表示しますよね。

このように、ツイート成功した・失敗したとわかった特定のタイミングで、次の表示をする関数を実行したいんですよね。このときに使えるのがコールバック関数です。

さっきのTwitterの例で行くと、IDを送ってからフォロー成功したかわかるまでにラグがありますよね。このときに非同期処理の考え方が重要になってきます。

せっかく関数を呼び出しても、すぐに結果が出てくるとは限りません。そのときに、一度関数を終了させて、渡したい値が返せる状態になったら通知をするという仕組みが非同期処理です。

はい、非同期処理をして、何かしらの処理が完了したら次の関数を実行させるのがコールバック関数。

また、Promiseは複雑な非同期処理の流れを書きやすくしたものです。

複雑な非同期処理を実装する際に「コールバック地獄（英語でもCallback Hellと呼ぶ）」というのに陥りがち。ただ、Promiseを使うことで「コールバック地獄」を避けられるようになります。

難しそうに聞こえるかもしれませんが、とりあえず「Promiseは非同期処理の実装を分かりやすく出来るもの」と思ってもらえればOKです。

実際に非同期処理を伴うライブラリはPromiseの知識がある前提で作られてるものが多くなってきている印象なので、必須の知識と言っても過言では無いかなと思います。

そうですね、コールバック関数がわからないとPromiseがわからなくなります。また、非同期処理が理解できないままだとPromiseのメリットもわかりません。

なので、理解できないままとりあえず先に進んでしまうと、どんどんつまずくところが増えていきます。疑問を先送りにせず、理解しながら勉強することが大切ですね。

まず、理解できていないのがどこか把握しましょう。

• 文法を理解していない
• コールバック関数が出ると詰まる
• 実際にコードを書くイメージが沸かない

など、人それぞれです。

コードに関しては、自分の作りたいものをイメージすることが大切です。できる範囲で必要な機能を洗い出して実装してみると、自分がわかっていない部分を洗い出せます。

それ以前の文法やプログラム処理が追えないレベルなら、もう一回復習が必要ですね。

他の人に聞いたほうがいいです！

その状態だと、ググって答えのページに辿り着いたとしても、それが答えだとすら気づけないと思うので。

はい、なのでスポットで相談できるサービスなどを使ってみてもいいと思います。

また、僕が講師を務めるFront Hacksは質問無制限なので、これから始める方にはおすすめです。

「なんでこの書き方をしたんですか？」とか、「私はこういうコードを書いたんですが、これでもOKですか？」っていう質問が多いですね。

ありがとうございます！

ステップを細かく刻んで、エクササイズもたくさん取り入れているので、スモールステップで進めるように工夫しました。

セクションごとに復習用の演習問題も用意しているので、初心者の方でも無理なく学習を進められるかなと思います。

公式ページにはサンプル動画もあるので、気になる方は一度見てみてくださいね！

人によって合う方法は変わりますが、最初につくりたいものをイメージするほうがおすすめです。

それに合わせて必要なものを学習したほうが、挫折率は下がるかなと思いますね。

そうですね。その上で以下の順番で勉強するといいと思います。

1. 基礎文法
2. 配列やオブジェクトの概念の理解と使い方
3. DOM操作
4. イベント処理
5. 非同期処理
6. Promise
7. async/await
8. 簡単なアプリケーションの実装

そうですね！

たとえばツイートしたときって、ページを再読込しなくても一番上に新しいものが出てきますよね。

このとき、JavaScriptでページのHTMLを書き換えてるんです。このような知識がDOM操作です。

Promiseを使った非同期処理を簡潔に記述できるものです。Promiseの発展型だと思ってもらえたらOKですよ！

はい、Todoアプリなど、簡単なものから始めましょう。もし自分でつくりたいものがあれば、それを作るのもOKです！

自分がつくりたいものを構築していくことで、理解が深まってきます。もちろんわからないところは出てきますが、その都度今までの知識を元に調べていけばOKです。

調べ方がわからないときは、メンターをつけてどうやったら機能を実現できるか相談すればよいです。一個自力で作れたら達成感もありますし、面白くなってモチベーションが上がっていきますよ！

JavaScriptはフロントエンドエンジニアには必須の言語なので、ぜひ楽しみながら学習を続けてくださいね！

そうですね！基礎知識を学んだら、実際に手を動かしながら学習してみてください！

はい、Front Hacksは、フロントエンドエンジニアに必要なスキルを一通り学べるようにカリキュラムを組んだオンライン講座です。

もちろんフロントエンドに必須のJavaScriptもカリキュラムに入れています。わからないところが出てきたら質問無制限にしているので、学習しやすいかなと思いますね！

文章だけだとわかりにくい場合は、通話でサポートすることもあります。

また、自分で動画を撮って解説してみたり、画面録画しながら実際にコードを書いて教えてみたりと、対応方法で工夫しています！
そのため、文章だけで理解するのは不安という方もご安心くださいね！

新しいコンテンツをつくりながらサポートしているので、ていねいに疑問解決できると思います。

初めての勉強で不安な方も、ぜひ一緒に成長していきましょう！