個人開発したいクソ初心者がWebフレームワークを比較してElmに決めた話

※この記事はポエムです。←

高クオリティな記事ばかりの Elm Advent Calendar 2018の中、このようなポエム記事で大変恐縮ですが、皆様の箸休めにでもなれば幸いです。

# TL;DR（← これが書きたかっただけ）

- 将来的に Flutter やりたいし AngularDart やるか。
- と思ったけどやっぱ Elm の方がいいかも。
- Elm is 最 & 高 ! ← イマココ！

# 自己紹介（またはどの程度のクソ初心者なのか）

これまでのプログラミング経験は以下の通りです。

- 学校で C 言語やったよ！
- 仕事で C 言語やったよ！（でももう C 言語は一生触りたくないよ！）

だけ。 It's レガシー。

他の知識はこんな感じです。

- C 言語が嫌すぎて[Haskell](https://www.haskell.org/)が好きになった（だけ）
- [すごい H 本](https://www.amazon.co.jp/dp/B009RO80XY)はとても H そうだったので読んだ（だけ）

完全に「Web？HTML とか CSS のあれでしょ？」状態でした。

# なぜ Dart ？

[![](https://webdev.dartlang.org/assets/angular-dart-love-52bd15fe0df32121165be8984e99e45a989c4b375f48bbc7735e5799d5b11487.svg)](https://webdev.dartlang.org/angular)

「Google 先生のお墨付き」だから。それだけです。

- Dart 言語：https://www.dartlang.org/
- AngularDart：https://webdev.dartlang.org/angular

ただ、もっと具体的なポイントを挙げると、

- マテリアルデザインが楽そうな雰囲気（[コンポーネントギャラリーがある](https://dart-lang.github.io/angular_components/#)）
- Firebase が楽そうな雰囲気（[公式ライブラリ？がある](https://pub.dartlang.org/packages/firebase)）
- モバイルアプリも Dart で開発できる（[Flutter がある](https://flutter.io/)）

「マテリアルデザイン最強説」を唱えている私は個人開発のアプリもやはりマテリアルデザインにしたいです。

また、クソ初心者の私はできるだけ学習コストを抑えたいので、バックエンドは Firebase に任せたいです。

[![](https://firebase.google.com/images/brand-guidelines/logo-standard.png?hl=ja)](https://firebase.google.com)

それと、個人的に大事なポイントとして、「型がある雰囲気」もありました。

C 言語の有って無いような型付けに疲弊した私は、完全に「強い静的型付け is 最強」信仰に入信したので、コンパイラー神の居ない動的型付け言語や、クソザコ型付けの言語は宗教上の理由で使えません。

参考：[各言語の型の特徴をまとめてみた](https://qiita.com/kaitaku_san/items/148d1491596a58b9c97d)

ただ、Dart に惹かれた一番の理由は Flutterの存在です。

[![](https://upload.wikimedia.org/wikipedia/commons/1/17/Google-flutter-logo.png)](https://flutter.io/)

将来はモバイルアプリ開発にも手を伸ばしたい私にとって、1 つの言語で 3 大プラットフォームの開発ができるのは学習コスト的にもかなり優位性があると考えました。

# なぜ Elm ?

[![](https://upload.wikimedia.org/wikipedia/commons/thumb/f/f3/Elm_logo.svg/240px-Elm_logo.svg.png)](https://elm-lang.org/)

神は言った。「Elm の世界では一切の実行時例外が起こらない」と。

私にはその言葉だけで十分でした。（茶番）

Elm のすばらしさと、それ故の選民性はヤギのセンパイ（[@arowM](https://qiita.com/arowM)）がわかりやすく解説してくださっていますので、私からは説明しません。（面倒だっただけ）

参考：[Elm はどんな人にオススメできないか](https://qiita.com/arowM/items/dfb38d1c5f3dfde8b8bf)

ただ言えるのは、AngularDart よりも Elm のコンパイラはたくさんのお告げを我々にくださるということです。

また、私が個人的に Elm を好いているのは、「構文が最強にシンプル」だからというのもあります。

具体的に良いと思っているのは以下。

- 行末に`;`がいらない。
- `()`があまり登場しない。
- 関数定義のコスト（文字数など）が低い。

まあここらへんは賛否両論あるところですが、事前知識が全く無いのであればクラスや変数、`const`や`var`という概念から開放される Elm はとてもシンプルでオヌヌメだと思います。

## マテリアルデザインは？

Elm でマテリアルデザインを実現するためのライブラリはあることにはありますが、ここ最近メンテナンスされてないので、大人しく CSS を書くしかありません。

が、以下のポイントから、個人的にはそこまで大変じゃないと思いました。（思っただけ）

- elm のソースファイルに直接 CSS を書くことができる。
  （参考：[CSS in JS(Elm)したら想像以上に良かった](http://jinjor-labo.hatenablog.com/entry/2016/05/30/165816)）

- [CSS ができなくても安心！elm-ui で簡単レイアウト！](https://qiita.com/miyamo_madoka/items/e29a97102df8770a6375)

ライブラリやコンポーネントの使い方も、結局[マテリアルデザインの公式ドキュメント](https://material.io/develop/web/components)を読まないとよく分からないので（← 私だけ？）、だったらマテリアルデザインを理解するついでに、自作ライブラリみたいなのを一回作っちゃえば、解決するよね！という考えです。

## Firebase は？

Elm で Firebase を使うためのライブラリも微妙です（笑）

ただ、[こちらの記事](https://qiita.com/qnoyxu/items/ee479b2b96831907e024)で紹介されているサンプルプログラムのように、Flag や Port を使って JS と通信する手段があるので、Firebase との通信処理など DDD で言うインフラ層にあたる処理は「 JS で書く！」と割り切ってしまえば、どうということはありません。

参考：[[DDD]ドメイン駆動 + オニオンアーキテクチャ概略](https://qiita.com/little_hand_s/items/2040fba15d90b93fc124)

むしろ情報量は圧倒的に Elm より JS の方があるので、外界の非シンプルなところはヘタにライブラリを使うより JS で書いたほうが安全ではないかと。

JS の学習コストは...。必要な投資です（笑）

## モバイルアプリは？

それな of それな。

「[elm-native-ui で ios アプリを動かしてみた](https://qiita.com/4245Ryomt/items/0309c749024fda628417)」のような事例はあるものの、やはり Elm でモバイルアプリ開発は現実的ではありません。

ただ、AngularDart を触ってみると分かりますが、Flutter とはフレームワークが全く違うので（当たり前）、知識を共有できるのはせいぜいいくつかの共有ライブラリと Dart 言語自体の構文くらいなものだと思います。

同じ Dart だったら、コードも共有できるんじゃないの？とも思いましたが、実際に共有できるのは DDD でいうドメイン層とサービス層くらいなもので、それによる開発コストの削減量は、コードを共有するための設定や実装コストで打ち消されてしまうのではと思います。

参考：[Flutter と AngularDart を DI と Clean Architecture で いい感じにする](https://speakerdeck.com/takayukihayashi/fluttertoangulardartwo-ditoclean-architecturede-iigan-zinisuru)

別に今すぐモバイルアプリ開発をしたい訳でもないので、ここは諦めるのが吉ってもんですね。←

# まとめ

- AngularDart + Flutter は思ったより簡単じゃなかった。
- Elm の方が Dart よりもコンパイラの寵愛を受けられる。
- Elm is シンプル。すこ。
- 結論：Elmやろか。

# おわりに

いかがだったでしょうか。

「Web フレームワークを比較」はタイトル詐欺です。ごめんなさい。

ただ、AngularTS や Vue.js、React.js は Dart の汎用性を優位に捉えていたのと、宗教的問題からやる意味が全く感じられなかったので、検討初期から外してしまいました。

反論というかご意見があったらぜひお聞かせ願いたいです。まじめに。

この記事が誰の何のために役立つかは分かりませんが、先述の通りポエムだと思って読んでいただけたなら幸いです。

また、この記事を書く少し前（2018.12.4）に Google が Hummingbird を発表しました。

参考：[祝 Flutter1.0 - 1 分でわかる Flutter Live '18](https://qiita.com/keidroid/items/3b23b28231e578600eb2#hummingbird)

これによれば、Flutter で Web の開発までできてしまうようです！（驚愕）

リリースはまだ先のようですが、いよいよ AngularDart をこれからやる理由はさらに薄れたかもしれませんね。

## P.S.（宣伝）

私Kenntaurosは今、個人開発で生計を立てるべく活動しています！（ニート）

技術はまだまだですが、アイデアは無限にあります！（傲り）

もし「どうせクソアイデアだけど聞くだけ聞いてみるか」とか「クソ足手まといのクソ初心者だけど技術と時間を投資してやってもいいかな」のように気さくな方がいらっしゃれば、ぜひお話させていただきたいので、Twitter（[@tm_kentauros](https://twitter.com/tm_kentauros)）またはtmkentauros@gmail.comへご連絡ください！

もちろんElm案件です！👍👍👍

Blogもやってます。遊びに来てください！
→ https://tmkentauros.com

それでは！✋