enabled.2019.10.14なぜSPA技術でウェブサイトをつくるのか?devspaここ最近、SPAを作るフロントエンドエンジニアを中心に、アプリケーションではないウェブサイトもReactやVueで作る動きが活発になってきました。そもそもなぜReactやVueを使ってウェブサイトを作るのか?これらの技術を使うことによって何が解決するのか?本記事ではそういった問いに対する自分の考えを示します。注)現在進行系でも非SPAなウェブサイト制作が主流です。現在主流な制作手法は、WordPressに独自のテーマを実装して制作する方法です。PHPなどで動的にHTMLを生成し、大きなCSS・JSが一枚というケースが多いです。モダンフロントエンドを取り込んでいる場合もあって、次のような工夫をしていることが多いです。SCSSのようなメタ言語でCSSを記述し、保守の手間を減らす。webpackなどのバンドラーを利用する。この場合のJSはjQueryが使われることが多く、jQueryプラグインにはnpm経由で利用できないものもあって辛い印象を持っています。コーポレートサイトやWordPress製のブログといったウェブサイトでは、CDNを利用してファイルを高速で配信しているサイトもありますが、フロントエンドのレンダリングの速さはあまり重視されていないように思えます。正直のところ、CSSは難しい言語だと思います。発見することの困難さなどの原因からCSSは肥大化していきます。CSS肥大化によって、重複したスタイルが出現して保守が大変になる、ページ読み込み速度が遅くなっていくなどの問題が発生します。FLOCSSなどの命名手法が採用するなどの取り組みがあります。ページ読み込みを高速化するには、ページ読み込み時に見える範囲(above-the-fold)のCSSをHTMLに埋め込むの手法が有効です。これらのCSSを検出し、埋め込むためのwebpackプラグインなどが存在しますが、いまいち認知はされていないようです。Vueといったライブラリではコンポーネント内にCSSを書く方法でこれらの問題を避けています。JSが保守しやすくなるJSが保守しやすくなるJavaScriptでDOMにイベントを付与するようなコードが圧倒的にわかりやすくなります。いわゆる「宣言的」に書けるから嬉しいといった話です。DeckDOMを直接触るようなコードでは、他人が書いたコードを読むのがかなりしんどいです。(個人の感想です)設計によって苦しさを緩和することもできますが、記述は圧倒的に増えます。ライブラリ管理の話ライブラリ管理の話jQuery系のプラグインはパッケージマネージャで使えない場合があり、そういった場合minfyされたJSファイルをプロジェクト中に置くことになるでしょう。開発者や環境にもよりますが、バージョンアップがされづらく、最悪の場合ソースが直接書き換えられるという問題もあります。(実際に経験があります。)また、バージョンアップされないライブラリのために、jQuery本体のバージョンもあげられないというケースも存在します。ReactやVueの開発ではnpmがほぼ必須といってもいい環境なので、今どのバージョンが使われているかははっきりわかりますし、(よっぽどのことがない限り)直接ソースが書き換えられることはないでしょう。バージョンアップには手間はかかりますが、パッケージマネージャがない状況と比べれば圧倒的に楽です。素直にSPA開発で発達した開発手法に乗っかりましょう。DX系・環境構築の話DX系・環境構築の話サイトを制作する際に、開発環境を構築する必要があります。サイトを制作する前にgulp、gruntなどといったツールを使って、開発するための環境を整備することが必須とも言える状況でした。これらの環境は属人化しやすく他の人が引き継ぎにくいといった課題もありました。CSS系の最適化も自動で行ってくれることが多く、手間なく環境を整えられます。npmで配布されているSPA系のライブラリを簡単に使える、バージョン管理など開発フローに載せやすい、TypeScriptを使って開発するなど開発者として開発しやすい環境を手間なく用意できます。作って終わりではなくなった作って終わりではなくなった個人の感想に近いですが、近年作って終わりではなく、公開してからも継続して運営するようなものが増えてきたと思います。今まではバージョン管理ツールに載せず、汚いコードで乗り切るといったことも可能でした。これからはWebサービス開発で利用しているような開発手法を利用することが重要だと感じています。babelといったツールの設定が隠蔽され属人性が減り、規約が存在することで設計のブレを減らせます。今後はフレームワークという巨人の肩にのり、ウェブサイトを作っていく手法が流行っていくといいと思っています。まとめまとめこの記事で示したものはかなり偏った考えかもしれません。WordPressで使いたいテーマがあるということであれば、そちらを利用するといいでしょう。Vueで作ったほうがよりよいものができると思います。Vue単体ではウェブサイト開発が行われないのか」というテーマがあり、サーバーサイドレンダリング(SSR)・静的サイトジェネレーター(SSG)というトピックに派生していきます。よい環境が普及することを願っています。技術書展8に向けてWordとPandocを使って同人誌を作っています。PandocではWordのテンプレートを用意して、その中にMarkdownで書いたコンテンツを流し込みます。この構成で大事なのがW2020/02/16event技術書展8でSPAの技術に関する同人誌を出す予定です技術書展7、技書博1に続いて技術書展8や技書博3に向けて、つのぶえ出版として新作を書いています。今回は「フロントエンドの技術選定」「仕組みの理解」あたりをテーマに考えています。ReactとV2020/02/02diaryタスク消化のためにひとり合宿をやってきた3泊4日をかけて名古屋でタスク消化合宿を行った。簡単にまとめると、普段の環境では進捗が見えやすく、達成感を得られるプログラミングをやりがちですが合宿の場を用意することで普段進みにくいタスクを消化す2020/01/26PROFILE@mottox2WEBエンジニア都内でフリーランスエンジニア・デザイナーとしてWebサービスやスマホアプリを作っています。新規事業の爆速立ち上げや、使いやすいSPAの開発が得意です。