SPAフレームワーク戦争後期にReactでもVue.jsでもなく、Aureliaを選んだ理由 (2019年所信表明)

SPAフレームワーク戦争後期にReactでもVue.jsでもなく、Aureliaを選んだ理由 (2019年所信表明):

この記事はAurelia Advent Calendar 2018の25日目の記事であり、

私が2019年中に"Aureliaの人"と呼ばれるための所信表明でもあり、

ただのポエムでもあります。



Aurelia-designstyle-i-love-m.png



はじめに所信表明

フロントエンド界隈でAureliaの布教活動を行います。

そして2019年の終わり頃には・・・

日本で"Aureliaの人"と呼ばれるようになる!!

具体的には下記のKPIを2019年の目標とします。

  • 月に2本以上Aureliaに関するブログを書く
  • 勉強会やLT大会で4回以上登壇(機会に恵まれなければ、自分で勉強会を開催する)
そしてここから先は、なぜReactでもVue.jsでもAngularでもなく、Aureliaを選んだのか?

その理由を自分のバックグランドも含めて、書き綴っていきます。


Aurelia is 何?を3行で

そもそもなのですが、"Aurelia"自体を知らない人が多いのではないでしょうか?

このエントリーでは深くは触れませんが、3行で超簡単に紹介したいと思います。

  • 元Angular開発チームのRob Eisenberg氏らによって創られたSPA用のJavaScriptフレームワーク。
  • 2016年7月にバージョン1.0がリリースされた比較的新しいフレームワークで日本での知名度はほぼ無い。
  • フレームワーク依存が少なく、Web ComponentsをはじめとしたWeb標準に従ったクリーンなコードが書ける。
1つ目を見て気付いた方もいらっしゃるかと思いますが、

Vue.jsの開発者であるEvan You氏と同じく、元Angular開発メンバーから生まれたフレームワークです。(双子の兄弟ポジのVue.jsには一足早く先立たれてしまいましたが・・・笑)

私のポエムなんかよりも、先にAureliaをもうちょっと知りたいという方は下記の公式サイトをご覧ください。

https://aurelia.io/
さて、ここからは私とAureliaの出逢いについて語っていきたいと思います。


自分語り

時は2016年の秋頃まで遡ります。

当時の私は新卒で入った会社の6年目だったのですが、それまではデータウェアハウスの開発・運用が主な担当でした。エンジニアとして採用されたものの、大学では商学部で会計を専攻していたため、プログラミングは未経験でした。

つまるところ、30歳を目前にして本格的なアプリケーション開発の経験が無かったのです。特にフロントエンドに関しては、新卒の時にJavaScriptの基礎的な学習をしたっきりで、完全に浦島太郎状態でした。転職も考えていた中で、さすがにこれは"ヤバイ"と感じていました。

そんな時、職場の後輩とランチをしながら『こんなサービス欲しいよね〜』と話していると、彼が

『それ一緒に作ってみませんか?』と一言。

もうこれしか無い!!と思い、彼とプライベートでアプリを作ることにしました。

そして、せっかくプライベートで自由に作れるということであれば、業務では採用できないようなエッジのきいた技術も検討してみたいということで色々調べていました。すると後輩の彼が『モダンな感じにするならSPAで作りましょう!』と言うではないですか。当時、フロントエンド浦島だった私は"SPA"が何か分からず、完全に↓↓こっちを想像してしまいました。



spa.jpg


引用元:https://adb-w.jp/blog_spa/
(改めて思うと、当時の私の情報アンテナやばかったですね。完全に腐ってました・・・笑)

そんな訳で、後輩に誤りを訂正してもらい、Single Page Applicationの方を調べ始めていきました。程なくして『これは今後のWebアプリケーションでUXを向上させるために欠かせない技術だわ・・・』と、やっと自分の感覚が時代に追いついてきました。

お察しの方も多いと思いますが、こうやって色々とフロントエンドの情勢を調べていくと、ECMAScript、AltJS、トランスパイラー、モジュールローダー、タスクランナー・・・と、浦島太郎状態だった私を殺しにかかるような波状攻撃が襲いかかってきました。特にSPAのフレームワークについては選択肢があり過ぎて、非常に悩まされました。おそらく当時Web上に転がっていたフレームワークの比較記事はほぼ全て目を通したと思います・・・笑

そしてついに出逢ったのです。Aureliaに。

【2016年夏】個人的に注目なフロントエンドで使えるJavaScriptフレームワークまとめ - Qiita



68747470733a2f2f71696974612d696d6167652d73746f72652e73332e616d617a6f6e6177732e636f6d2f302f37343139322f34393936383266332d323137342d393466372d633061312d3137303130653565336238392e706e67.png


第一印象は・・・

ロゴがかっこいいな〜

"未来志向"とか、なんか厨二心をくすぐるじゃん〜

と、こんな感じでした。

当時は導入事例ももちろん無かった訳ですが、可能性は感じさせてくれましたね。

とはいえ、一通り調べきった後の感想は

今から学ぶならReact、一択 でした。

職場の同僚と話したり、勉強会での盛り上がりを見る限りでは、転職市場も含めてReactを学んでおくことが大きなアドバンテージになりそうな空気が漂っていました。特に下記のエントリーは当時の情勢を如実に表してくれていたと思います。(ちなみにVue.jsは人気に火が付く直前だったかな・・・)

10年のツケを支払ったフロント界隈におけるJavaScript開発環境(2016年4月現在)。 - 日々、とんは語る。

去年、一気に普及したReactは、今年に入っても絶好調です。他のライブラリや、Angular 2など、色々と騒がれていましたが、去年1年間で個人的に当面はReactに完全決着したと思っています。数年前は、jQueryが使えないとフロントの仕事は難しいと言われていましたが、これからはReactが使えないとフロントの仕事は難しいと言われることになるでしょう。

Reactはブラウザで動作するアプリケーション以外にも、React Nativeによるモバイルアプリ開発も行えますので、今後ますます成長していきそうです。
そう、時代はReactでした。

しかし・・・しかしです。ここで思ったのです。

『これまでフロントエンド、ましてやWebアプリケーションですらロクに開発したことの無い自分が、(ES2015でだいぶマシになったとはいえ)クセの強い言語であるJavaScriptを今から学んで追いつけるのか?経験豊富なフロントエンドエンジニアの人たちは既にReactでバリバリ開発している・・・。流行り廃りが激しいフロントエンド界隈で、自分が追いついた頃には、Reactの次の波が来ているのではないか?』・・・と

そこでバクチに出ました。

『転職考えてるのにあり得ないでしょw』ってくらいのバクチに出ました。

そう、Aureliaです。

他のフレームワークには無い、Aureliaの大きな特徴としてWeb標準の技術に可能な限り準拠するという設計思想があります。ただ準拠するだけでなく、Custom ElementsやShadowDOMといったWeb ComponentsやW3Cで策定中の構文など、先進的な技術を使ってコンポーネントを書くことができます。それも、フレームワーク独自文法が極力現れない構文で、です。これは今後のエントリーでも紹介していきたいのですが、Aureliaで書かれたコードベースはパッと見、素のHTML、CSS、JavaScript(自分の場合はTypeScript)です。フレームワーク使ってないんじゃないの!?って思っちゃいます。

つまり、Aureliaを学ぶことで、『フレームワークに依存しない長く使えるスキルを習得しよう』と考えたわけです。それなら仮にAurelia自体が流行らなかったとしても、Web標準の技術を学んだことはムダにはなりません。そして万が一、Aureliaが今後流行った時に大きなアドバンテージを取れると夢に描いていたわけです。

これは後から知ったことですが、Aureliaを学習するために読んでいたAurelia in Actionという書籍でも、下記のように紹介されています。

Learning Aurelia is about learning modern web development.

(Aureliaを学ぶことは、モダンなWebアプリケーション開発を学ぶようなものだ。)
もちろん、他にもAureliaが機能的に魅力的な点はあるわけですが、個人的には下記のRob Eisenberg氏のインタビュー記事も大きな決め手になりました。

未来を見据えたAurelia JavaScriptフレームワークの1.0がリリース

InfoQ:Aureliaについて、初めてそれを耳にする方に向けてどのように説明していますか?

Eisenberg氏:Aureliaは、オープンソース・アプリケーション・プラットフォームです。ある種FlexやSilverlightのようなものですが、AureliaはすべてオープンなWeb技術と完全に標準ベースの技術により開発されています。ブラウザアプリ、モバイルアプリ、そしてデスクトップアプリのどの開発にも利用可能です。プラットフォームは開発者の邪魔をせず、高い生産性、クリーンなコード、最小限のベンダーロックインとなるようデザインされています。
こういった経緯で、自分がWebアプリケーションエンジニアとして戦うために

ReactでもVue.jsでもAngularでもなく、Aureliaに一点投資しようと決めました。

もちろん、当時はこれが絶対に正解だとは思っていなかったわけですし、むしろ後で後悔する可能性の方が高いのではないか!?とすら思っていました。

しかし、それから半年ほど公式ドキュメントや書籍でAureliaを学び、現在の職場で(社内向けの管理画面ではありますが)Aureliaを採用させてもらい、1年近くプロダクション環境で開発してきた感想としては、自分の選択は間違いではなかったと思っています。

2019年は私にとって『駆け出しWebアプリエンジニアだった自分に戦う力を与えてくれたAureliaコミュニティに恩返しする年』です。冒頭で表明した活動を通して、少しでも日本でAureliaの良さを広めていきたいと思っています。

とはいえ、私はAngularは業務で触っているものの、ReactやVue.jsはチュートリアルレベルでしか書いたことがないため、どうしても説得力がありません。そこでエントリーの締めとして、経験豊富なフロントエンドエンジニアさんのブログを2つ紹介して終わりたいと思います。彼らは両名ともメジャーなSPAフレームワークでの開発経験があり、それでもなおAureliaを採用する理由を語っています。


海の向こうの強そうな人から見たAurelia


Why I Prefer Aurelia Over Angular, React & Vue

オーストラリアのフロントエンドエンジニア、Dwayne Charringtonさんのブログです。
https://ilikekillnerds.com/2018/07/why-i-prefer-aurelia-over-angular-react-vue/

彼は2015年2月から約4年間、Aureliaを使ってきましたが、それまではReactやAngular 1系を使ってきたそうです。また、2015年からはReact、Ember、Angular、Vue.jsを使った仕事にも携わっており、1年前にはVue + VueX、いわゆるTidyForkと呼ばれるスタックでサイドプロジェクトも立ち上げています。

彼は意図的に他の選択肢を避けてきた訳ではないですが、最終的な選択肢はいつもAureliaに行き着くそうです。

ここではその理由の中から、いくつかピックアップしたいと思います。


Conventions

これは私がAureliaで気に入っているものの一つです。正直なところ、他のフレームワークやライブラリが本当の意味でConvention over Configurationアプローチを最大限に活かしていないのには驚きです。特に、Angularは過度にデコレーターを使うように設計されており、View Modelが必要以上に冗長になってしまいます。

This is one of my favorite things about Aurelia and honestly, it surprises me that no other framework or library has really leveraged the convention over configuration approach. Specifically, in Angular, the use of decorators are promoted heavily and it results in overly verbose looking view-models.
上述した"フレームワークを使っているように見えない"というのは、まさにこの設定より規約の思想があるからで、ボイラープレート的なコードも少ないです。


Reactive Binding (vDOM not included)

私はReactやVueを使って働いたこともあり、仮想DOMのコンセプトについては熟知しているのですが、人々が、パフォーマンス面において仮想DOMが銀の弾丸であるかのように思っているのを見ると、私はうんざりしてしまいます。

Aureliaは仮想DOMを採用していません。しかし、ReactとAureliaでそれぞれ実装されたアプリを並べて比較してみても、あなたはおそらくその違いに気づかないでしょう。これはReactive Bindingシステムが仮想DOMと同等のベネフィットを提供するからです。

(中略)

仮想DOMがパフォーマンスを追求するための唯一の方法であるという誇大広告を真に受けないでください。

I’ve worked with React and Vue, I am quite familiar with the concept of a Virtual DOM and let me tell you, the Virtual DOM really irks me when people see it as a silver bullet for performance.

Aurelia doesn’t have a Virtual DOM and you probably wouldn’t even notice a difference if you compared two identical apps side-by-side (one built with React and the other Aurelia) because the reactive binding system offers many of the same benefits.

...

Be smart, don’t buy into the hype that Virtual DOM is the one true path to performance world.
正直、私は仮想DOMについてはほとんど語れないのですが、下記のRealWorld App のベンチマークを見ても、パフォーマンスについては問題無いようですね。(下記はそれぞれのアプリケーションが描画されて操作できるまでのタイムなので、値が低いほど優れています)



1_El9cBVFHxRG36XD8KNjA_g.png


A Real-World Comparison of Front-End Frameworks with Benchmarks (2018 update)


Small Learning Curve

私が使ったことのあるフレームワークやライブラリは全て、ラーニングカーブが小さいことを謳っていました。しかし実際のところ、それは主観的な謳い文句であり、開発者のスキルレベルや新しいことを学ぶ能力に依存していました。

私は様々なバックグランドを持つフロントエンドエンジニアやフルスタックエンジニアと実際に働いたことがあります。

(中略)

彼らは皆、Aureliaの基礎を数日で習得し、自走できるようになりました。開発者が向き合う困難は、どのように彼らのアプリケーションを構築するかといったことや、どのようなネーミングにするかといったことです。(もちろん、これらはAureliaに固有の問題ではありません)

All frameworks and libraries I’ve used have boasted about their small learning curves when in reality it’s subjective and dependent on the developers skill-level and ability to learn new things.

I have first-hand experience with upskilling front-end and full-stack developers with ranging backgrounds.

...

Every developer I have upskilled has grasped the basics of Aurelia within a couple of days, and that is being somewhat hands-off. The hardest part developers face is how to structure their applications and what to name things (which isn’t an Aurelia problem).
Aureliaはいわゆる薄いフレームワークではないので、使い倒そうと思うと学習する時間はそれなりに必要です。とはいえ、Aureliaはアプリケーションに最低限必要な機能(e.g. RouterやTemplateエンジン)だけでスタートし、必要になればプラグインという形で追加の機能(e.g. HTTPクライアント、Validation、Stage Management)を段階的に拡張していくことができるため、学習コストは低いという印象がありました。そして何より、直感的に理解しやすい設計になっていることがキャッチアップの早さにつながっていると思います。


You don't need to hire "Aurelia developers"

他のフレームワークやライブラリを使っていて本当に悩ましいことの一つが、それら独自の文法を強制されることです。ReactはJSXのシンタックス、Vueは単一ファイルコンポーネント、そしてAngularライクな構文です。そのため、企業はフレームワークやライブラリ専門の開発者を採用しないといけません。

(中略)

それがAureliaだと、単純に有能なフロントエンドJavaScriptエンジニアを雇うだけで良いのです。それくらいAureliaはフレームワークらしさがありません。そうして雇った開発者は1日、2日程度で簡単にAureliaにキャッチアップするでしょう。

未だにAureliaはそのテンプレート構文に少しだけ独自文法を持っていますが、あなたのHTML/JavaScriptスキルを活用するために、慣習的で直感的なアプローチに従おうとしています。

This is one thing that really irks me about other frameworks and libraries, they make you buy into their way of doing things. React has its JSX syntax, Vue has its single-file components and Angular-like syntax. This leads companies to hiring framework and library-specific developers,

...

Yes, Aurelia still has a little bit of buy-in with its templating language, but even that tries to follow a convention-like intuitive approach, tapping into that HTML/Javascript muscle of your brain.


4 reasons to use Aurelia

bigopon氏もまた、AngularJS、Angular、React、Vue.jsといったメジャーなフレームワーク/ライブラリの開発経験があるそうです。その中でもAureliaを使う理由として、4つ掲げている理由のうち2つをピックアップします。
https://dev.to/bigopon/4-reasons-to-use-aurelia-5e0p


Developer Friendliness

Aureliaには仮想DOMはありません。要素や属性とのBindingは(単方向か双方向かも含め)、シンプルなコマンドで定義できます。直接的、かつ直感的にDOMオブジェクトと協調します。仮想DOMが無いため、サードパーティのプラグインを追加するのはとても簡単なタスクとなります。

It works directly and intuitively with the DOM objects you know and love. Since there is no vDOM, adding a third party plugin to your application is a dead simple task.
Aureliaは直感的に扱うことができ、フレームワークっぽさをできるだけ出さないように設計されているため、サードパーティのライブラリやビルドツールと組み合わせやすくなっています。


Power

Aureliaは他のフレームワークや仮想DOMをはるかに凌ぐパフォーマンスをアプリケーションに与えるだけでなく、簡潔で直感的なデータバインディングも可能にします。また、スタンダードなJavaScriptやJavaScriptオブジェクトを最大限活用することができるので、あなたをビジネスロジックに集中させ、組織を成長させていくでしょう。もうフレームワーク特有の問題に時間を浪費する必要はありません。

Aurelia not only powers your app with a stunning performance that leaves other popular frameworks and their vDOM in the dust, but also offers a simple and natural data binding mental model that will give you the strength of an army. You will enjoy being that person who smashes through business requirements, finishes your job, and evolves your company while unlocking your new power with standard JavaScript and JavaScript objects, instead of wasting your time on framework proprietary characteristics.


まとめ

2019年の所信表明のつもりがかなり長いエントリーになってしまいました。。。笑

ここまで読んでくださった皆さま、ありがとうございました!

冒頭で宣言した通り、今年はAureliaを日本に布教するべく、アウトプットを精力的に行っていきたいと思います。

それでは2019年も良い年になりますように〜!

コメント

このブログの人気の投稿

投稿時間:2021-06-17 05:05:34 RSSフィード2021-06-17 05:00 分まとめ(1274件)

投稿時間:2021-06-20 02:06:12 RSSフィード2021-06-20 02:00 分まとめ(3871件)

投稿時間:2020-12-01 09:41:49 RSSフィード2020-12-01 09:00 分まとめ(69件)