Material-UI, Keen, chart.jsでSingle Page Applicationを作りながらReactを学ぶ

はじめに

主に組み込みソフトウェア開発を生業としているため、フロントエンド開発には縁がなかったのですが、ここ1年仕事でNode.jsを触ってきたためフロントエンド開発にも興味が出てきて、Udemyの教材を買って黙々とtry & errorしました。

この教材では、CodeSandboxを使ってオンライン上にサクッと開発環境を構築するため、ぶっちゃけシェルとかコマンドとか触ったことがなくても学習を始めることができるんですが、その辺りの知識をある程度持っている人にとってはモヤっと感が残る内容となっています。

「実際の現場ではどうやって開発始めるんだ・・・?」

的な。

フロントエンド開発現場未経験者がその辺についても触れつつ学びながら製作した成果物とその過程を公開しようと思います。

成果物イメージ

最終的にはこんな感じのものが出来上がります。自宅周辺の空間線量をありのままに定点観測し続けるデバイスのデータを可視化したものです。

使用する主なライブラリ、フレームワーク

センサデータを収集して永続化するバックエンド、そのデータを可視化するフロントエンドの両方をほぼJavaScriptで構成してますが、さすがにセンサ部は内部でArduinoと割り込みを使用しているので、C言語の知識も必要になります。

バックエンド側は長くなるので今回は割愛。

フロントエンド

バックエンド

Reactアプリケーション開発環境を構築する

Reactアプリケーションコードはコンパイル(トランスパイル)する必要があるため、その環境を構築する必要があります。

前提とする環境

開発環境としてのWindowsは除外。

macOS or Ubuntu (Unix系OSならなんでも)
bash (好みに応じて)

nodeをインストールする

実行環境とパッケージ管理システムがないと何も始まらないので、整備します。

2018/11/24 現在、下記の通りnode v10がActive LTSとなっていますが、ここではv8を導入します。

Release Status Codename Initial Release Active LTS Start Maintenance LTS Start End-of-life
6.x Maintenance LTS Boron 2016-04-26 2016-10-18 2018-04-30 April 2019
8.x Active LTS Carbon 2017-05-30 2017-10-31 April 2019 December 20191
10.x Active LTS Dubnium 2018-04-24 2018-10-30 April 2020 April 2021

とはいえ、複数バージョンのnode環境を切り替えると後々便利なので、たびたび取り上げているanyenv経由でnodenvをインストールします。

node 8系の最新は8.11.3のようなので、これをインストールします。

Reactアプリケーション雛形を作成する

nodeをインストールするとパッケージ管理システムnpmも勝手についてきます。まずはnpmでReactアプリケーション雛形生成コマンドをインストール、設定していきます。

Reactについておさらい

今更ですがおさらいです。

Reactは、JavaScriptでもHTMLでもない、JSXという独自のシンタックスでコードを書く必要があります。

JavaScriptでもHTMLでもないということは、そのままではブラウザが解釈できないので、JSXコードをコンパイル(トランスパイル)してブラウザが解釈できる形式に変換しないといけません。

そのトランスパイル環境を自前で組むのはとても大変なので、create-react-appコマンドで生成した環境を展開して流用します。

create-react-appコマンドを実行する

create-react-appコマンドのインストールは簡単です。

オプション一覧は以下の通り。

TypeScript版の雛形も生成できますが、今回は指定しません。keen-analysis.js等のライブラリに対応した型定義ファイルがなく、自前で書くのがめんどくさいので…。

Only <project-directory> is required. の通り、雛形のproject名のみ引数に指定してcreate-react-appコマンドを実行します。

geiger-viewerディレクトリ下にコードと設定ファイル一式が生成されたので、確認しましょう。

これで雛形となるコードはできたんですが、IE等の古いブラウザを使っている人はまだまだ多いので(涙)、これに対応するための設定を追加する必要があります。

でもその設定ファイルは、現段階では隠蔽されているので、展開する必要があります。

先ほどのcreate-react-appコマンドオプション一覧に表示されていた、これですね。

やってみると、

Are you sure you want to eject? This action is permanent. (後戻りできないけど本当にいいの?)と聞いてくるので、yを入力します。すると…

webpackやbabel等のツール、ライブラリと共に、./config下に設定ファイルが展開されました。古いIEにもちゃんと対応するにはwebpackの設定ファイルを修正して@babel/polyfill をかけてやる必要があるんですが、長くなってきたので続きは次回。

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする