お盆休み5日目
お盆休み5日目。
午前中、Reactで見栄えの良いUIを簡単に作る方法を調べる。
material-uiを使ってみようと思ったが、Reactの基礎がないので、簡単にできない。
午後からは猛暑の中、歯科定期検診、それから実家帰省。
帰省にあたり、久しぶり乗った電車路線に懐かしさを感じた。
夜はReact + material-uiに継続して取り組む。
npx create-react-appコマンドでReactのプロジェクトを作ることができるとわかった。
また、以下の記事に従って、App.tsxを修正することでボタンを表示させてみた。
TypeScriptでMaterial-UI練習帳 — Hello, world! — | Just A Programmer
お盆休み4日目
お盆休み4日目。この日も午前中、VSCode機能拡張のプロジェクト調査に取り組む。
昨日登場したWebpackは、Reactのコードを統合、JavaScriptを出力するのに使われていると理解した。
helloworldレベルのVSCode機能拡張プロジェクトに昨日見つけたReactを含めたサンプルプロジェクトから
必要そうな箇所を移植して、最小限のプロジェクトを作ってみた。
いくつか嵌ったが、ReactでDOM操作した内容をVSCodeのエディタ画面に出力できた。
- "Cannot use JSX unless the '--jsx' flag is provided."tsconfig.jsにjsxオプションは定義済なのに。
package.jsのtscコマンドに--jsx reactを追加したら、npm run...によるコマンドの実行エラーはとれた。
しかし、VSCodeのデバッグ実行では、依然としてエラー表示のまま。と思われたが、
あるタイミングから、エラー表示がなくなった。よくわからない。。
- VSCode側でJSを実行するには、許可が必要。
これに気付かず、画面にReactのDOM操作が現れない理由がわからず苦労した。
なお、React VSCode間のやりとりに道（片方向）が開けたが、今度はUIをどうデザインするかが気になってきた。
つぎはほしい部品（ツリービュー、チェックボックス、プルダウン）の配置・使用の方法を調べよう。
午後は、うちの用事をいろいろやって、近所に買い物にも出かけた。
夜は、ミーティング(発表練習)に参加。つぎは水曜日。
熱い議論ができるメンバーなのはうれしい反面、毎回2時間を超すのはなかなか疲れる。
また、この日は、typescriptのE-Learning講座は進められず。読み始めたアジャイルサムライも同様。
明日から、2泊3日で実家に帰省する。その間に進めたい。
お盆休み3日目
お盆休み3日目。午前中、VSCodeの拡張機能のサンプルコードを読む。
GitHub - Ciaanh/reactception
WebViewのDOM操作をReactで行うサンプルは、そもそものReactを知っていないと読解しづらいと痛感。
また、WebPackが登場。Web開発は勉強が必要な要素が多い。。
休み中にどこまで解析できるだろうか。目標は、ReactでDOM操作できるようになることだが。
午後からは夜のミーティング向けの宿題（スライド資料作り）をする。
途中、電子版で買った「アジャイルサムライ」を読む。20％読了。これも続けたい。
夜は、ミーティング参加。明日もミーティングを行うことになった。
typescriptのE-Learning講座は3章を少しだけ進めた。
お盆休み2日目
お盆休み1日目
お盆休み1日目。日記を付けてみるが、3日も続かないかもしれない。
typescriptのE-Learning講座を始めた。2時間くらい受講。
また、Visual Studio Codeの拡張機能に興味が出たので、少し調べてみた。
この拡張機能について、少しだけ書き残す。
目的
ある記法で書かれたテキストを読み込んで、GUIで設定できるようにしたい。
ツリービューやプルダウンメニュー、チェックボックスが必要だ。
＃いつものごとく、どこまでできるか。。
Web情報を漁ると、microsoftがgithubでVSCodeのサンプルプロジェクトを公開していることがわかった。
VSCode: Custom Editorサンプルを読む – Torimemo
GitHub - microsoft/vscode-extension-samples: Sample code illustrating the VS Code extension API.
Custom Editorのサンプルプロジェクトをデバッグ実行して、exsampleFilesのディレクトリを開くと、本来コードを入力する画面領域でアイコンを追加・削除したり、お絵かきができた。
VSCode機能拡張のプロジェクトを最初から作ると、ソースコードらしいファイルには、extentions.tsのみがある。これが、メインプログラムであるとわかる。
