フロントエンドで「Next.js」を選ぶ理由①：TypeScriptで爆速・安全な実装

こんにちは。ナオツです。 少し前にフロントエンド業界で需要のあるスキルについて記事をまとめました。

フロントエンド業界で需要のあるスキルについて詳しくはこちら

今回はその続きです。 前回は、フロントエンド業界で需要があるスキルを最終的に「Next.js（React系）」と「Nuxt.js（Vue.js系）」まで絞り込むことができました。

• Next.js（ネクストジェイエス）: ReactでSSRやSSGが使えるようになったもの
• Nuxt.js（ナクストジェイエス）: Vue.jsでSSRやSSGが使えるようになったもの

これらを習得すれば、フロントエンド業界で稼ぐのにはまず困らないはずです。

とはいえ、React系の「Next.js」とVue.js系の「Nuxt.js」では、仕組みや実装の仕方が違います。 両方のスキルをゼロから習得するのは、なかなか骨が折れますよね。

Next.js (React系) を優先的に習得すべき

今現在、Next.jsだけを使った案件はそれほど母数が多くありません。 しかし、Next.jsを習得することは、同時に「React」を習得することになります。 Reactの案件を選択肢に追加することができます。

また「React」を習得するということは、「Vue.js」および「Nuxt.js」への理解が早まることも意味します。

「React」と「Vue.js」はフリーランス業界でもっとも需要のあるスキルです。 Next.jsで一気に、フロントエンド業界において 案件の選択肢母数が最大化 する可能性を秘めています。

Next.js (React系) はTypeScriptフレンドリー

実装レベルでもNext.jsを選ぶメリットがあります。 大きなメリットは2つありますが、そのうちの1つが

Next.js (React系) はTypeScriptフレンドリーである

というものです。 詳しくみていきましょう。

TypeScriptとは?

プログラミング言語は「静的型付言語」と「動的型付言語」が存在します。 簡単に言うと、

• 「静的型付言語」: 変数に型を定義する
• 「動的型付言語」: コンパイラが型を推論してくれる

というものです。 通常JavaScriptは ES2015(ES6) という言語で実装します。 TypeScriptは前者の「静的型付言語」に分類され、ES6は「動的型付言語」に分類されます。

何が違うのでしょうか？ ざっくり言うと、

TypeScriptはES6に型定義を追加した言語 です。

それでは簡単な実装を比較してみましょう。

ES6の書き方

var person = function (name, age) {
    console.log(name + " age is " + age);
};
person("naotsu", 37);

TypeScriptの書き方

var person = function(name: string, age: number): void {
	console.log(name + " age is " + age);
}
person("naotsu", 37);

名前と年齢を引数で渡すと、「{名前} age is {年齢}」というconsoleログを表示するだけの関数です。

いかがですか？ ほとんど同じだと思います。 違うのは、

• 関数のパラメーターに型を定義する（nameにstring、ageにnumber）
• 関数の戻り値に型を定義する

という点ですね。 上記の関数の戻り値には void という記載がありますが、これは「戻り値がない」という意味です

たとえば、文字列を戻り値で返すなら

var person = function(name: string, age: number): string {
	return name + " age is " + age;
}

といった感じになります。

正直、 型定義めんどい ですよね？笑

記述量が増えるだけのように思います。 それは、 半分正解ですが、半分違います。

TypeScriptを導入すると、

• 記述量は増えても、タイピング量が減る
• 記述レベルでバグが発見できる

という大きなメリットがあります。

VS CodeとTypeScriptの親和性

記述量が減るのに、タイピング量が減る？ 矛盾しているように思いますよね。

そもそもTypeScriptはキーボードによる入力と併せて、 エディターの補完 を利用して実装を進めていくのです。

こだわりがなければ、 「Visual Studio Code（VS Code）」 というエディターを使用しましょう。

Visual Studio Codeは、Microsoft社製の無料コードエディターです。 Windowsのメモ帳でもコードを書くことはできますが、VS Codeはコードの実装に特化したエディターで、効率的に実装するなら絶対使った方が捗ります。

なんと、TypeScriptはMicrosoft社が公開しているオープンソースなんですね。

VS Codeはさまざまな言語に対応していますが、とくにTypeScriptへの親和性は抜群なのです！

上の図は、console log(user.name)のuserにマウスカーソルを当てたところです。 ご覧の通りuserのオブジェクト構造が表示されてわかりやすいですね。

また、user.nameというプロパティは存在しないので、エラーメッセージが表示されています。 つまり、実装して画面で確認する前にバグが発見できるのです。

さらに、下図のようにuser.まで入力するとプロパティが候補に表示されます。 あとはこれを選ぶだけです。 コードをキーボードで打つことはありません。

型定義こそめんどうなものの、いざ実装が始まれば爆速でさらに品質の高いアプリケーションを作ることが可能になります。

Nuxt.js (Vue.js系) はTypeScriptと親和性が低い

Nuxt.jsは、開発を効率化するTypeScriptとの親和性が低いのです。 現在、Nuxt.jsは3パターンの実装方法があります。

• Option API: デフォルトの書き方（TypeScript化が難しい）
• Class API: TypeScriptに特化した書き方（新しいバージョンでは非推奨）
• Composition API: Vue.jsバージョン3.0から使える書き方（Nuxt.jsに完全に対応していない）

Nuxt.jsでTypeScriptを実装する場合は、「Class API」が主流です。 しかし、最近Vue.js 3.0がリリースされ非推奨になっています。 今後は3番目にあげた「Composition API」が主流になっていくことでしょう。

しかし、Nuxt.jsには現状完全に対応しておらず、前述の補完機能などが中途半端な状態でしか使えないのです。

とくに、Vue.jsやNuxt.jsをVS Codeにおいて実装する際はVeturというプラグインをインストールします。

このプラグインがVue.jsにおけるTypeScriptの補完機能を補助する役割を担っているのですが、ここの制約が難しいのです。

Vue.js自体はReactより簡単に学習できると言われていますが、長期的に見たときにTypeScriptは必須になってきます。

TypeScriptまわりの設定で消耗するくらいなら、はじめからReact系のNext.jsを選ぶべき、というのが僕の見解です。

まとめ

みなさんが今目にしているこのブログは、 Next.js×TypeScript で構築されています。 今回ご紹介した補完機能やバグ検知機能を使って、1週間ほどで実装しました。 実に快適な開発体験でした。

プログラミングするのに、余計なストレスが少ないということは重要なポイントです。 これから仕事にしようとしている方は、とくにストレスなく学習したいものですよね。

最新のフロントエンドスキルを学ぶ方法はこちら

ちなみに、TypeScriptについての細かい説明はこの記事では省きます。 今後このブログサイト「Easy Life Tips」をどうやって実装したかを細かく説明します。 その際に改めて詳しく説明しますね。

冒頭にて、 実装レベルでNext.jsを選ぶメリットが2つある とお伝えしましたが、

その2つ目が、 Vue.jsと比較して世界的に圧倒的な採用のニーズがある

というものです。 こちらについては次回の記事でご紹介したいと思います。

お疲れ様でした。