PWAとVue.jsでNEMウォレットアプリを作ろう!TypeScript導入 〜 TypeScriptで書いてみる

どうも、shoheiです。

NEMウォレットアプリの完成を目指してPWAアプリの作り方を連載していきます。

今回は前回の続きからTypeScriptの導入と導入した環境で実際にTypeScriptで書いてみましょう。

開発環境

  • macOS High Sierra 10.13.4
  • Google Chrome
  • vue-pwa-boilerplate 2.1.0
  • Vue.js
  • TypeScript

TypeScriptとは

TypeScriptとはマイクロソフトによって開発されたプログラミング言語であり、JavaScriptにオブジェクト指向を取り入れたプログラミング言語である(っと理解している)。TypeScriptは大規模なアプリケーション開発向きと言われている。

※オブジェクト指向
クラスや継承などの概念を取り入れて、コードを再利用できるように設計していこうぜといった考え方のこと。

なぜTypeScriptか

実はVue.jsはJavaScriptで組めます。なのでわざわざTypeScriptを導入しなくても開発できます。

じゃぁなぜわざわざTypeScriptを導入するのか?

理由は….

先生 @1amageek の教えに乗っかったからですw

私自身TypeScriptはまだ疎いため、JavaScriptとの比較はできませんがとりあえずやってみようぜと思った次第です(両者の具体的な良し悪しが見えてきたら別途記事にしようと思います)。

高機能エディタVScode

エディタとしてVScode(Visual Studio Code)をお勧めします。とても使いやすく、TypeScriptのコード補完などの機能が既に搭載されています。
pwa_vuejs_nem_wallet

開発効率を上げるため、以下のライブラリをVScodeにインストールしてみてください。

  • vetur
  • VueHelper
  • HTML Snippets
  • IntelliSense for CSS class names in HTML

以下の拡張画面からインストールできます。
pwa_vuejs_nem_wallet

TypeScriptの導入

前回作った環境にTypeScriptを導入していきましょう。

ライブラリをインストール

前回作ったeasy-walletに移動し、ライブラリをインストールします。

typescript、ts-loaderはTypeScriptのコードをビルドするために必要なライブラリ、vue-class-componentはクラススタイルでVueコンポーネントを組めるようにするためのライブラリです。

なお、ts-loaderのバージョンを4以上にするとwebpack周りでビルドエラーになります。

前回vue-pwa-boilerplateで取り入れたwebpackのバージョンが古いのが原因のようですが、ここではwebpackを上げずにts-loaderのバージョンを3.5にしてインストールします。

ビルド設定

tsconfig.json

ビルド設定するため tsconfig.json を作成します。

tsconfig.jsonを以下のように変更。

各パラメータについてこちらのサイトを参考にしてください。

webpack

ビルドできるようwebpackの設定を変更します。

build/webpack.base.conf.js

ビルド設定は完了です。

拡張子とコードを変更する

次は既に作成されているファイルの拡張子とJavaScriptで書かれているコードを変更します。

src/main.jsとsrc/router/index.jsを以下のように変更します。

src/main.js -> src/main.ts
src/router/index.js -> src/router/index.ts

次にApp.vueとHello.vueのscriptに lang=”ts” を追加します。

main.tsとindex.ts内でimportしているvueに拡張子を追加します。

src/App.vue

src/components/Hello.vue

src/main.ts

src/router/index.ts

vueファイルのインポート解決

今の状態ではvueファイルをインポートしてもTypeScriptが認識できないためエラーとなります。
そこでindex.d.tsなどに型定義を置く必要があります。

src配下に以下のように記述したindex.d.tsを置いて下さい。

src/index.d.ts

これで完了です。

TypeScriptで書いてみる

さぁ、ようやくここまできましたのでTypeScriptを使って書いていきましょう。

コードの変更

src/App.vueと src/components/Hello.vue をそれぞれ変更していきます。

src/App.vue

src/components/Hello.vue

App.vueのページ上でHello.vueをrouter-viewとcomponentを使って表示しています。

router-viewは src/index.ts で定義されている new Router の内容に紐づきます。
src/index.tsで以下のように定義していることで、router-view のトップページが Hello.vue となります。

その他はコードのコメントアウトを参考にしてください。

書き終えたら npm run dev で実行。

pwa_vuejs_nem_wallet

うむ、ええ感じや。

問題なく実行できたら npm run build でビルドしてGitHubにPushしましょう!

更新されるまで少し待ってからGitHub Pagesで確認します。

pwa_vuejs_nem_wallet

ええ感じですね、ちゃんとPWA起動で反映されています。

もし反映されない場合はブラウザが古いキャッシュを見ているので、ページを更新するかキャッシュを削除するかして確認してください。

次回予告

お疲れ様でした!

前回のような感動はないと思いますがいかがでしたでしょうか。

次回からいよいよNEMウォレットアプリの開発に進みたいと思います!
GitHub

  • このエントリーをはてなブックマークに追加

SNSでもご購読できます。

コメントを残す

*

Translate »