https://seesaawiki.jp/lifewithslackzaurus_15_0/d/HTML/CSS/JavaScript%a4%ce%ce%fd%bd%ac%20%bc%c2%c1%a9%20%bb%a8%c2%bf%a4%ca%b5%ad%cf%bf%20HTML/CSSの続き。
練習場
https://oldcygwin.web.fc2.com/ (FC2 server)
(そのうちCSSを書き換えて更新しよう)
https://ec-cube.com/ (自分PCのlocalhost)
(ec-cubeのCSSとJS)

/*************************************************************************************/
サボっていたCSS設計を学習する。(2024.03)
参考書籍２を読んだり、試したり：

Chapter１CSSの基本と設計 ～ Chapter２ CSSの基礎知識：
ReactのTailwind_Cssの簡単な説明が書いてあった。(2024.04)
CSS スペルチェック、でググった：
https://webliker.info/html/91098/
クロスブラウザ対応とは (2024.02)
https://assist-all.co.jp/column/hp/20210913-2138/
HTML/CSS 位置、サイズ 雑多な記録 (marginとmarginの相殺、marginとpaddingの相殺)
https://seesaawiki.jp/lifewithslackzaurus_15_0/d/HTML/CSS%20%b0%cc%c3%d6%a1%a2%a5%b5%a5%a4%a5%ba%20%bb%a8%c2%bf%a4%ca%b5%ad%cf%bf
よりよいCSSを書くための、CSS / Sass (SCSS) 30のルールとその理由 (2023.05)
https://zenn.dev/kagan/articles/1aa466bb6ef8eb
(この辺までの事は大体書いてあった。Vite以外は)(2024.06)

Chapter３ CSSを効率的に書くSass：
(ViteでもSassコンパイルができるらしいが、ViteはJSlibの方にメモ)
https://seesaawiki.jp/lifewithslackzaurus_15_0/d/HTML/CSS/JavaScript%a4%ce%ce%fd%bd%ac%20%bc%c2%c1%a9%20%bb%a8%c2%bf%a4%ca%b5%ad%cf%bf%a3%b2
PreprosのInstはこっちにメモ。
https://seesaawiki.jp/lifewithslackzaurus_15_0/d/Prepros%a1%a2npm%2dscript%a1%a211ty%20%26%20webpack%a1%a2Vite
index.htmlとかassetsディレクトリは自動で作成されなかった。仕方ないのでsupportサイトからDL
してきて使う事にした。
Sassの文法的には、body{}の中に全部入れるのが正しいのではないかと思ったが、それをやると展開
した時に、body .test p {} となり、実質的には同じだろうがスコープが正確には異なる。

npm-script：
npmは以前Reactで使っていたので、https://seesaawiki.jp/lifewithslackzaurus_15_0/d/HTML/CSS/JavaScript%a4%ce%ce%fd%bd%ac%20%bc%c2%c1%a9%20%bb%a8%c2%bf%a4%ca%b5%ad%cf%bf%a3%b3
npm_init_3-1-3-npm-scriptでの行けるのか?と思ったが、
$ npm init 3-1-3-npm-script
\npm ERR! code E404
\npm ERR! 404 Not Found – GET https://registry.npmjs.org/create-3-1-3-npm-script – Not found
\npm ERR! 404
\npm ERR! 404 ‘create-3-1-3-npm-script@*’ is not in this registry.
\npm ERR! 404
\npm ERR! 404 Note that you can also install from a
\npm ERR! 404 tarball, folder, http url, or git url.
\
ダメだったので、書籍通りにした。
$ mkdir 3-1-3-npm-script; cd 3-1-3-npm-script
$ npm init
\This utility will walk you through creating a package.json file.
\It only covers the most common items, and tries to guess sensible defaults.
\See `npm help init` for definitive documentation on these fields
\and exactly what they do.
\Use `npm install <pkg>` afterwards to install a package and
\save it as a dependency in the package.json file.
\Press ^C at any time to quit.
\package name: (3-1-3-npm-script)
\version: (1.0.0)
\description:
\entry point: (index.js)
\test command:
\git repository:
\keywords:
\author:
\license: (ISC)
\About to write to /myproj/CSS_Coding_Bible/3-1-3-npm-script/package.json:
\{
\ “name”: “3-1-3-npm-script”,
\ “version”: “1.0.0”,
\ “description”: “”,
\ “main”: “index.js”,
\ “scripts”: {
\ “test”: “echo \”Error: no test specified\” && exit 1″
\ },
\ “author”: “”,
\ “license”: “ISC”
\}
\Is this OK? (yes)
\npm notice
\npm notice New minor version of npm available! 10.2.4 -> 10.8.1
\npm notice Changelog: https://github.com/npm/cli/releases/tag/v10.8.1
\npm notice Run npm install -g npm@10.8.1 to update!
\npm notice
\
$ npm run test
\> 3-1-3-npm-script@1.0.0 test
\> echo “Error: no test specified” && exit 1
\
$ npm install sass (Dart Sass 対応らしい)
\added 17 packages, and audited 18 packages in 1m
\3 packages are looking for funding
\ run `npm fund` for details
\found 0 vulnerabilities
(UQ-Mobileの節約モードでもエラーにならずに持ってこれた)
$ ls -l
total 16
\drwxr-xr-x 20 ore root 4096 Jun 22 yy:zz node_modules
\-rw-r–r– 1 ore root 7387 Jun 22 yy:zz package-lock.json
\-rw-r–r– 1 ore root 259 Jun 22 yy:zz package.json
\
$ emacs package.json (“scripts”: {}のtestの下に以下を追加)
\ “sass”: “sass –watch assets/sass/:assets/css/”
Preprosで使ったassets/をstyle.cssを外してコピーした。
$ npm run sass
\> 3-1-3-npm-script@1.0.0 sass
\> sass –watch assets/sass/:assets/css/
\[2024-06-22 yy:zz] Compiled assets/sass/style.scss to assets/css/style.css.
\Sass is watching for changes. Press Ctrl-C to stop.
(style.cssが生成された)
$ npx sass –watch assets/sass/:assets/css/
(これでも同じ。sassを直接呼び出し)
\
11ty & webpack：
$ cd 3-1-3-11ty
$ npm install
\npm WARN deprecated inflight@1.0.6: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
\npm WARN deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported
\npm WARN deprecated rimraf@2.7.1: Rimraf versions prior to v4 are no longer supported
\npm WARN deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported
\npm WARN deprecated rimraf@3.0.2: Rimraf versions prior to v4 are no longer supported
\added 750 packages, and audited 751 packages in 32s
\113 packages are looking for funding
\ run `npm fund` for details
\7 vulnerabilities (5 moderate, 2 critical)
\To address issues that do not require attention, run:
\ npm audit fix
\To address all issues (including breaking changes), run:
\ npm audit fix –force
\Run `npm audit` for details.
(UQ-Mobileの節約モードだとDLが始まらなかったので、高速モードでやった)
\
$ npm run dev (変更のウォッチ)
(メモ省略した。多分うまく行ってる)
\
$ npm run build (書き出し)
\> 3-1-3-11ty@1.0.0 build
\> run-p build:del build:webpack build:eleventy
\> 3-1-3-11ty@1.0.0 build:webpack
\> webpack –config webpack.prod.js
\> 3-1-3-11ty@1.0.0 build:eleventy
\> eleventy
\> 3-1-3-11ty@1.0.0 build:del
\> rimraf build
\Writing build/index.html from ./source/index.njk.
\Wrote 1 file in 0.09 seconds (v0.12.1)
\asset js/main.js 3.28 KiB [emitted] [minimized] (name: js/main)
\asset css/style.css 63 bytes [emitted] (name: js/main)
\Entrypoint js/main 3.34 KiB = css/style.css 63 bytes js/main.js 3.28 KiB
\orphan modules 6.25 KiB (javascript) 997 bytes (runtime) [orphan] 8 modules
\runtime modules 753 bytes 4 modules
\cacheable modules 7.59 KiB (javascript) 62 bytes (css/mini-extract)
\ modules by path ./node_modules/style-loader/dist/runtime/*.js 5.84 KiB
\ ./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js 2.42 KiB [built] [code generated]
\ ./node_modules/style-loader/dist/runtime/styleDomAPI.js 1.5 KiB [built] [code generated]
\ ./node_modules/style-loader/dist/runtime/insertBySelector.js 1000 bytes [built] [code generated]
\ ./node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js 298 bytes [built] [code generated]
\ ./node_modules/style-loader/dist/runtime/insertStyleElement.js 285 bytes [built] [code generated]
\ ./node_modules/style-loader/dist/runtime/styleTagTransform.js 380 bytes [built] [code generated]
\ modules by path ./source/assets/ 1.75 KiB (javascript) 62 bytes (css/mini-extract)
\ ./source/assets/scripts/main.js + 1 modules 1.71 KiB [built] [code generated]
\ ./node_modules/mini-css-extract-plugin/dist/loader.js??ruleSet[1].rules[1].use[1]!./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[4]!./source/assets/sass/style.scss 39 bytes [built] [code generated]
\ css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[4]!./source/assets/sass/style.scss 62 bytes [built] [code generated]
\webpack 5.92.1 compiled successfully in 1634 ms
$ ls -l build/assets/css/
\合計 4
\-rw-r–r– 1 ore root 63 6月 22 yy:zz style.css
CSSファイルができた。
が、webpackは主な用途としてはバンドルらしいので、ここではあまり見ないし使わない。
https://seesaawiki.jp/lifewithslackzaurus_15_0/d/HTML/CSS/JavaScript%a4%ce%ce%fd%bd%ac%20%bc%c2%c1%a9%20%bb%a8%c2%bf%a4%ca%b5%ad%cf%bf%a3%b2
\
Vite：
速いらしい。そのうち必要になったら試そう。

3-2 Sassの機能 (2024.07)
ネスト(入れ子)、コメント、変数、補完、演算、＠-規則、値の種類(データ型)、制御構文
#mainのプロパティでSassコンパイルエラー、AIに聞いたら即解決した。https://chat.openai.com/auth/login
@mediaのネストは、CSSでは#mainの指定であっても別のルールセットとして離れた場所に書かなければ
ならない。Sassでは@mediaを#mainのルールセットの中に記述できる。コメントはC/C++と同じ。
package.jsonに “sass:help”: “sass –help” を設定し、–style=compressed を見つけた。

196p～224p、この区間はそのうち、必要になったら学習する。
以下、EC-CUBE CSSとJS
https://seesaawiki.jp/lifewithslackzaurus_15_0/d/EC%2dCUBE%20CSS%a4%c8JS
で、スタイルガイドについての前知識が必要になった。

Chapter4 サンプルで学ぶCSSコーディング：(2025.01)
この章では実際のサイトの制作ではどのようにCSS設計を行っていくのか、サンプルサイトを
例題として進めていきます。
しかし、実際のサイトと同じように制作するとサンプルとしては規模が大きくポイントが絞れないた
め基本となる部分のレイアウト、エレメント、コンポーネントに絞って実践に近い形でコーディング
を進め効率的に制作する考え方も解説していきます。
4-1 コーディング作業の考え方と準備
4-2 コーディングガイドラインを考える
Prettier、ESLint、EditorConfig、CSS comb、markuplint、… コードを整えるツール。
4-3 コーディングガイドライン <- この辺で戻った。(2025.01)
4-4 サイトの仕様を確認する
4-5 共通部分を確認する (テンプレートの作成と分類)
4-6 レイアウトを作成する
4-7 エレメントを作成する
4-8 コンポーネントを作成する

/*************************************************************************************/
Gulpについて。Gruntはもう使われてないらしい。さらに最近はViteらしい。(2025.01)

npmを使っての、gulpのインストール方法はどう入力する？ (ChatGPT)
`gulp` をインストールするには、以下の手順で進めます。必要に応じてプロジェクトごとにグローバルまたはローカルでインストールできます。
### **1. プロジェクトの初期化**
最初に、プロジェクトフォルダを作成し、`npm init` を実行して `package.json` を生成します。
$mkdir my-project
$ cd my-project
$ npm init -y
\
### **2. gulp のインストール**
#### **(A) ローカルインストール（推奨）**
プロジェクトごとにインストールし、開発環境で使用します。
$ npm install –save-dev gulp
#### **(B) グローバルインストール**
`gulp` コマンドをシステム全体で利用したい場合にグローバルインストールします。ただし、ローカルインストールが一般的に推奨されます。
$ npm install -g gulp-cli
\> **注意:** グローバルインストールを行う場合、`gulp` CLI ツールをシステム全体で利用可能にしますが、プロジェクトごとに異なるバージョンの gulp を使用したい場合はローカルインストールが便利です。
\
### **3. Gulpの初期設定**
Gulpを利用するには、プロジェクトフォルダに `gulpfile.js` を作成してタスクを記述します。
以下は簡単な例です。
#### **gulpfile.js**
\“`javascript
\const gulp = require(‘gulp’);
\
\gulp.task(‘hello’, function(done) {
\ console.log(‘Hello, Gulp!’);
\ done();
\});
\
### **4. Gulp コマンドの実行**
タスクを実行するには、以下のコマンドを使用します。
$ npx gulp hello
\- `npx` を使うことでローカルインストールした `gulp` を実行できます。
\- グローバルインストールしている場合は、`gulp hello` と入力します。
\
### **インストール確認**
Gulpのバージョンを確認して、インストールが成功したことを確認します。
$ npx gulp –version
\- ローカルでの Gulp バージョンと CLI のバージョンが表示されます。

これまで、Dart Sassを使い、$ npm install sass、$ npm run sass、とやってCSSを生成していたが、glupとの関係は？ (ChatGPT)
これまで `Dart Sass` を使って `npm install sass` と `npm run sass` を用いて CSS を生成していた場合、**Gulp** を導入することでタスクの管理や処理をさらに柔軟にすることができます。
以下に **Gulp** と **Dart Sass** の関係性、及び移行や併用の方法について説明します。
### **Dart Sass単独でのCSS生成**
これまでのワークフローでは、以下のような `npm scripts` を使っていたと考えられます。
#### **package.json の例**
\“`json
\{
\ “scripts”: {
\ “sass”: “sass src/styles.scss dist/styles.css”
\ }
\}
#### **実行コマンド**
$ npm run sass
この方法では、`sass` コマンド単独でファイルをコンパイルし、CSSを生成していました。
\
### **Gulp を使った Dart Sass の利用**
Gulp を導入すると、以下の利点があります。
1. **複数タスクの統合**
\ – Sass のコンパイル以外に、CSS の圧縮、ブラウザリロード、JavaScript の処理など複数のタスクを統合できます。
2. **監視と自動化**
\ – ファイルの変更を監視し、変更があるたびに自動でタスクを実行できます。
3. **柔軟なプラグイン管理**
\ – Gulp プラグインを使って追加の処理（例: ベンダープレフィックスの付加、圧縮、ソースマップの生成）を簡単に組み込めます。
### **Gulp を使った Dart Sass の設定方法**
#### **1. 必要なパッケージのインストール**
以下のコマンドで Gulp と Sass の関連パッケージをインストールします。
$ npm install –save-dev gulp gulp-sass sass
\
\- `gulp`: Gulp 本体。
\- `gulp-sass`: Gulp 用の Sass プラグイン。
\- `sass`: Dart Sass のコアライブラリ（`gulp-sass` が内部で使用）。
\
#### **2. gulpfile.js の作成**
プロジェクトのルートディレクトリに `gulpfile.js` を作成し、以下のように記述します。
\“`javascript
\const gulp = require(‘gulp’);
\const sass = require(‘gulp-sass’)(require(‘sass’));
\
// Sassのコンパイルタスク
\gulp.task(‘sass’, function() {
\ return gulp.src(‘src/styles.scss’) // 入力ファイル
\ .pipe(sass().on(‘error’, sass.logError)) // エラー時のログ出力
\ .pipe(gulp.dest(‘dist’)); // 出力ディレクトリ
\});
\
\// ファイル監視タスク
\gulp.task(‘watch’, function() {
\ gulp.watch(‘src/**/*.scss’, gulp.series(‘sass’)); // Sassファイルの変更を監視
\});
\
// デフォルトタスク
\gulp.task(‘default’, gulp.series(‘sass’, ‘watch’));
\
#### **3. 実行方法**
以下のコマンドを実行します。
1. **一度だけコンパイルする**
$ npx gulp sass
2. **変更を監視して自動コンパイルする**
$ npx gulp
\
### **Dart Sass と Gulp の違いと関係性**
| 項目 | Dart Sass 単独使用 | Gulp を使った Dart Sass |
|———————-|———————————————|——————————————|
| **使い方** | `npm run sass` のように直接コマンドで実行 | Gulp タスクを定義し、柔軟に処理を実行 |
| **監視機能** | コマンド単独では不可 | Gulp の `watch` 機能で変更を検知 |
| **タスクの統合** | 単独で Sass をコンパイルする用途に特化 | 他のタスク（圧縮、JS 処理など）と統合可能 |
| **学習コスト** | シンプルで分かりやすい | 初期設定に少し時間が必要 |
| **利便性** | 小規模プロジェクトに向く | 中～大規模プロジェクトで威力を発揮 |
\
### **まとめ**
\- もし現在の Dart Sass のワークフローがシンプルなものであれば、そのままでも十分機能します。
\- しかし、Gulp を使うことで監視や自動化、複数タスクの統合が可能になり、開発効率をさらに向上させることができます。
\- Dart Sass と Gulp は併用可能で、Gulp の導入は必要に応じて徐々に進めると良いでしょう。

/*************************************************************************************/
css-mqpacker とは何か？ (ChatGPT)
css-mqpacker は、CSS 内の メディアクエリ（@media） を整理・最適化するためのツールです。通常、複数の場所に散らばっているメディアクエリを1か所にまとめることで、CSS ファイルを整理し、効率的に読み込めるようにします。
例: 統合前
\.box { color: red; }
\@media (min-width: 768px) {
\ .box { color: blue; }
\}
\.text { font-size: 14px; }
\@media (min-width: 768px) {
\ .text { font-size: 16px; }
\}
\
統合後
\.box { color: red; }
\.text { font-size: 14px; }
\@media (min-width: 768px) {
\ .box { color: blue; }
\ .text { font-size: 16px; }
\}
まとめ
\ – css-mqpacker は、メディアクエリを整理・最適化するツールです。
\ – PostCSS のプラグインとして簡単に利用できます。
\ – プロジェクトによっては、最新のツール（cssnano など）に移行したほうが良い場合もあります。

sort-css-media-queries とは何か？ (ChatGPT)
sort-css-media-queries は、CSS ファイル内の メディアクエリ（@media） を整理・ソートするためのツールです。主に、異なる条件のメディアクエリを効率的に並べ替えたり、特定のルールに基づいてグループ化するために使われます。
メディアクエリのソート
メディアクエリを条件ごとに昇順または降順で並べ替えます。
例: min-width → 小さい順に、max-width → 大きい順にソート。
ソート前:
\@media (max-width: 992px) {
\ .box { font-size: 14px; }
\}
\@media (min-width: 768px) {
\ .box { font-size: 16px; }
\}
ソート後:
\@media (min-width: 768px) {
\ .box { font-size: 16px; }
\}
\@media (max-width: 992px) {
\ .box { font-size: 14px; }
\}
カスタマイズ可能なソートルール
min-width を優先するか、max-width を優先するか、または他のカスタムルールを適用することができます。
整理された構造の維持
メディアクエリがプロジェクトのスタイルガイドに沿った順序で維持され、保守性が向上します。
まとめ
sort-css-media-queries は、CSS のメディアクエリを整理・ソートするためのツールで、特にレスポンシブデザインを効率的に管理したい場合に役立ちます。
PostCSS や Gulp との組み合わせも簡単で、モバイルファーストやデスクトップファーストといった順序を選択できます。

autoprefixer とは何か？ (ChatGPT)
### **Autoprefixer とは？**
\**Autoprefixer** は、CSS コードに **ベンダープレフィックス（vendor prefixes）** を自動的に追加するツールです。これにより、さまざまなブラウザの互換性を確保することができます。
### **ベンダープレフィックスとは？**
一部の CSS プロパティや機能は、仕様が安定する前にブラウザが独自にサポートを追加するため、特定のプレフィックスが必要になります。
例：
\- **Webkit ベースのブラウザ（Chrome, Safari）**
\ “`css
\ -webkit-transform: rotate(45deg);
\- **Mozilla ベースのブラウザ（Firefox）**
\ “`css
\ -moz-transform: rotate(45deg);
\- **通常の仕様**
\ “`css
\ transform: rotate(45deg);
### **Autoprefixer の役割**
Autoprefixer は、最新のブラウザの互換性情報に基づいて、自動的に必要なプレフィックスを追加します。これにより、手動でベンダープレフィックスを管理する手間を省き、コードの保守性が向上します。
例：以下の CSS を Autoprefixer に渡す
\“`css
\.example {
\ display: flex;
\}
Autoprefixer の出力:
\“`css
\.example {
\ display: -webkit-box;
\ display: -ms-flexbox;
\ display: flex;
\}
### **Autoprefixer の主な特徴**
1. **最新のブラウザサポート情報に基づいて動作**
\ – [Can I Use](https://caniuse.com/) データベースを使用して、最新のブラウザ互換性情報を取得します。
2. **ターゲットブラウザの設定**
\ – 対象ブラウザを指定して、不要なプレフィックスの追加を回避します。`browserslist` という設定ファイルや項目で定義します。
例：
\ > 0.5%, last 2 versions, not dead
3. **CSS コードの簡潔化**
\ – 必要な場合のみプレフィックスを追加するため、コードが過剰に冗長になるのを防ぎます。
### **Autoprefixer を使う理由**
1. **ブラウザ互換性を簡単に確保**
\ – 特定のブラウザでの動作不良を防ぐ。
2. **作業効率の向上**
\ – 手動でプレフィックスを追加・管理する時間を節約。
3. **最新のブラウザ情報を自動追従**
\ – 新しいブラウザや古いブラウザの情報を毎回確認する必要がなくなる。
### **使用方法**
1. **Node.js プロジェクトでのインストール**
$ npm install autoprefixer postcss-cli –save-dev
2. **設定ファイルを作成**
\ `postcss.config.js`
\ “`javascript
\ module.exports = {
\ plugins: [
\ require(‘autoprefixer’)({
\ overrideBrowserslist: [‘> 0.5%’, ‘last 2 versions’, ‘not dead’]
\ })
\ ]
\ };
3. **CSS に適用**
$ npx postcss input.css -o output.css
\
### **まとめ**
Autoprefixer は、CSS コードに必要なベンダープレフィックスを自動で追加する便利なツールです。これにより、ブラウザ互換性を簡単に確保しつつ、開発効率とコードの保守性を向上させることができます。特にモダンな Web 開発では、`PostCSS` や `Gulp`、`Webpack` などのツールと組み合わせて使用されることが一般的です。

browser-sync とは何か？ (ChatGPT)
### **Browser-Sync とは？**
\**Browser-Sync** は、ローカル開発環境での効率を向上させるためのツールで、以下の機能を提供します：
1. **ライブリロード (Live Reload)**
\ – ファイルを保存するたびに、ブラウザが自動的に更新される。
\ – 手動でブラウザをリロードする手間を省く。
2. **複数デバイスでの同期 (Cross-device Sync)**
\ – 複数のデバイスやブラウザで同じサイトを表示している場合、スクロールやクリック、フォーム入力がリアルタイムで同期される。
3. **プロキシサーバー機能**
\ – 開発中のローカルサーバーをプロキシして、ライブリロードなどの機能を追加する。
### **主な特徴**
1. **自動リロード**
\ – HTML、CSS、JavaScript ファイルを保存すると、ブラウザがリアルタイムで再読み込みされる。
\ – CSS の変更時はスタイルのみが更新されるため、ページ全体の再読み込みは不要。
2. **複数ブラウザ・デバイスでのテスト**
\ – スマートフォン、タブレット、PC のブラウザで同時に表示し、動作確認ができる。
\ – すべてのデバイスでの操作が同期される。
3. **フォーム入力の保持**
\ – ページの再読み込み後も、フォームに入力した内容が保持される。
4. **統合が簡単**
\ – 単独で使うことも、Gulp や Webpack などのビルドツールと統合して使うことも可能。
### **インストール方法**
#### **1. グローバルインストール**
開発環境全体で使いたい場合：
$ npm install -g browser-sync
#### **2. ローカルインストール**
特定のプロジェクトで使いたい場合：
$ npm install browser-sync –save-dev
### **使用方法**
#### **1. 単独で使用**
\- **静的サイトのライブリロード**:
$ browser-sync start –server –files “css/*.css, *.html”
上記コマンドで `index.html` を基点にローカルサーバーを起動し、`css` ディレクトリ内の CSS ファイルと HTML ファイルを監視。
\- **プロキシサーバー**:
既存のローカルサーバー（例: Apache, PHP built-in server）をプロキシする場合：
$ browser-sync start –proxy “localhost:8000” –files “css/*.css, *.html”
#### **2. Gulp と統合**
Browser-Sync を Gulp と組み合わせる例：
\“`javascript
\const gulp = require(‘gulp’);
\const browserSync = require(‘browser-sync’).create();
// 静的サーバーとファイル監視
\gulp.task(‘serve’, function () {
\ browserSync.init({
\ server: ‘./app’ // 静的ファイルのルート
\ });
\ gulp.watch(‘app/*.html’).on(‘change’, browserSync.reload);
\ gulp.watch(‘app/css/*.css’).on(‘change’, browserSync.reload);
\});
`gulp serve` を実行すると、`app` フォルダ内の HTML や CSS ファイルの変更を監視してブラウザをリロードします。
### **活用例**
1. **静的サイトの開発**
\ – HTML/CSS/JavaScript を手軽にライブプレビューできる。
2. **WordPress などの動的サイト**
\ – PHP やサーバーサイドコードが動作するローカルサーバーをプロキシして開発効率を向上。
3. **モバイルファースト開発**
\ – 複数のデバイスでサイトを同時に確認し、レスポンシブデザインの調整が容易に。
### **メリットとデメリット**
#### **メリット**
\- 時間短縮：手動リロードが不要。
\- デバイス間での同期確認が簡単。
\- Gulp や Webpack と連携可能で拡張性が高い。
#### **デメリット**
\- 大規模プロジェクトでは監視対象ファイルが多くなると、パフォーマンスに影響が出ることがある。
\- 初期設定が必要な場合があり、初心者にはややハードルが高い。
\
### **まとめ**
\**Browser-Sync** は、開発中の効率を劇的に向上させるツールです。
特に複数デバイスやレスポンシブデザインを考慮した開発を行う場合に便利です。Gulp や Webpack と統合すれば、ビルドプロセスの一環として簡単にライブリロードを組み込むことができます。

husky とは何か？
Husky は、Git のフック（hooks）を簡単に設定および管理できるツールです。
Git フックは、特定の Git 操作（例: commit、push、merge）の前後にスクリプトを実行する機能ですが、Husky を使うことでこれを簡単に設定し、プロジェクトのワークフローを強化できます。
(以降メモ省略)

lint-staged とは何か？
lint-staged は、Git のステージングエリアに追加されたファイル（= コミット対象ファイル）に対してのみ Linter（コードの静的解析ツール）やフォーマッタを適用できるツールです。これにより、コミット時に対象ファイルだけを効率的にチェック・修正できます。lint-staged は通常 Husky と組み合わせて使用されます。lint-staged を使用するには、対象ツール（例: ESLint、Prettier など）をインストールしておく必要があります。
(以降メモ省略)

/*************************************************************************************/

参考書籍：
1冊ですべて身につくHTML & CSSとWebデザイン入門講座 2019.03
https://www.sbcr.jp/product/4797398892/
https://www.sbcr.jp/support/15097/
https://www.sbcr.jp/product/4815618469/ ［第2版］ 2024.03
現場のプロから学ぶ CSSコーディングバイブル (Compass Web Development) 2021.08
https://book.mynavi.jp/ec/products/detail/id=123749
CSS設計完全ガイド ~詳細解説+実践的モジュール集 2020.02
https://gihyo.jp/book/2020/978-4-297-11173-1

参考情報：
sass npm コンパイル、でググった：
https://ensei1375.com/npm-scripts/
https://www.kagoya.jp/howto/it-glossary/web/scss/
https://zumilog.org/sass_dev-enviroment
https://qiita.com/mizo__/items/a1bc606b6f1511e17750
sass npm-script compressed、でググった：
https://fukulog.net/npm-scripts-sass/
Prettier 使い方、でググった：
https://qiita.com/Junpei_Takagi/items/3983cc735e71ea3917fd
https://qiita.com/soarflat/items/06377f3b96964964a65d
https://zenn.dev/praha/articles/7ed629d0d9da53