エラー解消の時にわからなかったことまとめ
はじめに
下記の記事を書いているときに分からないことがたくさんあったので、まとめてみました🙌
require
Node.jsのモジュールシステムであるCommonJSで使用される関数
他のファイルやモジュールを現在のファイルに読み込みます。
スコープ(scope)
プログラミングにおいて変数や関数、オブジェクトなどが参照可能な範囲または領域を指す
.jsと.mjsの違い
拡張子の違いはJavaScriptのモジュールシステムの違いに由来しています。
JavaScriptには2つの主要なモジュールシステムが存在します。
- CommonJs
- ECMAScript(ES Module, ES2015)
.jsはデフォルトでCommonJSを使用し、.mjsはESMを使用します。
拡張子
.jsや.mjsのことを拡張子と言います。
拡張子とは、パソコン等で扱うファイルの種類を識別するために、ファイル名の末尾につけられる文字列のことです。
モジュールシステム
プログラミングにおいてソフトウェアを小さな単位（モジュール）に分割し、それぞれのモジュールが独立して機能することを可能にするシステムのこと
CommonJsとECMAScript
どちらも、JavaScriptの標準規格
CommonJs: サーバサイドのNodejsのデフォルトで使用されるモジュールシステム
ECMAScript: JavaScriptの標準化を担当する団体であるECMAによって定義されたJavaScriptの標準仕様
ECMAScriptとESM
ECMAScript: JavaScriptの標準化を担当する団体であるECMAによって定義されたJavaScriptの標準仕様
ESM: ECMAScript2015（ES6）で導入された、JavaScriptのモジュールシステム
CommonJsとECMAScriptとESM
ECMAScriptとESMはあるのに、なんでCommonJsはCommonJs moduleがないんだ！と思ってお友達に聞いてみました
・ECMAScriptはjsの標準規格（フロントでもサーバーサイドでも両方に当てはまる仕様）
・CommonJsはサーバーサイドだけのjs規格
ECMAScriptの仕様の中にECMAScriptモジュール（ESM）も定められてる
CommonJsの中にCommonJsモジュールという仕様が定められてる
けど、たしかにCommonJsではモジュールのことだけ（もしくは代表的なものかな？）しか決めてないから、CommonJs=モジュールの仕様という使われ方をしてる
だからCommonJs moduleとは言わずにCommonJsと言われている
next.config.jsとnext.config.mjs
どちらも、Next.jsプロジェクトの主要な設定ファイルのことです。
異なるのは拡張子です。
下記日本語公式に、"もしECMAScript modulesが必要であれば、 next.config.mjs を使うこともできます"と記述されていました！
next.config.jsでは、CommonJSの書き方をして
next.config.mjsではECMAScriptの書き方をします
CommonJSはrequireで記述して、ECMAScriptはimportで記述します！
JSDocコメントとは？
JSDocとは、JavaScriptで書かれたコードに注釈を追加するためのマークアップ言語です。かんたんに言うと、コメント記法の一つです。
今回はこのように書かれています
/** @type {import('next').NextConfig} */
@type:
変数の型を示します。@typeの後ろのブラケット{}に、変数の型を指定し、その後ろに変数の説明を記述します。
import('next').NextConfig:
next パッケージから NextConfig 型をインポートするという意味
createVanillaExtractPlugin
@vanilla-extract/next-pluginパッケージの一部で、Next.jsプロジェクトでvanilla-extractを使いやすくするためのプラグインです
まとめ
エラーを解消する際に、分からない単語がたくさん出てきたので、調べました！とても勉強になりました！
こちらのCommonJsとECMAScriptとESMについての解説は、ヌギーさんにご協力いただきました！ありがとうございます！
Discussion