{"id":23270478,"url":"https://github.com/umanari145/front_end_javascript","last_synced_at":"2026-04-04T20:32:13.949Z","repository":{"id":39555975,"uuid":"158936005","full_name":"umanari145/front_end_javascript","owner":"umanari145","description":"front_end絡みの話題について","archived":false,"fork":false,"pushed_at":"2023-05-14T14:16:53.000Z","size":794,"stargazers_count":0,"open_issues_count":64,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-08-03T23:56:48.669Z","etag":null,"topics":["es6","gulp","laravel-mix","typescript","vue","webpack"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/umanari145.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-11-24T12:51:55.000Z","updated_at":"2023-05-05T00:57:16.000Z","dependencies_parsed_at":"2024-12-19T18:52:00.420Z","dependency_job_id":"83e1dc69-8565-483b-b1a2-200ee62cc90d","html_url":"https://github.com/umanari145/front_end_javascript","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/umanari145/front_end_javascript","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/umanari145%2Ffront_end_javascript","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/umanari145%2Ffront_end_javascript/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/umanari145%2Ffront_end_javascript/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/umanari145%2Ffront_end_javascript/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/umanari145","download_url":"https://codeload.github.com/umanari145/front_end_javascript/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/umanari145%2Ffront_end_javascript/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31413267,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-04T20:09:54.854Z","status":"ssl_error","status_checked_at":"2026-04-04T20:09:44.350Z","response_time":60,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["es6","gulp","laravel-mix","typescript","vue","webpack"],"created_at":"2024-12-19T18:51:48.292Z","updated_at":"2026-04-04T20:32:13.930Z","avatar_url":"https://github.com/umanari145.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# front_end_javascript\n\n## es6sample ECMAScript6の基本構文\n- es6sample\n  - sample.js es6の基本の記法\n    - let, const\n    - ブロックスコープ\n    - functionの初期値\n    - アロー関数\n    - thisのスコープに関して\n  - class.js\n    - 基本的なクラスの書き方\n    - 継承\n\n  - sample.html jsをブラウザで読み込み実行させた時\n\n```\n#下記のようにnodeコマンドをそのまま実行しても可\nnode sample.js\nnode class.js\n\n```\n## モジュール化のメリット\n- コードが読みやすくなる\n- 機能ごとにファイルを分割できる(保守性、再利用性の向上)\n- 名前空間の汚染を防ぐ\n\n\n### 外部ファイル化とモジュールの読み込み方法\n- import(es6から使えるようになった用法)\n  - modules.js exportを使って外部に関数を外だし\n  - lib/ exportを使ってクラスを外部に外だし(様々な呼び出し方)\n  - lib2/ exportを使ってクラスを外部に外だし(一括で呼ぶ呼び出し方)\n  - import.js(import2.js) 外部の関数やクラスをこの方法で読み込むことができる\n  - variables 変数の外だし\n  - sample.html ブラウザから実行することもできる\n\n- require(nodeなどで使われていた方法)\n  - modules.js modules.exportを使って外部に関数を外だし\n  - lib/personClass.js module.exportsを使ってクラスを外部に外だし\n  - require.js 外部の関数やクラスをこの方法で読み込むことができる  \n\n```\n#es6はnodeコマンドでは実行できない\n× node import.js\n*後述するbabelを使えば可能なことも・・・・\n\npackage.jsonにtype=moduleを記載すればnodeでもimport exportが使える\n\n```\n\n```\nnodeコマンドで実行\nnode require.js\n```\n\n参考リンク https://qiita.com/rooooomania/items/4c999d93ae745e9d8657\n\n## cheerio-httpを使ってnode.jsでのスクレイピング\n\n- node_sample\n  - package.json\n  - download-node.js requestを使ったダウンロード\n  - srcraping 生成元のディレクトリ\n    - getfile.js 求人情報の獲得クラス\n    - registRecruit.js 求人の登録クラス\n  - util ユーティルクラス\n    - dbUtil.js DBユーティリティ\n  - main.js 起動プラグラム\n  - .env(.sample) 設定ファイル\n  - package.json(-lock) npmライブラリ情報\n\n## webpack (モジュールバンドラ)\n[webpack4入門](https://qiita.com/soarflat/items/28bf799f7e0335b68186)\u003cbr\u003e\n[npmとwebpack4でビルド - jQueryからの次のステップ](https://qiita.com/civic/items/82c0184bcadc50965f91)\n\n複数のプログラムを1つにまとめてファイルを出力するツールのこと。\nバンドルとは束ねる、と言う意味。\nwebpack以外にはBrowserifyなどが有名。\n\n### package.jsonとは?\nnpmでのライブラリ情報の管理や実行スクリプトの管理など。\n\n\n### ファイル構成\n\n- webpack_sample\n  - package.json ライブラリ\u0026スクリプト管理\n  - dest 成果物\n  - src 生成元のディレクトリ\n    - main.js ライブラリのインポートのjs\n  - app.js 生成後のjs\n  - index.html\n\n### ライブラリ管理\npackage.jsonの作成\n```\nnpm init -y\n```\n\npackage.json\n```\n{\n  \"name\": \"library\",\n  \"version\": \"1.0.0\",\n  \"description\": \"\",\n  \"main\": \"makeFormFromJS.js\",\n  \"scripts\": {\n    \"gulp\": \"gulp\",\n    \"test\": \"echo \\\"Error: no test specified\\\" \u0026\u0026 exit 1\"\n  },\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://umanari145@github.com/umanari145/library.git\"\n  },\n  \"author\": \"\",\n  \"license\": \"ISC\",\n  \"bugs\": {\n    \"url\": \"https://github.com/umanari145/library/issues\"\n  },\n  \"homepage\": \"https://github.com/umanari145/library#readme\",\n  \"devDependencies\": {\n    \"webpack\": \"^4.16.2\",\n    \"webpack-cli\": \"^2.1.5\"\n  },\n  \"dependencies\": {\n    \"moment\": \"^2.22.2\",\n    \"select2\": \"^4.0.6-rc.1\"\n  }\n}\n\n```\n\n下記の部分でライブラリの管理をしている\u003cbr\u003e\n```npm install(i)```でpackage.jsonに書かれているライブラリがインストールされる\u003cbr\u003e\n```npm install (ライブラリ名)```で個別ライブラリが```./node_modules```以下にインストールされる\u003cbr\u003e\n--save-dev(--D) オプションをつけるとdevDependenciesに記録される(開発時に実行される)\u003cbr\u003e\n\n```\n\"devDependencies\": {\n  \"webpack\": \"^4.16.2\",\n  \"webpack-cli\": \"^2.1.5\"\n},\n\"dependencies\": {\n  \"jquery-ui-sass\": \"0.0.1\",\n}\n```\n#### コマンド実行\n```npx (ライブラリ名)```でnode_modules以下のライブラリを実行できる。ex ```npx webpack --version ```\n\n##### スクリプト実行\n以下の部分に記述することで\n```npm run``` 〜が実行可能 ex ```npm run test```\n\n```\n  \"scripts\": {\n    \"dev\":\"webpack --mode development \",\n    \"prod\":\"webpack --mode production\",\n    \"gulp\": \"gulp\",\n    \"test\": \"echo \\\"Error: no test specified\\\" \u0026\u0026 exit 1\"\n  },\n```\n\n### JSコンパイル\n```\nnpx webpack  --mode development (省略可能 --config ./webpack.config.js)\n#package.jsonに記述していれば下記のようにかける\nnpm run dev\n\n```\n\n### トランスパイル\n\n主にES2015以降の仕様で記述したJavaScriptが古いブラウザなどで動かなく危険性があるため、互換性のあるコードに変換をする処理。\n\n#### babel\n\nトランスパイラのためのプラグイン。\n新しい書き方で書いたものを古いブラウザでも対応できるようにしたもの\n\nmodule.exportsの一部に以下のように記述\n```\n module:{\n   rules:[\n     {\n       //jsに対してbabel-loaderを適用\n       test:/\\.js$/,\n       use:{\n         loader:'babel-loader',\n         options:{\n           presets:['@babel/preset-env']\n         }\n       }\n     }\n   ]\n\n```\n\n\n## laravel-mix\nwebpackのラッパー。\nlaravelの中に元々入っているが、独立して使うこともできる\u003cbr\u003e\n\u003cbr\u003e\nラッパーの説明に関して\u003cbr\u003e\nあるライブラリの機能を内包したライブラリで元ライブラリよりも便利、高性能になっていることが多い。今回の例でいうとbabelが内蔵されている。\u003cbr\u003e\nhttps://wa3.i-3-i.info/word191.html\n\u003cbr\u003e\u003cbr\u003e\n後述するgulpのタスクランナーとしての機能も持っている\n\n### ファイル構成(webpackと同じ)\n\n- laravel_mix\n  - package.json ライブラリ\u0026スクリプト管理\n  - dist 成果物\n  - src 生成元のディレクトリ\n    - main.js ライブラリのインポートのjs\n  - app.js 生成後のjs\n  - index.html\n\n```\n//実行\nnpm run dev\n\n```\n\n\n## 総合演習\ngulpを使い、各タスクを実行\n\n### gulpとは?\n\nタスクランナー\nウェブアプリ制作に置ける様々な処理を自動化させることのできるツール。\n\nsassのコンパイル\u003cbr\u003e\nローカルサーバーの起動と自動更新\u003cbr\u003e\nweppackでのコンパイル\u003cbr\u003e\n自動監視\u003cbr\u003e\netc・・・\n\n```\n//sassのタスクを実行\nnpx gulp sass\n\n//webpackのタスクを実行\nnpx gulp webpack\n\n//defaultのタスクを実行\nnpx gulp (default:省略可能)\n\n//laravel-mixの実行タスク\nnpm run dev\n\n```\n\n### ファイル構成\n\n- exercise\n  - package.json(-lock) ライブラリ\u0026スクリプト管理\n  - dest 成果物\n  - src 生成元のディレクトリ\n    - js  生成元js\n    - css 生成元css\n    - html 生成元pug\n  - config.js コンパイルの設定ファイル(gulp実行時の設定)\n  - gulpfile.js gulpの設定ファイル(タスクの記述)\n  - mix-maniflest.json laravel-mix実行時の結果の記述\n  - webpack.mix.js laravel-mixの設定ファイル(タスクの記述)  \n  - index.html 表示されるHTML\n\n\n------------ 2023/04 移行少しずつリニューアル(dockerやtypescriptなど)　------------ \n\nlaravel-mix　App\n```\nnpm run mix\n```\n\nhttp://localhost/to_do_app/sample.html\nにアクセスが可能\n\n- to_do_app(生JavaScript)\n  - dist 成果物\n  - src 生成元のディレクトリ\n    - main.js  生成元js\n  - sample.html 画面に表示されるhtml\n  - webpack.mix.js laravel-mixの設定ファイル(タスクの記述)  \n\n\n```\n//build\nnpm run todo-mix\n// 開発時\nnpm run todo-watch\n```\n\n\nhttp://localhost/to_do_app_vue/sample.html\nにアクセスが可能\n\n- to_do_app_vue(CDN vue)\n  - dist 成果物\n  - src 生成元のディレクトリ\n    - main.js  生成元js\n  - sample.html 画面に表示されるhtml\n  - webpack.mix.js laravel-mixの設定ファイル(タスクの記述)  \n\nhttp-vue-loaderライブラリ\u003cbr\u003e\ncomponentをcdnで使える\nhttps://macoblog.com/vuejs-cdn-spa/\n\n\n```\n//build\nnpm run vue-mix\n// 開発時\nnpm run vue-watch\n```\n\nes6sample\u003cbr\u003e\ntypescriptのコンパイル\u003cbr\u003e\n(エラーはでるが一応変換できる)\n```\ndocker exec  js_php npx tsc --allowjs  --target ES6 --module ES6 ./es6sample/src/class.ts --outFile ./es6sample/class.js\n```\n\nts_webapp \u003cbr\u003e\ntypescriptでのwebアプリ\n\n- ts_webapp\n  - dist 成果物\n  - src 生成元のディレクトリ\n    - js\n      - index.ts  生成元ts(Controller的な部分)\n      - EventListener.ts イベントリスナー\n      - Task.ts  タスクモデル\n      - TaskCollection タスクのコレクション\n      - TaskRender HTMLの描画の責務\n    \n    - css/app.css  生成css\n  - index.php 画面に表示されるhtml\n  - webpack.mix.js laravel-mixの設定ファイル(タスクの記述)  \n\nbuild\n```\ndocker exec js_php npm run ts-mix\n```\n\nwatch\n```\ndocker exec js_php npm run ts-watch\n```\n\ndragula\u003cbr\u003e\nhttps://codepen.io/zehad/pen/dyPGqbW\n\n- disguise-dom (仮装DOM)\n参考教材:https://www.techpit.jp/courses/93 \u003cbr\u003e\n\nbuild\n```\ndocker exec js_php npm run dis\n```\n\nwatch\n```\ndocker exec js_php npm run dis-watch\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fumanari145%2Ffront_end_javascript","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fumanari145%2Ffront_end_javascript","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fumanari145%2Ffront_end_javascript/lists"}