VS Code(Visual Studio Code)でTypeScriptをVue.jsで利用してみる

f:id:ts0818:20220107212347j:plain

www.kobe-np.co.jp

 2030年ごろの実用化が見込まれる次世代の移動通信システム「6G」の実現に不可欠な高速・大容量の暗号技術を開発することに、兵庫県立大大学院情報科学研究科の五十部孝典准教授らとKDDI総合研究所のグループが世界で初めて成功した。スパコンをはるかに上回る性能の量子コンピューターが実現しても解読に20兆年以上かかる安全性と、毎秒100ギガバイト以上のデータを暗号化できる高速性を兼ね備えるという。

6G実現に不可欠な暗号技術 兵庫県立大グループ、開発に世界初成功|総合|神戸新聞NEXT

量子コンピューターが同じような通信条件と技術で暗号の解読を試みたら、どうなるのかが純粋に気になるところではありますな。

というわけで、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フレームワーク」でも、

svelte.dev

It's been by far the most requested feature for a while, and it's finally here: Svelte officially supports TypeScript.

https://svelte.dev/blog/svelte-and-typescript

⇧「TypeScript」がサポートされたようです。

ちなみに、「Svelte」は、

svelte.jp

Svelteが、最近行われた2つの調査で 最も愛されているWebフレームワーク 、 開発者が最も満足しているフレームワーク にそれぞれ選出されたことを誇りに思います。あなたにもきっと気に入って頂けると思います。もっと詳しく知りたい方は こちらの紹介記事 をご覧ください。

https://svelte.jp/

⇧ ということの模様。

学習コストが低ければ良いんですがね...

まぁ、何が言いたいかと言うと、Webサーバーとかにデプロイする際は、最終的に「TypeScript」や「JavaScriptフレームワーク」の独自の「拡張子」のファイルについては、コンパイルして「静的ファイル」に変換しておく必要があるってことですかね。

フロントエンドだと、「npm」や「yarn」といったようなビルドツールで行う感じかな?

「native」なアプリケーションの場合は、

medium.com

⇧ 上図のようなイメージになるらしい。

う~ん、ビルドとかしてるのかよう分からん...

VS CodeVisual Studio Code)のVue.jsの拡張機能

とりあえず、「Vue.js」で「TypeScript」を使っていこうと思いますが、「VS CodeVisual Studio Code)」で「Vue.js」用の「拡張機能」を追加したほうが良いらしいのですが、「VS CodeVisual Studio Code)」の公式のドキュメントによりますと、

code.visualstudio.com

一応、

  • 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」は依然にインストールしていたので有効になってました。

f:id:ts0818:20220102115046p:plain

TypeScriptをVue.jsで利用してみる

「npm」のモジュールで「Vue.js」に関するものをインストールする必要があるのでインストール。

バージョン確認。

f:id:ts0818:20220103080801p:plain

f:id:ts0818:20220103080838p:plain

⇧「Vue CLI」は、

  • バージョン 3.0以上
  • バージョン 3.0未満

バージョンによって、インストールするものが変わるらしい。

肝心の「Vue.js」のバージョンと「Vue CLI」のバージョンの関係性についてのリストとかは無いのですが、

cli.vuejs.org

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.

https://cli.vuejs.org/guide/installation.html

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 nnvm or nvm-windows.

https://cli.vuejs.org/guide/installation.html

⇧ ザックリとした説明は掲載されてる模様。

いつも、思うのは、「モジュール」の対応関係のマトリックス表みたいなものを作って欲しいのよね...

とりあえず、自分の環境では、「Node.js」のバージョンは「Vue CLI 4.x」をインストールできる条件を満たしてました。(自分は「nvm-windows」をインストールして、「Node.js」のバージョンを管理してます)

f:id:ts0818:20220103082459p:plain

「@vue/cli」をインストール。

f:id:ts0818:20220103084054p:plain

f:id:ts0818:20220103084157p:plain

脆弱性があるって...そのあたりは解決してくれないんだね...

「npm audit fix」を試してみてとあったので、試してみることに。

f:id:ts0818:20220103084728p:plain

f:id:ts0818:20220103084757p:plain

⇧ fixされとらんやん...

いまのところ、対応方法としては、

overworker.hatenablog.jp

⇧ 手動で頑張ってアップデートするか、

kossy-web-engineer.hatenablog.com

⇧「npm-check-updates」って「モジュール」を利用するか、などがある模様。

何て言うか、「npm」って「パッケージ管理ツール」として機能してないってどうなのよ...

「npm-check-updates」って「モジュール」を利用する方法を試してみることに。

f:id:ts0818:20220103090810p:plain

f:id:ts0818:20220103090928p:plain

試してみたけども、脆弱性のある依存関係のパッケージがあるのに、パッケージは最新という結果になってしまう...

f:id:ts0818:20220103092045p:plain

どうやら、

qiita.com

⇧ 上記サイト様によりますと、対応フローがある模様。

ただ、

f:id:ts0818:20220103093434p:plain

⇧ 自動では解決されないので、手動で頑張るしかない模様...

なんか、

teratail.com

せめて、4件の高リスク脆弱性は解消したいのですが

特にその必要はないのではないでしょうか?

@vue/cliCLIである以上、(あえて使わせるような構成をとらないのであれば)ローカルからしかアクセスできません。そして、@vue/cliにはファイルではなくコマンドを与えて使うものなので、自分で変なコマンドを入力しなければ問題に当たることは考えづらいです。

Vue.js - Vue-CLIのみのインストールで脆弱性警告メッセージが出る|teratail

⇧「Vue CLI」の場合は、 対応しなくても特に支障ないっぽい...気になるけど。

というわけで、「Vue CLI」で「Vue.js」を使えるようにする。

ts0818.hatenablog.com

⇧ 上記記事で作成しておいた「TypeScript」プロジェクトのディレクトリで「Vue.js」を導入していく。

今回は、「Manually select features」を選択。

f:id:ts0818:20220103143731p:plain

「TypeScript」「Router」を追加で。「Enterキー」押下。

f:id:ts0818:20220103144048p:plain

「Vue.js」のバージョンは2.x系で。「Enterキー」押下。

f:id:ts0818:20220103144111p:plain

あとは、以下のような感じの選択してます。

f:id:ts0818:20220103144648p:plain

f:id:ts0818:20220103144929p:plain

⇧ なんか、脆弱性が多いのが気になりますな...

f:id:ts0818:20220103145041p:plain

⇧ 途中から、「Vue.js」を始めようとすると、ディレクトリ構造がかなりカオスな感じになってるんだけど、実際の開発現場で途中から「Vue.js」を取り入れたい場合ってどうするのが良いんですかね?

とりあえず、開発用サーバーを起動し、

f:id:ts0818:20220103145519p:plain

ファイアウォール」のダイアログが出たら、「アクセスを許可する(A)」を押下。

f:id:ts0818:20220103145326p:plain

「Vue.js」のアプリケーションが起動したらしいので、

f:id:ts0818:20220103145400p:plain

ブラウザでアクセス。

f:id:ts0818:20220103145448p:plain

一旦、開発用サーバーを停止で。

f:id:ts0818:20220103145546p:plain

 

Vue.jsでのTypeScriptのコーディング方法がいろいろある話

Vue.jsで混乱するのは、

zenn.dev

Vue.jsでTypeScriptを使うときに選択肢となるのは、Vue.extendベースを適用するか、クラスコンポーネントを適用するかの2択になります。
ざっくり言うと、Vue.extendベースではTypeScriptを導入していないと場合とほとんど変わりませんが、クラスコンポーネントではかなり大きく書き方が変わるのが特徴です。

最小限の構成でVue.extendとクラスコンポーネントを比べてみる

なお、Vueの3系では、クラスコンポーネント以外にComposition APIといった新しい書き方が主流になりつつありますが、

最小限の構成でVue.extendとクラスコンポーネントを比べてみる

⇧ といったように、コーディングの方法が統一されてないという前提知識が無いと、どのコーディング方法を採用してるか分からんってことですね。

ネットの情報を見た感じ、

blog.isystk.com

engineering.linecorp.com

⇧「Vue.js」の2.x を使う場合、

とで分かれるみたい。

挙句の果てに、「Vue.js」の3系になると、見事に互換性を無視した破壊的な変更とも言えますが、「Composition API」派が爆誕してるというね...いい加減にしてよね。

vue.config.jsがないんだけど...

同様の疑問を抱えておられる方がいまして、

stackoverflow.com

qiita.com

⇧ 問答無用で作成してらっしゃる...

まぁ、落ち着け、こんな時に役に立つはずなのが、公式のドキュメントでらっしゃい。

cli.vuejs.org

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.

https://cli.vuejs.org/config/#vue-config-js

⇧ 駄目やん...

何で「vue.config.js」が存在してる前提で話を進めてるのかが全く理解できない...まず知りたいのは、「vue.config.js」は「Vue CLI」で作成されていなければならないものなのか、自分で作成するしかないのかだと思うんだけど...

というか、「TypeScript」や「VS CodeVisual Studio Code )」のドキュメントを読んだときにも思ったけど、内輪だけで理解するようなの止めて欲しいよね、本当に。

とりあえず、「package.json」と同じ階層に作成すれば良いらしいですと。

f:id:ts0818:20220107205412p:plain

⇧ 「Vue.js」のプロジェクトのほうの「package.json」と同じ階層に「vue.config.js」を作成していきます。

f:id:ts0818:20220107205605p:plain

で、ファイルは、一旦、以下のような感じで。

// 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カオス過ぎて、本当に学習コストが低いのか疑問で仕方ない...

ちょっと、あまりにも、情報が錯綜としてるので、一旦整理が必要ですな...

毎度モヤモヤ感が半端ない...

今回はこのへんで。