はじめに

JavaScriptを含む、最近のフロントエンド界隈は日々新しい技術が出ています。
Webpack, Gulp, Vue, React, SCSS...

僕にはわからないことだらけです。

特に、ECMAScriptやNode.js。
そして、それらの中で使われるimport, requireの違いでだいぶ悩んでいました。

これらの違いをここらで自分なりにはっきりさせようと思います。

間違っている点や不明な点があれば、コメントいただけると幸いです！

ECMAScriptとNode.jsの違いは？

ECMAScriptとNode.jsの違いは何でしょうか？

ECMAScriptは、JavaScriptの統一規格
Node.jsはサーバーサイドで実行するための環境

などを指し、違う概念になっています。

ECMAScriptは、Ecma Internationalという機関で統一化されたJavaScriptの標準規格です。

このような標準規格ができた理由は、各ブラウザの仕様がこれまで異なったということです。

Chrome, Safari, IE(う〜ん）などでは、それぞれ内部にJavaScriptを実行するためのエンジンが入っています。
このエンジンがJavaScriptをその場で読み込んで実行をしているわけです。

しかし、これまではどの文法をサポートするか？などが各エンジンがバラバラであったため、ECMAScriptという統一規格ができています。
これによって、JavaScriptの文法の発達が進んだため、ES2015, ES2017のように名前がついています。

Node.jsは、ブラウザのフロントエンドで実行されるJavaScriptを、サーバーサイドに持ってきてしまおう！　という実行環境やプロジェクト自体を指します。

npm, nodeという名前を聞くとよくQiitaで見ると思います。

Node.jsは、ブラウザでは実行されず、OS上のプロセス・アプリの一つとして実行されます。
ブラウザ向けではない、というのが大事な点だと思います。

importとrequireの違いは、ECMAScript(ブラウザ向け), Node.js(サーバーサイド向け）の違いに影響しています。

importはECMAScriptで使用されている文法です。
importを使うことで、JavaScriptをモジュールとして使用でき、より直感的かつファイル構成をわかりやすくすることができます。

しかし、各ブラウザごとにimportが使える・使えないなどの文法の対応状況が異なるため、Webpackを噛まして、どんな環境でも使える生JSにする必要があります。

ブラウザなどの、ECMAScriptの文法ということが大切です。

requireはNode.jsで使用されている文法です。
Node.js上で使用するだけならば、requireをWebpackで変換する必要はなく、requireのまま使うことができます。

Node.js上で使用される、ということが大切です。

よく出る疑問として

「WebpackはNode.js上で webpackコマンドや、npm run buildで使って、ブラウザ用にコンパイルしているけどアレ何？」

というのがあります。

webpackはNode.js上で使用されるライブラリです。
しかし、最近のフロントエンド開発では、ブラウザ向けのJSの開発もWebpack上を使用します。
これは、JSを最小化したり、Vueを取り入れたりなど多くの恩恵があるからです。

しかし、実際に実行する環境はブラウザ上で、importが使えない場合があります。
よって、Node.jsでWebpackを動かして、ブラウザ用に変換する、というのが流れになっています。

Node.jsで実行するだけならrequireで書けば、webpackはいらないようです。
（あったほうが嬉しい気もします、まだ完璧な理解ではありません。）

webpackのtargetに'web', 'node'というのがあるのは、実行環境によって、Node.jsのライブラリ(fs, url)などが使える・使えないがあるため、指定する必要があり

「どちらで実行したいのか？」はきちんと意識する必要がありそうです。