Reactサボってた
わけではなくて。ブログ更新もおさぼりではなく・・・いやまぁ時間を意図して割かないのサボりっていうならそうなりますけども。あばー。
Reactで作りたいものの構想が割と数があって、どれを優先して作る題材にするべきか迷ってたわけで。 決まりました、はい。
毎度、月次で会社に提出してる書類がExcelファイル+画像ファイルなのを、紙に印刷したものだったりメモ帳に書き写したものだったりから、手打ちで起こして更新、からのZipファイルにまとめて圧縮してメールでポーン。とか自動化しちゃいたいし、そこからいこうと。あとExcel自体を持ってない。のは買えよとは言われたんですけどねー。
せっかくGitHubでExcelフォーマットに書き出すライブラリが存在してるなら、使わせていただいて、その上で何か思い付いたり見つけたりしたらプルリクとか出せたりまでいくようなら御の字かなというのもあり。
日中の仕事の合間に、VSCodeとNode.js、React、json-serverを使ってCRUDの簡単なアプリを作るところはできたので、ざっくりとまとめ。
Node.jsインストール 環境に一度入れておけば後は不要、初めてやるなら必要。
react-create-appのインストール これ、正直Node.jsというかnpmをヌルく見てた反省点で、Node.js入れたからよかろーと思ってwindows powershellでコマンド打ったら
と突っ返されてしまい。よくよく見てみたら、参考にしてた記事にもインストールって記述がありました。はい。 おばかー。ちゃんと読めというお話でした。
json-serverのインストール ここでReactの習得過程において初登場のjson-server。JSONをDBのごとく扱う、そう、CRUDをやるためのパッケージ。 これをインストール。
npm install -g json-server
cd アプリ作成用フォルダ
npm start
DBファイルにするjsonの作成
touch db.json
でいいはずのところ、nodejs だかを頭につけて打たないと「そんなものは(ry」なエラーメッセージが出ていた記憶。 powershell のプロンプトのままやってたからなのか何なのか。後で調べる(ほんとにござるかぁ~?(小次郎略windows powershell②でjson-server起動
cd アプリ作成用フォルダ
json-server --watch db.json
で、http://localhost:3000/ にアクセスすればへろわーるどぅ的なものが、デフォルトブラウザで表示される。
後はcreate-reactが作ってくれたApp.jsやらindex.htmlやらをよろしくいじってあげれば、よき。
- ToDoリストの個別に編集用ボタンを持たせて、各行のデータを更新可能にしたものを28日~31日分作る。
- jsonファイルに書き出されたデータをロードして、xlsxなりxlsmなりの特定セルに放り込む →ここはしょーじきなところ、会社のテンプレートが持ってる数式も含めてサーバーサイドでやっちゃいたさはぶっちけあるのだけど、最初からやろうとすると何が何やら何したかったやら、になってしまうので、まずは最低限で。
- 作ったExcelファイルを保存(2種類)
- 出来上がったファイルをまとめてZip圧縮する
- Zipができたらダウンロード →最終的な欲を言うなら、ここで定型文面でメール送信までしちゃいたい感じ。ではある。
書いてて思うのはやっぱり、手順にしろ自分の構想にしろ、文字におこすと定着率高いなということで。 続けていきたいですね、はい。
そんじゃ、夏コミの原稿してきます。あでゅー。