近年、汎用的な量子コンピュータを実現するための世界各国の企業がしのぎを削っている。超伝導回路を用いた手法により現在100物理量子ビット程度の量子計算が報告されているが、汎用量子コンピュータの実現には100万程度の量子ビット数が必要とされており、量子ビット数の増大が大きな課題となっている。
この課題を解決すると期待されているのが光量子コンピュータだ。装置サイズを大きくすることなく時間軸上に量子ビットを増やすという「時間領域多重化技術」とゲート型量子操作と等価な操作ができる「手法測定誘起型量子操作」という従来とは全く異なるアプローチを用いることにより、圧倒的に大規模な汎用量子計算を可能にすると言われている。
そして今回、3者は低損失な光ファイバー接続型量子光源モジュール(光パラメトリック増幅モジュール)を新たに開発した。NTTが培ってきた光通信デバイス実装技術を用いることで、低損失な光ファイバー接続型のモジュールとして組み上げた。
⇧「光量子コンピュータ」の課題であった「光損失」の割合を大幅に減少できたらしいですと。
「光量子コンピュータ」が「ゲームチェンジャー（game changer）」となることは間違いなさそう気はしますね。
今回は、TypeScript周りについてです。
レッツトライ～。
唐突に出現するtsconfig.jsonと言う名のファイル
Typescriptのドキュメントを読んでいて、
⇧「tsconfig.json」なるファイルが唐突に出てくるのですが、何がすごいって、「tsconfig.json」がどうやって作られるのかの説明が一切ないというね...流石はMicrosoftさん、安定の不親切さは健在です。
で、海外でも、同様の疑問を抱いてる人はおり、
It is supported since the release of TypeScript 1.6.
The correct command is --init not init:
$ tsc --init
Try to run in your console the following to check the version:
$ tsc -vhttps://www.typescriptlang.org/docs/handbook/tsconfig-json.html
⇧ ということらしく、「tsc」コマンドでの作成をサポートしてくれるようになったみたいなのですが、ドキュメントの「Get Started」とかに載せてくれれば良いものを何故にMicrosoftは行わないのか、不思議でしょうがないのだが...
一応、
⇧「tsc CLI Options」に説明はあるのだけど、ドキュメントの「Get Started」とかで「tsc --init」や「tsconfig.json」について説明があったほうが良い気がするのだけど、偉い人の考えることはよく分かりませんな...
今回は、
⇧ 上記の記事で作成していた「TypeScript」用のプロジェクトを利用してます。
「VS Code（Visual Studio Code）」で「TypeScript」用のプロジェクトとして用意していたフォルダを開き、「表示(V)」から「ターミナル」を選択し、
「Command Prompt」を選択し、
「tsconfig.json」を作成するコマンドを実行します。
そうすると、「tsconfig.json」ファイルが作成されるのですが、「tsconfig.json」で設定できる項目については、
⇧ 上記サイト様が詳しいです。
VS Code（Visual Studio Code）のextensionで追加は必要？
とりあえず、「VS Code（Visual Studio Code）」のドキュメントによると、
VS Code provides many features for TypeScript out of the box. In addition to what comes built-in, you can install an extension for greater functionality.
https://code.visualstudio.com/docs/languages/typescript#_typescript-extensions
⇧ ということなのですが、「TypeScript」に関する「extension（拡張機能）」について何を追加すれば良いのかサッパリですな...
⇧ 上記サイト様が参考になるかと。
とりあえず、
- ESLint
- TypeScript Importer
- TypeScript Import Sorter
- Move TS
- Prettier
の5つは追加しておいたほうが良さ気の模様、ということで「VS Code（Visual Studio Code）」で、上記の5つの「extension（拡張機能）」を追加しときました。
デバッグはどうするの？
動作確認したくなる時に、デバッグしたいことあるあるだよね？
⇧ 上記サイト様が参考になるかと。
「VS Code（Visual Studio Code）」の公式のドキュメントによりますと、
VS Code has built-in debugging support for the Node.js runtime and can debug JavaScript, TypeScript, or any other language that gets transpiled to JavaScript.
For debugging other languages and runtimes (including PHP, Ruby, Go, C#, Python, C++, PowerShell and many others), look for Debuggers extensions in the VS Code Marketplace or select Install Additional Debuggers in the top-level Run menu.
⇧「TypeScript」や「JavaScript」については、デフォルトで「デバッグ」のサポートをしてるけど、他の言語の場合は「extension（拡張機能）」として追加しないと「デバッグ」できないよ、ということらしい。
まぁ、今回は「TypeScript」を使っていく感じなので、デフォルトで「デバッグ」が使えるということらしい。
更にドキュメントを読み進めていくと、
Launch configurations
To run or debug a simple app in VS Code, select Run and Debug on the Debug start view or press F5 and VS Code will try to run your currently active file.
However, for most debugging scenarios, creating a launch configuration file is beneficial because it allows you to configure and save debugging setup details. VS Code keeps debugging configuration information in a launch.json file located in a .vscode folder in your workspace (project root folder) or in your user settings or workspace settings.
⇧「launch.json」ファイルを作るのをオススメと言っていて、「.vscode」フォルダも必要とのこと。
「.vscode」フォルダは何なのかと言うと、
VS Code provides two different scopes for settings:
- User Settings - Settings that apply globally to any instance of VS Code you open.
- Workspace Settings - Settings stored inside your workspace and only apply when the workspace is opened.
Workspace settings override user settings. Workspace settings are specific to a project and can be shared across developers on a project.
Note: A VS Code "workspace" is usually just your project root folder. Workspace settings as well as debugging and task configurations are stored at the root in a
.vscodefolder. You can also have more than one root folder in a VS Code workspace through a feature called Multi-root workspaces. You can learn more in the What is a VS Code "workspace"? article.
⇧とあるように、「VS code（Visual Studio Code）」自体の「設定」に、
- User Settings
- Workspace Settings
の2種類あるらしく、そのうちの「Workspace Settings」は、「.vscode」フォルダに保存される「debugging」や「task」の設定ということらしいですと。
「VS code（Visual Studio Code）」で、「TypeScript」以外の言語も使うような場合は、「Workspace Settings」を利用しておけば、各プログラミング言語毎の「設定」を独立させておけるってことですかね。
イメージ的には、
⇧ 上図のような感じで、プロジェクト毎に「設定」を変えたいような場合は「Workspace Settings」にしたほうが良いと思われるので、「.vscode」フォルダを作っておく感じになるんですかね？
なんか、
ユーザー設定とワークスペース設定
マルチルートワークスペースをVS Codeで開いた場合には、個々のフォルダに対して行ったワークスペース設定は基本的には適用されず、マルチルートワークスペースに対して行った設定が適用される。
Visual Studio Codeの設定「虎の巻」：IDE編：特集：Visual Studio Codeを使いこなそう！（1/3 ページ） - ＠IT
⇧「Multi-root Workspace」を利用している場合は、「Multi-root Workspace」の「設定」が一番優先されて読み込まれるらしい。
「User Settings」には、本当に共通で使う「設定」だけを記述しておくような感じになるんかな。
今回は、「Workspace Settings」を使っていくことに。「VS Code（Visual Studio Code）」で「ファイル(F)」>「ユーザー設定」>「設定」を選択。
「ワークスペース」タブを選択し、カーソルを合わせると「設定(JSON)を開く」と表示されるアイコンをクリック。
「.vscode」フォルダと「settings.json」ファイルが作成されました。
⇧「settings.json」ファイルに「設定」を追加していく感じなんですね。
なんというか、「settings.json」とかも中身が空で作成されるなら、コマンドで「.vscode」ディレクトリと「settings.json」ファイルを作成でも良かったかもしれないですね。
ドキュメントを見た感じでは、
By default VS Code shows the Settings editor, but you can still edit the underlying settings.json file by using the Open Settings (JSON) command or by changing your default settings editor with the workbench.settings.editor setting.
Depending on your platform, the user settings file is located here:
- Windows
%APPDATA%\Code\User\settings.json - macOS
$HOME/Library/Application Support/Code/User/settings.json - Linux
$HOME/.config/Code/User/settings.json
The workspace settings file is located under the .vscode folder in your root folder.
Note: In case of a Multi-root Workspace, workspace settings are located inside the workspace configuration file.
⇧「User Settings」を使うにしろ「Workspace Settings」を使うにしろ、「設定」は「settings.json」ファイルに追加していく感じですかね、「settings.json」ファイルの配置場所が異なってはいるけれど。
一応、「User Settings」の「settings.json」ファイルの例は、
Default Settings
Below are the Visual Studio Code default settings and their values. You can also view the default values in the Settings editor.
⇧ 載せてくれてはいるのだけど。
して、「TypeScript」プロジェクトにおける「settings.json」には、どんな「設定」を追加すれば良いのか？
「extension（拡張機能）」と「settings.json」
どうやら、追加する「extension（拡張機能）」によっては、「settings.json」側で「設定」の追加が必要になってくる模様。
- フォーマットはprettierに任せよう(eslint-config-prettierを使用)
- VSCodeの設定はeditor.codeActionsOnSaveとeditor.defaultFormatterを設定しよう
⇧ 上記サイト様によりますと、「VS Code（Visual Studio Code）」の「extension（拡張機能）」として「ESLint」「Prettier」ってものを導入してる場合は、「settings.json」に設定しておいたほうが良い項目があるらしいですと。
eslint-config-prettierのv8.0.0からextendsの書き方が簡単になりました。
⇧ ということらしいのですが、そもそも、「eslint-config-prettier」が何なのか？
Turns off all rules that are unnecessary or might conflict with Prettier.
⇧ なんか「ESLint」と「Prettier」でバッティングしちゃう部分を回避してくれるのが、「eslint-config-prettier」というものらしく、「npm」でインストールが必要みたい。
⇧ とりあえず、最新のものをインストールしてみようかと。
⇧ インストールできたようです。
そしたらば、「.eslintrc.*」ってファイルを作成します。「拡張子」が「ワイルドカード」になっているのだけど、ネットの情報を見た限りだと「.js」としてる情報が多いので、「.js」にしときました。
で、「eslint-config-prettier」のバージョンが8以上だと、「.eslintrc.*」ファイルの中身は、以下のような記述で良いようです。
module.exports = exports = {
env: {
es2020: true,
node: true,
},
parser: "@typescript-eslint/parser",
parserOptions: {
sourceType: "module",
ecmaVersion: 2020,
tsconfigRootDir: __dirname,
project: ["./tsconfig.eslint.json"],
},
extends: [
"eslint:recommended",
"plugin:@typescript-eslint/recommended",
"prettier",
],
};
⇧ 上記で読み込んでいる「tsconfig.eslint.json」ファイルを作成で。
ファイルを以下のように編集。
{
"extends": "./tsconfig.json",
"include": [
"src/**/*.ts",
".eslintrc.js"
],
"exclude": [
"node_modules",
"dist"
]
}
そしたらば、「settings.json」も編集で。
{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"eslint.format.enable": false,
"editor.formatOnSave": true,
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
},
"[json]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
},
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
},
"editor.lineNumbers": "on",
"editor.rulers": [80],
"editor.wordWrap": "on",
"eslint.packageManager": "yarn",
"files.insertFinalNewline": true,
"files.trimTrailingWhitespace": true,
"npm.packageManager": "yarn",
"typescript.enablePromptUseWorkspaceTsdk": true
}
⇧ 上記のように編集で保存。
「npm」の「モジュール」と「package.json」
そして、「typesync」なる「モジュール」もインストールしておくと良いらしいという話が...
う～む、次から次へと新たな情報が出てきて、環境構築が終わらんではないか...
⇧ 上記サイト様を参考にインストールしておきますか。
バージョンは、0.8.0が最新ということらしい。
では、インスト～ル。
そしたら、「package.json」に、「scripts」を追加しておくのが良いらしいので追加しておきます。
{
"dependencies": {
"typescript": "^4.5.4"
},
"devDependencies": {
"eslint-config-prettier": "^8.3.0",
"typesync": "^0.8.0"
},
"scripts": {
"preinstall": "typesync || :"
}
}
⇧ で保存。
利用する「npm」の「モジュール」や「VS Code（Visual Studio Code）」の「拡張機能」にもよるとは思いますが、
⇧ 上記のファイルが揃ってれば、OKってことなんですかね？
まぁ、必須ではないファイルとかもあると思うけど。
とりあえず、「VS Code（Visual Studio Code）」で「TypeScript」の環境構築が整ったということにしておきますか。
毎度モヤモヤ感が半端ない...
今回はこのへんで。
