エンジニアじゃないけどアプリが作りたかった
こんにちは。まつもとかづまさと申します
僕はこの記事を書いている現在は障害者支援施設で支援員として働いています。
今回は３ step wallet という知的障がいの方でも「暗号通貨決済をできるようにする」という目的で作成したアプリの話です
3 step walletはこちら
今日の記事の流れ
では本編へ
PWAとVue.jsでNEMウォレットアプリを作ろう！TypeScript導入 〜 TypeScriptで書いてみる
まず注意して欲しいのがライブラリのインストール先です。
実際に僕はこの時はターミナルを使っていたので少し違います。
この
cd 3-step-wallet
がとても重要になりました。
前回の記事で書いたことなのですがライブラリがファイルにインストールされていない状態になっていたので、
npm run dev
ではうまくできていたのがGitHub Pagesで公開してもうまく反映されないという現象が起きていました。
ではなぜこういうことになるのかというと、僕は今現在
Visual Studio Codeを使っています。
そのVSCだとどういう現象が起きるのかというと。
自動的にターミナルを開くと
cd 3-step-wallet
をしてくれます。なのであまり意識せずにライブラリをインストールすることができます。
vue-cli2とvue-cli3での違い
vue-cli2
このバージョンではTypescriptは自分で設定するという環境になっていました。
なのでこの記事でも細かな設定をTypescriptに合わせて変更していたと思います。
方法に関してはPWAと Vue.jsでNEMウォレットアプリを作ろう！ウォレット作成をしっかりと再現しましょう！！
vue-cli3
ではvue-cli3ではどのようにすればいいのかまずは記事通りに再現します。
GitHub pagesに公開する方法はこの記事でも紹介したように色々な変更点もあります。
まずはファイルを作成してからdevなのがserveに変わっているところ
こちらがvue-cli2のバージョンでの確認
npm run dev
でできます。
VSCではこんな感じになるかと
こちらがvue-cli3のバージョンでの確認
npm run serveで確認できます。
VSCではこんな感じになります
ServiceWorkerを確認
vue-cli2だと色々と変更をして行いました。詳しくは
PWAとVue.jsでNEMウォレットアプリを作ろう！環境構築 〜 PWAアプリの起動を見てください。
vue-cli3では今のところ変更なしでいけるかと。
＊ここではiPhoneで試しているのですがどうもコンポーネントのHelloWorld.vueがうまく表示されません。アンドロイドでも試してもらえると助かります。リンク
vue-cli3で再現します
第１目標成果物
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>
するとこんな感じになります
まだタイトルみたいなところが変更できていませんね。次にタイトルをいじっていきます。
srcというフォルダの中にviewsというフォルダがあります。
その中の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>
この上から４行目の
<HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
ここを
<HelloWorld msg="Hello,Vue.js and TypeScript"/>
と書き換えましょう。
するとこんな感じになります。
書き換えた状態
<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で書いてみるこの記事は再現できたかと思います。
＊いまだにPWAの設定が機能していないです。特にコンポーネントの部分だけうまく表示されていないです。
App.vueの部分は表示されていてちょっと詰まってます。この部分も改善したらまた報告します。
コピペでも得られる満足感
正直最初の頃は基本的にコピペをしていました。でもやっぱり、なんか作って見た！！という達成感を得るには十分だったと思います。今ではやりたいこともあるので僕なりの努力の仕方で真剣にスキルを磨いている状態ですが、最初の入り口のコピペでの達成感がなければ、おそらくまた心が折れていたと思います。
おしまい