0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Nuxt.js道場に参加してきたのでアウトプットしてみる(Nuxt.js x CompositionAPI)

Posted at

#はじめに
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弾をやるなら是非参加させていただきたいです。
当時の資料も共有していただいていますので、リンク貼り付けておきます。

ありがとうございました。

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?