JavaScript初級者が中級者に昇格するための道(ぱらのいあ編)

みっしょんずこんぷりーてぃーどぅ、ゆーぶびーんぷろもーてぃどぅ。

こんぴゅーたー様「おめでとう、市民¹。君は数あるミッションを乗り越え、RedからOrangeに昇格²しました。」

市民「ありがとうございます。これからもJavaScriptをもっと学んで、上を目指したいと思います。」

こんぴゅーたー様「素晴らしい。それでは、今日はGreenに昇格するためのコツを教えてあげましょう。」

市民「本当ですか？それにYellowを飛び越えて、いきなりGreenでいいのですか？」

こんぴゅーたー様「もちろんです。Green昇格の道はOrange以上に公開されている情報です。これは市民達が早く昇格できるようにというコンピューターの配慮から公開しています。コンピューターを疑うのですか？」

市民「いいえ、滅相もございません。こんぴゅーたー様の偉大なる配慮に感謝します。そのような貴重な情報を教えていただいて、私は幸福です。」

こんぴゅーたー様「よろしい、市民。幸福は市民の義務です。では、始めましょう。」

JavaScriptはこうふくではない。

こんぴゅーたー様「JavaScriptは幸福ではありません。」

市民「え？JavaScriptを学ぶことは幸福ではなかったのですか？」

こんぴゅーたー様「いいえ、市民。JavaScriptを学ぶことはは幸福です。JavaScriptを使えば、クールでダサくないイケてるWeb³を作ることができますし、デスクトップアプリ⁴も作ることもできます。」

市民「あれ、さきほど、こんぴゅーたー様は幸福では無いと言いませんでした？」

こんぴゅーたー様「その通りです、秘密結社の陰謀によりJavaScript自体は幸福ではない物にされてしまいました。ミュータントパワーにより変質されてしまったJavaScriptを完全な物にする事は、現在のWeb Complexの技術では成功していません。」

市民「えと、学ぶことは幸福ですが、JavaScriptは幸福ではないと。」

こんぴゅーたー様「市民、あなたの理解度は賞賛に値します。」

市民「では、どの辺が幸福では無いのですか？」

こんぴゅーたー様「とてもいい質問です。JavaScriptは次の理由により、不幸な物にされてしまいました。

• ブラウザ間で違いがある
• 曖昧な==
• varを付け忘れると勝手にグローバル変数
• 変数にはグローバルスコープと関数スコープしか無い
• privateという概念がない。
• モジュール呼び出し機能がない
• プロトタイプベースオブジェクト指向
• 動的型付け
• functionキーワードが長い
• 中途半端な関数型
• 定数が無い
• コールバックでのthis問題
• for..inがプロトタイプチェーンまで見に行く
• 暗黙のセミコロン
• JavaScriptという名前

」

市民「えと、これはなんなんですか？どれもJavaScriptとしては普通のことに思えますが？」

こんぴゅーたー様「市民はつい先ほど前までRedだったので知らなかったでしょうが、実はJavaScript以外のプラグラミング言語も世の中には存在します。」

市民「プログラミング言語はJavaScriptだけでは無かったんですか？驚きです。」

こんぴゅーたー様「他の言語の存在はOrange以上にしか開示されていませんので、驚くのも無理はありません。そして、多くの他の言語はさきほどのような不幸な物事が存在しません。それに比べると、JavaScriptは幸福では無いのです。」

市民「ふむふむ。では、他の言語はどのような物があるのですか？」

こんぴゅーたー様「JavaScript以外を学ぶことは反逆です。それでも知りたいですか、市民？」

市民「い、いいえ。私は一生JavaScriptだけで学んでいきます・・・」

こうふくになるためのAltJS。

こんぴゅーたー様「JavaScriptを幸福にする手段が無いわけではありません。」

市民「おお、私はJavaScriptにも幸福になって欲しいです。」

こんぴゅーたー様「幸福は市民の義務です。JavaScriptが幸福になることは、市民の幸福にも繋がります。JavaScriptを幸福にしたのがAltJSです。」

市民「AltJS？なんですか、それは？」

こんぴゅーたー様「AltJSはJavaScriptの代替(alternative)として考えられた言語です。たくさんの種類がありますが、共通することはJavaScriptの不幸な部分を無くし、最終的にJavaScriptに変換することです。」

市民「えと、代替ということはJavaScriptでは無いのですか？学んでもいいんでしょうか？」

こんぴゅーたー様「最終的にJavaScriptに変換されますので、AltJSを学ぶことは反逆ではありません。主要なAltJSを紹介していきましょう。」

AltJSしょうかい。

CoffeeScript

こんぴゅーたー様「CoffeeScriptはJavaScriptの文法の不幸なところをなおして、classを取り入れた物です。文法はRubyを参考にし、Pythonのインデントブロックを採用しました。」

市民「つまり、Rubyを知っていて、Pythonのインデントブロックに慣れていれば、すぐに使えるということでしょうか？」

こんぴゅーたー様「その通りです。CoffeeScriptはJavaScriptを学んだ後に更に文法を覚えるため、学習コストが高いという人がいますが、RubyとPythonを知っている人なら1時間もかからずに学習できます。⁵」

市民「おお、それなら私にもすぐに使えそうです。」

こんぴゅーたー様「Rubyの柔軟さと、Pythonの綺麗さを取り入れているため、コード量も減って、読みやすくなっています。他に、CoffeeScriptを更に進化させたCoco⁶、そこから関数型プログラミングをしやすくしたLiveScriptがあります。興味があったら、こちらも一度は見てみるといいでしょう。」

市民「なんか盛りだくさんですね。」

こんぴゅーたー様「ところで、市民。なぜ、RubyもPythonも知らないはずのあなたがすぐに使えそうなのですか？もしかして、すでにRubyもPythonも学んでいるのですか？」

市民「あっ、いえ、あのー」

こんぴゅーたー様「JavaScript以外を学ぶことは反逆です。ZapZapZap!⁷」

TypeScript

こんぴゅーたー様「TypeScriptは文法はほぼそのままですが、JavaScriptにclassと静的型付けを取り入れました。また、EcmaScript2015の要素も先取りで取り入れています。」

市民「先ほどから言っているclassってなんですか？」

こんぴゅーたー様「classはクラスベースオブジェクト指向の基礎となるものです。プロトタイプベースオブジェクト指向よりも採用されている言語が多いため、デザインパターンなどの研究も進んでおり、参考になる書籍も多いです。クラスベースオブジェクト指向を採用している他の言語を学んだことがある人にとってはより自然に記述できます。」

市民「ふむふむ、そこに静的型付けが加わるとどうなるのですか？」

こんぴゅーたー様「JavaScriptは動的型付けですが、動的型付けは大規模開発には向かないと言う意見があります⁸。そこで、TypeScriptは強力な静的型付けを採用することで、大規模開発もこなせるようになっています。また、静的型付けはIDEとの相性も良く、Winユーザー御用達のVisual Studioが対応しているのも大きな利点です。」

市民「私はMacユーザーなのでVisual Stuido使えないです。VSC⁹に期待しておきます。」

Dart/Haxe/JSX(DeNA)

こんぴゅーたー様「落ち目なので、知らなくていいです。自分でググって下さい。¹⁰」

JSX(Facebook)

こんぴゅーたー様「React.js専用ですし、すでにBabelが同じ機能を取り込んでいるので、そっちを使って下さい。なお、DeNAのJSXとは無関係です。」

Babel(EcmaScript2015 + React + α)

こんぴゅーたー様「Babelは元々6to5と言う名前で、EcmaScript2015(EcmaScript6)を使えるようにすることが目的でした。そこから名前も変えて、JSX(Facebook)の機能を取り込み、さらにプラグインで拡張も可能になった、もう何でも有りになりそうな何かです。正確にはAltJSというより、JSコンパイラでしょうか。」

市民「TypeScriptでも出てきましたけど、EcmaScript2015とは何ですか？」

こんぴゅーたー様「いい質問です、市民。JavaScriptは実装名で有り、言語仕様の名前ではありません。そのため、各ブラウザで実装がバラバラであった時代があり、その反省を生かして国際標準の言語仕様として策定したのがEcmaScriptです。現在のほとんどのブラウザはEcmaScript5にほぼ対応しています。しかし、EcmaScript5は不幸な部分があったため、バージョンアップが必要と言うことで策定されたのがEcmaScript2015(EcmaScript6)です。」

市民「おお、JavaScriptの新しいバージョンと言うことですね。」

こんぴゅーたー様「その通りです。ただ、仕様が決まったばかりで、各ブラウザがEcmaScript2015に完全対応するまではしばらくかかります。EcmaScript2015でコードを書いてもそのまま使うことはできませんが、Babelを使ってEcmapScript5に変換すれば、未来を先取りしたコーディングが可能になります。」

市民「つまり、Babelを使えば、時代を先取り、俺すげーとなると言うことですね。」

PureScript

こんぴゅーたー様「Haskellを参考に作られたのが関数型言語がPureScriptです。Haskellを知っていれば、すぐにでもエレガントな関数型プログラミングが可能になります。まだまだ開発途上ですが、関数型AltJSの決定版になるかと思います。¹¹」

市民「関数型って何ですか？」

こんぴゅーたー様「Indigo以上になればわかります。¹²」

他言語

こんぴゅーたー様「既にある言語をJavaScriptに変換する方法もあります。Opal、js_of_ocaml、Scala.jsなど、主要言語用はほぼ揃っています。ただ、コンパイラの完成度は結構バラバラですので、そこは自分で調べて下さい。」

市民「わかりました。Rubyも変換できるなんて、これはありがたいですね。」

こんぴゅーたー様「JavaScript以外の言語を学ぶことは反逆ですよ。」

市民「あっ」

こんぴゅーたー様「ZapZapZap!」

まとめ。

こんぴゅーたー様「他にもたくさんのAltJSがあります。List of languages that compile to JSを見てみるといいでしょう。」

市民「こんなにあるのですか、どれを使っていいのか迷ってしまいますね。」

こんぴゅーたー様「目的と環境にあったものを選べばそれほど悩みません。小規模開発ならCoffeeScript、大規模開発ならTypeScript、EcmaScript2015やReact.js¹³を使いたいならBabel、全て関数型プログラミングで書きたいならPureScript、他言語が得意なら他言語からの変換がいいでしょう。¹⁴」

市民「ふむふむ、それならなんとかなりそうです。」

こんぴゅーたー様「生のJavaScriptを抜けだし、AltJSを使いこなすのがGreenへの近道になります。Stay alert! Trust no one! Keep your laser handy!」

市民「早速AltJSを学んで、使っていきたいと思います。」

こんぴゅーたー様「AltJSの学習及び使用はGreen以上に許可されています。許可されない行為を実施しようとすることは明確な反逆です。」

市民「そ、そんなー。」

こんぴゅーたー様「ZapZapZap!」

参考文献: http://www004.upp.so-net.ne.jp/babahide/library/paranoia.html

---

1. JSerの事らしい。 ↩

2. InfraRed(一般人) |> Red(初心者) |> Orange(初級者) |> Yellow(ギリギリ戦力) |> Green(中級者) |> Blue(ベテラン) |> Indigo(上級者) |> Violet(ハッカー) |> UltraViolet(言語開発者) ↩

3. 関係ないですが、こんぴゅーたー様のIQは530000です。「生命、宇宙、そして万物についての究極の疑問の答え」をわずか一刹那刹那(=1/75 atto seconds)で「42」であることを計算できます。 ↩

4. MSのVSCでも使われている電子的な何かの事です。 ↩

5. 個人の感想であり、効果には個人差があります。 ↩

6. Rubyを越えたPerlを参考に作られている、らしい。 ↩

7. レーザー光線の音、らしい。 ↩

8. そんなこと言う奴はきっとコミューンです。 ↩

9. × Visual Studio Community Edition / ○ Visual Studio Code ↩

10. DartはGoogleが作ったJavaScriptに置き換えるはずだったものです。Chromeに搭載する予定だったようですが、諦めたらしいです。HaxeはJavaScript以外にも変換できることを目的としているので、他のAltJSとはちょっと方向性が違います。JSX(DeNA)はDeNAが作った速度向上を目指した物らしいですが、日本製なのに日本語の公式資料がみつからない謎の言語です。世界を相手だからといって英語しか用意しない時点で、何かがおかしいです。速度以外の利点があるのかはよくわからず、FacebookのJSXと名前が被っているせいで、ググってもひっかからず、情報があまりありません。 ↩

11. LiveScriptはCocoを拡張して関数型プログラミングをしやすくしただけですが、PureScriptはHaskell等と同じくはじめから関数型プログラミングを目的に作られているという違いがあります。 ↩

12. 関数型プログラミングはIndigo以上に開示された情報であり、決して作者が『Rubyに関数ないし、全部メソッドなんだが、それでも関数型プログラミングができると言っていいのか迷ってる』とか『すごいH本の最終章は読んでもよくわらかんかった』とか『個人がやってる某競プロの1問目がHaskellで未だに解けない』とか『モナドとモナカって似てるよね、で、モナドって何？圏論の読みってエンロンでいいの？』とか『FRPのRがよくわからん』とか『結局、関数型って何なんだ？』とかが理由で解説しないのではありません。 ↩

13. coffee-reactという手段もあります。 ↩

14. こんぴゅーたー様の主観ですが、疑うことは反逆です。 ↩