Nuxt.js

この記事はNuxt.jsについて解説した記事です。会話形式のやさしい文章で「Nuxt.js」の用語のイメージを紹介した後に,採用に役立つNuxt.jsの知識を解説しています。

1分で分かる!Nuxt.jsとは?

~ ことりん君、求人サイトを見ながら、ぶつぶつ独り言。そこにジャバ―ド先生が通りかかる… ~

どこもいろいろと条件が多いなぁ…。なんだこれ、はじめて見たなぁ…。ぬ、ぬ…なんて読むんだこれ??

ことりん君こんにちは!独り言どうしたの??

あ、ジャバ―ド先生!いま求人サイトで、フロントエンドエンジニアの募集記事を見てたんだ!

ことりん君、フロントエンドエンジニアになるの?

いやいや!エンジニアになるつもりはないよ!最近いろんな人からフロントエンドエンジニアを探して欲しいってお願いされるんだよね。だから、どういった人が需要が高いのか求人サイトを見て調べていたんだよ。

なるほどね。それで何かわかった?

なんか少し前と比較しても技術要素が増えた気がするんだよね…。あと、多くの企業がVue.jsとかReactができるエンジニアを求めている感じかなぁ。

そのあたりはこの前教えたから大丈夫かな?

うん!ばっちり!あ、そういえば他にはNuxt.jsっていう記載もたくさんあったなぁ。これなんて読むの?

Nuxt.js(ナクスト ジェイエス)だね!たしかにNuxt.jsも最近高い人気を集めているね。

あぁやっぱりそうなんだね。Nuxt.jsって一体何なの??

実はNuxt.jsっていうのは、Vue.jsのフレームワークなんだ!

ふーん。そうなんだぁ。ってちょっと待って!Vue.jsもJavaScriptのフレームワークだったよね?

ことりん君、よく覚えているね!JavaScriptのフレームワークにVue.jsというものがあるんだけど、このVue.jsに対してさらに機能を追加したり、使いやすくしてくれるのがNuxt.jsというフレームワークなんだ。

そのうち「フレームワーク」の「フレームワーク」の「フレームワーク」っていうのも出てきそうだね…。それでNuxt.jsを使うと何がいいの?Vue.jsだけじゃ足りないのかな?

Nuxt.jsを使うことで得られるメリットはたくさんあるんだけど、その中でも特にNuxt.jsが支持されている理由としては、Vue.jsの弱点を補完してくれるからなんだよ。

Vue.jsの弱点?

そうそう!Vue.jsを説明したときに、SPA(シングルページアプリケーション)についても合わせて教えたよね?

うん!覚えているよ!

そのSPAなんだけど、画面表示に必要となる全ての要素を最初に読み込んでくるから、初回のページの表示が遅くなってしまうんだ。そこでNuex.jsの出番というわけだ。Nuex.jsはサーバーサイド側でHTMLをつくってフロントエンドに送ることができるんだよ。

サーバーサイドでHTMLをつくるということは、フロントエンドに送るものが最小限でいいってことかな?

そうそう。だから、Vue.jsの弱点であった初回表示が遅いという問題もクリアできるし、Vue.jsのメリットである各ページの表示についても速いまま…というわけなんだ!

なるほど!Vue.jsとNuxt.jsを使うことで、Webアプリケーションとしての完成度が高くなるんだね!

そういうことだね!Vue.jsを使っているところはNuxt.jsも併せて使うケースが多いので覚えておこうね。

ジャバ―ド先生ありがとう!よくわかったよ!

Nuxt.jsとは?採用に役立つ基礎知識

Nuxt.jsとは、JavaScriptのフレームワークであるVue.jsのフレームワークです。Nuxt.jsは2016年にリリースされて以降、急速に普及しています。

現在、フロントエンドの開発はSPA(シングルページアプリケーション)が主流となっています。ただし、SPAは初回の画面表示が遅いという問題を抱えていました。これを解決する手法が、サーバサイドでHTMLを生成するSSR(サーバーサイドレンダリング)というものです。

SPAを実現するためにVue.jsが使用されるケースが増加していますが、Vue.jsでSSRを行うためにはNuxt.jsを使用する必要があります。そのため、Vue.jsの人気の高まりとともにNuxt.jsのシェアも拡大しているというわけです。

Nuxt.jsを使うエンジニア

Nuxt.jsはフロントエンドを開発するVue.jsのフレームワークであるため、フロントエンドエンジニアが使用します。フロントエンドエンジニアの中でも、比較的モダンな開発手法であるSPAをVue.jsで実現する必要があるエンジニアがNuxt.jsを使用します。

※ 内部リンク:フロントエンドエンジニア

Nuxt.jsを使うエンジニアの特徴と在籍業界

Nuxt.jsは登場して日が浅い技術です。そのため、Nuxt.jsを使うエンジニアは新しい技術をキャッチアップする習慣がある人、あるいはそのような企業や組織に属していた人といえます。

なお、在籍業界としてはWeb業界やSIer業界(特にWebアプリケーション開発を行う企業)に多く在籍しています。

採用する時に知っておくとよいこと

## Nuxt.jsとNext.js

Nuxt.jsはVue.jsのためのフレームワークであることは、これまでご説明してきたとおりです。紛らわしいことに、Nuxt.jsとは別の技術要素であるNext.js(ネクストジェイエス)というものがあります。Next.jsは、JavaScriptのフレームワークであるReact用のフレームワークであり、Nuxt.jsと同様にSSRを実現することができます。

  • Nuxt.js…Vue.jsのフレームワーク
  • Next.js…Reactのフレームワーク

一説によれば、Nuxt.jsはNext.jsの影響を受けて開発されたとのことです。できることなら別の名前にしてほしかったという気がしますが、混同しないように注意しましょう。

求人のポイント

求人を作成する時は、下記の内容を求人に入れるとよいです。

1システム(サービス)の詳細
※特にそのシステム(サービス)をなぜ作っているのかを熱量をもって記載する。
2開発環境
3現在のエンジニア組織の体制
4現行システムの課題と募集の背景
5求められる業務と期待値
6エンジニアとしてのスキルアップ支援制度の有無と詳細
7エンジニアチーム内での相互成長のための仕組み(勉強会やLT会など)の有無と詳細
8選考フロー
9待遇
10キャリアパス

Nuxt.jsの豆知識

Nuxt.jsを使った有名な企業・サービス

Nuxt.jsは様々なWebサイトの開発に利用されています。以下にNuxt.jsを利用したWebサイトをご紹介します。

何れのWebサイトについても、Webページに表示される情報量、あるいはアクセスするユーザー数が多いものばかりですが、ストレスなくサイトを閲覧可能です。これもVue.jsによるSPA、そしてNuxt.jsによるSSRの効果といえるでしょう。

NNuxt.js関連のイベント 

Nuxt.js関連のイベントとしては下記のようなものがあります。

Nuxt Nation Conferenceは世界規模のイベントであり、Nuxt.jsの開発者であるSébastien Chopin氏、Vue.jsの開発者であるEvan You氏などが登壇します。

Vue Fes JapanはVue.js 日本ユーザーグループが主催しているカンファレンスですが、2020年は開催が見送られています。

関連記事

  1. Rust

  2. reactnative

  3. CoffeeScript

  4. VB.NET

  5. Flux

  6. CircleCI