laravelとnextJS（nuxtJS）を比較？する。SPAとかも紹介

ひょんなことからnextJSとかnuxtJSとか、それからSPAやらなんやら。

ゴールデンウィークはへんな知識がたくさん増えました。

こういうWEBアプリ？を作るときの技術ってどんどん新しいのが出てきて、でもどれがなにやら、そもそもそれを使うメリットってなんなん？と思ってしまいますよね。個人的にはブートストラップとかいう所ですでにもうついていけてなくて、ぎりぎりsassは使ってるよ！くらいの感じだったのでnextJSやらはいい刺激になりました。

ここではlaravelとnextJS（nuxtJS）を比較?してみたいと思います。たぶん役割がけっこう違うんで比較するのもどうかな、と思ったんですが比較してみて初めて分かることもあると思うんでやってみよう。さあいきましょう。

あ、ちなみにかなり浅知恵、というか一夜漬けに近いんでかなり適当です。ニュアンスだけつかめたらいいなーって方が対象。

1. まずキーワードのおさらい
2. laravelとnextJS比較
1. laravel
2. nextJS（nuxtJS）
3. こんな感じ
4. まとめ

まずキーワードのおさらい

まずはlaravelやnextJSそれからSPAっていう単語のおさらいをサクッと。

ブートストラップ

いまだによくわかってないけどなんかCSSでデザインしやすくするためのやつ？だと思ってる。クラス名つけるだけでお手軽オシャンティデザインに！みたいなイメージ。知らないけれども

sass（サース）

読み方はサースらしいけど脳内ではサスって呼んでる。

cssを書きやすく管理しやすくしたやつ。sassでゴリゴリデザイン書いてコンパイルしてcssを作る。こういう新技術？の中で唯一sassは使ってる。

laravel（ララベル）

なんだか女の子向けアニメで変身時に叫ばれてそうな、可愛らしい名前のララベル。

これはサーバー側を作るのが得意なフレームワーク。Ruby on Rails（ルビーオンレイルズ）のPHP言語版みたいなやつ。

フレームワーク

なんともふわっとした単語な気がするけど、とりあえずなんか作るときに作りやすくなる環境？の事。使うと「自分で一から作るより簡単だよ！」っになるやつ。製作が便利になるやつの総称だと思えばOK。

nextJS（ネクストジェイエス）

javascriptで書かれたフレームワーク。

サーバー機能もある。javascriptと言えばブラウザ側の言語でしょ？っていう先入観があるんでちょっと「うっ」と思っちゃうけど、javascriptでサーバー側も動いちゃう時代。もうPHPでなくてもいいらしい。

SPAが得意らしい。

nuxtJS（ナクストジェイエス）

javascriptで書かれたフレームワークその2。

nextJSと名前が似てるけど全く別の会社がつくったやつ。いわゆるライバル関係にある。細かく見ればいろいろ違いはあるんだろうけど、できることや役割はだいたいおんなじ…らしい。こっちの方が世界的に使われてるらしい

SPA（エスピーエー）

SPAは確かシングルページアプリケーションの略。

なんかかっこよくいってるけどようはメイン画面は一つで、後はAjaxでサーバーとやり取りして画面の表示を変えるタイプのWEBページって事。ツイッターのタイムラインみたいなやつ。名称だけむずいのはよくない。Ajaxのやつ！でいいじゃん。

Ajax（エージャックス）

Ajaxは非同期通信とかいうやつ。

1. ブラウザでボタン押す
2. javascriptで「ボタン押されたよ！」ってサーバーに伝える
3. サーバー「ほうほう、ならこのデータをもっていってのう…」でデータをくれる
4. javascript「おっけー、んじゃこのデータをブラウザに表示っと！」でブラウザに表示

っていう画面が白くならなくてどんどん新しい内容が表示されるやつ。郵便番号入れて住所出てきたりするやつとか、ツイッターで読み込みボタン押したら画面白くならなくて新しいツイートが出てきたりとか。そういうやつ。

はい。だいたいこんな感じ。すんごいアバウトだけれどもだいたいニュアンスは合ってる…ハズ。

結局SPAってのはAjaxのやつ！でそれっていうのは画面白くならず（ロードせず）に新しい情報を表示するやつ！ってコト。

んでnextJSやらnuxtJSっていうのはこのSPAが得意ってコト。

んじゃ本題のlaravelとnextJSやらnuxtJSやらの比較を。

laravelとnextJS比較

どれもこれもWEBアプリを作るときのフレームワーク。つまりこいつら使ってると一から自分で作るより簡単にWEBサービスが作れるよ！っていうやつら。

比較してみるとそれぞれ強みが違うみたい。ブラウザ側に強いか、サーバー側に強いかっていう違い。

laravelはサーバー側の処理に長けてるらしい。

nextJSやnuxtJSはブラウザ側に強いらしい。

…え、比較ってこんだけ？という声が飛んできているのが分かる。

もう少しくわしく比較してみよう。

laravel

laravelはmySQLなどレンタルサーバーのデータベースを処理したりするのが得意。

レンタルサーバー上で動かすならたぶん一番適してる。

SPA、というかAjaxもlaravel単体で普通にできる。

nextJS（nuxtJS）

nextJSやnuxtJSはなんかこう、基本無料だけどアクセス数増えたら使用量取るよ！っていうクラウド型データベース（アマゾンのやってるAWSとか？）と、後はホスティングサービス（netlifyとかいうやつ？）っていうのを使って公開（デプロイって言います）しやすくなってる。

サクッと触れて見た感じ、mySQLのデータベースを触ったりするのはできるけど、けっこういろいろ自分で書かないといけないっぽい。

SPA（というかAjax）をするときって、一枚しか画面がない、という事はURLも一つしかない。SEO的には「あれ、このWEBページ、1つしかURLないんだ」と思われちゃってよくないんで、URLを疑似的に変えたりする場合がある。

たぶんそういうURLなんかにもnextJSやらnuxtJSは簡単に対応してくれるんだと思う。

こんな感じ

てことで比較したけれども、laravelもnextJSもそれ単体でもやろうと思えばサーバーサイドもブラウザサイドも作れちゃうようになってる。

laravelでAjax普通にできるし、nextJSでmySQLも普通に叩ける。

なんか検索しているとSPA（というかAjax）が主なWEBサービスを作るときに、laravelにサーバー側を担当させて、ブラウザ側はnextJSやnuxtJSで作る、っていうハイブリッドな使い方が多いみたい。

比較してどうの～、ではなくlaravelはその強みであるサーバー側を、そしてnextJS（nuxtJS）にはSPA部分を、という感じらしい。

まとめ

今回はlaravelとnextJS（nuxtJS）をSPAなどのキーワードを交えながら比較しました。

まとめると、SPA（Ajax）使いまくるWEBサービス作るときにlaravelとnextJSを一緒に使えばいい感じ！というコトみたい。

あとは自分でレンタルサーバー借りて普通のWEBサービス作るならlaravel（or Ruby on Rails）がいいっぽいし、そうじゃなくてホスティングサービスとかでWEBサービスを公開するならnextJS（nuxtJS）が楽できるっぽい。

おまけ

今回いろんなキーワードの渦に巻き込まれながら知ったことがあと一つ。

最近はこのホスティングサービスを使ったブログが流行ってきてるらしい。今までのブログってワードプレスもそうだけど、mySQLなんかに記事の内容を入れといて、んでアクセスがあればサーバー側でデザイン部分とデータベースに入ってる記事の内容部分を合体させて表示してた。

そうじゃなくて、もう記事を書いて公開したタイミングでHTMLファイルを作っちゃう。リンクなんかもその1記事書いたタイミングで全記事分修正しちゃう（この作業はサーバー側、というかホスティングサービス側で自動でやってくれる）。

あとはそのブログを見に来た側としたら、ネット黎明期と同じでそのままHTMLファイルを見るだけ。だから速度が速い、と。

「cloudflare pages」とか「Gatsby」とかでググると新しい世界があなたを待っているかもしれない。