サイバーグノーシス

目的：統合開発環境（IDE）でツクールMVのスクリプトを記述することが出来る

• 「Visual Studio Code」+「Chrome」で「ツクールMV」のローカルでデバッグなテクニックの紹介
• ローカル環境でする場合
• メニュー「表示」からサイドバーとデバッグコンソールを表示させておく

• メニューから［View］-［Command Palette］を選択
• ［Configure Display Language］を選択

　

　

　

• 画面上部の「表示」→「拡張機能」をクリック
• 検索フォームに「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キー」を押下するとツクールスイッチやツクール変数の操作画面が表示される

目的：コード補完を出来るようになる

• 「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が出来る

・ステップ実行
・ブレークポイントの設定
・任意スクリプトの実行
・launch.jsonとは？

参考：VSCodeでGit・GitHubを使う方法を解説する【2021最新】

• 公式からバージョン管理ソフト「Git」をダウンロードしインストールする
• インストールした「Git Bush」を起動し、以下のコマンドを実行し、ユーザー名とメールアドレスを登録する

git config --global user.name {自分の名前}
git config --global user.email {メールアドレス}

• 作業フォルダをローカルリポジトリとして初期化する

git init

• 適当なファイルを新しく作成する（今回はファイルindex.htmlを作成）
• 「ソース管理」アイコンをクリックする
• ファイル名の右側にある「＋」アイコンを押し「変更」から「ステージされている変更」にする

• 「Message」と書かれた所にコメントを記入する
• メニュー上部にある「コミット」アイコン（チェックマーク）を押す

• GitHubのアカウントを登録する
• GitHubでリモートリポジトリを作成する

• リポジトリ名を入力する
• 公開先を「Private」にする
• 「Create rpository」を押す
• 次の画面で出てくる「…or push an existing repository from the command line」と書かれたところにあるコマンドをメモする
  • PCに作成したローカルリポジトリをGitHubにリモートリポジトリとして登録する..といった流れで作業を進めるために上記のコマンドを使用する

• ローカルリポジトリと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ブランチに対するプッシュ操作を行っている

• ファイル名の右側には『M』や『U』といった文字が表示される
• Gitリポジトリ上でのステータスで以下の意味になる
  • M：Modified（変更された）
  • U：Untracked（追跡対象外）

• ローカルリポジトリの変更内容を、リモートリポジトリに対してプッシュする

• git clone用のURLを取得する

• 「ソース管理」→「…」→「クローン」をクリックし、URLを入力する

• 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!')
}

'use strict';

• 追加することで未定義の変数の使用を禁止するなど、より厳格な文法でプログラムを書くことを求められる

• 「VSCODE+Node.ｊｓ」で環境構築する
  • npmでライブラリをインストール出来る様にする
• VSCODEの拡張機能「Debugger for Chrome」をインストールする
  • Chromeでデバッグ出来るようにする
• VSCODEの拡張機能「Live Server」をインストールする
  • 簡単にローカルサーバを立てることができる

• VSCODEのターミナルから以下のコマンドで、「TensorFlow.js」と「PoseNet」のライブラリをインストールする

npm install @tensorflow-models/posenet

以下のリンク先のGithHubにインストール時のnpmコマンドが載っている

• 開きたいHTMLファイルを右クリックして「 Open with Live Server 」を選択

作業ディレクトリの作成

• ターミナルの「mkdir」やエクスプローラなどで作業用フォルダを作成
• ターミナル「cd」でカレントディレクトリする

• 参考：Visual Studio Code で TypeScript 環境を設定してデバッグ実行する

プロジェクトフォルダ
│  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)

• オプションの「-ｙ」をつけることでデフォルト設定を使いとばす事ができる
  • テストだったら「-ｙ」をつけて問題ない？

npm init -y

• npxコマンドを使うと何かいい感じにインストールしてくれる？
• 参考：npxが結構良さそうな件について
  • ライブラリ作者がNode.js環境は整っている人に適当に何かを試させるのが簡単になる
• 参考：npxコマンドとは？ 何ができるのか？
  • npxコマンドを使うことでインストールされていないコマンドであっても自動的に探してインストール、実行まで行ってくれ

• 「tsconfig.json」ファイルがディレクトリ内に存在する場合、そのディレクトリがTypeScriptプロジェクトのルートであることを示す。
• この「tsconfig.json」ファイルは、プロジェクトのコンパイルに必要なルートファイルとコンパイラオプションを指定する。
• JavaScriptプロジェクトでは、jsconfig.json代わりに使用できる。このファイルはほとんど同じように機能するが、JavaScript関連のコンパイラフラグがデフォルトで有効になっています。
• 以下のコマンドで「tsconfig.json」を作成する

tsc --init

• 以下の例のようにtsconfig.jsonを設定する
  • 参考：tsconfig.jsonの全オプションを理解する（随時追加中）
  • 参考：【TypeScript】VSCodeでTypeScriptの開発環境を構築する

{
  "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,」で設定

• 「メニューバー」→「ターミナル」→「規定のビルドタスクの構成」

• 「tsc:build - tsconfig.json」を選ぶ
• ビルドタスク用の設定ファイル「./.vscode/tasks.json」ができる

• [実行とデバッグ]メニュー - [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」をインストールする
  • 複数のJavaScript を1つにバンドル（まとめる）する？
  • インストールが完了すると、インストールされたパッケージは「node_modules」というフォルダに保存される
  • 「package.json」と「package-lock.json」という npm の設定ファイルが生成される

npm install @tensorflow/tfjs @tensorflow-models/mobilenet

• webpack は src ディレクトリにエントリポイントの index.js ファイルさえあれば設定ファイルなしで処理（ビルド）を実行することができる

• プロジェクトのフォルダの中に dist 及び src という名前のフォルダを作成
  • ｓｒｃフォルダ
    • エントリポイントの名前は index.js にして src フォルダに配置
    • src フォルダの中にモジュールを格納するフォルダ modules を作成
  • distフォルダ
    • この例では表示用の index.html を配置する
    • dist フォルダには1つにまとめられた JavaScript ファイルが出力される

過程１（初期）

myProject
├── dist  //追加したフォルダ
├── node_modules
├── package-lock.json
├── package.json
└── src  //追加したフォルダ
    └── modules  //追加したフォルダ

過程２（webpackでのバンドル前）

myProject
├── dist
│   └── index.html  //追加したファイル 
├── node_modules  //npm でインストールされるパッケージ（webpack 等）
├── package-lock.json
├── package.json
└── src
    ├── index.js  //追加したファイル（エントリポイント） 
    └── modules
        └── foo.js  //追加したファイル（モジュール）

過程３（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 で読みこむことで、バンドルされたコードが実行される

const path = require('path')

• JavaScript(Node.js)において、あるファイルに存在する変数や関数を別のファイルで実行する機能
  • 「module.exports」と「exports 」の違いは何か？

module.exports = {

}

• webpackがビルドを始める際の開始点となるjsファイル
• デフォルトでは「./src/index.js」
• webpackはエントリーポイントに入ったあと、エントリーポイントがどのモジュールやライブラリに依存しているのかを判断し、処理してbundleと呼ばれるファイルに出力する

例１

module.exports = {
    entry: path.resolve(__dirname, "entry.js"),
}

例２

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

参考１：PowerShellでこのシステムではスクリプトの実行が無効になっているため、ファイル hoge.ps1 を読み込むことができません。となったときの対応方法
参考２：スクリプトを実行すると「このシステムではスクリプトの実行が無効になっているため、ファイル *スクリプトファイル名* を読み込むことができません。」エラーが発生する

だいたいスペルミス

package.jsonの"name"に大文字が使われている場合、小文字にする

• パッケージに脆弱性がある場合以下の警告文がでる

found 1 high severity vulnerability

以下のコマンドでパッチを当てる

npm audit fix

参考：npm run tscした時にnpm ERR! missing script: tscと出た時の対処法

• 「tsconfig.json」の「strict」がTrueになっていて、型チェックが厳格になっている。
• 該当する変数の型を定義する
  • 参考：タイプスクリプト：TS7006：パラメータ 'xxx'は暗黙的に 'any'型を持ちます
    

• @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 パッケージ名

• 現在の作業フォルダにインストールされているパッケージの一覧

Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope Process
npm ls --depth=0

• グローバルインストールされているパッケージの一覧

npm list -g