connecting...
Google translation for articles :
2 NEMBER donated to you!!

プログラム初心者がNEMアプリを作ってみた。(4)(5)番外編

nem0.90xem (2) 220 1 0
NEMREGI 2019-03-16 22:53:54

最近、自作NEMプログラム(NEMREGI)に売上管理機能を追加中のNEMREGIです。NEMREGIでは商品売買のトランザクションを記憶しておりますが、今のバージョンで変更なしにトランザクションから売上記録を引っ張りだすことができましたので、近々公開します。

 

プログラム製作に追われ、中々記事を書くことができませんでしたが、少し時間が取れたので前回の分の解説をします。

 

まず記事(プログラム初心者がNEMアプリを作ってみた。(4))の解説です。webpackを導入しビルドした結果、下記のファイルができました。

 

<dist/index.js>

/******/ (function(modules) { // webpackBootstrap
/******/ 	// The module cache
/******/ 	var installedModules = {};
/******/
/******/ 	// The require function
/******/ 	function __webpack_require__(moduleId) {
/******/
/******/ 		// Check if module is in cache
/******/ 		if(installedModules[moduleId]) {
/******/ 			return installedModules[moduleId].exports;
/******/ 		}
          以下略

 

このファイルは6Mbyteもあり、到底人間が読める量ではありません。プログラムでは下記のようにnem-libraryを読み出しました。

 

<src/index.js>

import {AccountHttp, NEMLibrary, NetworkTypes, Address} from "nem-library";

 

このimportしたnem-libraryが素のjavacriptとしてdist/index.jsに出力されています。これにより1つのjsファイルになり,htmlからwebブラウザで起動できます。

 

 

 

次に記事(プログラム初心者がNEMアプリを作ってみた。(5))の中身についてです。src/index.jsファイルを下記の通り書きました。

上記の書き方がreactを記述する上での基礎になりますので、理解して(覚えて)ください。動作は次のようになります。

 

〇ReactDOM.render()関数実行→AppNemを指定し、AppNemクラス実行。→render(){return(・・・でweb画面描写

 

以上です。ボタン要素(button)を追加しており、ボタンが押された時にgetNemAmount関数を実行します。この時、stateクラスのnemAmount変数を<p>タグに表示させています。(<p>にはstate.nemAmountが常に表示されます。)stateクラスの変数を画面要素に設定する方法をコントロールドコンポーネントと呼ぶそうです。逆にしない方法をアンコントロールドコンポーネントと呼びます。コントロールドコンポーネントは描写のタイミングを開発者が管理しなくて済みます。しかし、昔ながらの素のjavascriptによる外部操作ができなくなります。私が作ったNEMREGIではこの理由から多くの要素でアンコントロールドコンポーネントを使用しています。この2つが理解できず、最初は長時間つまづきました。

 

また、上記のプログラムではgetNemAmount関数内ではthisを使用しています。クラス内関数や変数にアクセスする場合は必ずthisをbind(固定)してください。

 

今日の記事はここまでに。次回はアンコントロールドコンポーネントの書き方・特徴を書いていけたらと思っています。

 

 

///////////////////////////////////////////////////////

本記事はプログラム初心者がNEMアプリ「NEMREGI」を製作するまでの過程を記載しています。

自作プログラムNEMREGIは  https://www.nemregi.shop/ で公開しています。

(趣味程度に製作したソフトです。使用上のトラブルは一切保証いたしません。)

(使用した方がいましたらコメントいただけると嬉しいです。要望・使用感などありましたらご指摘をお願いします)

 

//////////////////////////////////////////////////////

これまでの記事:

プログラム初心者がNEMアプリを作ってみた。(5)

プログラム初心者がNEMアプリを作ってみた。(4)

プログラム初心者がNEMアプリを作ってみた。(3)(番外編)

プログラム初心者がNEMアプリを作ってみた。(3)

プログラム初心者がNEMアプリを作ってみた。(2)

プログラム初心者がNEMアプリを作ってみた。(1)

Why don't you get crypt currency 'nem' by posting your blog article?

nemlog is blog posting service which has donation feature by crypt currency nem.
nemlog was launched to create environment which can be donated nem among NEMbers via blog articles.
Let's get nem by posting good blogs.

Nem prize event is being held frequently, Please join us on this opportunity!

nemlog registration from here
Register
Comments from NEMber

NEMber who posted this article

2017年から仮想通貨を購入しましたが、その後の暴落で損額をくらいました。その後は2018年10月から本格的に仮想通貨NEMのプログラム作成を開始。2019年3月にNEMREGI(NEMレジ)(β版)を作りました。サラリーマンなので空き時間に趣味程度のプログラムを作成しております。
17691
0

Why don't you read following articles?

5.55 XEM
309 2 1

0.05 XEM
333 0 1

1.8 XEM
59 1 0

4.445 XEM
279 9 4


1.66 XEM
427 0 2

2.15 XEM
300 6 0