この記事はエイチーム引越し侍 / エイチームコネクトの社員による、Ateam Hikkoshi samurai Inc.× Ateam Connect Inc. Advent Calendar 2020 20日目の記事です。
「JavaScriptまじわからん！！」
JavaScriptをよく書く人でも、そう叫びたくなる事もあるのではないでしょうか。
私は直近、JavaScriptを書くことをやめたくなるほど
「まじわからん！」と強く思った経験がありました。
その時に、どうすればこの壁をのりこえられるのだろうか...をじっくり考えてみて
自分なりの答えに辿り付けたので、その事を記事にしようと思います。
はじめに
この壁にぶつかってへこんでいる人がいましたら、
一度自信を取り戻してください。笑
なぜなら、JavaScriptまじわからんと感じた時点で、
あなたは「完全に理解した」の山を乗り越えているからです
引用元: https://twitter.com/kaitendaentai/status/1052689241744896001?s=20
というのも、JavaScriptはブラウザ上でちょっと動かす程度でしたら
他の言語に比べて敷居が低いと私は思います。
少し動かせるようになってから、ReactやVue,Svelteなどのフレームワークやライブラに触れてみたり、より複雑なロジックを読みやすさを意識して書いたりするときに、思った以上にうまく書けず「まじわからん...」と感じることができます。
そして、そのタイミングこそが成長痛だと思います...！
では、その成長痛を感じたタイミングで何をすれば良いのでしょうか。
その1. メカニズムを理解しよう !
thisの挙動やスコープ、変数の巻き上げやprototype...
これらのワードを聞いた際に、うっ...と苦手意識を感じる人は多いと思います。
その原因は、JavaScriptの記法を学ぶ機会は多いのに、JavaScriptが動いている仕組みを理解する機会が少ないからなのかなと私は思います。
JavaScriptへの理解度を高めるにはまず、JavaScriptのメカニズムを理解しましょう！！
おすすめの学習方法
udemy講座 『【JS】初級者から中級者になるためのJavaScriptメカニズム』
記法の学習は一通り済んでおり、JavaScriptメカニズムにスポットを当てて学習したい人向けのudemy講座です。
動画は長いですが、説明が丁寧で内容がすんなり入ってくるのでオススメです！！
(私は今まで10本以上のudemy講座を買ってますが、一番受講してよかったなーと思った講座です！)
javascript.info
少々和訳が読みづらく感じる部分もありますが、コードの書き方に加えてメカニズム部分もしっかり解説されており、充実した情報が手に入るサイトです！！
図解も多く、演習問題もあるため、理解に落とし込みやすいと思います！！
その2. 強いメンタルでインプットをし続けよう！
JavaScriptは、他の言語に比べて流行の流行り廃りが早いです。
そのため、フロントエンドエンジニアである限り、流行のキャッチアップは最重要となります。
インプットを仕組み化して、効率的に情報収集していくには、
twitterとRSSリーダーを使うとよいかなと思っております。
私自身、最近始めたばっかりなので、あまり紹介できるものがございませんが、
個人的にいいな〜と思っているものをご紹介させていただきます！
また、他のオススメ方法・アカウントやサイト等ありましたら、コメントにて教えてくださると幸いです...！
twitterのおすすめアカウント
ninoさん(@d151005)
フロントエンドの流行を動画や画像でわかりやすく解説されております。
タイムラインで流れてくると、つい見ちゃうような面白い解説なので、気軽に情報収集できます！
池田 泰延さん(@clockmaker) / 鹿野 壮さん(@tonkotsuboy_com)
『JavaScriptコードレシピ集』でおなじみのお二方は、
twitterでも頻繁にフロントエンドにまつわる最新情報を発信されているので、
フォローしておくと良いインプットになるかなと思います！！
RSSで購読できるおすすめサイト
jser.info
この界隈で某有名なazuさんが運営しているサイトで、
JavaScriptに関連するアップデート情報がすぐにインプットできます！！
ICS MEDIA
どちらかというとデザインよりの記事の方が多いですが、鮮度が高くわかりやすい記事が多いのでおすすめです！！
その3. ES6以降の記法でバンバン書こう！
2015年にJavaScriptは大幅にアップデートされました。
この大幅アップデートにより、JavaScriptがよりシンプルに、安全に書けるようになりましたので、バンバンつかっていきましょう。
ES6以降の記法に関する参考記事
モダン JavaScript チートシート
なぜES6以上のコードを使った方が良いのか、どのような仕組みの違いがあるかなどが非常にわかりやすくまとめられています！
イマドキのJavaScriptの書き方2018 / @shibukawa さん
古い書き方と比較して最新の記述方法を紹介しており、ぱっとみてわかりやすいです。
記事もしっかりアップデートされているため、参考にすれば最も最新の記述方法で書けるようになります！！
JavaScriptが辿った変遷
タイトルの通り、どのような流れでJavaScriptが変わっていったかがわかります。
補足
Lintやフォーマッターを使うとさらに便利！
ESlintを用いることで、古い書き方を使った場合エラーを表示するなどの記法ルールを追加することができるのでおすすめです。
さらにPrettierやvscodeのEditor: Format On Saveを併用することで、セーブ時に自動的に新しいルールに変換する設定もできますので、試してみてください！！
ブラウザ対応に注意
ES6以降の記述方法はブラウザ対応が追いついていないものもありますので、babelを用いて変換したり、polyfillを読み込むなどひと工夫が必要です。
さいごに
この記事が「JavaScriptまじわからん！！」から抜け出す最初のきっかけになればいいな、と思っております...！
また、これらの壁を乗り越えて、使った事ないフレームワークやライブラリ、TypeScriptなどにチャレンジしてみて、成長していけたらなと思います...
明日は @hironeyさんの記事です！