Chapter 02

言語・仕様

ほげさん
ほげさん
2021.12.19に更新

言語

だいたい J のやつと T のやつ

JavaScript

🤔 さすがに知ってる

  • 最初は Netscape で作られたプログラミング言語
  • 言語仕様は ECMAScript として標準化されている
  • JavaScript エンジンがいくつかある
    • e.g. Google Chrome の V8
  • DOM の仕様は ECMAScript とは独立している
  • JavaScript にトランスパイルされる言語の総称を alternative JavaScript ( altJS ) という
    • e.g. TypeScript
    • e.g. CoffeeScript
  • altJS と対比して素の JavaScript を Vanilla JS と言ったりする

😗 Vanilla JS はなんとなく察しはついてた、altJS は覚えておこう

TypeScript

🤔 これも知ってる

  • Microsoft に作られた静的型付けのできるプログラミング言語
  • 書いたコードを JavaScript にトランスパイルできる
  • ECMAScript 2015 の厳密なスーパーセットである
    • つまり TypeScript は JavaScript を完全に使用できる
  • JavaScript ライブラリを TypeScript から使える

😗 同じ仕様に準拠しているから完全互換なのね

JSX

🤔 ( 隣の人のエディタで見て ) なにこれ何語...?? .jsx って...??

  • JavaScript XML の略で、拡張子は .jsx
  • React でマークアップ言語を記述するための XML 風の構文で、JavaScript の拡張構文
  • ブラウザは直接解釈できないので、Babel などによる変換が必要
    • transform-react-jsx という Babel プラグインで変換先を Vue に変えることなども可能
ただの JavaScript 文字列展開による要素生成
function items() {
  return `
    <ul id="foo">
      <li class="item">${name1}</li>
      <li class="item">${name2}</li>
    </ul>
  `
}
React.createElement による要素生成
function items() {
  return React.createElement( 
    'ul',
    { id: 'foo' },
    React.createElement('li', { className: 'item' }, name1),
    React.createElement('li', { className: 'item' }, name2)
  )
}
JSX ( React.createElement の糖衣構文 ) による要素生成
function items() {
  return
    <ul id="foo">
      <li class="item">name1</li>
      <li class="item">name2</li>
    </ul>
}
  • JSX はただの式なので、iffor と合わせたり変数で扱ったりできる

😗 React.createElement の糖衣構文だとわかるとだいぶ心理的ハードル下がるな

TSX

🤔 JSX が何かは知らないが、それの T なやつだろうきっと

  • JSX を含む TypeScript で、拡張子は .tsx

😗 察しの通り

仕様

この 2 つを知らないだけで、いろいろなことの理解の妨げになっていたのがわかった

ECMAScript

🤔 JavaScript の話をしてると唐突に出てくるやつ、なんで ES5 と ES2015 とかが同列なの?

  • JavaScript の言語仕様
  • Edition ~ 5 と 6 ~ で呼び方などが変わった
  • Java8 → Java11 とか Python2 → Python3 とかと同じく、言語仕様は拡張され続けている
    • e.g. Promiss の追加 ( ES6 )
    • e.g. flatMap の追加 ( ES10 )
    • e.g. ?? 演算子 の追加 ( ES11 )
  • JavaScript にバージョンがあるわけではなく、どの ECMAScript に準拠しているかで認識する
  • モジュールや Promiss などが追加され大きく進化した ES6 / ES2015 が境目感
  • たとえば require と違い import はこの仕様によるもの ( ESM 方式 )
Edition 公開 仕様書名 通称
1 1997 ECMAScript 1 ES1
2 1998 ECMAScript 2 ES2
3 1999 ECMAScript 3 ES3
4 放棄 ECMAScript 4 ES4
5 2009 ECMAScript 5 ES5
5.1 2011 ECMAScript 5.1 ES5.1
6 2015 ECMAScript 2015 ES6 / ES2015
7 2016 ECMAScript 2016 ES7 / ES2016
8 2017 ECMAScript 2017 ES8 / ES2017
9 2018 ECMAScript 2018 ES9 / ES2018
10 2019 ECMAScript 2019 ES10 / ES2019
11 2020 ECMAScript 2020 ES11 / ES2020
12 2021 ECMAScript 2021 ES12 / ES2021
  • 現在の最新の次の Edition を ESNext と言う

😗 これ知らなかったのもどうかと思うけど知れてよかった、いろいろ理解がつながった

CommonJS

🤔 聞いたこともない

  • サーバサイドや CLI など、ブラウザ外における JavaScript の各種仕様を定めるプロジェクト
  • 2009 年に Mozilla のエンジニアが ServerJS として立ち上げた
  • CommonJS のいくつかの機能 ( e.g. Module, Promise ) は ES6 で定められたりした
  • 実行前に JavaScript を単一 JavaScript ファイルにするため、Node.js が必要
  • たとえば import と違い require はこの仕様によるもの ( CJS 方式 )

😗 ブラウザだとできない require とかが Node.js だとできる理由はこれか

まとめ

とりあえず最低限の整理はできた感じがする

image

仕様に注目して理解するといろいろスムーズになると感じた