【ぺちオブ】持ち込み企画！最近のフロントエンド事情を知ろう！！に参加させていただきました #phper_oop

2019/06/06に株式会社カジトリ様で開催された、【ぺちオブ】持ち込み企画！最近のフロントエンド事情を知ろう！！に参加させていただきました。そこで得られた知見を共有したいと思います。

イベントの説明

https://phper-oop.connpass.com/event/132854/

ぺちオブとは？

株式会社ミライトデザイン主催による
ペチパーのペチパーによるペチパーのための初学者向けオブジェクト指向ワーキンググループです。
もくもく会や、モブプロ会、セミナー、LT会、輪読会　なんかをやっていきたいなと思っとります
https://miraito-inc.co.jp/
https://phper-oop.connpass.com/

最近のフロントエンド事情を知ろう！！

今回のぺちオブは @kahirokunn の持ち込み企画で「最近のフロントエンド事情を知ろう！！」を開催したいと思います！
ミライトデザインはバックエンドのエンジニアが中心な為、ぺちオブ常連のかひろくんが、そんな我々にフロントエンド事情を教授してくれるというすごくありがたい持ち込み企画です！
かひろくんはフロントからサーバーサイドまで幅広く精通している優秀なエンジニアなので、これを機会にフロント事情に詳しくなろうと思います！
普段はサーバーサイド中心の人でも、フロントがメインの方でも参加OKですので、みなさんもこの機会に勉強しましょう！

発表者

かひろ君
Twitter　https://twitter.com/kahirokunn
Qiita　https://phper-oop.connpass.com/event/132854/qiita.com/kahirokunn

会場提供の株式会社カジトリ様

オープンソースのwebデータベース「Exment」を作っている会社です。
「Exment」は、ファイルサーバーやExcelなどで行っていた情報管理を、すべてWeb化し、情報の一元化を無償で行うことができるWebデータベースです。
入力したデータは、他のユーザーと共有したり、見積書や請求書などの書類作成に利用したり、期限前に通知したりすることができます。
見積書や請求書は、Excel形式でテンプレートをアップロードすることが出来ますので、すでにお使いのExcelファイルがありましたら、そのままExcelファイルを使用することができます。

競合する商品としてはSalesforceなどがあるが、そこまでの機能を必要としまい中小企業をターゲットとした商品になります。オープンソースで開発しているので、ビジネス版のWordpressを目指しています。
https://exment.net/
https://github.com/exceedone/exment
https://kajitori.co.jp/

参加した理由

フロントエンド／バックエンドという言葉の意味は理解しているものの、具体的にどのようなものなのか？という理解が曖昧なので、この機会に「最近のフロントエンド事情」に詳しくなりたいと考えたので。

内容

フロントエンド開発は移り変わりが激しい。そこで重要なのは、新しい技術が現状の課題を解決してくれるかどうか。またコストが見合うかどうか。
結論：問題解決に必要なものを、最低限だけ使うのが正しい。

サーバーサイドレンダリング：htmlが含まれる。
一つのJavacriptでゴリゴリ動く。これが現代のフロントエンド開発。

SPA(Single Page Application)は、SEO的な優劣が問われた時期があったが、現代はGoogleのクローラーが進化しているので、SEO的な差異はなくなっている。

1年半前ぐらいまでの主流だったのは、Laravel, Django, Rails等で、サーバー側でデータに紐付いたHTMLを論理的に構築する。そしてjqueryを入れたり、js用のビルドパイプラインを組んでjsとかcssを圧縮して、圧縮されたのをhtmlがlinkタグとかで読み込んでた。この時期は、フロントの学習コストはそこまで高くなかった。

フロントエンドが普及してきた影響で、ReactやAngular等が台頭しVueがポッと出てきて、jqueryがレガシー呼ばわりされる始末。流行りのものを追い続けることに必死に。

SPAの登場。いきなり難易度が上がる。Javascriptファイルをlinkするだけで、ネイティブアプリかのように動作。
サーバーサイドエンジニアとフロントエンドエンジニアの境界が明確に区別され始めた。

フロントエンドの混沌の時代。様々なフレームワークが登場したり、新たな問題を解決するために新たな技術が登場したり。
フレームワーク：Vue, Angular, React…etc
Flux関連のスタック：Elm, Redux, ngRxStore, Vuex, mobX, etc…
エンジニアが混乱した時代。

今現在のフロントエンド

いくつかのフレームワーク、今回はVue, React, Angular, Elmを紹介していく。基本的にこれらのフレームワークは明確な優劣はない。

React

これは今回紹介するフロントエンドフレームワークの中で最もポピュラー。

Reactの特徴はJSX（特殊なaltjs）を入れなかった場合は、全てが生のJavascriptで構成されること。

コンポーネントと関係あるデータが変わったら、classのrender関数が呼ばれて自動でhtmlを書き換えてくれる。

JSXを使わなかった場合、全てが生のJS。
JSだけで全て書けるが、コードの品質や作れるものは完全にその人のJSの能力に依存する。

沢山のサードパーティライブラリがある。

※JSX は、DeNAによって開発されたウェブアプリケーション向けのプログラミング言語である。ECMAScript 4から影響を受けた構文を持ち、静的型付けなのが特徴。ウェブブラウザ組み込みのスクリプト言語であるJavaScriptのデメリットを解消することを目的に作られている。またJSXのソースコードは最適化されたJavaScriptコードに変換して実行され、同等のJavaScriptプログラムと比較して10%以上高速になるとされる。

Vue.js

現在すごく人気と勢いのあるフレームワークである。学習コストが非常に低い。
vueの場合は .vue のファイルを使う事によって、1つのファイル内に、htmlとcssとjsをセットで書ける。
Django, Laravel, Railsでhtmlの構築部分を書いたことある人なら、低い学習コストでVue.jsのコードが書ける（単一ファイルコンポーネント）。

また、Vueはアニメーションが他のフレームワークと比べて書きやすい。

現状では、Typescriptとの連携が不十分というのが難点だが、今後のバージョンではうまく対応される予定。

Angular

シンタックスは、Vueと似ている。

デフォルトで、Typescriptを強要する。Typescriptをしっかり使った開発の場合、Vueよりも向いている。

単一ファイルコンポーネントは無い。AngularでUIを作る場合は、ファイルを三つに分けて、JSでひとつにつなげる。ファイルが別れていることで、解析が楽になるという副次的なメリットもある。

他と比べると落ち着いていて、振り回されることが少ない。プロダクト開発にはオススメ。

Elm

web開発に必ず必要なものしか入っていない、凄くシンプルな関数型言語。

Elmを書く場合は、必要な事しかできないようになっているので、大抵の人が同じ様なコードになる。迷いが少ない。学習コストが本当に低い。
本当に無駄がなく、全てのフロントエンドエンジニアが1度は触るべき。

フレームワークまとめ

Vue、Angular、React。フレームワーク自体に特に優劣というものはない。できることには差がない。

ただ、相性の良い案件の方向性は存在する。

例）

・入門用
・JSとフロントエンド開発に自信がない人が多いチーム
・アニメーション多め
Vue.js

・熟練者、もしくは最後まで戦い抜く気力のあるチーム
・Typescriptで開発するなら
React
Angular

フロントエンド構成

フロントエンド構成は、SPA・prerender・SSRがある。現時点ではSEO的な差異はない。
https://qiita.com/seya/items/2688dc539af217b7b111

SPA

1枚のjsに、フロントエンドの全てがつまっている。

SSR

サーバー側でVueやReactを動かしてhtmlを生成して、フロントで生成されたhtmlと融合して動く感じ。
https://slides.com/kahirokunn/vuex-class-based-13-15

prerender

ogp等が必要な、いくつかのページ専用の生のhtml、css、jsを用意する手法。
少しフロントエンドの知識が必要。
https://qiita.com/mio3io/items/bd2d91fc2a7785f9022c

PWA

今後、来ることが期待できる技術。ただしまだ各社の対応が落ち着いていない。現状で本腰を入れるのは避け、触りだけ扱うことが賢明かもしれない。

質疑応答

Q：フロントエンド界隈で、新しいフレームワーク等がどんどん開発・発生してくる理由？
A：サーバサイドと比べると、覇権を奪いやすいからかな。

Q：フロントエンドを始めようと思ったら、なにから手をつけたら良い？
A：Reactが良いんじゃないか　React Native は生き残りそう。

Q：今後アプリはPWAに統一されるかどうか？
A：アップストアに置けないというデメリットがある。ネイティブアプリの価値は残り続けるのでは。
PWAは今後期待できるが、まだ若い技術なので、勉強コストは今後もかかることになりそう。
アップルはブラウザのシェアも低いので、PWAにそれほど本腰を入れてるわけではないかも。

まとめ

移り変わりの激しいフロントエンド業界の、これまでの歴史および現在の事情について、包括的に理解することができました。
効率的に開発するための手段は常に変化していくので、それをキャッチアップし続けることは非常に大事ですが、なんでもかんでも導入すれば良いわけではなく、問題解決と学習コストなどと秤にかけ、必要最低限のものだけ使用することが重要であると理解しました。