00:05
はい、みなさんこんばんは。株式会社ゆめみでポストチャレンジ取締役をしておりますキースことくわはらです。
Web 業界のなんでも雑談室へようこそ。この番組ではWeb 業界に関することや、また様々な学びになるコンテンツを目指してお届けしていきたいと思います。
はい、今回はですね、久しぶりにまたレター回答になります。今回いただきましたレターはこちらになります。
某ゆめみのフルサイクルエンジニア見習いです。最近Svelteに興味があるのですが、ReactやVueを使わずにSvelteを使う理由や決め手がなかなかなく、
現状を使いどころが趣味以外ありません。ヨームでSvelteを使うならという視点でお話し聞きたいです。というふうなレターをいただきました。
はい、いただきありがとうございます。実はですね、このレターは某、書いてある通りなんですけど、私の所属する会社ゆめみの後輩にあたるメンバーの方です。
このレターをいただいたのがですね、実は本当にだいぶ前で、もうちょっとで1年がたとうしているぐらいなので、本当に大変に申し訳ないところなんですけど、ちょっと今更ですが、回答していきたいなと思っておりますという感じですね。
はい、すいませんでした。では行きましょう。
ちょっと結論というか、先に前提的なお話をしますと、決め手というものを聞かれたんですけども、ぶっちゃけると決め手って言われると、やっぱりケースバイケースだと思うんですよね。ツールっていうのがどんなケースでも当てはまるなってことはまずありえないですし、今の状況とか環境とか求められている要望とか機能とか、いろんなことを加味した上で厳しい選定をしていくのが我々エンジニアですので、一言で決め手って言われるとちょっと難しいなと思います。
とはいえそれだけですと、この放送を何のためにやっているのというのがあるので、メリットとか特徴とかデメリットとかをしゃべって、そこから参考にしていただければなと思います。
というところで話していきますと、まずは特徴とかメリット的なところ、ちょっとごっちゃになっている感じですけど、そこから語っていきたいと思いますが、そもそも話を先に言いますと、スペルトというのは基本的にはフレームワークではなくて、基本的にはコンパイラーになります。
なので厳密に言うと、リアクトとかビューと比較をするというのがそもそもちょっと違うなという感覚はありますね。
コンパイラーと言ったので、お気づきの方もいらっしゃると思いますけど、要は仮想ドムを使っているわけではないんですよね。リアクトとかビューとかはその仮想ドムを使っているんですけども、スペルトというのは基本コンパイラーなのでそういうものに頼りません。
直接全部コンパイルをしているし、そのまま変更があったら全部丸っと書いているというような感じになりますね。
これも公式ホームページにも書いてあって、ここが特徴だというふうに言ってますね。メリットではなくてあくまで特徴ですけども。
そこは大きな差だと思いますね。今までのUIフレームワークと比べるとですね。
続けていきたいと思いますけど、まずは一つですね。
03:01
コンパイラーということはですね、出力がいわゆる選べるんですよね、ビルドして。
面白いのは、スペルトというのはWebコンポーネントとして出力することができちゃうんですよね、言ってしまうと。
ここが結構特徴なのかなと思いましたね。
続いてですね、やっぱりコンパイラーというところがありますので、開発環境の作成が結構楽だなという話ですね。
今までのリアクトでやると、やっぱり本体でライブラリーを入れて、そこにルーター用のライブラリーを入れて、ストア用のライブラリーを入れてとか、
あとはビルドとかバンドルするためのライブラリーとか、バベル、プリティアとか入れてとか、
いろんなものをガチャンガチャン入れていって一つの開発環境を作るみたいなところだったんですけど、
基本的にはスペルトというのはコンパイラーですので、依存するものがあまりないんですよね。
本当に言ってしまうとスペルトとWebpackもしくはRollupみたいなバンドラーだけで動いてしまうというのがある意味で強みというところではありますね。
という感じです。もちろんそれでいて、静的コード解析ツールを入れたいとか、TS入れたいとかあったりすると思うんですけど、
その辺はしっかりスペルトというのが対応してくれているというところが結構強みではあるんですけど。
続いてですね、スペルトの面白いところはやはり他のUAライブラリー、ReactとかVueとかもそうですけど、
と比較してもやはりその学習コストが低いなというのが思います。
導入がしやすいというか、本当に学びやすいなと思いました。
特に公式サイトのチュートリアルを見ていただくと分かるんですけども、ステップバイステップで丁寧に進めるようになっているんですね。
もちろんただ見るだけじゃなくて、オンライン上でちょっと手を動かしてコードを書いてスペルトを学べるようになっているというところですので、
このチュートリアルを一回バーッと流すだけでも、そこそこ理解が早まるんじゃないかなと思ってますね。
あとはやっぱりVueとかReact、もしかしたらRiot.jsというライブラリがあるんですけど、
その辺を触ったことある人ならば結構シンパシーじゃないですね。
結構似てる書き方をしているので、さらっと学べるんじゃないかなと思っています。
続いて、スペルトの特徴の一つとしては、やはりコードの記述量が少なくなるというのがかなり大きいと言われていまして、
これも公式サイトに行けば分かると思うんですけど、やっぱりReactと比較してだいぶコード量が減っているので、ここも結構特徴じゃないかなと思いますね。
コードが短いということはその分可動性も上がったりするし、書きやすさというのは全然変わってくると思いますので。
というところがあります。これはちょっと実際にご自身の目で見ていただくのがいいんじゃないかなと思っています。
あとはですね、高発ライブラリだけあって、やっぱりVueでできることとかっていうのはだいたいスペルトでもできるようになっています。
06:01
結局は処理中のどのフレームワークだろうと最終的にはJavaScriptを書きますので、
そこはやっぱり根本的には変わらないというところで、それ以外そのライブラリとしての特殊な機能というのはだいたい揃っているというところですね。
なので、やっぱりそこも高発的なライブラリだけあって強いなと思いますね。しっかりそこは抑えているというところです。
あと先ほどちらっと出しましたけど、TypeScriptですね。TypeScriptでスペルトのコードを書くことができるかっていうのはもちろんできますし、
あとSSRですね。サーバーサイド連打でもできるようになっていますという感じです。
あとはですね、パスルーティングもできるようになっています。
ルーティーズという名前のディレクトリを置きまして、その下にファイルを置くとそれが新しいページだというところでパスが設定されてルーティングしてくれるという感じになっています。
これはあれですね、Next.jsを触ったことがある方は分かると思うんですけど、Next.jsでおけるそのPagesディレクトリと同じような感じですね。
ちょうど今Nextというワードを出したんですけど、そのNext.jsとかNext.jsに相当するようなライブラリとして、スペルトキットというものがあります。
ちょっと前だったらここはSapperというものだったんですけど、これがスペルトキットに統合されて新しくブラッシュアップされたという感じですね。
もちろんスペルトキットにはタイプスクリプトがありますし、ルーターとかもありますし、先ほど言ったSRSRもあります。
基本的な機能というのは揃っていて、今のモダンだなと言われるフロントエンドのフレームワークと機能というのはだいたい揃っていると思って過言ではないなと思います。
あともう一つモダンなのは、バンドラーにビートが使われています。
ウェーパックとかロールアップじゃなくてビートが使われているんですね。
ここも結構特殊ですね。
これによってやはりビルドのスピードが速いというのが担保されているというのがまた一つ大きな特徴なんじゃないかなと思っております。
あとはですね、ビルド後のソースコードが本当に小さいなというところです。
ウェーパックを使ったことある方はわかると思いますけど、ビルド後のソースコードって結構いろんなものがバーって付いていて、
よくわからないコードも結構入ってたりするし、あとコメントアウトが結構多いですよね。
その辺とかは一応最終的にはミニファイアすると思うんですけど、それでもちょっと大きいなというのがあるんですけど、
スベルトだとですね、ビルドするときにツリーシェイキングもしてくれたってですね。
ツリーシェイキングするプラスCSSも削ってくれるんですよ。
とにかく無駄な処理が入らないようになっていて、
小さくミニマルにしようというところの思想がありますね。
この思想が本当に強いなと思います。
コードの規律量も少なくしたい、ビルド後のソースコードもかなり小さくしたいという、
とにかくミニマルというところに特化したような感じですね。
あとはミニマルかつスピードを早めたいというところが本当に思想通しではっきり出ているなというフレームワーク、ライブラリになりますね。
09:07
あとはですね、これ最後なんですけど、
やはり日本ではなくて海外では本当に大人気ですね。
2019年からちょっとちょっとずつ、ステートオブジェイスといういわゆるサーベイですね、
全世界のサーベイ的なものをやっている団体があって、そこが19年ぐらいから伸び始めて、
2021年だと本当に人気の1位、2位とか確か取っていたような記憶がありますね。
今年の1位だったかちょっと覚えていないですけど、
それぐらい本当に海外では大流行しているという良いフレームワークですね。
今後もその主流のフレームワークの1つになるというのはやっぱり間違いないんじゃないかなと思っていますし、
もうなっているんじゃないかと思います。
日本に全然導入事例が少なすぎるだけであって、海外では全然来ているという風に言ってもいいんじゃないかと思いますね。
という意味で、ここを使うのも1つアリだと思います。
一旦その辺で話しといて、続いてちょっと長くなったので、そろそろデメリットの話をしようかなと思いますけど、
デメリットはですね、やっぱりサードパーティー性のライブラリとか、
親和性というのがまだあるんじゃないかなと思います。
この辺は僕が触ったのがちょっと古い時だったので、
最近はどうなっているのかちょっとわからないですけど、
エコシステムの親和性というのが、僕は少し疑問かなと思っていたりはしましたね。
あとですね、エラーの発生時ですけど、何のエラーなのかがわかりづらいというのがありますね。
そのスベルトは基本的にコンパイラーですので、
ビルドしたら素のJavaScriptに吐き出されるんですけど、
そのエラーって結局要はJavaScriptのエラーなんですよ。
そもそもJSのエラーというのが見づらいというのが正直な理由にありますね。
なおかつコンパイラーですので、
コンパイル時のエラーってパースできなかった系のエラーばかりなんですよ。
なのである程度目処はつくかもしれないですけど、それでも見づらいしわかりづらい。
やっぱりランタイムのエラーが出ないというのがかなりつらいというのがありますね。
これがどれだけ変わったか、最近僕も書いてないとわかりません。
スベルトキットだとどれぐらいわかりやすいエラーが出るのかは確認できないので、
そこは大変申し訳ないです。確認していただければと思います。
あとはですね、やはり日本語の情報が本当に少ないですね。
Coreのコミッターしている方々が頑張って日本語の記事を書いていただいてますけど、
それでもまだまだ少ないなというところがあるので、
そこはもう仕方ないと思いますけど、一方で日本語の記事の方が少なくとは別に、
英語の記事をそのまま読めばいいじゃんというのも正直あったりしますし、
やっぱり英語のものを英語の読めるというのが最高だと思うので、
もしあれだったらそのまま英語で読めばいいと思います。
それができるようになれば日本語の情報が少ないという、
これは別にデメリットにはならないのかなと思ったりしましたね。
あとはですね、コンパイラーですので、
アプリケーション開発に対しての制約というのがほとんどないと言ってもいいんじゃないかと思います。
12:00
ということはですね、しっかりこの企画とか決めないとあんまり乱雑になったりとか、
チームで開発してもバラバラな書き方になってしまうというのが結構課題でいるのかなと思いますね。
なので開発の環境自体とかは結構サクッと作れるかもしれないですけど、
開発するときに割とルールを決めておかなきゃいけないので、
結果的に初期コストってプラマにすると意外とかかるんじゃないかなと思ったりはしてますね。
あとはその辺に付随して、やはり大規模開発にはまだちょっと向いてないんじゃないかなと思ったりはしてますけど、
そのスペルトキットの完成度次第かなと思います。
これが結構完成度高いのであれば大規模開発耐える、売ると思いますけど、
ここもちょっとまだやってみないとわからないところはあるので、
勇気出して案件に投入してみてもいいかなと思いました。
というところがデメリットですね。
ちょっとすみません、僕もあまり本格的にしっかり触ったわけではなくてですね、
いろいろネットの情報を書き集めたりとか、
使ったことある人の話を聞いてみたりとかして、一応ここでまとめてみました。
というところです。
ただ最後は自分が使ってみたいなっていう技術、
これにちょっと投資してみようっていうものがあるんだったら、
それに近い投資してみるっていうのでもいいのかなと思います。
最終的になって作るのは皆さんですので、
皆さんがやっぱりお仕事で投入するってことはやっぱり納期があったりとか、
いろんな条件が課せられるかもしれないですけども、
自分はこれを使って、これでやり切るっていう、
最後は覚悟を決めてやっていくっていうところが大事かと思いますし、
もしスプレートでチャレンジしてみたいっていう思いがあるんだったら、
その思いのまま走って、
自分で選んだんだから最後はケツをふかなきゃいけないですけど、
っていうところにチャレンジしていくのがいいんじゃないかと思います。
それがちょっとまたきついなっていう案件とかプロジェクトが、
個人的にはそこをしっかり担保しないと困るっていう規模であるんであれば、
一回見送るしかないかなと思いますけどもね。
というところです。
個人的には頑張ってチャレンジしてみることを応援したいなと思いますし、
それをぜひやっていただけたらすごく嬉しいなと思います。
夢見でフロントエンドでスプレートを使ってアプリケーション作ったとか、
実例がありますよって言えるのは一つ、
夢見の技術ブランディングがつながると思うので、
ぜひやれるならやってくださいっていうお願いっていうか、
健全な持ちあぶりですかね。
で、終わりにしたいかなと思います。
今回はこのところで終わりにしたいと思います。
ではまた何か聞きたいこととか話してほしいことなどありましたら、
いつでもレッター持ちしておりますので、
お気軽に投げていただければなと思います。
ではまた次回の収録でお会いしましょう。
バイバイ。
