モダンJavaScript開発を始めよう
モダンJavaScript開発を始めよう
本投稿の前提
Trailheadの英語版をChatGPT4（以下、ChatGPT）に投げて返ってきた内容を載せています。もともとはTrailheadのみで学習していたのですが、不自然な日本語や、JavaScript初学者に理解しづらい用語・概念を手っ取り早く調べるとためにChatGPTとやり取りしながらの学習に切り替えました。
ChatGPTに聞くとおおよそ同じような答えが返ってきますが、毎回聞くのも手間ですし、用語なども追加で聞いていることもあるので備忘録を兼ねて残します。
僕と同じようなJavaScript初学者の方に参考になれば幸いです。
対象のTrailhead↓
Get Started with Modern JavaScript Development 単元 | Salesforce
学習目標
このユニットを終えたら、あなたは以下のことができるようになります：
- 現在のJavaScript開発の状況を説明する。
- ECMAScriptの異なるバージョンをリストアップする。
- ECMAScript互換性表から結果を探し、解釈する方法を説明する。
- PlayCodeを使用してJavaScriptコードを実行する。
モダンJavaScript開発とは何か？
開発者である最高のことの一つは、インターネット上にどれだけの情報があるかということです。残念ながら、最悪のこともまた、インターネット上にどれだけの情報があるかということです。これは特にJavaScript開発について言えることです。
あなたはJavaScriptを少し書いたことのある開発者ですか？でも、自分自身をエキスパートとは思っていませんか？JavaScript開発について検索するときに圧倒されることはありませんか？それならあなたは正しい場所にいます。このモジュールは、あなたがモダンJavaScript開発を理解し、できるだけ早くスキルを身につけるのを助けるためにあります。笑いを求めているなら、2016年にJavaScriptを学ぶとどう感じるかをチェックしてみてください。
“JavaScript開発”で検索すると、“モダンJavaScript開発”に関する言及を多く見つけるでしょう。でも、具体的には何を意味するのでしょうか？
過去数年間はJavaScriptの世界でルネサンスのような時期を迎えています。しかし、現在のJavaScriptがどこにあるのかを理解するためには、一歩後退して過去を見ることが重要です。
JavaScript開発のタイムラインは、1996年に導入されたところから始まります。JavaScriptが導入されたのは1996年ですが、JavaScriptが基づいているECMAScript（ES）標準が作られたのは1997年で、それがバージョン1です。次の2つのバージョンはすぐに出てきましたが、それらはわずかな強化だけを提供しました。それから1999年から2009年までの間、JavaScriptは新たなリリースがないスローペリオドに入りました。2009年にECMAScript 5（一般にES5と呼ばれる）が公開され、これが開発者の多くが馴染み深いJavaScriptのバージョンです。しかし、"モダンJavaScript開発"として知られる時代にJavaScriptが入ったのは、ECMAScript 2015（よりよく知られる名前はES6）のリリースまで待たねばなりませんでした。
JavaScriptは約20年間、ほとんど何も起こらない期間を経験しました。しかし、クラスやモジュールなどを含むES6のリリースにより、JavaScript開発に対する関心が再び高まりました。開発者たちは突然、JavaScriptが遊びで使うだけのスクリプト言語以上のものであることに気づきました。開発者たちは、それを使って複雑なウェブアプリケーションを構築することができると認識し始めました。
その再び高まった関心と共に、数多くのチュートリアル、ブログ記事、オープンソースのJavaScriptライブラリが登場しました。タイムラインからわかるように、ES6のリリースは始まりに過ぎません。リリースは毎年行われ、それらはリリースされた年によって名前がつけられています。そして、新しいリリースごとに、ウェブ開発の次のフロンティアを牽引するエキサイティングな新機能が登場します。
採用の現実
それはすべて素晴らしく聞こえますよね？ それはそうです。しかし、JavaScriptは専用のJavaScriptエンジンを必要とします。すべての主要なウェブおよびモバイルブラウザにはそのようなエンジンがありますが、それらは多くの異なる種類があり、それぞれが異なるバージョンを持っています。そして、それらすべてが最新のECMAScriptリリースをサポートしているわけではありません。
これは多くの新しいECMAScript機能の採用を遅らせており、これがほとんどの開発者がES5構文（これは現在、旧式のJavaScriptと見なされています）にしか馴染みがない主な理由です。ブラウザの制限をトランスパイラーやポリフィルを使用して回避する方法はありますが、これらは複雑さを増すだけでなく、パフォーマンスに問題を引き起こす可能性があります。
まあ、それが悪いニュースでした。良いニュースは、ブラウザがついに追いつき、BabelやTraceurなどのトランスパイラーを使用することなく、一度は利用可能だった多くのES6機能が、Google Chromeの最新バージョンなどの主要なブラウザで利用可能になったということです。
あなたが最新版のGoogle Chromeを使用していないのであれば、今すぐ停止して、このブラウザをダウンロードし、インストールする時間を取ることを強くお勧めします。このモジュールの残りの部分でサンプルコードを正常に実行するためには、これが必要です。
それで、あなたがちょうど読んだ素晴らしい新しいJavaScript機能をどのブラウザがサポートしているのかをどのように知ることができるでしょうか？ どの機能がどのエンジンタイプでサポートされているかを調べるには、http://kangax.github.io/compat-tableにアクセスしてください。自分のウェブブラウザでこのURLを開いてみてください。Google Chromeの最新バージョンを使用している場合、以下のようなものを見ることができます。
このページには多くの情報がありますね。心配しないでください。私たちはあなたがそれを理解するのを助けます。デフォルトでは、このページはES6機能の互換性テーブルを表示しています。これは上部のバーで見ることができます。
6が強調表示されているのに気づきましたか？ これは、あなたがES6の互換性を見ていることを意味します。ES5の互換性を見たい場合は、5を選択します。ES2016以降の互換性を見たい場合は、2016+を選択します。理解できましたか？
それでは、ES6の互換性に戻りましょう。ほとんどのテストが緑色にハイライトされていることに気づきましたか？ これは、現在のブラウザ（この場合はGoogle Chromeの最新バージョン）でサポートされていることを意味します。あなたが異なるブラウザやバージョンを使用している場合、異なるものを見るかもしれません。
ここで観察すべき最も重要なことは、Current browser列の直上にパーセンテージがあることです。このケースでは、97%です。これは、このブラウザがES6の97%の特徴をサポートしていることを示しています。これは驚くべきことです。
コードプレイグラウンドの使い方
このモジュールの残りの部分に含まれるサンプルコードを実行する最も簡単な方法は、コードプレイグラウンドと呼ばれるものを使うことです。もし、あなたが自分のお気に入りの統合開発環境（IDE）を使いたいなら、それでも大丈夫です。このセクションはスキップして、次のユニットに進んでください。
PlayCodeは人気があり、使いやすい開発プレイグラウンドです。これを試してみましょう。コンソールログに「Hello World」を単純に出力するコードスニペットを使います。
- Google Chromeブラウザで https://playcode.io/ に移動します。
- 「Open Editor」をクリックします。
- テンプレートから「Empty JavaScript」を選択します。
- 次のコードをscript.jsパネルに追加します。
var message = 'Hello World';
console.log(message); // Shows "Hello World" in console
- 「Hello World」の言葉がConsoleパネルに表示されるはずです。
- 異なるコードスニペットを試すには、script.jsパネルのコードを更新して新しい結果を確認します。
このモジュールの残りの部分では、PlayCodeを使ってコードサンプルを自分で実行することができます。無料のアカウントにサインアップすれば、PlayCodeを使ってプロジェクトを保存し、後でアクセスしたり、友人と共有したりすることができます。サインアップには数秒しかかかりません。
