00:04
こんにちは、アプリケーションエンジニアのなおしむです。
今日も前回に引き続き、ウェブサイトを見ながら喋っていこうと思います。
今見ているサイトは、アンギュラ、リアクト、PUの3大フレームワークに集約、ICSの代表が教えるフロントエンド技術のトレンド、という記事です。
前回の配信で、この中には4つのカテゴリーで、JavaScriptがどんな遍歴をこの10年間ぐらいたどってきたか、というのを紹介されていました。
その4つのカテゴリーが、JSライブラリ、ビルドシステム、フォルトJS、表現系ライブラリ、この4つです。
前回の配信で、JSライブラリとビルドシステムについては話したので、今日はその続きとしてフォルトJSと表現系ライブラリについて話していこうと思います。
フォルトJSなんですけれども、これはもう皆さん、今フォルトJSという言葉があんまり使われないぐらいになってきているかなと思っていて、
JSのフォルトJSといえばタイプスクリプト一択かなと思っています。
昔はコーヒースクリプトとか色々あったんですけれども、今はタイプスクリプトしか私も使ってないかなと思います。
そりゃそうだっていうことなんですけれども、私はこの記事を見て面白かったのは、2010年のあたりにHEXっていう言語が表示されているのが面白かったです。
私はHEX大好きで、確かに10年ぐらい前はよく使ってました。
HEXってどんな言語かというと、アクションスクリプトと全く同じか、ちょっと互換があるぐらいかわからないですけど、
アクションスクリプトに似た言語になっていて、HEXっていう言語はこれ単体で動かすことはできなくて、必ず変換して動かす言語になっています。
その変換の一つがJSなので、これをフォルトJSにカテゴライズされているんだなと思います。
他にもいろんな言語で出力が可能で、JavaScript、C++、C Sharp、Java、Python、Vua、PHP、Flashみたいな感じで、ありとあらゆる言語で出力が可能な言語になっています。
正直他の言語で私は出力したことがないのでわからないんですけれども、JSとして使っている分にはすごくいい言語だなと思っています。
タイプスクリプトと違って、本当に純粋にオブジェクト思考プログラミングができる言語ですし、
03:04
あと普通に最近でもないですけど、ちょっとモダンな関数型みたいな書き方もできるっていうこともあって、すごくバランスの取れた言語だなと思っています。
なのでこの記事の中でHEXっていう単語が見えた時にすごくテンションが上がりました。
これ本当にオブジェクト思考の教育用に使ってもいいんじゃないかなと思えるぐらいいい言語で、
最終的にJSで出力できるので実行するのも簡単ですし、ゲームみたいなものを作るのもすごく簡単に使えるものなので、
ある程度プログラミングとは何かみたいなのが分かっている人に対してオブジェクト思考を教えたいっていう時に、
もしかして使ってみるといい言語なのかもしれないなと思います。
あとは今この言語がどれだけ使われているかっていうとあんまり使われてないので、
言語一つ覚えるのも大変だみたいなレベルの人にこの言語をお勧めするのは良くないと思いますけれども、
言語いっぱい知ってるけどちょっとオブジェクト思考がこれまだまだなんだよねみたいなちょっと、
そんな人いるかわかんないですけど、そういう人に教えるときに遊びでやってみるといい言語かなというふうに思います。
とはいえやっぱりそんなに使われている言語じゃないので、
オルドJSっていう意味で言うとやっぱりタイプスクリプト一択になるかなと思います。
もし興味があったらこのHEXっていう言語で遊んでみたらいいかなというふうに思います。
次は表現系ライブラリーです。
表現系ライブラリーっていうのは描画をするようなライブラリーですね。
キャンバスとかWebGLに何か絵を描くみたいな。
あと3Dみたいな表現をするにもこれが必須なので、
そういうライブラリーが多いかなと思います。
ここはもう無限にライブラリーはあるなと思っていて、
あんまり絞られてはいないんじゃないかなと思いますが、
ここで紹介されているのは最終的に生き残っているものっていう意味で言うと、
3JSとPixieJSとBabylonJSのこの3つです。
私もあんまり詳しくはないですけれども、
多分この3JSとBabylonJSは3Dを描画するようなライブラリーかなと思います。
このPixieJSっていうのは2次元の2Dを表現するのが強いライブラリーになっています。
私が最近使っているのは、私は2Dのゲームしか作らないので、
そういう意味で表現系ライブラリーはPixieJSしか使っていないというような感じです。
06:02
やっぱりこのPixieJSはとにかく描画速度の速さで言うと段違いかなと思っています。
ちょっともう開発は終了してしまってますけれども、
ゲームを作るっていうと、ちょっと昔にエンチャントJSっていうのがすごく流行ったんですけれども、
このエンチャントJSが終わってしまった原因の一つは、やっぱり描画速度の遅さにあるかなと思います。
ちょっと中身まで見てないので原因はわからないんですけれども、
エンチャントでゲームを作ると何が起きるかというと、
パソコンでゲームをしている分にはすごくサクサク動いて面白いゲームが作れるんですけれども、
スマホで動かそうとするとすごく重い。
なのでスマホのゲームをエンチャントJSで作るのは難しいというのが背景にあると思います。
結果的にたまにスマホのアプリでエンチャントJSで作られているものはあるんですけれども、
そういうのは大体RPGみたいなゲームです。
RPGってそんなに描画速度が必要なくて、
右行って押したら右に一歩進んで、
左行って押したら左に一歩進むぐらいのスピードでしかないので、
それぐらいだったらエンチャントでも作れるんだろうなというようなことなんですけれども、
シューティングゲームで弾がバババババババッと100個ぐらい出て、
それを100体の敵が撃ってくるみたいなそんなようなゲームを
エンチャントJSで作るっていうのは実は無可能かなと思います。
スマホアプリでどうやって描画を速くするかっていうときに使うのがこのPixieJSです。
このPixieのスピードのサクサク感って本当に異常で、
デモの映像で猫みたいなちっちゃいキャラクターが画面上でジャンプしてるみたいな絵があって、
画面をクリックするとその猫が大量に降ってくるみたいな、
画面上猫がジャンプしまくるみたいなサンプルがあるんですけれども、
それを使うとスマホでもものすごい量の猫がサクサクジャンプするみたいな映像が見られます。
あのスピードまでいかないとなかなかスマホで何かゲームを作るっていうのは難しいので、
私はある程度スマホでも動くゲームを作りたいので、
ゲームを作るときはPixieJSを使っています。
ただちょっとエンチャントと比較するのはかわいそうだなと思うのは、
PixieJSは本当に表現系ライブラリーに属するのがその通りだと思ってるんですけど、
ただ描画するだけのライブラリーになっています。
エンチャントJSっていうのはゲームライブラリーなので、
ゲームっていうのは描画だけではなくて、
09:01
当たり判定であったりだとか、
スプライトって呼ばれるものの管理であったりだとか、
あとジョイスティックみたいなそういうパッドからの読み込みに対する処理であったり、
いろんな描画だけではない部分の処理も入っているので、
一概にこのPixieと比べるのは良くないかなと思うんですけども、
とはいえ、Pixieの描画速度はすごいなというところかなと思います。
Pixieの話からちょっと脱線すると、
私、ゲーム作るときはこのPixieJSをラップしたFatherJSっていうのを使っています。
このFatherJSっていうのの良いところは、
もちろん描画速度が速いとかサクサク動くとか、
ライブラリーとして充実しているっていうこともあるんですけれども、
何よりも最近のJSをちゃんと追っているっていうところが良いなと思っています。
例えば先ほど紹介したEnchantJSでゲームを作るってなると、
いろんな形で継承をしなきゃいけないんですけれども、
今のJavaScriptって継承っていうものが実装されているので、
使えるはずなんですけれども、
EnchantJSではそのJSに搭載されている継承は使えなくて、
Enchant側で独自に開発した継承っていう関数を呼び出すと継承ができるみたいな、
そんなやり方になっています。
なので最近のこの継承のやり方との相性っていうのはすごく悪いんですね。
FatherJSっていうのはそこがちゃんとトレンドを追っていて、
普通にJSの継承が書けるっていうのがすごくいいなと思っています。
私はあまり継承したくないので、継承自体は使わないんですけれども、
ちゃんとJSを追ってくれているっていうのはすごく嬉しいなというふうに思います。
ということで、ここ10年間ぐらいのJSの歴史みたいなのを見ながら、
ベラベラ喋ってみました。
またこういう面白い記事を見つけたら、それを見ながら喋るみたいなこともやっていこうかなというふうに思います。
今日はご視聴ありがとうございました。ではまた。
