はじめに
9月7日（水）に開催されていたNuxt.js道場なるものに参加させていただきました。
M&Aクラウド様主催でやられているイベントになります。
内容としては、開発方法や知見の共有の場という印象でした。
今回は第二回目とのことで4名の方が登壇し、自社の開発体験談を発表していました。
この記事では筆者なりの視点で執筆させていただきます。
筆者のレベル感
今話題の駆け出しエンジニアです。笑
2021年4月から自社開発企業で修行中で、主にフロントエンドエンジニアとして日々励んでおります。
上記の入社時期から分かる通り半年もエンジニア経験のないペーペーです。
参加させてもらった経緯として、2つあります。
1つは、弊社でもVue.jsを利用した開発を行っている点。
もう1つは、個人的な興味です。
ちょうど自分のポートフォリオをNuxt.jsで作り変えたところだったのでタイムリーだなと思い参加させていただきました。
【宣伝】
アウトプットの内容
初めに登壇されていたM&Aクラウドの津崎様の内容を今回記事にします。
LaravelからNuxt.jsへ
もともとあった既存のLaravel製アプリケーションのフロント部分をNuxt.jsに移行中とのことで、
そこでの選定基準やメリットをメインに紹介してくれていました。
Nuxt.jsを選んだ理由
・SSR(サーバサイドレンダリング)への移行がしたい
・Vue.jsに馴染みのあるエンジニアが多かった
・コンポーネントの利便性
Nuxt.js CompositionAPIって何？
Nuxt.jsとは
vue.jsのフレームワークで、インストールされたタイミングでStoreやルーティング機能が備わっているものです。
SSRとユニバーサルモードができることが特徴です。
SSR（サーバーサイドレンダリング）とは、
サーバ側でHTMLを生成するWebアプリケーションで対義語としてCSR（クライアントサイドレンダリング）があります。
CSRは通常のVue.jsやReactに当たります。（SPAとも言われたりします）
ユニバーサルモードとは、
SSRした際に、クライアント側で追加のレンダリングなどを行う方式で、それを行うことで動的なサイトを作ることを可能としています。
結果、高速でリッチなアプリケーションの実現が可能になります。
CompositionAPIとは
簡単に言うと、Vue.jsの記法です。
2020年9月にVue3に導入されました。
標準の書き方はoptionAPIといいます。（compositionAPI optionAPIどちらでもVue.jsは動きます）
大規模で複雑なコンポーネントを作る際に便利です。
中小規模であれば、optionAPIをおすすめします。
メリット・デメリット
メリット
Nuxt.jsについて
・webアプリケーション開発に必要なものが揃っている
・SSR、SSG（静的サイトジェネレーション）が可能
CompositionAPIについて
・関心事に処理をまとめて書くことができる
・大規模な開発にも耐えられる構成にできる
デメリット
フロントエンドエンジニア初心者にとっては複雑になってしまう。
＠vue/compositionAPIではVuexを使わないとSSRとSSGで値の共有化（ハイドレーション）ができない。
Nuxt.jsはコードが多くなるとビルド時間がかかってしまう。
最後に
いかがだったでしょうか。
初心者の僕にとってはとても勉強になったので、第３弾をやるなら是非参加させていただきたいです。
当時の資料も共有していただいていますので、リンク貼り付けておきます。
ありがとうございました。