ホームページ作成
新人研修記録③ 元SUSHI屋が学ぶDAPPの作り方
このブログは34歳の元インドのSUSHI屋が新人研修としてDAPPアプリを完成させるまでの記録の第3話です。
1. インドの寿司屋DAPPプログラマーになる （自己紹介&研修内容）
2. 環境構築編3. ホームページ作成 ←イマココ4. ホーム画面を作成せよ。
5. ホーム画面にマイクリ トークンを表示せよ
6. マイページを作成せよ
7. マイページに自分のマイクリ トークンを表示せよ。
8. トークン発行画面
9. ERC721をデプロイせよ
10. トークン発行機能を実装せよ
11. ホーム画面とマイページにクーポンを表示せよ。
残り８話、、、まだ、先が長いですね。。。
というわけで、本日のお題はこちらです！
目標： vuejsを使って、ボスの指令通りにホームページの雛形を作成する。今日作る部分は、ホームページの雛形で全てvuejsを使って作ります。ブロックチェーン上のデータに触るのは次回以降になる予定です。
では、実際にボスの指示を再確認しながら、ページの設計を進めていきたいと思います。
なんか、サラッと書いてありだいぶ簡単そうですが、本当にこんなに簡単に作れんのかな。。。
とりあえず、サイトを簡単に見栄えよく仕上げたい
Bootstrapという超簡単にそこそこ見栄えのいいWebサイトが作れるCSSライブラリがあるので、事前にインストールしておきましょう。
ボスに使ってるか質問したところ、
「俺はそーいうの使わないっすね」
と塩対応でしたwww
「この軟弱者！！」という心の声が侮蔑の視線とともに聞こえた気もしますが、気にせず使っていきたいと思いますwww
今回はvuejsと連動しているbootstrap-vueを使ったので、<b-****>と書くだけでいい感じに仕上り感激しました。bootstrap-vueを使うには、コーディングを始める前に以下のコマンドをターミナルで入力すればOKです。
npm install bootstrap-vue以下のように、テキストを<b-alert>で挟むだけでこんな格好いいアラートが表示されます。
Vuejsのかなり適当な説明
vuejsはインターネットに生息する神が作られた、最低限の労力でグリグリ動くwebアプリが作れるjavascriptライブラリです。
ここでは最低限必要な知識のみご説明します。詳細につきましては公式をご参照ください。
<template>と<script>
vuejsは主にxxxx.vueというファイルで構成されます。xxx.vueファイルは<template>って書いてあるとこに、表示させるテキスト、画像、ボタンなどの部品を記載し、それぞれの部品の表示方法の処理を<script>の中に書きます。
vuejsの適当でない説明が見たい方は、前回の記事で紹介したUdemyの講座を買いましょう。めっちゃいいです。ステマではないです。
コンポーネント？
vuejsではvueファイルを複数のファイルに切り分けて、コンポーネントと言う形で呼び出すことができます。ボス曰く、
再利用するコンポーネントはなるべく分けたほうが、後でメンテナンスがしやすい っすね。
との事なので、 今回はメインのApp.vueの他に、機能ごとに４個のコンポーネントを作りました。それぞれの役割と親子関係は以下の通りです。
①App.vue →全体をまとめるvueファイル、②③④の親
②components/Header.vue →タイトルを表示する
③components/Menu.vue →各ページへのリンクを表示する。
④components/ItemGrid.vue →販売するクーポンを並べる。⑤の親
⑤components/Item.vue →一つ一つのクーポンを表示する。図で書くとこんな感じです。
コンポーネントの命名スタイル
コンポーネントに割り当てる変数の名前はコードを書く場所により異なり、以下の3種類の記法を、①外部ファイルの呼び出し、②テンプレート内、③スクリプト内で使い分けます。
PascalCase： 単語の頭が大文字
camelCase： 二つ目の単語から頭が大文字
kebab-case： 全部小文字、語間に”−”を付けるなお、script内にコンポーネントを呼び出した後は、名前の頭にappをつけます。これは、vuejsのスタイルガイドには記載されていないですが、つけておいたほうがわかりやすいとudemy講座でやってたので、つけています。
Vuejsでは公式推奨のコーディングスタイルが細かく指定されているので、詳細は公式サイトのスタイルガイドをご参照ください。
今回使うファイル
今回、編集・新規作成したファイルは以下の通りです。
・編集するファイル
index.html →最初に読み込まれるページ
src/main.js →vuejsで使うライブラリ、最初にロードするvueファイルの指定
src/App.vue →データの準備、コンポーネントの読み込み指示・今回新規作成するファイル
src/components/Header.vue →タイトルを表示する
src/components/Menu.vue →各ページへのリンクを表示する。
src/components/ItemGrid.vue →販売するクーポンを並べる。
src/components/Item.vue →一つ一つのクーポンを表示する。・特に編集しないファイル
node_modules →nodejsサーバー関連のスクリプト
src/assets →絵素材とかの保存場所
package-lock.json →サーバー起動時に読み込まれるライブラリリスト
package.json →サーバー起動時に読み込まれるライブラリリスト
readme.md →サーバーの立ち上げ方の説明、削除OK
webpack.config.js →build.jsを生成する際の指示
ここからは各ファイルごとに内容を説明していきます。
index.html
ブラウザで開くとまず最初に読み込まれるお馴染みのhtmlファイルです。
言語、タイトル、文字コード等が指定された後、appという名前のブロックを生成し、build.jsと言う名前のjavascriptを呼び出してます。このappブロックにvuejsが生成したデータが表示されます。
main.js
今回のプログラムで使うライブラリ、vueファイルの指定をします。
main.jsはいつ読み込まれるか？
main.jsを呼び出すコードがindex.htmlに載っていなかったので、ボスにどのタイミングでmain.jsが読み込まれるか聞いてみたました。
ボスによると、開発サーバーを起動すると、webpack.config.jsに記載されている通りに、￥javascriptコードが/dist/build.jsにまとめられるそうです。で、このまとめるリストにmain.jsも指定されているため、index.htmlでbuild.jsが実行される際にmain.jsの内容も実行されるとのことです。
なお、このbuild.jsはディレクトリ内のどこにも存在しないのですが、開発サーバーの場合、ファイルとして保存されず、あくまでサーバー起動中のみメモリ上にのみ保管されるようです。
こういう、初心者にとってなんかよくわかんないけど動くからいっかーってやり過ごしがちな内容がすぐ聞ける環境は凄く助かります！！
App.vue
App.vueはindex.htmlに差し込まれるvueファイルです。
クーポンの情報はApp.vue に保管し、他のコンポーネントからApp.vueにpropsでアクセスする設計にしました。
Header.vue
Headerはロゴや、サイト名が表示される領域です。ボスによると、メニューとヘッダーで別の動作をさせる可能性があるので、コンポーネントは分けておいたほうが良いとのことです。
Menu.vue
Menu.vueは販売中のクーポンが表示されるHomeページへのリンクと、自分が保有するクーポンを表示するMy accountページへのリンクを表示するコンポーネントです。
ItemGrid.vue
ItemGrid.vueは販売中のクーポンを並べるためのコンポーネントです。
app.vueから受け取ったitemsという配列の中に入っている要素の数だけ、itemコンポーネントをテンプレート内に差し込みます。
Item.vue
商品アイテム一つに相当するデータです。<slot></slot>にItemGrid.vueから渡したデータが差し込まれます。
これでコーディングは終わりです。
ターミナルで以下のコマンドを入力して開発サーバーを実行してください。
npm run devその後、localhost:8080にブラウザでアクセスすると以下のような画面が表示されます。
雑記
できたーーーー！作るのは２時間くらいでしたが、記事を書くのに5時間以上かかりました。今回ので、記事書く際のテンプレが決まったので、次回からはだいぶ早く書けると思います。
仕事楽しいです。自分が未経験の仕事ができる環境が素晴らしく、プロに質問しながらプログラムとか勉強できる環境は本当に恵まれてるなと思います。
次回はついにweb3.jsでブロックチェーン上のデータを呼び出します。更新日は今週の金曜日の予定です。よろしくお願いいたします。
