今回は、npmパッケージについて学習していきます。
npmパッケージとは簡単に言うと、「Node.jsのアプリケーションやツールで使える再利用可能なコードの集まり」です。
Web制作でも、npm-scripts や gulp で利用しています。
ESLintの導入
ESLintについて学びました。
ESLintとは、JavaScriptのリントツールです。
Web制作でも導入しているので、引き続き使用していきます。
個人的には、コマンドラインではなく、VSCodeの拡張機能で常に監視しています。
Prettierの導入
Prettierについて学びました。
Prettierとは、HTML や CSS や JavaScript の整形ツールです。
Web制作でも導入しているので、引き続き使用していきます。
個人的には、コマンドラインではなく、VSCodeの拡張機能で常に整形しています。
webpackの導入
webpackについて学びました。
webpackとは、複数のファイルを1つにまとめ、最適化してブラウザで効率よく動作させるためのツールです。
Web制作では、gulpやPost-CSSで開発環境を構築しているので、初めて使用しました。
JavaScriptをビルドできる点が大きな違いかなと思いました。
webpackで追加したパッケージ
{
"name": "template-webpack",
"version": "1.0.0",
"description": "webpack開発環境",
"scripts": {
"format": "npx prettier . --write",
"lint:scss": "npx stylelint \"**/*.scss\"",
"lint:css": "npx stylelint \"**/*.css\"",
"lint:js": "npx eslint \"**/*.js\"",
"start:dev": "npx webpack serve --mode development",
"build:prod": "npx webpack --mode production",
"build:dev": "npx webpack --mode development"
},
"devDependencies": {
"@babel/core": "^7.26.0",
"@babel/preset-env": "^7.26.0",
"@eslint/js": "^9.15.0",
"babel-loader": "^9.2.1",
"css-loader": "7.1.2",
"eslint": "^9.15.0",
"eslint-config-prettier": "^9.1.0",
"eslint-plugin-prettier": "^5.2.1",
"eslint-plugin-react": "^7.37.2",
"globals": "^15.12.0",
"html-webpack-plugin": "^5.6.3",
"mini-css-extract-plugin": "^2.9.2",
"prettier": "^3.4.2",
"style-loader": "4.0.0",
"stylelint": "^16.10.0",
"stylelint-config-recess-order": "^5.1.1",
"stylelint-config-standard": "^36.0.1",
"stylelint-config-standard-scss": "^13.1.0",
"webpack-dev-server": "5.2.0"
},
"dependencies": {
"webpack": "^5.97.1",
"webpack-cli": "^6.0.1"
}
}
webpack, webpack-cli
webpack は、モジュールバンドラーです。JavaScript、CSS、画像などのすべてのリソースを依存関係に基づいてまとめ、効率的にブラウザで動作する形式に変換します。
webpack-cli
webpack-cli は、コマンドラインからwebpackを操作するためのインターフェースを提供します。
webpackコマンドを実行できるようにする。--mode（developmentやproductionなど）や設定ファイルの指定など、オプションを簡単に指定可能。
html-webpack-plugin
HTMLファイルを自動生成し、バンドルされたJavaScriptやCSSを自動で埋め込む機能を提供します。
mini-css-extract-plugin
mini-css-extract-plugin は、CSSをJavaScriptから分離し、個別のCSSファイルとして出力するプラグインです。
css-loader
css-loader は、CSSファイルをモジュールとして読み込み、JavaScript内で使用できるようにするローダーです。
style-loader
style-loader は、JavaScriptで読み込んだCSSをHTMLの<style>タグに挿入するためのローダーです。
webpack-dev-server
webpack-dev-server は、開発中に便利なローカル開発サーバーを提供するツールです。
@babel/core, @babel/preset-env, babel-loader
Babel は、最新のJavaScriptコードを古いブラウザでも動作するように変換するトランスパイラです。
ECMAScriptについて
ECMAScriptは、JavaScriptの仕様やルールを定めた標準規格のことです。JavaScriptはこの規格に基づいて実装されています。
特に、2015年に公開されたES6（ECMAScript 2015）は、それ以前のバージョンと比べて大規模な変更が行われ、現代のJavaScriptの基盤となっています。例えば、以下のような新機能が追加されました。
- アロー関数（
() => {}）：より簡潔な関数記述。 let/const：ブロックスコープの変数宣言。- クラス構文（
class）：オブジェクト指向プログラミングをサポート。 - モジュール（
import/export）：コードの再利用性と管理性を向上。 - テンプレートリテラル（
`Hello, ${name}`）：文字列の埋め込みが容易に。
これらの新機能は、開発効率を大幅に向上させる反面、Internet Explorer（IE）などの古いブラウザがこれらの変更に対応していないという問題があります。このため、Babel のようなトランスパイラを使用して、最新のコードを古いブラウザでも動作する形式に変換する対応が必要です。
ES6はフロントエンドエンジニアとして必須の知識であり、これらの概念を理解することは、効率的なコーディングやモダンな開発環境での作業に役立ちます。
settings.jsonのバージョンの指定について
^ の有無の違い
^ あり（例: "webpack": "^5.97.1"）:
- メジャーバージョン（最初の数字）が同じ範囲内で、最新のマイナーアップデートやパッチを許可します。
- 例:
"^5.97.1"は、5.97.2や5.98.0に自動更新されますが、6.0.0には更新されません。
^ なし（例: "webpack-dev-server": "5.2.0"）:
- 正確なバージョンを固定します。
- 例:
"5.2.0"では、5.2.1や5.3.0にも更新されません。
どちらが推奨されるか？
開発ツールやライブラリの場合（例: webpack や webpack-dev-server）:
^を付けるのが一般的。- 自動的に最新の安定バージョンを利用できるため、セキュリティやバグ修正が反映されやすい。
本番環境で使用する重要なライブラリや依存関係:
- **バージョン固定（
^を付けない）**を検討。 - 更新に伴う不具合を避けるため、慎重な管理が必要。
開発環境
感想
npmパッケージを使った環境構築を学習しました。
Web制作の場合、Sassや画像の圧縮などに重きを置いて使用していましたが、webpackでJavaScriptをバンドルする方法も学習できました。
JavaScriptのファイル分割のお作法や命名規則などがまだキャッチアップできていないので、この辺のルールを何か参考に固めたいと思います。
