Posts for: #React

next.js のチュートリアルで学ぶ

2時に寝て5時に起きて7時半に起きた。疲れてからわりと眠れた方かも。いまの働き方だと木曜日がもっともストレスの低い日になっている。定例会議がない。今週やらないといけないお仕事も次の金曜日があることでまだ時間があるから安心みたいな話し。

next.js 入門

next.js のチュートリアル を一通りやってみた。2年ほど前にちょっとだけ next.js で開発していたプロジェクトのソースを読んだことがあったので雰囲気は少し覚えていた。チュートリアルは react のことを何もわからなくても next.js の機能や特徴を理解できるような構成になっていて感心した。チュートリアルから学んだことはこれら。関連ドキュメントを読みながらでも1日もあれば終わると思う。

  • コードは分割されてコンパイルや pre-fetch が行われる
  • Image コンポーネントを使えば画像の最適化を自動で行う
  • CSS Modules を使えばコンポーネントレベルのスタイルを定義できる
  • ページ単位に pre-rendering できる
    • 静的生成 (ssg)
    • サーバーサイドレンダリング (ssr)
  • pre-rendering が不要ならクライアントサイドレンダリングすればよい (csr)
  • 動的ルーティングや bff のための api エンドポイントは動的に振る舞う
  • デプロイは基本的に node.js を必要とする

フロントエンドの技術選定

24時に BOOK AND BED TOKYO にチェックインして雑多なことして25時過ぎには寝て8時過ぎに起きてチェックアウトした。それから新幹線に乗って神戸まで戻ってきた。東京・品川から新神戸間は、往路は EX早特21ワイド だと12,630円で、復路は自由席で14,420円だった。私の中で時間の制約はストレスやエネルギーを使う。帰りは時間に縛られたくないという思いで新幹線の駅に着いてから自由席を買うようにしている。一方で2千円近い差額も大きいので次回以降は帰りの新幹線もEX早特21ワイドで取ることにした。

フロントエンドの調査

昼過ぎに家に戻ってきて洗濯や片付けしたら疲れてまた寝てた。晩ご飯食べて21時ぐらいからオフィスで作業してた。猫みたいな生活。オフィスからお手伝い先のネットワーク接続の設定をやったりしながらフロントエンドのコードを読んでみた。これは作り直した方がよいだろうと私の中で決意して、どういった技術で作り直すかの技術選定のための調査を開始した。既存のフロントエンド開発の背景や経緯を知らないのでまだ確定ではない。提案の準備のために調査をしておく。

ここ最近 svelte の人気があるのをみかける。1年ほど前に三ノ宮.devで教えてもらってチュートリアルをやってみて、そのときは特にどうとも思わなくて、こんなやり方もあるんやな程度にみていた。その後 vue.js (nuxtjs) での開発を半年間ほど経験して、思いの外、私にとって vue.js がよいものにはみえなかった。react よりも簡単と聞いていたけど、私にとってはあまりそうは思えなかった。vue.js は vue.js なりの難しさ (学習コスト) があるように感じられた。管理画面のような小規模な用途に react や vue.js のようなリッチなライブラリ・フレームワークを使わなくてよい方法があるかを考えたときに svelte を思い出した。svelte の実際のアプリケーションのサンプルコードとして次のコードを読んでいた。

vue.js の single-file components は svelte の前身である ractive.js のコンポーネント の概念に影響を受けているという。従って、svelte のコンポーネント開発は vue.js と考え方が近いものの、dom 操作は svelte のコンパイル時にコード生成するので仮想 dom は使わない。これがパフォーマンス上の大きなメリットと言われている。react や vue.js よりもずっと軽量なコンパイラ・フレームワークと言える。次のページに複数のフロントエンドの技術の流行をまとめている。svelte はこの2年ぐらいで人気が急上昇していることがわかる。

また react と vue.js の現状もちゃんと把握しようと調べていて次の記事がおもしろかった。

vue.js は vue3 で react になろうとしていて、その過程の過渡期には様々な問題を抱えているように私からはみえた。

  • vue2 と vue3 は互換性がない
  • vue3 移行へのエコシステムの本気度がみえない
  • vue2 の開発者が本当に vue3 を求めているのか懐疑的
  • シェアだけみたら vue.js よりも react の方が高い