２０３０年ごろの実用化が見込まれる次世代の移動通信システム「６Ｇ」の実現に不可欠な高速・大容量の暗号技術を開発することに、兵庫県立大大学院情報科学研究科の五十部孝典准教授らとＫＤＤＩ総合研究所のグループが世界で初めて成功した。スパコンをはるかに上回る性能の量子コンピューターが実現しても解読に２０兆年以上かかる安全性と、毎秒１００ギガバイト以上のデータを暗号化できる高速性を兼ね備えるという。
⇧ 量子コンピューターが同じような通信条件と技術で暗号の解読を試みたら、どうなるのかが純粋に気になるところではありますな。
というわけで、Vue.jsについてです。
レッツトライ～。
TypeScriptはJavaScriptフレームワークと併用するが一般的？
ネットの情報を見た限りだと、「TypeScript」については「Rest（Representational State Transfer）」のみの用途で使う場合を除いて、ほとんど「JavaScriptフレームワーク」と併用されることが多いっぽい。
Webシステムのフロント側（画面側）だと、
といったような「拡張子」のファイル、いわゆる『静的ファイル』を表示する感じになるようです。
各「JavaScriptフレームワーク」で用意されている、それぞれの「拡張子」のファイルの中で、「TypeScript」を使っていく感じになることが多いんかな？
| JavaScriptフレームワーク | 独自の拡張子 |
|---|---|
| React | .tsx |
| Vue.js | .vue |
| Angular | なし |
ただ、いまのところ、3大「JavaScriptフレームワーク」と言われるものについて、「Angular」については、独自の「拡張子」ってのは特にないみたいなので、そのまま「TypeScript」を利用する感じになるみたい。
勿論、「React」や「Vue.js」でもそのまま「TypeScript」を利用はできるみたい、つまり「.ts」の「拡張子」での利用ってことですね。
ちなみに、最近、人気の「Svelte」という「JavaScriptフレームワーク」でも、
It's been by far the most requested feature for a while, and it's finally here: Svelte officially supports TypeScript.
⇧「TypeScript」がサポートされたようです。
ちなみに、「Svelte」は、
Svelteが、最近行われた2つの調査で 最も愛されているWebフレームワーク 、 開発者が最も満足しているフレームワーク にそれぞれ選出されたことを誇りに思います。あなたにもきっと気に入って頂けると思います。もっと詳しく知りたい方は こちらの紹介記事 をご覧ください。
⇧ ということの模様。
学習コストが低ければ良いんですがね...
まぁ、何が言いたいかと言うと、Webサーバーとかにデプロイする際は、最終的に「TypeScript」や「JavaScriptフレームワーク」の独自の「拡張子」のファイルについては、コンパイルして「静的ファイル」に変換しておく必要があるってことですかね。
フロントエンドだと、「npm」や「yarn」といったようなビルドツールで行う感じかな？
「native」なアプリケーションの場合は、
https://medium.com/learning-lab/lessons-learned-on-writing-apps-with-nativescript-vuejs-bd6a3066f0cb
⇧ 上図のようなイメージになるらしい。
う～ん、ビルドとかしてるのかよう分からん...
VS Code（Visual Studio Code）のVue.jsの拡張機能
とりあえず、「Vue.js」で「TypeScript」を使っていこうと思いますが、「VS Code（Visual Studio Code）」で「Vue.js」用の「拡張機能」を追加したほうが良いらしいのですが、「VS Code（Visual Studio Code）」の公式のドキュメントによりますと、
一応、
- Vetur
か、
- Vue VS Code Extension Pack
- Vetur
- Vue Snippets
- Prettier - Code formatter
- Bracket Pair Colorizer
- JavaScript（ES6）code snippets
- Formmatting toggle
- npm Intellisense
- Bookmarks
- jumpy
- ES6 Snippets
- Ngiht Owl
の「拡張機能」をインストールしとけばOKらしい。
「Vue VS Code Extension Pack」は、いろいろな「拡張機能」の詰め合わせ的な感じらしい。
自分の環境では、「Vetur」は依然にインストールしていたので有効になってました。
TypeScriptをVue.jsで利用してみる
「npm」のモジュールで「Vue.js」に関するものをインストールする必要があるのでインストール。
バージョン確認。
⇧「Vue CLI」は、
バージョンによって、インストールするものが変わるらしい。
肝心の「Vue.js」のバージョンと「Vue CLI」のバージョンの関係性についてのリストとかは無いのですが、
Warning regarding Previous Versions
The package name changed from vue-cli to @vue/cli. If you have the previous vue-cli (1.x or 2.x) package installed globally, you need to uninstall it first with npm uninstall vue-cli -g or yarn global remove vue-cli.
Node Version Requirement
Vue CLI 4.x requires Node.js version 8.9 or above (v10+ recommended). You can manage multiple versions of Node on the same machine with n, nvm or nvm-windows.
⇧ ザックリとした説明は掲載されてる模様。
いつも、思うのは、「モジュール」の対応関係のマトリックス表みたいなものを作って欲しいのよね...
とりあえず、自分の環境では、「Node.js」のバージョンは「Vue CLI 4.x」をインストールできる条件を満たしてました。（自分は「nvm-windows」をインストールして、「Node.js」のバージョンを管理してます）
「@vue/cli」をインストール。
⇧ 脆弱性があるって...そのあたりは解決してくれないんだね...
「npm audit fix」を試してみてとあったので、試してみることに。
⇧ fixされとらんやん...
いまのところ、対応方法としては、
⇧ 手動で頑張ってアップデートするか、
kossy-web-engineer.hatenablog.com
⇧「npm-check-updates」って「モジュール」を利用するか、などがある模様。
何て言うか、「npm」って「パッケージ管理ツール」として機能してないってどうなのよ...
「npm-check-updates」って「モジュール」を利用する方法を試してみることに。
試してみたけども、脆弱性のある依存関係のパッケージがあるのに、パッケージは最新という結果になってしまう...
どうやら、
⇧ 上記サイト様によりますと、対応フローがある模様。
ただ、
⇧ 自動では解決されないので、手動で頑張るしかない模様...
なんか、
せめて、4件の高リスク脆弱性は解消したいのですが
特にその必要はないのではないでしょうか？
@vue/cliはCLIである以上、（あえて使わせるような構成をとらないのであれば）ローカルからしかアクセスできません。そして、@vue/cliにはファイルではなくコマンドを与えて使うものなので、自分で変なコマンドを入力しなければ問題に当たることは考えづらいです。
⇧「Vue CLI」の場合は、 対応しなくても特に支障ないっぽい...気になるけど。
というわけで、「Vue CLI」で「Vue.js」を使えるようにする。
⇧ 上記記事で作成しておいた「TypeScript」プロジェクトのディレクトリで「Vue.js」を導入していく。
今回は、「Manually select features」を選択。
「TypeScript」「Router」を追加で。「Enterキー」押下。
「Vue.js」のバージョンは2.x系で。「Enterキー」押下。
あとは、以下のような感じの選択してます。
⇧ なんか、脆弱性が多いのが気になりますな...
⇧ 途中から、「Vue.js」を始めようとすると、ディレクトリ構造がかなりカオスな感じになってるんだけど、実際の開発現場で途中から「Vue.js」を取り入れたい場合ってどうするのが良いんですかね？
とりあえず、開発用サーバーを起動し、
「ファイアウォール」のダイアログが出たら、「アクセスを許可する(A)」を押下。
「Vue.js」のアプリケーションが起動したらしいので、
ブラウザでアクセス。
一旦、開発用サーバーを停止で。
Vue.jsでのTypeScriptのコーディング方法がいろいろある話
Vue.jsで混乱するのは、
Vue.jsでTypeScriptを使うときに選択肢となるのは、Vue.extendベースを適用するか、クラスコンポーネントを適用するかの2択になります。
ざっくり言うと、Vue.extendベースではTypeScriptを導入していないと場合とほとんど変わりませんが、クラスコンポーネントではかなり大きく書き方が変わるのが特徴です。
⇧ といったように、コーディングの方法が統一されてないという前提知識が無いと、どのコーディング方法を採用してるか分からんってことですね。
ネットの情報を見た感じ、
⇧「Vue.js」の2.x を使う場合、
- 「クラスコンポーネント」派
- 「Vue.extend」派
とで分かれるみたい。
挙句の果てに、「Vue.js」の3系になると、見事に互換性を無視した破壊的な変更とも言えますが、「Composition API」派が爆誕してるというね...いい加減にしてよね。
vue.config.jsがないんだけど...
同様の疑問を抱えておられる方がいまして、
⇧ 問答無用で作成してらっしゃる...
まぁ、落ち着け、こんな時に役に立つはずなのが、公式のドキュメントでらっしゃい。
vue.config.js
vue.config.js is an optional config file that will be automatically loaded by @vue/cli-service if it's present in your project root (next to package.json). You can also use the vue field in package.json, but do note in that case you will be limited to JSON-compatible values only.
⇧ 駄目やん...
何で「vue.config.js」が存在してる前提で話を進めてるのかが全く理解できない...まず知りたいのは、「vue.config.js」は「Vue CLI」で作成されていなければならないものなのか、自分で作成するしかないのかだと思うんだけど...
というか、「TypeScript」や「VS Code（Visual Studio Code ）」のドキュメントを読んだときにも思ったけど、内輪だけで理解するようなの止めて欲しいよね、本当に。
とりあえず、「package.json」と同じ階層に作成すれば良いらしいですと。
⇧ 「Vue.js」のプロジェクトのほうの「package.json」と同じ階層に「vue.config.js」を作成していきます。
で、ファイルは、一旦、以下のような感じで。
// vue.config.js
/**
* @type {import('@vue/cli-service').ProjectOptions}
*/
module.exports = {
// options...
};
で、ドキュメントを見ると、「vue.config.js」でデフォルト値の説明があるんだけど、デフォルト値を確認するコマンドとかの説明がないというね...
仕方ないので普通に検索したところ、「@vue\cli-service\lib\options.js」で設定されてました。ただ、ドキュメントと内容が嚙み合ってないところがあるんだけどね...そもそもコメントアウトされちゃってるのとかあるし...
exports.defaults = () => ({
// project deployment base
publicPath: '/',
// where to output built files
outputDir: 'dist',
// where to put static assets (js/css/img/font/...)
assetsDir: '',
// filename for index.html (relative to outputDir)
indexPath: 'index.html',
// whether filename will contain hash part
filenameHashing: true,
// boolean, use full build?
runtimeCompiler: false,
// deps to transpile
transpileDependencies: [
/* string or regex */
],
// sourceMap for production build?
productionSourceMap: !process.env.VUE_CLI_TEST,
// use thread-loader for babel & TS in production build
// enabled by default if the machine has more than 1 cores
parallel: hasMultipleCores(),
// multi-page config
pages: undefined,
// <script type="module" crossorigin="use-credentials">
// #1656, #1867, #2025
crossorigin: undefined,
// subresource integrity
integrity: false,
css: {
// extract: true,
// modules: false,
// sourceMap: false,
// loaderOptions: {}
},
// whether to use eslint-loader
lintOnSave: 'default',
devServer: {
/*
open: process.platform === 'darwin',
host: '0.0.0.0',
port: 8080,
https: false,
hotOnly: false,
proxy: null, // string | Object
before: app => {}
*/
}
})
⇧「vue.config.js」を作成した時点で、デフォルト値が有効になるってことなのかね？
う～ん、Vue.jsカオス過ぎて、本当に学習コストが低いのか疑問で仕方ない...
ちょっと、あまりにも、情報が錯綜としてるので、一旦整理が必要ですな...
毎度モヤモヤ感が半端ない...
今回はこのへんで。
