>>Webでスキルを身に付けられるHacksシリーズ

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

「JavaScriptを勉強してるけど、難しくて挫折しそう…」
「JavaScriptの難易度はどれくらい?」
「JavaScriptで学習を効率的に進めるにはどうしたらいいの?」

フロントエンド開発に携わるなら必須の言語JavaScript。どうにか使えるレベルになりたいと思っているものの、難しくて挫折しそうな方もいるのではないでしょうか?

実は、JavaScriptでつまずくポイントは共通しています!難しいと言われるポイントを理解して、その部分の学習を深めていけばきっと使えるレベルにできるでしょう。

そこでこの記事では、フロントエンドエンジニアのためのオンライン講座Front Hacksの講師であるつよぽんさんに取材!

JavaScriptが難しく感じる原因と挫折しない学習方法をしっかり伺ってきました!

JavaScript学習中の方は必見です!

つよぽん

Front Hacks講師。
プログラミング学習サービスMENTAにてランキング1位を獲得するなど教育にも精通している。

学生時代にインターンでプログラミングを学び、3社で活躍後フリーランスエンジニアへ転身。

Twitter:https://twitter.com/tsuyopon_xyz

JavaScriptってどんな言語?

今日はJavaScriptについて教えていただきに来ました!

早速ですが、JavaScriptってどんなプログラミング言語ですか?

ちあき

つよぽんさん

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

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

機能ってどんなものですか?

ちあき

つよぽんさん

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

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

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

かなり実用的でマストな言語なんですね!

ちあき

JavaScriptの勉強は難しい?

JavaScriptがすごいことはわかったんですが、他のプログラミング言語と比べて難易度は高いんですか?

ちあき

つよぽんさん

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

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

言語自体は難しいですか?

ちあき

つよぽんさん

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

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

JavaScriptが難しいと感じる理由

つよぽんさんはFront Hacksの講師もしていて、初心者にプログラミングを教えてますよね!

JavaScriptで初心者がつまずくポイントを教えてほしいです。

ちあき

つよぽんさん

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

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

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

順番に教えて下さい!コールバック関数ってどんなものですか?

ちあき

つよぽんさん

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

ちあき

つよぽんさん

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

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

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

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

ちょっとずつイメージできてきました…!非同期処理っていうのはなんですか?

ちあき

つよぽんさん

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

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

コールバック関数の話と似ていますね。

ちあき

つよぽんさん

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

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

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

コールバック地獄…名前からして難しそうです…笑

ちあき

つよぽんさん

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

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

ではこの辺が理解できないまま学習をすすめると、挫折しそうですね。

ちあき

つよぽんさん

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

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

JavaScriptでつまずいたときにやるべきこと

では、つまずいてしまったときは何からすればいいんでしょう?

ちあき

つよぽんさん

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

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

など、人それぞれです。

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

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

なるほど…!ただ、そもそも「なにがわからないか謎」みたいな状態になったときはどうすればいいですか…?

ちあき

つよぽんさん

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

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

確かに調べるのって疑問がはっきりしているからこそできることですよね。

ちあき

つよぽんさん

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

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

それは安心ですね!受講生の方からはどんな質問が来るんですか?

ちあき

つよぽんさん

「なんでこの書き方をしたんですか?」とか、「私はこういうコードを書いたんですが、これでもOKですか?」っていう質問が多いですね。
何通りかの書き方ができちゃうからこそ、そこまで踏み込んで聞けるのはありがたいですね。

そして質問がかなり具体的なので、教材の質が高いのかなと思いました。

ちあき

つよぽんさん

ありがとうございます!

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

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

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

挫折しにくいJavaSpriptの学習ステップ

JavaScriptで挫折しないためには、どういう順番で勉強していけばいいんでしょうか?

ちあき

つよぽんさん

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

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

モチベーションが保ちやすそうですね!

ちあき

つよぽんさん

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

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

ちあき

つよぽんさん

そうですね!

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

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

情報が更新されていくサイトを作るときは必須ですね…!

async/awaitというのはなんですか?

ちあき

つよぽんさん

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

そこまで勉強したら、アプリケーションをつくっていくのがいいんですね。

ちあき

つよぽんさん

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

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

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

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

JavaScriptを最速で身につけるならFront Hacks

JavaScriptの理解が深まってきました!疑問を潰しながら着実に勉強していくことが一番ですね。

ちあき

つよぽんさん

そうですね!基礎知識を学んだら、実際に手を動かしながら学習してみてください!
ありがとうございます!基礎知識の身につけ方ですが、つよぽんさんの提供するFront Hacksなら、オンラインでスキルが身につけられるんですよね?

ちあき

つよぽんさん

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

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

プログラミングって難しいイメージがあって、質問しても解説が理解できるかちょっと不安です…笑

ちあき

つよぽんさん

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

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

そこまでサポートが丁寧なんですね!かなりいたれりつくせりなサービスです…!

ちあき

つよぽんさん

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

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

Front Hacksならフロントエンジニアになる基礎が学べる

  • 実務経験豊富なエンジニアから現場で使える知識を学べる
  • 無期限の質問サポート付き
  • 買い切り型で受講期限も無制限