3 step wallet を作成した話　その３　〜とりあえずの達成感〜

#エンジニアじゃないけどアプリが作りたかった

こんにちは。まつもとかづまさと申します
僕はこの記事を書いている現在は障害者支援施設で支援員として働いています。

今回は３ step wallet　という知的障がいの方でも「暗号通貨決済をできるようにする」という目的で作成したアプリの話です

3 step walletは[こちら](https://3step.app/#/)

##今日の記事の流れ
<img width="1014" alt="スクリーンショット 2018-09-30 12.30.48.png" src="https://qiita-image-store.s3.amazonaws.com/0/253981/72c48468-0818-53c3-c21d-05f50df47989.png">

##では本編へ
[PWAとVue.jsでNEMウォレットアプリを作ろう！TypeScript導入 〜 TypeScriptで書いてみる]
(http://hobbydevelop.info/pwa_vuejs_nem_1)

まず注意して欲しいのがライブラリのインストール先です。
実際に僕はこの時はターミナルを使っていたので少し違います。

<img width="489" alt="スクリーンショット 2018-09-30 12.34.02.png" src="https://qiita-image-store.s3.amazonaws.com/0/253981/c29cfa1e-4639-5163-69ac-a1ff10701c89.png">
この
```cd 3-step-wallet```
がとても重要になりました。
前回の記事で書いたことなのですがライブラリがファイルにインストールされていない状態になっていたので、
```npm run dev```
ではうまくできていたのがGitHub　Pagesで公開してもうまく反映されないという現象が起きていました。

ではなぜこういうことになるのかというと、僕は今現在
[Visual Studio Code](https://azure.microsoft.com/ja-jp/products/visual-studio-code/)を使っています。
そのVSCだとどういう現象が起きるのかというと。
<img width="683" alt="スクリーンショット 2018-09-30 12.39.04.png" src="https://qiita-image-store.s3.amazonaws.com/0/253981/a6b83b62-648b-46fe-a698-3b0bfe71babd.png">
自動的にターミナルを開くと
```cd 3-step-wallet```
をしてくれます。なのであまり意識せずにライブラリをインストールすることができます。

##vue-cli2とvue-cli3での違い
###vue-cli2
このバージョンではTypescriptは自分で設定するという環境になっていました。
なのでこの記事でも細かな設定をTypescriptに合わせて変更していたと思います。

方法に関しては[PWAと Vue.jsでNEMウォレットアプリを作ろう！ウォレット作成]
(http://hobbydevelop.info/pwa_vuejs_nem_2)をしっかりと再現しましょう！！

###vue-cli3
ではvue-cli3ではどのようにすればいいのかまずは記事通りに再現します。

GitHub pagesに公開する方法は[この記事](https://qiita.com/kazumasamatsumo/items/1d1dbfc3273c0bc9c140)でも紹介したように色々な変更点もあります。

###まずはファイルを作成してからdevなのがserveに変わっているところ

こちらがvue-cli2のバージョンでの確認
```npm run dev```
でできます。
<img width="1440" alt="スクリーンショット 2018-09-30 13.01.52.png" src="https://qiita-image-store.s3.amazonaws.com/0/253981/6988c28d-45ab-8c90-bd88-fe0ae8130875.png">
VSCではこんな感じになるかと
<img width="494" alt="スクリーンショット 2018-09-30 13.02.10.png" src="https://qiita-image-store.s3.amazonaws.com/0/253981/94c57f60-931c-c785-7469-fb342afb549b.png">

こちらがvue-cli3のバージョンでの確認
```npm run serve```で確認できます。
<img width="1440" alt="スクリーンショット 2018-09-30 13.10.21.png" src="https://qiita-image-store.s3.amazonaws.com/0/253981/232c12b9-cfaf-0258-625a-6fd4d9b6b962.png">
VSCではこんな感じになります
<img width="685" alt="スクリーンショット 2018-09-30 13.06.52.png" src="https://qiita-image-store.s3.amazonaws.com/0/253981/a3ac5226-34f1-bffd-6ff8-f31fcf4dcad0.png">

##ServiceWorkerを確認

vue-cli2だと色々と変更をして行いました。詳しくは
[PWAとVue.jsでNEMウォレットアプリを作ろう！環境構築 〜 PWAアプリの起動](http://hobbydevelop.info/pwa_vuejs_nem_0)を見てください。
<img width="1440" alt="スクリーンショット 2018-09-30 13.25.18.png" src="https://qiita-image-store.s3.amazonaws.com/0/253981/d354513d-6870-4137-5b78-e73b5391ad79.png">

vue-cli3では今のところ変更なしでいけるかと。
<img width="1440" alt="スクリーンショット 2018-09-30 13.32.41.png" src="https://qiita-image-store.s3.amazonaws.com/0/253981/bc5a8f6a-f679-c14d-d68a-6f485c92d3ab.png">

＊ここではiPhoneで試しているのですがどうもコンポーネントのHelloWorld.vueがうまく表示されません。アンドロイドでも試してもらえると助かります。[リンク](https://kazumasamatsumoto.github.io/3-step-wallet-cli3/)

###vue-cli3で再現します

第１目標成果物
<img width="1440" alt="スクリーンショット 2018-09-30 15.43.38.png" src="https://qiita-image-store.s3.amazonaws.com/0/253981/e33b36ac-ffba-f68a-153e-4c2e86da321f.png">

srcというフォルダの中にcomponentというフォルダがあります
さらにその中にHelloWorld.vueというファイルがありますのでその中に以下のコードをコピペでも大丈夫ですので書きましょう。

```vuejs:src/component/HelloWorld.vue
<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    
    <h1>Hello Class</h1>
    <p>router-viewよりこんにちは</p>
    <h1>Hello Class</h1>
    <p>componentよりこんにちは</p>
    
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';

@Component
export default class HelloWorld extends Vue {
  @Prop() private msg!: string;
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
```
するとこんな感じになります
<img width="1440" alt="スクリーンショット 2018-09-30 15.54.59.png" src="https://qiita-image-store.s3.amazonaws.com/0/253981/6c177c32-91d3-539b-a20a-e0cb53d07924.png">

まだタイトルみたいなところが変更できていませんね。次にタイトルをいじっていきます。

srcというフォルダの中にviewsというフォルダがあります。
その中のHome.vueというファイルをいじりましょう。

元々のテンプレートがこちら

```vue:src/view/Home.vue
<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src

@Component({
  components: {
    HelloWorld,
  },
})
export default class Home extends Vue {}
</script>
```

この上から４行目の

```vue:src/view/Home.vue

    <HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>

```

ここを

```vue:src/view/Home.vue

    <HelloWorld msg="Hello,Vue.js and TypeScript"/>

```

と書き換えましょう。
するとこんな感じになります。
<img width="1440" alt="スクリーンショット 2018-09-30 16.02.08.png" src="https://qiita-image-store.s3.amazonaws.com/0/253981/c6c1cfb2-c29e-d35c-0672-857917ebec07.png">

書き換えた状態

```vue:src/view/Home.vue
<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld msg="Hello,Vue.js and TypeScript"/>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src

@Component({
  components: {
    HelloWorld,
  },
})
export default class Home extends Vue {}
</script>
```

これでとりあえず
[PWAとVue.jsでNEMウォレットアプリを作ろう！TypeScript導入 〜 TypeScriptで書いてみる]
(http://hobbydevelop.info/pwa_vuejs_nem_1)この記事は再現できたかと思います。

＊いまだにPWAの設定が機能していないです。特にコンポーネントの部分だけうまく表示されていないです。
App.vueの部分は表示されていてちょっと詰まってます。この部分も改善したらまた報告します。

##コピペでも得られる満足感
正直最初の頃は基本的にコピペをしていました。でもやっぱり、なんか作って見た！！という達成感を得るには十分だったと思います。今ではやりたいこともあるので僕なりの努力の仕方で真剣にスキルを磨いている状態ですが、最初の入り口のコピペでの達成感がなければ、おそらくまた心が折れていたと思います。

おしまい