Nuxt.jsを学んでみて。

はじめに

こんにちは、新卒2年目のmatsunotです。

アイスタイルでは主に@cosme周りの改修をメインに担当しています。
言語としてはNuxt.jsやTypeScriptなどのJavaScript系の言語をメインに取り扱っています。

配属されてから学んだNuxt.jsについて少しお話しようと思います。

まず最初にNuxt.jsを知らない方もいると思うので、簡単にご説明したいと思います。

Nuxt.jsとは2017年以降に急速に普及しているVue.jsのフレームワークです。

そのVue.jsもJavaScriptのクライアントサイドのフレームワークであるため、JavaScriptを全然知らず学び始めた自分からすれば、フレームワークのフレームワークとは？という感じでした。

Nuxtのモードはいくつかあるのですが、今回はSSRをメインに少しご説明します。

SSRとは本来Webブラウザ（クライアントサイド）で実行されるJavaScriptをサーバ内部（サーバーサイド）で実行し、HTMLを生成する仕組みです。

Vue.jsの欠点であったSSRをNuxt.jsでは補っており、処理スピードを上げることできます。
また、検索エンジンのクローラが完全に描画されたページを直接解析するため、SEO 観点からも優れた言語だと思います。

Nuxt.jsでSSRを利用する場合は、初回の描画はSSRとCSR（クライアントサイドレンダリング）とSSRを行い、それ以降の描画ではCSRのみとなっています。

上記のSSR以外にも下記のような2つのモードがあります。

業務でNuxt.jsを使ってみた感想をいくつか述べたいと思います。

こちらがNuxtにおけるライフサイクルとなっています。

実際に業務で初めてNuxtを使った際は本当に右も左もわからない状態でした。
自分はあまり家で自分の時間を使ってまでプログラミングの勉強をすることが少ないので、業務レベルの実装をすることに大変苦労しました。（家でも勉強しろという話なのですが…）

その中でもライフサイクルという概念は聞き慣れない言葉であり、自分にとっては未知のものでした。

実際に実装をWindowオブジェクトやDOMにアクセスするタイミングを理解していなかったため、ある時windowオブジェクトを用いて機能を実装しようとした際に以下の様なエラーが起きました。

window is not defined

windowオブジェクトってどこでも使えるものじゃないのと思っていた自分の顔はこんな感じです。

よくよくNuxtのライフサイクルを見てみたら、クライアントサイドのみアクセスできることを知りました。

ライフサイクルを理解しなければ思い通りの実装をするのは難しく、想定外のエラーを引き起こしてしまうと実感しました。

自分は大学時代はWeb系の言語を全くと言っていいほど触ってきませんでした。

どちらかと言えば組み込みに近いことやデザインを大学では専攻しておりました。（デザインと言ってもCSSなどは皆無）

そのため、入社してからJavaScript関連を触ったのですが、まず初めに触ったのが素のJavaScriptではなくてNuxt.jsでした。

前提・基礎知識がないため、Vueの書き方やコンポーネント、SSR、ライフサイクルなどなどわからないことだらけでした。（以下は業務中の自分の顔です。）

そのため、理解しながら実装というよりは、ググってそのまま実装など中身のないコードを書いてしまうことが多々ありました。

勉強をしつつ業務をこなしていたおかげで、ある程度まともなコードをかけるようになりましたが業務をしつつ自分の知見を深めるところまではいけていない部分もあると感じました。

もしNuxt.jsをこれから学びたい！という意欲がある方で、前提知識がない方は最初にNuxt.jsから学ぶことはあまりお勧めはしません。

ある程度、JavaScriptの基礎があり、Vueを学んだことがあればそこまで大変ではなく理解しつつコーディングを進められると思います。

拙い文章でしたがご覧いただきありがとうございます。

今後はもっと技術寄りなお話をできればと思います。
皆様もぜひNuxt.jsでSSRを体験してみてください。