はてなの金次郎

とあるエンジニアの技術系ブログ

ES(ECMAScript)の基礎を学ぶハンズオンに参加してきました

はじめに

js-builders.connpass.com

JavaScript Buildersさん主催の「【初心者向け】JavaScriptの次のステップ、ES(ECMAScript)の基礎を学ぶハンズオン」にブログ枠で参加してきました。

今回参加した動機は VueやReactを学ぶ前にESをちゃんと抑えておきたかったから です。

普段の業務としてはPython/DjangoAPIの実装がメインでたまにインフラ構築といった感じで、JSはもちろんESとはあまり縁がありません。

しかし、将来的にはバックエンド、インフラ、フロントエンドをカバーできるようなエンジニアになりたいので今回の参加に至りました。

今回のイベントでは、JavaScriptをProgateや独学で学んだけど、その先のECMAScriptがわからない。 React.js or Vue.js を触り始めたけど、実はECMAScriptがわからない。 そんな方が基礎を学べる機会になる為のハンズオンを行います。

まさにぴったりの勉強会ですね!

感想

今回の勉強会のゴールが設定されていたのでそれに沿って振り返りたいと思います。

明日からドヤ顔でESの歴史を語れるようになる事

まず、ECMAScriptを一言で説明すると、

JavaScriptJScript の仕様差異を一般化するためにECMA Internationalという機関が JavaScriptを標準仕様化したものが ECMAScriptです。

( -`ω-)どや!

講師の村瀬さんが言語の成り立ちから今までバージョン遷移まで詳しく教えてくださりました。

ESは毎年6月にメジャーアップデートがあるかなり開発がさかんな言語みたいで、バージョンごとの豆知識も教えていただきました。

  • ES6:主流なバージョン
  • ES7:主要な2機能がリリースされたが、どっちも使わなくていいらしい
  • ES2017:Async Awaitを使うためにバージョンアップする場合もあるんだとか
  • ES2018:最近リリースされたばかりなので実績が少なく使用者は少ない

とりあえずES6を抑えておくのが基本らしいです。

この記事もわかりやすかったです。

qiita.com

JavaScriptを始めるならまずは読んでおくべきサイトらしいです。

developer.mozilla.org

ECMAScriptについてはこちら。

developer.mozilla.org

ESの基礎がわかるようになる事

ESの基礎を理解するためにJSのハンズオンでJSの基礎を理解してからESのハンズオンでESを理解するという流れでした。

JSはここが使いづらかったからESではこう改善された のようにストーリー仕立てで覚えることができてかなり理解が捗りました。

普段Pythonを書いている身としては、JSの基本仕様にはかなり驚かされることが多かったです。 class構文がなかったりconstがなかったりモジュールのインポートができなかったり...

ここらへんがESのアップデートでプログラミング言語としての基本仕様を満たしてきたんだなと感じました。 また、ESの構文はかなり書き方に柔軟性があるなと思ったのと、ワイルドカードインポートが認められているのが少し驚きましたね。

為藤さんのハンズオンの説明やサンプルがすごくわかりやすかったので、ESはほとんど触ったことありませんでしたがその場で理解できました。

ハンズオンのソースコードJavaScript BuildersさんのSlackチャンネルで公開されているので気になる方はコンパスのページからとんで確認してみてください。

あと、ハンズオンはPlayCodeを使ってやったのですがすごい便利でした。

playcode.io

おわりに

2時間半とは思えないほど凝縮された内容で、これが無料で受けられたので運営の方々には感謝しかありません。

会場提供してくださったナンバーナインさんにも感謝です!

no9.co.jp

次のステップとしてReactかVueを頑張っていきたいです。

ちなみに次回の勉強会にもブログ枠として参加予定なのでお願いしますー!

js-builders.connpass.com