Muranack.log

プログラミング、絵、ゲームの話やその他雑記

Reactサボってた

わけではなくて。ブログ更新もおさぼりではなく・・・いやまぁ時間を意図して割かないのサボりっていうならそうなりますけども。あばー。

Reactで作りたいものの構想が割と数があって、どれを優先して作る題材にするべきか迷ってたわけで。 決まりました、はい。

毎度、月次で会社に提出してる書類がExcelファイル+画像ファイルなのを、紙に印刷したものだったりメモ帳に書き写したものだったりから、手打ちで起こして更新、からのZipファイルにまとめて圧縮してメールでポーン。とか自動化しちゃいたいし、そこからいこうと。あとExcel自体を持ってない。のは買えよとは言われたんですけどねー。

せっかくGitHubExcelフォーマットに書き出すライブラリが存在してるなら、使わせていただいて、その上で何か思い付いたり見つけたりしたらプルリクとか出せたりまでいくようなら御の字かなというのもあり。

日中の仕事の合間に、VSCodeとNode.js、React、json-serverを使ってCRUDの簡単なアプリを作るところはできたので、ざっくりとまとめ。

  1. Node.jsインストール  環境に一度入れておけば後は不要、初めてやるなら必要。

  2. react-create-appのインストール  これ、正直Node.jsというかnpmをヌルく見てた反省点で、Node.js入れたからよかろーと思ってwindows powershellでコマンド打ったら  

    f:id:MuraGin:20190618212337j:plain
    そんなものはない

 と突っ返されてしまい。よくよく見てみたら、参考にしてた記事にもインストールって記述がありました。はい。  おばかー。ちゃんと読めというお話でした。

  1. json-serverのインストール  ここでReactの習得過程において初登場のjson-server。JSONをDBのごとく扱う、そう、CRUDをやるためのパッケージ。  これをインストール。

    npm install -g json-server

  2. dotnet CLIで新規Webappプロジェクトを作成  コマンド忘れたので後で編集(する。かも。

  3. windows poweshell①でlocalhost webサーバー起動

  cd アプリ作成用フォルダ npm start

  1. DBファイルにするjsonの作成

    touch db.json  でいいはずのところ、nodejs だかを頭につけて打たないと「そんなものは(ry」なエラーメッセージが出ていた記憶。  powershell のプロンプトのままやってたからなのか何なのか。後で調べる(ほんとにござるかぁ~?(小次郎略

  2. 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ができたらダウンロード  →最終的な欲を言うなら、ここで定型文面でメール送信までしちゃいたい感じ。ではある。

書いてて思うのはやっぱり、手順にしろ自分の構想にしろ、文字におこすと定着率高いなということで。 続けていきたいですね、はい。

そんじゃ、夏コミの原稿してきます。あでゅー。