最終更新: kenken2020 2023年12月07日(木) 18:26:01履歴
目次
◎useプロパティ
Loaderを指定して、testプロパティに指定したファイルがアプリケーションの依存関係や最終的なbundleファイルに加えられるように変換する
◎excludeプロパティ
除外するファイルを指定する
参考2:スクリプトを実行すると「このシステムではスクリプトの実行が無効になっているため、ファイル *スクリプトファイル名* を読み込むことができません。」エラーが発生する
目的:統合開発環境(IDE)でツクールMVのスクリプトを記述することが出来る
- 「Visual Studio Code」+「Chrome」で「ツクールMV」のローカルでデバッグなテクニックの紹介
- ローカル環境でする場合
- メニュー「表示」からサイドバーとデバッグコンソールを表示させておく
- 画面上部の「表示」→「拡張機能」をクリック
- 検索フォームに「Chrome」と入力し、「Debugger for Chrome」を選択
- インストールしたら再起動する
- 画面上部の「ファイル」→「フォルダーを開く」を選択
- ツクールMVのプロジェクトフォルダー(「index.html」があるフォルダー)を選択して「フォルダーの選択」ボタンをクリック
- サイドバーの虫のアイコン「デバッグ」をクリック
- 「'launch.json'を構成…」をクリックし、「環境の選択」で「Chrome」を選ぶ
- 「launch.json」を以下のコピペに書き換える
- デバッグ構成の名前が「Launch」になっていれば成功
- 緑の三角マーク「デバッグ実行」をクリックするか「F5キー」を実行
{ "version": "0.2.0", "configurations": [ { "name": "Launch", "type": "chrome", "request": "launch", "file": "${workspaceRoot}/index.html", "runtimeArgs": [ "--allow-file-access-from-files", "--remote-debugging-port=9222", "--autoplay-policy=no-user-gesture-required" ] } ] }
「launch.json」の"file"の行を
"file": "${workspaceRoot}/index.html",から
↓
"file": "${workspaceRoot}/index.html?test",
に変更すると「ツクールMV」ゲームがテストモード起動する
テストモードではゲーム中のマップ上で「F9キー」を押下するとツクールスイッチやツクール変数の操作画面が表示される
"file": "${workspaceRoot}/index.html",から
↓
"file": "${workspaceRoot}/index.html?test",
に変更すると「ツクールMV」ゲームがテストモード起動する
テストモードではゲーム中のマップ上で「F9キー」を押下するとツクールスイッチやツクール変数の操作画面が表示される
目的:コード補完を出来るようになる
- 「rpgmakermv_typescript_dts」の定義ファイル
- 別の定義ファイル、参考
- 参考:TypeScriptでのツクールMVプラグイン制作+α (RPGツクールMV Advent Calendar 4日目)
- 参考:windows10にNode.jsをインストールする
- コマンドラインで「npm install -g typescript」と入力
- コマンドラインで「npm install rpgmakermv_typescript_dts」と入力し部型付を導入(Windowsのコマンドラインと、VisualStudioのコマンドラインの両方で実行?)
- 以下をフォルダの先頭にコピペすれば、コード補完が出来るようになる
- /// <reference types="rpgmakermv_typescript_dts"/>
- tsconfig.jsonという名前で以下のように記述
{ "compilerOptions": { "module": "commonjs", "target": "es5", "outDir": "dist", "lib": [ "es5", "es2015.promise" ] } }
- エディタの下にあるコマンドラインで「tsc」書いて実行
- dist/hoge.jsに変換されたJavaScriptが出来る
参考:VSCodeでGit・GitHubを使う方法を解説する【2021最新】
- 公式からバージョン管理ソフト「Git」をダウンロードしインストールする
- インストールした「Git Bush」を起動し、以下のコマンドを実行し、ユーザー名とメールアドレスを登録する
git config --global user.name {自分の名前}
git config --global user.email {メールアドレス}
- ローカルリポジトリとGitHubのリモートリポジトリを紐づける作業を行う
- VSCodeのターミナルを開き、先ほどの作業で取得したコマンドを順番に実行する
git remote add origin https://github.com/{ユーザー名}/{リポジトリ名}.git
- 上記のコマンドはPC上に作成したローカルリポジトリとGitHubで作成したリモートリポジトリの紐づけを意味するコマンド
- コマンドの実行後はローカルリポジトリ・リモートリポジトリ間で相互的にアップロード/ダウンロードできる状態になる
- 次のコマンドも実行して、実際にリモートリポジトリに紐づいたかの確認も行う
git remote -v
- 成功していれば下の表示になる
origin https://github.com/{ユーザー名}/{リポジトリ名}.git (fetch)
origin https://github.com/{ユーザー名}/{リポジトリ名}.git (push)
- 続けて2行目・3行目のコマンドを実行する
git branch -M main
git push -u origin main
- 2行目のコマンドでmainというブランチを作成
- 3行目のコマンドで作成したmainブランチに対するプッシュ操作を行っている
- Node.jsとはサーバサイドで動くJavaScriptの事
- ブラウザ上で動作するJavaScriptはOSの機能にアクセスできない
- ブラウザが限定的にOSの機能へのアクセスを仲介している
- ブラウザ上という制限された環境でしか動けなかったJavaScriptを、PythonやRubyのようにパソコン上で動かせるようにしてくれるのが「Node.js」
- 「Node.js」はJavaScript実行環境である
- 「npm」はNode.jsのパッケージ管理ツール
- npm=yarn Pythonにおけるpip、Rubyにおけるgem(RubyGems)
- 「パッケージ」というのはライブラリやフレームワークのこと
- 元々Node.jsは大量の同時接続をさばけるようなネットワークアプリケーションを構築することを目的として設計された
- Node.jsの特徴として、Webサーバの役割もNode.jsがこなす
- 参考:Node.jsとはなにか?なぜみんな使っているのか?
- 以前ツクールのプラグインを作るために「VisualStudioCodeとTypeScript」の環境構築をした時にNude.jsをインストールしている?
- Visual Studioの導入
- Visual Studio Code→マイクロソフトの.NET系を作成するのに便利なIDE(統合開発環境)?
- TypeScript→TypeScriptで書かれたコードをコンパイルするとJavaScriptのコードに変換される
- モジュール「node-csv」を使う?
- csv-generate
- csv-parse //読み込み
- stream-transform
- csv-stringify //書き込み
- モジュール「objects-to-csv」を使う?
- モジュール「stream」を使う?
- モジュール「Browserify」を使う?
- サーバー側(ブラウザ)では「require」関数が使えない
- ソースコードを変更して、main()の呼び出しの前後をifブロックでくくりる
- Node.jsではモジュールシステムにより、ソースコードを複数のファイルに分割して記述するので、自分がメインで実行されているファイルかどうかをチェックしている
'use strict'; if (require.main === module) { main() } function main() { console.log('Hello, world!') }
- 「VSCODE+Node.js」で環境構築する
- npmでライブラリをインストール出来る様にする
- VSCODEの拡張機能「Debugger for Chrome」をインストールする
- Chromeでデバッグ出来るようにする
- VSCODEの拡張機能「Live Server」をインストールする
- 簡単にローカルサーバを立てることができる
- VSCODEのターミナルから以下のコマンドで、「TensorFlow.js」と「PoseNet」のライブラリをインストールする
npm install @tensorflow-models/posenet以下のリンク先のGithHubにインストール時のnpmコマンドが載っている
プロジェクトフォルダ │ index.ts (自分で作成した TypeScript ファイル) │ index.js (デバッグ実行で出力された index.ts) │ package.json (npm init -y で生成) │ tsconfig.json (tsc --init で生成) │ └─.vscode launch.json (「起動設定」で生成) tasks.json (「ビルドタスクの設定」で生成)
- 以下のコマンドで作業ディレクトリを作成する
npm init
- 以下は聞かれる項目
- package name には、その時のカレントディレクトリの名前が入る
package name: (test)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
- オプションの「-y」をつけることでデフォルト設定を使いとばす事ができる
- テストだったら「-y」をつけて問題ない?
npm init -y
- npxコマンドを使うと何かいい感じにインストールしてくれる?
- 参考:npxが結構良さそうな件について
- ライブラリ作者がNode.js環境は整っている人に適当に何かを試させるのが簡単になる
- 参考:npxコマンドとは? 何ができるのか?
- npxコマンドを使うことでインストールされていないコマンドであっても自動的に探してインストール、実行まで行ってくれ
- 「tsconfig.json」ファイルがディレクトリ内に存在する場合、そのディレクトリがTypeScriptプロジェクトのルートであることを示す。
- この「tsconfig.json」ファイルは、プロジェクトのコンパイルに必要なルートファイルとコンパイラオプションを指定する。
- JavaScriptプロジェクトでは、jsconfig.json代わりに使用できる。このファイルはほとんど同じように機能するが、JavaScript関連のコンパイラフラグがデフォルトで有効になっています。
- 以下のコマンドで「tsconfig.json」を作成する
tsc --init
- 以下の例のようにtsconfig.jsonを設定する
{ "compilerOptions": { /* Basic Options */ //基本オプション //どのバージョンでjsを出力するか? //ES6(新しいJavaScript)を指定する "target": "ES6", //出力するjsのモジュールの仕組みとして何を使用するかを指定する。 //ES2015は上で指定したES6 "module": "ES2015", //ソースマップ、デバッグが捗る? "sourceMap": true, //何も指定しない場合、コンパイルされたjsはコンパイルしたtsファイルと同じディレクトリに作成される。 //このオプションでディレクトリを指定した場合、tsファイルのディレクトリ構成をそのままに保ちつつ、指定したディレクトリにjsファイルを作成する。 "outDir": "./dist", //コンパイル結果をoutDirで出力する際に、どのディレクトリ配下のディレクトリ構造で出力するかを指定する "rootDir": "./src", "removeComments": true, "noEmitOnError": true, /* Strict Type-Checking Options */ "strict": true, /* Additional Checks */ "noUnusedLocals": true, "noUnusedParameters": true, "noImplicitReturns": true, /* Module Resolution Options */ "esModuleInterop": true, /* Experimental Options */ "experimentalDecorators": true, /* Advanced Options */ "skipLibCheck": true, "forceConsistentCasingInFileNames": true } }
参考:「Visual Studio Code」を使って、TypeScriptを動かしてみるまでの流れ
npx tsc --init
- 作業ディレクトリのルートに「tsconfig.json」ができる
- 「sourceMap」を有効にする
- 「script src」には、「tsconfig.json」の"outDir": "./dist"で設定した出力先のフォルダを指定する
- コンパイルされるファイルはapp.tsなのでコンパイル後のapp.jsを指定する
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <script src="dist/app.js" defer></script> <title>Document</title> </head> <body></body> </html>
- 「tsconfig.json」の"rootDir": "./src",で指定したフォルダに「app.ts」を作成する
console.log('Hello, TypeScript');
- ターミナル以下のコマンドでコンパイルする
tsc
- 新しく「tsconfig.json」の「"outDir": "./dist",」で設定した「dist」フォルダと、その中に「app.js」と「app.js.map」が作られる
- app.js.mapはデバッグ時に使用するファイル
- コンパイルされたjsファイルと元のtsファイルのコード位置を紐づけるファイル
- ブラウザ上ではjsファイルしか動かないため、元のtsファイルでブレークポイントを使ってデバッグするためにマッピングするためのファイル
- 「tsconfig.json」の「"sourceMap": true,」で設定
- [実行とデバッグ]メニュー - [launch.jsonファイルを作成] - [Chrome]を選択
- .vscode/launch.jsonが作成される
- 「"url": "http://localhost:8080", 」→ ここを 5500 に変更
- 右下の[Go Live]ボタンを押す
- F5を押してデバッグを開始する
参考:webpack の基本的な使い方
参考:webpack.config.jsがわからない
参考:webpack.config.js の書き方をしっかり理解しよう
参考:webpackの設定ファイル「webpack.config.js」の使い方を覚えよう
参考:webpack.config.jsがわからない
参考:webpack.config.js の書き方をしっかり理解しよう
参考:webpackの設定ファイル「webpack.config.js」の使い方を覚えよう
- よく分かっていないが「webpack」をインストールする
- 複数のJavaScript を1つにバンドル(まとめる)する?
- インストールが完了すると、インストールされたパッケージは「node_modules」というフォルダに保存される
- 「package.json」と「package-lock.json」という npm の設定ファイルが生成される
npm install @tensorflow/tfjs @tensorflow-models/mobilenet
- webpack は src ディレクトリにエントリポイントの index.js ファイルさえあれば設定ファイルなしで処理(ビルド)を実行することができる
- プロジェクトのフォルダの中に dist 及び src という名前のフォルダを作成
- srcフォルダ
- エントリポイントの名前は index.js にして src フォルダに配置
- src フォルダの中にモジュールを格納するフォルダ modules を作成
- distフォルダ
- この例では表示用の index.html を配置する
- dist フォルダには1つにまとめられた JavaScript ファイルが出力される
- srcフォルダ
myProject ├── dist //追加したフォルダ ├── node_modules ├── package-lock.json ├── package.json └── src //追加したフォルダ └── modules //追加したフォルダ過程2(webpackでのバンドル前)
myProject ├── dist │ └── index.html //追加したファイル ├── node_modules //npm でインストールされるパッケージ(webpack 等) ├── package-lock.json ├── package.json └── src ├── index.js //追加したファイル(エントリポイント) └── modules └── foo.js //追加したファイル(モジュール)過程3(webpackでのバンドル後)
myProject ├── dist │ ├── index.html │ └── main.js //webpack によりまとめられた JavaScript ファイル ├── node_modules ├── package-lock.json ├── package.json └── src ├── index.js └── modules └── foo.js
- webpack で出力した dist フォルダー内の main.js を index.html で読みこむことで、バンドルされたコードが実行される
- JavaScript(Node.js)において、あるファイルに存在する変数や関数を別のファイルで実行する機能
- 「module.exports」と「exports 」の違いは何か?
module.exports = { }
- webpackがビルドを始める際の開始点となるjsファイル
- デフォルトでは「./src/index.js」
- webpackはエントリーポイントに入ったあと、エントリーポイントがどのモジュールやライブラリに依存しているのかを判断し、処理してbundleと呼ばれるファイルに出力する
module.exports = { entry: path.resolve(__dirname, "entry.js"), }例2
module.exports = { entry: { main: './path/to/my/entry/file.js' } };
- bundleファイルをwebpackがどこにどのような名前で出力すればいいのかを指定する
- デフォルトでの出力先は「./dist/main.js」
const path = require('path'); //path モジュールの読み込み module.exports = { entry: './path/to/my/entry/file.js', output: { // output プロパティ path: path.resolve(__dirname, 'dist'), //出力ファイルのディレクトリの絶対パス filename: 'my-first-webpack.bundle.js' //出力ファイルの名前 } };
- ローダー(Loader)とはリソース(ソースコード)を変換したりモジュール化するためのツール
- webpack は、ローダーを使用してファイルを事前に処理することができる
- JavaScript以外にも画像や CSS ファイルなどのリソースもバンドルすることができるようになる
- 拡張子を指定して、あるLoaderがどのような種類のファイルを処理するべきなのか特定する(正規表現で拡張子を指定)
- 正規表現で表しますので、「/\.js$/」というのは、「.js」で終わるファイル、つまりはJavaScriptファイルを表す
◎useプロパティ
Loaderを指定して、testプロパティに指定したファイルがアプリケーションの依存関係や最終的なbundleファイルに加えられるように変換する
◎excludeプロパティ
除外するファイルを指定する
- pluginsオプションは、さまざまな方法でwebpackビルドプロセスをカスタマイズするために使用する
- プラグインを使用するには、require() を使ってプラグインを読み込み、webpack.config.js で plugins プロパティの配列に追加する
- webpack には import を使ってモジュールをインポートする際に、指定されたモジュールを検索して該当するファイルを探す仕組み(
- resolve.modules
- モジュールを解決するときに検索するディレクトリを webpack に指示する
- 原因 :→実行ポリシーが初期値のまま
- 「Get-ExecutionPolicy」で実行ポリシーを確認する→「Restricted」になっている
- 以下のコマンドで一時的に実行ポリシーをゆるめる
Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope Process参考1:PowerShellでこのシステムではスクリプトの実行が無効になっているため、ファイル hoge.ps1 を読み込むことができません。となったときの対応方法
参考2:スクリプトを実行すると「このシステムではスクリプトの実行が無効になっているため、ファイル *スクリプトファイル名* を読み込むことができません。」エラーが発生する
- パッケージに脆弱性がある場合以下の警告文がでる
found 1 high severity vulnerability以下のコマンドでパッチを当てる
npm audit fix
- 「tsconfig.json」の「strict」がTrueになっていて、型チェックが厳格になっている。
- 該当する変数の型を定義する
- @echo off(コマンドの画面表示を消す)
- コマンドプロンプト画面にバッチファイルに書いたコマンドを復唱させないようにするための指示
- cls(画面の表示をクリアにする)
- set (環境変数の設定)
- call(バッチファイルから別のバッチファイルを呼び出す)
- VSCODEのターミナルのコマンドでは行頭の「$」マークはいらない?
- npmとは?→Node Package Managerの略で、Node.jsのモジュールを管理するツール
- コマンドプロンプト
- MS-DOSや古いWindows
- パワーシェル(PowerShell)
- Windowsのやつ、コマンドプロンプトの進化版?
- コマンドライン
- CUIのこと?
- ターミナル
- VSCODEやMacOS
- コンソールコマンド
- ゲーム関連
- npm→パッケージ管理ツール
- package.json→プロジェクトの初期化
- tsconfig.json→TypeScriptの設定
- コマンド「install」=「i」=「add」
- インストールする
npm install パッケージ
npm i パッケージ
npm add パッケージ
- コマンド「save 」=「s」
- インストール時に、package.json へのパッケージの依存関係を追記する
- 今はこのオプションは不要?
npm install --save パッケージ名
npm install -save パッケージ名
npm install -S パッケージ名
- コマンド「dev」=「D」
- カレントディレクトリに指定のパッケージをインストールするときに package.json の devDependencies欄 にパッケージ名が記録する
- ローカルインストールする時?
npm install --save-dev パッケージ名
npm install -D パッケージ名
コメントをかく