#はじめに
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はコードが多くなるとビルド時間がかかってしまう。
#最後に
いかがだったでしょうか。
初心者の僕にとってはとても勉強になったので、第3弾をやるなら是非参加させていただきたいです。
当時の資料も共有していただいていますので、リンク貼り付けておきます。
ありがとうございました。