HTML/CSS/JavaScriptの練習実践雑多な記録２

https://seesaawiki.jp/lifewithslackarmzaurus_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 の続き。
練習場
https://oldcygwin.web.fc2.com/
ログインしてからftp
https://web.fc2.com/

プラグイン・ライブラリ・フレームワークの違いとは？ (2023.09)
https://teratail.com/questions/107012
(機能単位の規模感で言うと、プラグイン < ライブラリ < フレームワーク)
便利なおすすめjQueryのプラグイン厳選12個
https://www.brain-gate.net/content/column/engineer-tips-jquery/
https://junpei-sugiyama.com/photoswipe/
\
ライブラリとモジュールの違い
https://qiita.com/asameshiCode/items/368d978d4c181…
https://medium-company.com/%E3%83%A2%E3%82%B8%E3%8…
(コンポーネント < モジュール < パッケージ)

practice200.html～practice299.html：
JavaScriptの練習(ライブラリ使う編)。
practice203.html：
socket.io.js。
サーバ機能は、express.js 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%bf3%2e2 を練習してから。
https://gihyo.jp/dev/serial/01/nodefest2011/0002
https://gihyo.jp/dev/serial/01/realtimeweb/0002
https://gihyo.jp/dev/serial/01/realtimeweb/0003
https://qiita.com/riku-shiru/items/ffba3448f3aff152b6c1
https://zenn.dev/knockknock/articles/518ce150336703

practice210.html：
jQueryのappend。
参考 https://segakuin.com/javascript/jquery/object/append.html (javascript appendのオブジェクト) http://semooh.jp/jquery/api/selectors/%3Afirst-child/ (jquery append first child) https://js.studio-kingdom.com/jquery/manipulation/append_to (jqury.js appendto)

practice211.html：
underscoreのHTMLテンプレート、each。jQueryのgetJSON。
参考 https://www.codegrid.net/articles/template-engine-1/ (HTMLテンプレート)、動かない https://qiita.com/Yuta_Fujiwara/items/f2c4d81586b8795c4c45 (javascript underscore.js each 使い方) https://kumatech-lab.com/get-xml-json/ (javascript getjson done 使い方) https://qiita.com/hoto17296/items/197bdf91f97a33a69dfc (script type= text/json) https://www.buildinsider.net/web/bookjslib111/101 (underscore.js template 使い方)

(HTML)テンプレートエンジンとかCSSプリプロセッサとか。
https://www.codegrid.net/articles/template-engine-1/
https://teratail.com/questions/92960
HTMLのテンプレートエンジン、他(忘れた)、でググった：
https://www.buildinsider.net/web/bookjslib111/101
https://dev.classmethod.jp/articles/backbone-js-ui-tab/
https://qiita.com/cawpea/items/7db7c8f5e5ace3b40874#%E6%A6%82%E8%A6%81-2
https://anken-hyouban.com/blog/2021/06/01/template-engine/

practice212.html：
jQueryのcss。(参考書籍２ 82p)

practice213.html：
underscoreのresult。https://qiita.com/ikasumi_wt/items/1e1a37ecac73e303d62f (underscore.jp _.result)

practice???.html：
jQuery入門。jQueryのajax。(参考書籍３ 248p,300p) (2023.06)
\>> console.log(window.document);
\でallを見ると<ul class=”hidden”>が<ul class=””>になる。インスペクターでも分かる。
openweathermap api coding by json、でググった：
https://stackoverflow.com/questions/42475681/using-openweather-json-api-how-to-fetch-the-temperature

practice???.html：
急遽必要になった、Webサイトにスライダーを実装したい。(2023.09)
https://zero-plus.io/media/jquery-slick/#slick%E3%81%A8%E3%81%AF
(結局、jQueryを使わず簡単なバニラJSで間に合わせた)

practice???.html：
jQueryで滑らかにスーッと動く「上へ戻るボタン」を実装してみよう！(2023.10)
https://natsukimemo.com/jquery-pagetop

/*************************************************************************************/
babel.js をEC-CUBEにて使っていた。webpackとbundleについて。(2025.01)
https://seesaawiki.jp/lifewithslackzaurus_15_0/d/EC%2dCUBE%20CSS%a4%c8JS
package.jsonに、
\”devDependencies”: { “@babel/core”: “^7.24.5″,
\”@babel/preset-env”: “^7.24.7″,
とあるが、bundle.jsが以下となっている事と関係あるか？、あるいは、フレームワークがSymfonyである事と関係あるか？ (ChatGPT)
const $ = require(‘jquery’);
global.$ = global.jQuery = $;
require(‘slick-carousel’);
require(‘slick-carousel/slick/slick.css’);
require(‘slick-carousel/slick/slick-theme.css’);
require(‘bootstrap’);
\
`package.json` の `”devDependencies”: { “@babel/core”: “^7.24.5”, “@babel/preset-env”: “^7.24.7” }` と、`bundle.js` の記述内容には関係があります。以下にその関連性を説明します。
### **1. Babel と `@babel/core` および `@babel/preset-env` の役割**
\- **`@babel/core`**
Babel のコアライブラリで、コードを変換（トランスパイル）するエンジンです。ES6 以降のモダンな JavaScript を古いブラウザでも動作する形（ES5 など）に変換します。
\- **`@babel/preset-env`**
Babel のプリセットで、対象ブラウザや環境に応じて必要な変換やポリフィルを適用します。
#### **関係性**
`bundle.js` で使用されているモジュール（`jquery`、`slick-carousel`、`bootstrap` など）は、ES6 やそれ以降の機能を含む可能性があります。また、`bundle.js` 自体にモダンな JavaScript 構文を使うことも考えられます。
`@babel/core` と `@babel/preset-env` を使用することで、これらのコードが古いブラウザでも動作するようにトランスパイルされます。
例えば:
\“`javascript
// ES6+ の記述
const $ = require(‘jquery’);
// Babel を使うと、古いブラウザ向けに変換される
var $ = require(‘jquery’);
### **2. `bundle.js` と Webpack の関係**
通常、`bundle.js` は **Webpack** のようなモジュールバンドラーを使って生成されます。
\- **Webpack の役割**
`require(‘slick-carousel’)` や `require(‘bootstrap’)` といったモジュールを依存関係ごとにまとめて、1 つのバンドルファイル（例: `bundle.js`）に統合します。
\- **Babel と連携**
Webpack の設定で、Babel を使用してコードをトランスパイルできます。
例: `webpack.config.js`
\“`javascript
\ module.exports = {
\ module: {
\ rules: [
\ {
\ test: /\.js$/,
\ exclude: /node_modules/,
\ use: {
\ loader: ‘babel-loader’,
\ options: {
\ presets: [‘@babel/preset-env’],
\ },
\ },
\ },
\ ],
\ },
\ };
#### **関係性**
`@babel/core` と `@babel/preset-env` は、Webpack を通じて利用され、`bundle.js` に含まれるコードをターゲット環境（ブラウザ）に適した形に変換します。
### **3. Symfony との関係**
Symfony と直接的な関係はありませんが、Symfony のプロジェクトで **Webpack Encore** を使っている場合、これらが利用される可能性があります。
#### **Webpack Encore**
Symfony プロジェクトで推奨される **Webpack のラッパー** です。
Webpack の設定を簡略化し、CSS や JavaScript のバンドルをサポートします。
\- **`package.json` に依存関係を追加**
Webpack Encore を利用する場合、`@babel/core` や `@babel/preset-env` が自動的に必要になることがあります。
\- **Encore の設定例**
(可能性が薄いのでメモ省略)
\
### **結論**
1. **Babel と `bundle.js` の関係**
\ – `@babel/core` と `@babel/preset-env` は、`bundle.js` に含まれるモジュールやコードをトランスパイルするために必要です。
\ – 特に、古いブラウザ向けにモダンな JavaScript を変換する役割を果たします。
2. **Symfony との関係**
\ – Symfony プロジェクトで **Webpack Encore** を利用している場合、Babel の設定はしばしば組み込まれています。そのため、`@babel/core` と `@babel/preset-env` が依存関係に含まれている可能性があります。
`bundle.js` のビルドに Babel を利用する設定が含まれているかどうかを確認するには、`webpack.config.js` や `webpack-encore.config.js` をチェックしてみてください。

package.json の “devDependencies”: webpack記述について
webpack: Webpack 本体をインストールします。
Webpack はモジュールバンドラーで、JavaScript ファイルやアセット (CSS, 画像など) を一つのファイルにまとめます。
webpack-cli: Webpack のコマンドラインツールをインストールします。
webpack を CLI から使用するために必要です。
webpack-stream: Webpack を Gulp タスク内で使うためのプラグインをインストールします。
Gulp を使ったタスクランナーに Webpack の機能を統合できます。
以下で確認。
$ npx webpack –version
$ npx webpack-cli –version

cross-env とは何か？
### **cross-env とは何か？**
\**cross-env** は、Node.js 環境で使用されるツールで、**環境変数 (Environment Variables)** をクロスプラットフォームで設定するために利用されます。
通常、環境変数の設定方法はオペレーティングシステムによって異なります。`cross-env` を使うことで、異なるプラットフォームでも共通の方法で環境変数を設定できるようになります。
### **背景と必要性**
各プラットフォームでの環境変数の設定方法の違い：
#### **Linux / macOS**
$ NODE_ENV=production node server.js
#### **Windows (コマンドプロンプト)**
$ set NODE_ENV=production && node server.js
\
Windows と Unix 系 OS で設定方法が異なるため、同じスクリプトが動作しない問題が発生します。
\**cross-env** を使用すれば、この違いを吸収し、同じコマンドで動作するように統一できます。
### **使い方**
#### **インストール**
プロジェクトにインストールするには：
$ npm install cross-env –save-dev
\
#### **使用例**
環境変数 `NODE_ENV` を設定し、クロスプラットフォームで動作させる例：
1. **直接コマンドに埋め込む**
$ npx cross-env NODE_ENV=production node server.js
2. **package.json に設定**
`package.json` の `scripts` に記述：
\ “`json
\ {
\ “scripts”: {
\ “start”: “cross-env NODE_ENV=production node server.js”
\ }
\ }
コマンド実行：
$ npm start
\
### **よく使われるシナリオ**
1. **ビルドプロセスの環境設定**
\ – `NODE_ENV` を `production` や `development` に設定することで、適切なビルドを作成。
例:
\ “`json
\ {
\ “scripts”: {
\ “build”: “cross-env NODE_ENV=production webpack”
\ }
\ }
2. **API のエンドポイント切り替え**
\ – 開発環境と本番環境で異なる API エンドポイントを使用する場合に有効。
例:
\ “`json
\ {
\ “scripts”: {
\ “dev”: “cross-env API_URL=https://api.dev.example.com node server.js”,
\ “prod”: “cross-env API_URL=https://api.example.com node server.js”
\ }
\ }
3. **テストの設定**
\ – テスト環境用の変数を設定。
例:
\ “`json
\ {
\ “scripts”: {
\ “test”: “cross-env TEST_ENV=local jest”
\ }
\ }
### **メリット**
1. **クロスプラットフォームの互換性**
\ – Windows や macOS、Linux など、異なる OS で同じコマンドを実行可能。
2. **簡単な設定**
\ – プロジェクトに `cross-env` を導入し、既存のスクリプトに少し追加するだけで動作。
3. **エラーの回避**
\ – Windows と Unix 系 OS の違いによるトラブルを防止。
### **注意点**
1. **グローバルインストールの非推奨**
\ – `cross-env` をグローバルにインストールすることは推奨されません。
\ – プロジェクトごとに `devDependencies` に追加して管理してください。
2. **CLI 専用**
\ – `cross-env` はコマンドライン用ツールで、Node.js のスクリプト内では動作しません。
\
### **まとめ**
`cross-env` は、クロスプラットフォームで環境変数を簡単に設定できる便利なツールです。
Windows と Unix 系 OS で同じスクリプトを実行する必要がある場合に特に役立ちます。ビルドプロセス、環境依存の設定管理、API エンドポイントの切り替えなど、モダンな Web 開発では欠かせないツールの一つです。

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

参考書籍：
JavaScriptエンジニア養成読本 2014.10
https://gihyo.jp/book/2014/978-4-7741-6797-8
フロントエンドエンジニア養成読本 2014.08
https://gihyo.jp/book/2014/978-4-7741-6578-3
確かな力が身につくJavaScript「超」入門第2版 2019.09
https://www.sbcr.jp/product/4815601577/
jQuery標準デザイン講座 2015.12
https://www.shoeisha.co.jp/book/detail/9784798136226

参考情報：
jsvascript jsonファイルの読み込み、でググった：
https://www.delftstack.com/ja/howto/javascript/load-json-file-in-javascript/
https://qiita.com/seigot/items/a19d15c75ab2f9478a0b
javascript requireのオブジェクト、でググった：
node.jsのだった。今回まだnode.jsは入れない。そのうち入れる。
\
JavaScriptの文脈でたまに出てくるAMDとは何か？ – なっく日報
https://yukidarake.hateblo.jp/entry/2015/08/21/194520
webpackとは？ – Qiita
https://qiita.com/minato-naka/items/0db285f4a3ba5adb6498
最新版で学ぶwebpack 5入門 – JavaScriptのモジュールバンドラ
https://ics.media/entry/12140/
やっぱりwebpackがわからない
https://zenn.dev/antez/articles/58307946cf4f3e
https://zenn.dev/antez/articles/638382faa06bd7
(簡単なサンプルがあるのでやってみよう)
Vite を使う理由
https://ja.vitejs.dev/guide/why.html
ES モジュールがブラウザーで利用できるようになるまで、開発者はモジュール化された JavaScript を
生成するネイティブの仕組みを持っていませんでした。webpack や Rollup、Parcel のようなツールが
登場し、、Vite では新しいエコシステムの進歩を活用し、これらの問題を解決することに、、。
\
たまたま調べていたサイトが使ってた。2023.09
core-jsがメンテされていない理由→プロジェクトは継続する
https://qiita.com/yumetodo/items/eaf3b97aeae3d8c4a07e
https://gigazine.net/news/20230216-core-js-open-source-last-chance/
https://jipsti.jst.go.jp/sti_updates/2023/03/14075.html
core-jsはオープンソースのJavaScriptライブラリであり、古いブラウザでもJavaScriptの最新機能を使えるようにする最も標準的なポリフィルとして企業のWebサイトをはじめ幅広く利用されている。リリース後のダウンロードは約90億回に上り、1,900万のGitHubリポジトリと依存関係があるという。
babel と core-js を使って，古いブラウザをサポートする
https://mizunashi-mana.github.io/blog/posts/2019/1…
https://miyamizu.hatenadiary.jp/entry/js/core-js
(やっぱりこういう事は可能だろうし、やっていた所もあったのか)
https://qiita.com/mzmz__02/items/e6fbe5e30cc3fd13788f
\
[jQuery] Google Hosted Libraries を利用してjQueryを使えるようにする
https://www.searchlight8.com/google-hosted-libraries/
jQuery10年ぶりの更新！何が変わった！？ (2026.01)
https://www.youtube.com/watch?v=DGlr1C-EOZ0

Slackware-15.0 メモ

HTML/CSS/JavaScriptの練習実践雑多な記録２

コメントを残すコメントをキャンセル

最近の投稿

最近のコメント

アーカイブ

カテゴリー

Slackware-15.0 メモ

HTML/CSS/JavaScriptの練習 実践 雑多な記録２

コメントを残す コメントをキャンセル

最近の投稿

最近のコメント

アーカイブ

カテゴリー

HTML/CSS/JavaScriptの練習実践雑多な記録２

コメントを残すコメントをキャンセル