Javascript Trend
JS のクライアントサイド Webアプリケーションフレームワークを触りたくなって、いろいろ触る前にフレームワークの比較情報を集め、かつそれに付随する知識を補っていったページです。
結果として github star が比較対象で一番多く、立ち上がりも早そうだった Vue.js を触ってみています。 Vue に関するメモは別途まとめる。
Javascript 系技術のトレンド調査 (as of 2019/06)
トレンドが早すぎて、ずっと見ないふりしていた世界。ちょっと調べる気になったのです。
JS 系 frontend framework
人気っぽい3つを比較。ついでに見つけた4つめも載せていたりします。
React
- good
- react, angular が top2
- DOMを使用すると、HTML、XHTML、またはXML文書を特定の基準に従って、ほとんどの場合はツリーにまとめることができる
- 世界では jquery を追い越して人気 trend
- SPAに良い
- React Native はモバイルアプリ開発に適している（iOS, Android 向けに共通のコードが適用可能）
- bad
- html を js に埋め込むのが受け付けられない人多数
- 概念を学んで実装するのに時間が多くかかります。ユーザーインターフェイスをMVC構造に統合するのにかなりの知識が必要です
- 合理的ドキュメンテーションの欠如
- 他
- 主な導入事例w: Facebook 発祥, airbnb, netflix 等
Angular.js
- good
- react, angular が top2
$httpというモジュールを利用して、効率的にAjax通信を実装する事が可能（当たり前では？）- 双方向データバインディング（good or bad というより特徴）
- 大規模なアプリケーション開発向け
- しっかりと作り込まれたフレームワークのため、Angularの設計思想をチーム全体で踏襲し開発を行うことで非常にスムーズにプロジェクトを進めることが出来ます。
- bad
- 学習コスト
- バッテリー消耗
- バージョン移行性
- 個人開発には不向きかな
- Angularはバージョンアップが半年毎と速く、破壊的な変更も辞さないところがある
- 他
- 主な導入事例: google 中心に開発 (Angular 2 から microsoft 共同開発)
- 最初のv1は名称がAngularJSだったのがv2からJSが取れてAngular、3がなくて4と5と続きます。
Vue.js
- good
- github star が react, angular よりも多い
- react, angular のいいとこ取りした後発組 (since 2014)
- 新興
- 学習コスト低い
- 小さい、速い、柔軟、高パフォーマンス
- 公式 lib, doc がよく整備されている
- bad
- まだコミュニティが若い（熱気はある様子）
- 他
- Google で Angular 開発に携わっていた Evan さん発
Aurelia
- 全く知らなかったけど
SPAフレームワーク戦争後期にReactでもVue.jsでもなく、Aureliaを選んだ理由 (2019年所信表明)
を読んでちょっと惹かれた.
- 勉強しても無駄にならなさそうな感じ (Vue, Angular, React 知っている人ならすぐ立ち上がりそう、とも)
- Aurelia.jsとは、元々Angular2.0の開発に携わっていたエンジニアが、Angularのチームを抜けて、Aurelia.jsプロジェクトを立ち上げた
Nuxt.js
これにトライしている人も最近多いね。と思ったら、
Nuxt.js は Vue アプリケーションを作成するフレームワークです。 ユニバーサルアプリケーション、静的に生成されるアプリケーション、シングルページアプリケーションの中から作成するアプリケーションを選ぶことができます。
とのこと。 公式: https://ja.nuxtjs.org/guide/
SSR が必要になったら考えようかなぁ
JS フレームワーク全般の情報
- 【感想】JavaScript フレームワーク入門 紹介されている書籍がとても全体を俯瞰するのに良さげな感じ。ハイライトまとめてくれている記事なので、とりあえずこの記事で満足しておこう。 js 界隈の最新の情報に追いつくには書籍は無理な気がするので。
- 静的サイトジェネレータは StaticGen というサイトで調べると良さそう
- BFF (Backend For Frontend) の概念
- そのアプリ・機能に使いやすいように複数APIコールをして必要な結果だけ渡してくれるような機能もそう
- 参考
そもそもフロントエンドとバックエンドを分離するメリットとは？
ふと立ち返るときのメモ程度に。
- フロントエンド（or クライアントサイド）, バックエンド (or サーバーサイド)
- 分離するといいこと
- APIを開放して、クライアントサイドは場合によっては顧客が好きに作れる
- 並行開発できる
- メンテナンス性
- セキュリティ的にも分離していてわかりやすい
- 静的サイトは関係あるか？ない
- https://www.knowledgewing.com/kw/blog/2017/03/201703300900.html
（おまけ） Javascript 関連用語
おまけというか、フレームワークだけ調べることなんて不可能で、まず用語に追いつけないので結構調べることになりました。 フロントエンド開発の基本知識（2017年夏） がよくまとまっていて良い入口になりそうです。
Javascript
ECMA Script
- JavaScript の標準。
- Ecma International が標準化団体
- ES2015 (ES6) 以降は毎年新しい仕様が標準化されるルールとなっている. ここからは年数で呼ぶのが推奨
ECMAScript 6 (ES6, ES2015)
- js の中核仕様を抜き出して標準化したものです。使い勝手の良い機能や構文を多く持っています。
Node.js
- non-blocking IO を提供する javascript 実行環境
- cli も提供する
- フロントエンド開発とも関係がある。 == ブラウザで node.js が動くという意味ではなく、 javascript, html, css を生成するフレームワークの react とかの開発環境の整備に npm や babel, webpack が使われるということ。
- npm module をそのまま vue.js で使ったりできる？
AltJS
- Alternative JavaScript. 特定の言語というよりは JavaScript に変わる派生系？言語群を指す。
- TypeScript がその例
TypeScript
- microsoft 開発, OSSのプログラミング言語. 静的型付けが可能
- javascript の superset であり、 javascript で書いたものは基本動く
CommonJS
- CommonJSとは、サーバーサイドなどのウェブブラウザ環境外におけるJavaScriptの各種仕様を定めることを目標としたプロジェクトである。
JSX
- React の文脈でよく出てくるぽい。 Wikipedia より:
JSXは、JavaScriptの構文に対する拡張である[11]。HTMLと外観が似ているが、JSXは多くの開発者がよく知っている構文を使用して、構造化されたコンポーネントを描画する方法を提供する。Reactコンポーネントは、必須ではないが、通常はJSXを使用して書かれている[注釈 2]。JSXはFacebookがPHP向けに作成した拡張構文であるXHPに似ている。
RXJS
- Angular の世界でよく出てくる？ リアクティブなアプリケーションのための拡張ぽい:
RxJS (Reactive Extensions for JavaScript) は、非同期またはコールバックベースのコード (RxJS Docs) の作成を容易にする observables を使用したリアクティブプログラミング用のライブラリです
データバインディング
- input領域のようなところに入力し格納されたデータと, 描画を同期する仕組み？
- 双方向バインディング:
- モデルのプロパティが更新されるとUIも更新される
- UIが更新されるとモデルにも反映される
- パッと聞いたり見た感じだと、あまり必須という感覚はないなぁ
MVW (Model-View-Whatever)
- 結局なんなのやろ。 Angular でよく聞く
MVVM (Model-View-ViewModel)
- https://ja.wikipedia.org/wiki/Model_View_ViewModel
- データバインディングとか関係ありそうだぞぉ
PWA (Progressive Web Apps)
- モバイル向けWebサイトをスマートフォン向けアプリのように使える仕組み
- PWA という何か特殊な技術があるわけではなく、オフラインやプッシュ通知に対応するためのブラウザAPIを利用しているWebサイトのことを PWA と呼ぶらしい。
SSR (Server Side Rendering)
その他 Web 系技術おべんきょ
ついでにまとめちゃう
ブラウザに保存するデータ
ブラウザにデータを保存する目的は、ステートを持つためと言えば良いかな。ページ訪問回数を記録したり、ページに対してユーザがカスタマイズできる部分を記録させ、再訪問時に役立てることができます（背景画像の設定、AWSコンソールのワンクリックナビゲーションの設定、訪問するリージョン、等々）。 認証周りでは、ブラウザ城のデータはいくらでも変更できてしまうため id/pw を直接保存することはせず、サーバー側のセッション情報と組み合わせてログイン状態を継続させるなどが一般的だそうです。
Web Storage
クッキー (HTTP cookie) のようにユーザのブラウザにデータを保存するための仕組み。
- 種類: localStorage, sessionStorage がある。 (参考サイト)
| 有効期限 | 容量 | サーバへのデータ送信 | |
|---|---|---|---|
| localStorage | 永続的 | 5MB | データ利用時のみ |
| sessionStorage | window,tab 閉じるまで | 5MB | データ利用時のみ |
| HTTP cookie | 指定期限まで | 4KB | リクエストごとに自動送信 |
- 他にも比較として、認証におけるセッショントークンの格納としても cookie よりマシだという話もあります。 cookie は same origin policy がデフォルトでは off です。
- 操作: Javascript で行います.
- 主な操作
localStorage.setItem('key', 'value'); localStorage.getItem('key'); localStorage.removeItem('key'); - 値は String しか格納できないため、オブジェクトを扱いたいときは
JSON.stringifyしてから格納する事が多いかも
- 主な操作
Web SQL Database
参考: とほほ
Web SQLデータベース(Web SQL Database)は、Cookie や Web Storage と同様、アプリケーションデータをクライアント側に保存する仕組みのひとつです。下記の仕様書が公開されています。 … (中略) … ただし、Web SQLデータベースが、特定のソフトウェア(SQLite)の実装に基づくのは中立性に欠けるとの観点から、現在では Web SQL Database の検討は停止しており、代わりに Indexed Database API を利用することが推奨されています。
Indexed DB
キー・バリュー型のデータベースです。
Local Storageと違うところは以下の３点です。 1. Indexed DBはキー以外の項目にインデックスを張ることでキー以外の項目も検索条件にできます。 2. Indexed DBはトランザクションが使えます。 3. Indexed DBはオブジェクトストアでデータを区別できます。オブジェクトストアとはRDBでいうテーブルのようなものです。