いえ、この動画を見て手を動かすだけではもちろんダメで、それなりに深掘りして調べつつtry&errorしながら学習する必要はある。2018年11月23日この教材では、CodeSandboxを使ってオンライン上にサクッと開発環境を構築するため、ぶっちゃけシェルとかコマンドとか触ったことがなくても学習を始めることができるんですが、その辺りの知識をある程度持っている人にとってはモヤっと感が残る内容となっています。フロントエンド開発現場未経験者がその辺についても触れつつ学びながら製作した成果物とその過程を公開しようと思います。成果物イメージ最終的にはこんな感じのものが出来上がります。自宅周辺の空間線量をありのままに定点観測し続けるデバイスのデータを可視化したものです。使用する主なライブラリ、フレームワークセンサデータを収集して永続化するバックエンド、そのデータを可視化するフロントエンドの両方をほぼJavaScriptで構成してますが、さすがにセンサ部は内部でArduinoと割り込みを使用しているので、C言語の知識も必要になります。バックエンド側は長くなるので今回は割愛。(既にEOL)Reactアプリケーション開発環境を構築するReactアプリケーションコードはコンパイル(トランスパイル)する必要があるため、その環境を構築する必要があります。開発環境としてのWindowsは除外。(好みに応じて)nodeをインストールする実行環境とパッケージ管理システムがないと何も始まらないので、整備します。LTSとなっていますが、ここではv8を導入します。2021とはいえ、複数バージョンのnode環境を切り替えると後々便利なので、たびたび取り上げているanyenv経由でnodenvをインストールします。8系の最新は8.11.3のようなので、これをインストールします。8.11.3Reactアプリケーション雛形を作成するnodeをインストールするとパッケージ管理システムnpmも勝手についてきます。npmでReactアプリケーション雛形生成コマンドをインストール、設定していきます。Reactについておさらい今更ですがおさらいです。Reactは、JavaScriptでもHTMLでもない、JSXという独自のシンタックスでコードを書く必要があります。}}JavaScriptでもHTMLでもないということは、そのままではブラウザが解釈できないので、JSXコードをコンパイル(トランスパイル)してブラウザが解釈できる形式に変換しないといけません。そのトランスパイル環境を自前で組むのはとても大変なので、create-react-appコマンドで生成した環境を展開して流用します。create-react-appコマンドを実行するcreate-react-appコマンドのインストールは簡単です。create-react-appオプション一覧は以下の通り。https://github.com/facebook/create-react-app/issues/newTypeScript版の雛形も生成できますが、今回は指定しません。keen-analysis.js等のライブラリに対応した型定義ファイルがなく、自前で書くのがめんどくさいので...。通り、雛形のproject名のみ引数に指定してcreate-react-appコマンドを実行します。hacking!geiger-viewerディレクトリ下にコードと設定ファイル一式が生成されたので、確認しましょう。srcこれで雛形となるコードはできたんですが、IE等の古いブラウザを使っている人はまだまだ多いので(涙)、これに対応するための設定を追加する必要があります。その設定ファイルは、現段階では隠蔽されているので、展開する必要があります。先ほどのcreate-react-appコマンドオプション一覧に表示されていた、これですね。(後戻りできないけど本当にいいの?)と聞いてくるので、yを入力します。http://goo.gl/forms/Bi6CZjk1EqsdelXk1webpackやbabel等のツール、ライブラリと共に、./config下に設定ファイルが展開されました。かけてやる必要があるんですが、長くなってきたので続きは次回。IDEのエディタが使いづらくてしょうがないと思っている人は自分だけではないはず。subm...記事を読む遊びながらプログラミングに必要な考え方が身につくロボット玩具、Cubettoが我が家に来ました。遊ぶだけ遊んで、すっかり遅くなってしまったロボット玩具Cubettoレポート。KickstarterにCubettoプロジェクトが公開され...記事を読む呼び出し規約とは?stdcallとはなんぞや?という話。頼まれ、いずれ自分の子供にも教えることになるわけだし、試しにやってみようと...記事を読むデータの可視化をseabornでお手軽に。文字化け解消法で紹介したmatplotlibですが、使いこなせる気が全くしないのが正直なところ。docker/docker-composeコマンドの使い方このサイトについて昭島市在住。趣味はDIYしたり(賃貸アパートで自家発電始めました)、写真や動画撮ってサーバに自動バックアップしたり、電子工作したり...などなど。Pythonプログラミングネタを中心に、日常生活に役立てているIT活用事例を綴ります。テック系めもサイト.。