概要
- 最近のフロントエンド開発においてフレームワークに求められているものは何か
- トレンドのフレームワークは何か
- Reactの影響を受けたSolidJSがホットになりつつあるのではないか
但し書き
- ここではフレームワークとライブラリを厳密に区別していません。
- 一律にフレームワークと表現しております。
現在フレームワークに求められているものは何か
昔とは違うものが求められている
- 2005年、Google Mapが世の中に出てきてからAjax(JavaScript)を使った開発が流行り始めました。
- 2006年ブラウザ間挙動違いを吸収してくれ、Ajaxを扱いやすいライブラリ「jQuery」が誕生
- 当時のフレームワークにはリッチなものは求められていませんでした。
- が、最近のWebシステム開発においては複雑でリッチなものが求められているのではないでしょうか。
求められているもの①: 「効率的開発」
- 再利用可能なコンポーネント
- 状態管理を容易化
- 自動化タスク
-ビルド、バンドル、コード最適化 - デバッグ/テストツール
- ドキュメント/コミュニティー充実度
- モバイル対応
求められているもの②: 「開発スタイルの一貫性を確保」
- コーディングスタイルの統一
- デザインパターン促進
- チーム開発の保守性向上
求められているもの③: 「パフォーマンスと最適化」
- 仮想DOM
- コード分割/遅延読込
- 最適化ビルド
トレンドのフレームワークを分析
StackDiaryの紹介
- Web 開発、デザイン、テクノロジーの最新ニュースをカバーしているサイトです。
- 全世界エンジニアからの回答を元にトレンドを分析可能です。
- 2023年8月18日時点最新の2022年データで分析します。
エンジニアからの認知度が高いフレームワーク
エンジニアの使用経験が高いフレームワーク
エンジニアの関心度が高いフレームワーク
エンジニアの再度使用したいフレームワーク
上記分析結果より
- React、Angular、Vue.js、Svelteは認知が進んできている
- 使用頻度が高いのが、React
- 関心があるのが、Svelte、Qwik
- 再度使いたいのが、Solid、Svelte、Qwik、React
- 逆から見ると、Ember、Angularは認知度が高いが、再度使いたいとは思われなくなってきている。
今回注目したフレームワーク
- 再度使ってみたい結果となったフレームワークの中から、SolidJSを取り上げたいと思います。
SolidJSとは
SolidJS概要
- Ryan Carniato（ライアン・カーニアート）によって開発
- 宣言型のJavaScriptフレームワーク
- 宣言型以外にはjQueryに代表される命令型フレームワークが有る
- Reactの影響を受けているが、仮想DOMを使用していない
- Reactは仮想DOMを使用することで高パフォーマンスを実現
- SolidJSは逆に仮想DOMを使用しない事で実現
- 一度作成された実DOMノードをSignalやMemoといったプリミティブの変化に伴い部分的に更新する高パフォーマンスなUIを実現
高速フレームワーク
-
公式サイトではVanillaに次ぐ高速性を謳っています。
試せる環境
- オンラインで試せる環境があります。
ローカルで環境構築する場合
- こちらに手順が記載されています。
- 以下、TypeScriptを使う場合での例を転記しました。
> npx degit solidjs/templates/ts my-app
> cd my-app
> npm i # or yarn or pnpm
> npm run dev # or yarn or pnpm
チュートリアルより
Hello Worldを出力①
コード
- チュートリアルのサイトの都合上、HTMLのソースコードは割愛しています。
- divタグ,id=appのHTMLタグが有ると見てください。
import { render } from 'solid-js/web';
function HelloWorld() {
return <div>Hello World!</div>;
}
render(() => <HelloWorld />, document.getElementById('app'))
説明
- divタグで囲まれた「Hello World」の文言を返すfunctionを定義
- HelloWorldタグが使用可能となる
- Solidのエントリーポイント render関数に「HelloWorldタグ」、「マウント先のHTMLタグのid"app"」を渡す
- 結果、ブラウザに「Hello World」の文言が表示される
説明図
Hello Worldを出力②
コード
- チュートリアルのサイトの都合上、HTMLのソースコードは割愛しています。
- divタグ,id=appのHTMLタグが有ると見てください。
import { render } from 'solid-js/web';
function HelloWorld() {
const name = "World";
const greeting = (<div>Konnichiwa Sekai!</div>)
return (
<div>
<div>Hello {name}!</div>
{greeting}
</div>
)
}
render(() => <HelloWorld />, document.getElementById('app'))
説明
- 変数name, greetingを定義
- 変数name,greetingを{}で参照。HTMLタグを含んだHelloWorld名のfunctionを定義
- HelloWorldタグが使用可能となる
- Solidのエントリーポイント render関数に「HelloWorldタグ」、「マウント先のHTMLタグのid"app"」を渡す
- 結果、ブラウザに変数で定義した名称を含んだ文言が表示される
説明図
SolidJSコンポーネントを使用したグラデーション表現
コード
- チュートリアルのサイトの都合上、HTMLのソースコードは割愛しています。
- divタグ,id=appのHTMLタグが有ると見てください。
import { render } from 'solid-js/web';
function HelloWorld() {
const name = "Solid";
const svg = (
<svg height="300" width="400">
<defs>
<linearGradient id="gr1" x1="0%" y1="60%" x2="100%" y2="0%">
<stop offset="5%" style="stop-color:rgb(255,255,3);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
</linearGradient>
</defs>
<ellipse cx="125" cy="150" rx="100" ry="60" fill="url(#gr1)" />
Sorry but this browser does not support inline SVG.
</svg>
);
return (
<>
<div>Hello {name}!</div>
{svg}
</>
)
}
render(() => <HelloWorld />, document.getElementById('app'))
説明
- SolidJSコンポーネントを使用する事でグラデーション表現が簡単に行えます。
説明図
まとめ
- 以前はjQueryがトレンドであったが、最近はReact、Angular、Vue.jsといったフレームワークがメジャーとなっている
- 上記記事には記載しなかったが、これらはSPA(シングルページアプリケーション)可能なフレームワークである
- トレンドのWeb技術が利用可能なので、最近のニーズに応えられるフレームワークと言える。
- Reactはフロントエンドエンジニアの中で82％が使用経験有りとなっており、市民権が定着していると言える（2022年）
- Svelte、Qwik、Solidなどが最近出てきたフレームワークで関心度が高い
- Ember、Angularは認知度が高いが、再度使いたいとは思われなくなってきている
- フレームワークが劣っているという事ではなく
- フルスタックの傾向が高い、学習コストが高いといったところからの敬遠かもしれません
- SolidJSは公式サイトにチュートリアルも有り、オンラインで学習する環境も整っているので、学習コストは高くないのではと思います。
- SolidJSはReactの影響を受けたフレームワークであり、Vanillaにつぐ高速性を謳っていますので学習する価値があるフレームワークであると思います。