2020年 4月 の投稿一覧

続 React を始めます

コードを打ち込み時のタイプミスが多く React のお勉強を兼ねた Todo アプリ “妄想中” の Material-UI 化はなかなか実現しませんでした。

何回もコード見直して単純なスペルミスや CamelCase記法の変数 / 関数名のつながった単語のつなぎ目を大文字にしていないミス等々を訂正していて、ようやくプロジェクトフォルダの src/registerServiceWorker.js が、私が create-react-app を実行して作成したアプリの雛形では 、src/serviceWorker.js になっている事に気がつきました。

そこで src/index.js のコードの registerServiceWorker を呼び込んでいるこの import文を書き直して import registerServiceWorker from ‘./registerServiceWorker’;  から import * as serviceWorker from ‘./serviceWorker’;  と変更しましたらスッキリとマテリアルデザインの画面が表示されました。 

いつものように七転八倒して苦しみましたが React の独自の記法(JSX)や仮想 DOMの概念などの React の本質の部分をチョッピリと理解したかもしれせん。

それから ”React の Todoアプリ” で検索してたら下記のような記事を見つけましたので、ついでにコチラも実際にコードを叩いて create-react-app を実行して動かしてみて ”妄想中−改” として表示してみました。

ReactでシンプルなTodoアプリケーションを作成する

さて次はスマホでもこのアプリを動かせるように ”Cordova” というモバイルアプリケーション開発フレームワークのお勉強を始めようと思います。

React を始めます

React というのは複雑な UIUser Interface/ユーザーインタフェース)を作るのが得意なフレームワークということです。

私もMacBook PRO のターミナルのコマンド叩きにもようやく慣れてきましたので、Kindle の読み放題サービス『Kindle Unlimited(キンドル アンリミテッド)』の10冊の中に React や React Native 関連の本を仕込んで React のお勉強を始めました。

ReactでTodoアプリを作ってみよう

数冊 React 関連本を読んでみてこの本が分かりやすかったので、この本を参考にして、”妄想中” という Todo アプリを作って見ました。

タブレットで このKindle 本を見ながらポツリポツリとターミナルと Visual Studio Code を叩きまくってプレーンな画面はできたのですが、リッチな表現の UI はなかなか作ることができないのです。

コードを打ち込んでいる時のタイプミスが主なエラーの原因ではありますが、React の独自の記法(JSX)や仮想 DOMの概念などの React の本質の部分を理解しないと先には進めないようです。

ネットで調べて見たらコチラの記事が見易くて随分と参考になりましたので紹介します。

初めてのReact「入門編」導入から基本まで〜TODOアプリを作ってを学ぼう!

次回はUI コンポーネントを使って、スカッとした見栄えのいい画面のTodo アプリ “妄想中” を披露したいと思っております。

足跡マップ(WEBアプリ)

WEBアプリ、Androidアプリ、iPhoneアプリとひと通りアプリを作れるようになりました。これからも書籍やWEB記事で面白そうなアプリのサンプルを見つけましたらどんどんマネして作ってコチラで紹介しようと思います。

今回は以前紹介した 書籍の “HTML5超入門” に掲載されていたWEBアプリのサンプルプログラムを利用して、手持ちのスマホのホームボタンに追加して現在地の地図を表示させてメモを添えて足跡として登録できる “足跡マップ” を仕込んでみました。

“現在位置に足跡を登録する” をタップすると入力フォームが表示されて保存するとそのディバイス(端末)にストレージデータとして保存されます。そして地図に出てきたマーカーをタップすると保存したメモの内容が表示されるのです。これなら徘徊した時にお気に入りの場所を足跡として残せますよね。

今回も紹介したこの “HTML5超入門” では、手書きのメモも同時に保存して表示できる機能も解説しています。これを発展させてその場で撮影した画像を保存して表示できるようにしたら最強の徘徊補助アプリになりますねぇ。