KONFIGテックブログ

クライアント案件で画面遷移をシームレスにしてリッチなWebサイトに仕立てたいという案件が舞い込んできました。それを実現するためのメモをここでは書き残していきたいと思います。

実現したいサイトの条件

1. ページ遷移を流れるようにシームレスに繋げてかっこよくしたい
2. ページ切り替え時にURLはちゃんと変更されている必要がある
3. ボタンやローディングなどUIのギミックはさりげなく上質に仕立てる
4. データ管理も伴うためCMSとの連携も考える

この中の1番の項目、ページ遷移（画面遷移）をシームレスに繋げるということの実現に挑みたいと思います。

手始めにフロンエンドエンジニアの友人にこれを実現するためにはどうしたらいい？という質問を投げてみました。すると、こういう回答が返ってきました。

「それをやりたいならjavascriptフレームワークのReactかVueっすね」

という返事。
ReactとVue、もちろん名前は聞いたことはもちろんあります！

さらに調べてみるとReactもVueもそれだけでは複数ページのプロジェクト構築ができないので、それぞれ以下の組み合わせで導入する必要があるとのこと。

React ＋ Next.js
Vue.js ＋ Nuxt.js

NextだのNuxtだの名前が似ててややこしいです。
これもなんとなく名前だけはもちろん聞いたことがあります。
さて、この時点で両者の違いをもっと知りたかったので図書館に入ってみたところちょうどいい本を発見。速攻で借りてざーーーっと読みました。

↓ Amazonで書籍ページを見る
「コードレベルで比べるReact Angular Vue.js フレームワークの選択で後悔しないために」
（著者：末次 章）

javascriptフレームワークとして有名な3つを比較しているので、とりあえずどれがどう違うの？とチンプンカンプンな私にとってはある程度ざっくりと全体を捉えることができました。この本を読み終えた時点でReactかVue.jsのどちらかの二択に絞れらました。（Angularは学習コストが一番高いらしい）

とりあえず最初はここまで。
この記事は毎日少しずつメモを増やしていきます。

（5/26追記ここから）

React＋Next.jsの組み合わせを採用

ReactかVueか、今後のことも考えてどちらがいいのか大型書店に行って探ることにしました。その結果、私はReact＋Next.jsの組み合わせで今回は行くという決断にいたりました。

おもな決断理由はこちら

• Meta社が開発していることの将来性
• 本屋の棚でReactの本が目立った
• 学習コストが一番少ない（非エンジニアには一番とっつきやすいらしい）
• React Nativeというのを使うとスマホアプリもiPhoneとAndroid同時にできる
• 構文が習得済みのPHPフレームワークLaravelになんとなく似てそうだった
• Reactを詳しく解説しているYoutube動画がたまたま出会った

採用理由がエンジニア的じゃない理由ばかりですいません。
でも、ReactもVueもやれることは一緒なのでどちらを選ぶかは好みかと思うので、そういうふわっとした理由でいいのだと思います。

それではReact勉強していきましょう、時間がともかく無いからダッシュで！（つづく）