無理するとガス欠
するもんですねぇ、主に精神的なのは一度陥ると戻すのに多少時間がかかりますね。 無理は良くない。それと、無理して動いた結果って、後から見返すとやり直し案件が割とよく発生する印象が強くて。プログラムのコード書くのもそうですけど、寝不足とか熱があるとか、そういう時に作ったのって「何、これ」な代物になってたり。
一晩寝て、やる気の素も復活したというかやる気生産機構が動き出したので、また今週も技術ネタの調べ物と夏コミの原稿頑張っていきます。後者は今まで手を出したことのない領域が混じってるんで無駄な時間ロストは自分の首が締まるわけで、本気も本気出していかないとです。
前者は、自分用にLINEBOTと何かしらの言語を組み合わせて秘書ちっくなBOTでも作ろうかなと、お昼の暇つぶしがてら知識をのーみそに叩き込んでるとこですね。プレイしてるゲームの「艦これ」関係で、なんかもう必要知識と情報が始めた当初(2013年)とは段違いな量になってるので、いちいちWiki見に行ってとかめんどぅくさくなっちゃったので、一度BOTのデータストアに入れたら、キーワードに対するレスとして教えてくれる秘書艦みたいなの、欲しくなったんです、ええ。最初はへっぼい機能しか作れないだろうけども、いずれはたいへんかしこいひえーちゃんにしたい。とか。そういう思いもあり。
今いる職場は今月で終了なのと、来月以降はPGよりは設計メインの人になりそうなので、いまどきっぽいものを自分のスキルのメインにできたらなーと。 がんばります、程々に。 燃え尽きちゃっても長続きしないので最初は徐行で。
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 だかを頭につけて打たないと「そんなものは（ｒｙ」なエラーメッセージが出ていた記憶。 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ができたらダウンロード →最終的な欲を言うなら、ここで定型文面でメール送信までしちゃいたい感じ。ではある。
書いてて思うのはやっぱり、手順にしろ自分の構想にしろ、文字におこすと定着率高いなということで。 続けていきたいですね、はい。
そんじゃ、夏コミの原稿してきます。あでゅー。
当落通知
の、メール設定って、通常のメアド登録と違うのねアレ…
はい、設定忘れてたせいでTwitterのTLは当落報告ラッシュになってますが、村中のお銀氏はWebカタログ公開待ちしてます…ダメじゃん！
ダメですね…うーん。
設定する箇所は覚えたので、次の申し込みの時はちゃんと設定しとこう。あばー。
＜2019.06.7 18:25＞ お席頂けてました！
◎あなたのサークル「家系村中」は、金曜日 西地区“ゆ”ブロック－05a に配置されました。 pic.twitter.com/V7SOOHURXP
— 村中銀章 (@MuranackSlvr) June 7, 2019
というわけなので、出るものと思って先に作業してた原稿を実物にするべくいよいよ本気でいきます。よしなに！
ReactJS.NETとASP.NET Coreで作業環境作成
手順メモ的な感じの
VisualStudio2019 Communityをインストール →今回はこれは既にインストール済みなのでスキップ
Node.jsをインストール →先にVS2019でReactAppを作ってデバッグしようとしたらNode.js入れな？ とエラーが出たので、プロジェクト作成前にやっておくのが良
ReactJSのNugetパッケージをインストール →NugetパッケージマネージャでReact.AspNetを検索して最新の安定版インストール
ビルドして実行 →IIS Express＋Google Chromeがデフォルト設定になっていたのでそのままF5で実行
windows powershellでプロジェクト作成したフォルダに移動(cd ～)して「npm init -y」 →package.jsonファイルがプロジェクトで必要になるので初期生成
Webpackをインストール
npm install webpack --save-dev
ここでそこそこ時間がかかるのでコーヒーでもすすっておく 一服でも可。
- package.jsonを開いてWebpackの設定を追記 →"scripts": { ～ }に以下追記
"wbp": "webpack"
- webpack.config.jsファイルを作成 →プロジェクトファイル直下の階層にJavascriptファイル「webpack.config.js」 を追加して、内容は以下コピペ。
const path = require('path');
module.exports = {
// This is our entry point containing the code
// required to perform server-side rendering.
entry: './wwwroot/source/main.js',
output: {
path: path.resolve(__dirname, 'wwwroot/dist'),
filename: 'bundle.js'
},
module: {
// Transform .jsx files.
rules: [
{ test: /\.jsx$/, use: 'jsx-loader?harmony' }
]
},
resolve: {
// Ensure we can deal with .js and .jsx and require files.
extensions: ['.js', '.jsx']
},
// Set mode for development, production or none.
mode: 'none'
};
- npmでパッケージを2つほどインストール →expose-loderとjsx-loader
npm install --save-dev expose-loader npm install --save-dev jsx-loader
めでたく出来たと思いきや、Home.jsに日本語の全角文字を差し込んだところで文字化け発生。以下の記事を参考にファイルの文字コードをUTF-8に変更 https://qiita.com/Tood/items/0dbeb532c47df4931503
文字化け解消
やったぜ。
後はここにReactコンポーネントやクライアント/サーバーサイド処理を足してそれっぽいものにしていけばよろしいかもしれないかもしれない。
