Solidity、Nuxt.jsを利用して簡単な投票アプリを実装しました。
さて、今日はSolidity、Nuxt.jsで投票アプリを作ってみよう。
— まつしん@Railsプログラマ (@matsushin11)
最近はNEM関連の記事をいくつか書いていましたがそろそろEthereumの方ももっと理解を深めたいと思っていました。
また成果物が大事と最近記事を書いたばかりなので、転職するわけではないですが成果物にこだわってみようと思い誰でもアクセスして触れるところまで作ってみました!
さらには最近Nuxt.jsが注目されていると聞いたので、使っています。
noteの表示速度を早くするため、フロントエンドをNuxt.jsに刷新しました https://t.co/Elo8CksM76 @konpyu
— note(ノート) (@note_PR)
noteのフロントエンドがNuxt.jsを採用し話題となっていますが、TERIYAKIも
AWS、PHPからGCP、Go(gin) + Nuxt.jsで既に移行作業を進めてます! #nuxtjs #vuejs #nuxt @takapon_jp— Ryo IKEUCHI (@ryo_ikeuchi)
実装した感想としてはSolidityでも少しハマりましたが、Nuxt.jsでハマっている時間の方が長かった気がします。
Nuxt.jsの公式サイトにはお世話になりっぱなしでした。
ただ以前Solidityの学習から少し期間が空いていたので開発の流れを思い出したりNuxt.jsもイチから学んで動くものが作れたので、ハマった分かなり良い勉強になりました。
ちなみに実装開始して公開するところまでざっと1日半ほどかかっています。
リファクタはいくらでもできそうだけど、とりあえずRopstenテストネットにて投票できるようになった!
MetamaskでRopstenテストネットのアカウントを利用すれば投票できます。
なかなか学びは多かった!Solidity × Nuxt.jsでサンプル投票アプリ https://t.co/vPc3IBGkQ7
— まつしん@Railsプログラマ (@matsushin11)
SolidityとNuxt.jsで作ったアプリについて
できることとしては投票なので候補者一覧を取得して、投票して結果を見れます。スマートコントラクト側では候補者情報、投票処理、投票結果を管理しています。
あと公開の流れとしてはInfuraを利用してRopstenテストネットにコントラクトをデプロイし、そしてFirebaseにコードをデプロイして公開しました。
なのでアプリを利用する際はMetaMaskでRopstenテストネットのアカウントに切り替えてお試しください。
Solidityのコードは公式ドキュメントのものを参考にしているのでまだ良いのですが、Nuxt.jsのコードはまだまだ改良の余地がありそうです。
もう少しリファクタを進めるか、また次のアプリ開発に進むか迷うところです。
もしくはSolidity側も改良して候補者もブラウザ側から選択して自由に投票イベントまで作れるようにすると面白いかもしれません。
実装のポイント
Solidityの特徴としてはメソッドの返り値として多次元配列を返却できません。さらにはstringの配列も2次元配列扱いされるので返却できないです。
なので候補者名を1つずつ表示するために、まずは候補者数を取得してからループで候補者名を1人ずつ取得するという手順になっています。
実装でハマった箇所
色々ハマりました。。
うーん、スマートコントラクト利用時の
VM Exception while processing transaction: out of gas
でハマっている。— まつしん@Railsプログラマ (@matsushin11)
SolidityではGasの利用周りと、Nuxt.jsではストアを利用したコードの書き方がよくわからず少し時間かかりました。
ですが、Nuxt.jsでのvuexという技術ではReactでいうReduxと基本的な考え方は同じFluxなので理解自体はすぐできました。
あとweb3の設定においてfetchメソッド内でwindowオブジェクトを取得しようとしたのですがコンポーネントがロードされる前に毎回呼び出しているため、おそらくレンダリングがされていないため取得できなかったです。ここは結局解決方法は分からず、レンダリング後のイベントにフックさせたタイミングでwindowオブジェクトを取得するようにしました。
ちなみに後々わかりましたがwindowオブジェクトを利用する必要自体はなかったぽいです。
コメントを残す