{"componentChunkName":"component---src-templates-blog-template-js","path":"/2026-06-28-weekly-knowledge","result":{"data":{"site":{"siteMetadata":{"title":"KenRp Blog"}},"markdownRemark":{"html":"<p>2026年06月22日から2026年06月28日にかけては、Gatsby ベースの個人技術ブログに、毎日の作業記録をそのまま置くのではなく、読み返して再利用できる技術記録へ整形する運用を固めた。合わせて、<code class=\"language-text\">worklog-blogger</code> という Codex 用の自作スキルで下書きを生成し、<code class=\"language-text\">daytrade_10-30man</code> という少額資金向けデイトレ補助ツールの初期実装も、同じ記録運用で残せる形にそろえた。</p>\n<p>この週の学びは、生成されたログをそのまま公開しないことよりも、どのリポジトリに何を追加し、どこまで検証し、何をまだ公開していないのかを明示した方が、後から読む人にも自分にも価値が高い、という点にある。</p>\n<h2>この記事で解決すること</h2>\n<p>実装ログを残しても、検証状況や未公開範囲が曖昧だと、読者は安全に再利用できない。この記事では、次の悩みを解く。</p>\n<ul>\n<li>小さなツール実装を、公開できる技術記録として整理したい。</li>\n<li>自動生成ログの抽象表現を落とし、対象リポジトリ中心に書き直したい。</li>\n<li>テスト済みの範囲、ローカル確認のみの範囲、未検証の範囲を分けたい。</li>\n</ul>\n<h2>実施した改善</h2>\n<p>この事例では大きく二つの流れがあった。ひとつは <code class=\"language-text\">daytrade_10-30man</code> の初期版を実装し、計算ロジック、UI、単体テスト、ブラウザ確認までを通したこと。もうひとつは、そのような実装作業や日次の運用作業をブログ側の Markdown 記事として残し、週単位で再構成できる記録フローを整えたことだ。</p>\n<p>日次ワークログでは毎回 dry-run を先に実行し、自動生成文に残る抽象表現や公開に向かない断片を落としてから保存した。週次では、その蓄積を「どの技術をどう導入し、どんな検証と制約があったか」という読者向けの知識へ再編集した。</p>\n<h2>確認できた成果</h2>\n<table>\n<thead>\n<tr>\n<th>対象</th>\n<th>この事例の成果</th>\n<th>検証状況</th>\n<th>公開状況</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td><code class=\"language-text\">daytrade_10-30man</code></td>\n<td>リスク管理 UI と計算ロジックの初期版を実装</td>\n<td><code class=\"language-text\">npm test</code> とブラウザ確認を実施</td>\n<td>ローカル検証のみ</td>\n</tr>\n<tr>\n<td>草稿生成スキル</td>\n<td>日次 Worklog と週次記事の下書き生成フローを継続運用</td>\n<td>dry-run を毎回確認</td>\n<td>生成物は draft 管理</td>\n</tr>\n<tr>\n<td>ブログ側</td>\n<td>Worklog / Knowledge 記事を既存記事パイプラインへ統合</td>\n<td><code class=\"language-text\">validate-content.js</code> で frontmatter を検証</td>\n<td>当時は下書き保存まで実施</td>\n</tr>\n</tbody>\n</table>\n<p>成果として特に大きかったのは、実装作業と記録作業の両方で「どこまで自動化し、どこから人が具体化するか」の境界が明確になったことだ。自動生成は初稿の回収に向いているが、公開できる技術記録へ仕上げるには、対象リポジトリの構成、テスト、検証結果、未実施項目まで人が明示した方が品質が安定した。</p>\n<h2>判断と進め方</h2>\n<p>週の前半では、日次 Worklog の生成結果に <code class=\"language-text\">対象アプリ</code> のような未具体化表現が残りやすいことが分かった。そのため、まず dry-run を見てから、最終的に変更された成果物を主語に本文を組み直す運用へ寄せた。</p>\n<p>2026年06月23日には <code class=\"language-text\">daytrade_10-30man</code> の初期実装を進め、HTML と JavaScript だけでリスク計算ツールを成立させた。この日は「実装したものをどう検証し、それをどう記録するか」が一番揃っており、この事例の実装系ワークログの基準点になった。</p>\n<p>週の後半では、ブログ側の記事追加フローそのものを毎日確認し、frontmatter 契約、Markdown 取り込み経路、<code class=\"language-text\">validate-content.js</code> による品質ゲートを繰り返し見直した。結果として、作業量が薄い日でも「何を変更し、何はまだしていないか」を正確に残せるようになった。</p>\n<h2>使った技術</h2>\n<p>この事例で触った技術は、単にログ収集のための道具ではなく、変更対象のアプリやリポジトリを成立させるためのものとして整理すると理解しやすい。</p>\n<table>\n<thead>\n<tr>\n<th>技術 / 仕組み</th>\n<th>使った対象</th>\n<th>役割</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>HTML / JavaScript</td>\n<td><code class=\"language-text\">daytrade_10-30man</code></td>\n<td>リスク計算 UI と計算ロジックの実装</td>\n</tr>\n<tr>\n<td>Node.js テスト実行</td>\n<td><code class=\"language-text\">daytrade_10-30man</code></td>\n<td><code class=\"language-text\">risk.js</code> の単体テスト</td>\n</tr>\n<tr>\n<td>Playwright と簡易 HTTP 配信</td>\n<td><code class=\"language-text\">daytrade_10-30man</code></td>\n<td>ブラウザ上の表示と計算結果の確認</td>\n</tr>\n<tr>\n<td>Gatsby 2 系</td>\n<td>ブログ側</td>\n<td><code class=\"language-text\">_data/blog</code> の Markdown を記事ページとして取り込む土台</td>\n</tr>\n<tr>\n<td><code class=\"language-text\">gatsby-source-filesystem</code> / <code class=\"language-text\">gatsby-transformer-remark</code></td>\n<td>ブログ側</td>\n<td>記事データの収集と変換</td>\n</tr>\n<tr>\n<td><code class=\"language-text\">validate-content.js</code></td>\n<td>ブログ側</td>\n<td>frontmatter 契約の静的検証</td>\n</tr>\n<tr>\n<td>草稿生成スキル</td>\n<td>Worklog 運用</td>\n<td>日次 Worklog と週次記事の初稿生成</td>\n</tr>\n</tbody>\n</table>\n<p>導入や検証の観点で見ると、この事例の中心は「アプリを実装する技術」と「その変更を壊さず記事化する技術」を分けて扱えた点にある。草稿生成スキル 自体は情報源の回収と下書き生成に使ったが、記事本文の主語はあくまで <code class=\"language-text\">daytrade_10-30man</code> とブログ側の変更内容に置いた。</p>\n<h2>構成</h2>\n<p>この事例の構成は、実装対象と記録対象を疎結合にしたことが重要だった。<code class=\"language-text\">daytrade_10-30man</code> は静的な単一ページアプリとして完結し、ブログ側は Markdown ベースのブログとして完結する。両者のあいだを 草稿生成スキルが下書き生成で橋渡しするが、公開される成果物はあくまで各リポジトリ側のファイルだ。</p>\n<div class=\"gatsby-highlight\" data-language=\"mermaid\"><pre class=\"language-mermaid\"><code class=\"language-mermaid\">flowchart LR\n  A[&quot;作業ログと実装変更&quot;] --&gt; B[&quot;草稿生成スキルで下書き生成&quot;]\n  B --&gt; C[&quot;人手で対象リポジトリ中心に具体化&quot;]\n  C --&gt; D[&quot;ブログリポジトリ の Markdown 記事&quot;]\n  D --&gt; E[&quot;validate-content.js で検証&quot;]\n  A --&gt; F[&quot;daytrade_10-30man の単体テスト / ブラウザ確認&quot;]</code></pre></div>\n<p><code class=\"language-text\">daytrade_10-30man</code> 側では、<code class=\"language-text\">index.html</code> が画面層、<code class=\"language-text\">src/risk.js</code> が計算ロジック層、<code class=\"language-text\">test/risk.test.js</code> が検証層を担う単純な分離を採用した。ブログ側では、<code class=\"language-text\">_data/blog/*.md</code> をデータ層とし、Gatsby の取り込み設定と validation スクリプトが受け入れ層として機能している。</p>\n<h2>採用理由と代替案</h2>\n<p>この事例の技術選定は、派手な技術導入よりも、変更対象ごとの責務を崩さないことを優先した。</p>\n<p><code class=\"language-text\">daytrade_10-30man</code> を静的 HTML と JavaScript で始めたのは、試作段階でフレームワークの都合より計算ロジックの早い検証を優先したかったためだ。リスク管理ツールの最初の価値は画面演出ではなく、許容損失と建玉サイズの計算が正しいかにあるので、<code class=\"language-text\">src/risk.js</code> を切り出してテストしやすい形にした判断は妥当だった。</p>\n<p>ブログ側で Markdown 1 ファイル追加の運用を守ったのは、テンプレートやビルド設定を増やさずに既存パイプラインへ統合できるからだ。自動生成が抽象的でも、最終成果物を <code class=\"language-text\">BlogPost</code> frontmatter に合わせた 1 記事へ閉じ込めれば、影響範囲をかなり小さく保てる。</p>\n<p>また、毎回ビルド全体を回さず <code class=\"language-text\">validate-content.js</code> を最小の品質ゲートとして使ったのも合理的だった。この事例の主な変更はコンテンツ追加であり、まず壊しやすいのは表示ロジックより frontmatter 契約だからだ。逆に言えば、レンダリング確認や公開確認は今後の追加課題として明示しておくべきだと分かった。</p>\n<h2>検証結果</h2>\n<p>確認した観点は、<code class=\"language-text\">daytrade_10-30man</code> の計算ロジック、UI、テスト、ブラウザ確認を分けて記録した点にある。確認した主なコマンドは次の通り。</p>\n<div class=\"gatsby-highlight\" data-language=\"bash\"><pre class=\"language-bash\"><code class=\"language-bash\"><span class=\"token function\">npm</span> <span class=\"token builtin class-name\">test</span>\npython3 -m http.server\n<span class=\"token comment\"># Playwright: ブラウザ上の表示と計算結果を確認</span>\nnode scripts/validate-content.js</code></pre></div>\n<p>公開記事では、ローカルで確認した範囲と、まだ公開・本番検証していない範囲を分けて扱った。</p>\n<h2>導入手順</h2>\n<p>同じような運用を導入するなら、次の順で進めると再現しやすい。</p>\n<ol>\n<li>変更対象アプリの責務を分ける。\n<code class=\"language-text\">daytrade_10-30man</code> なら UI と計算ロジック、ブログ側 なら記事データと取り込み設定のように、どこを更新したのか説明できる単位を先に作る。</li>\n<li>生成系の自動化は必ず dry-run から始める。\nこの事例では毎回草稿生成スキルの dry-run を確認し、未具体化の表現や公開不要な断片を先に洗い出した。</li>\n<li>変更対象ごとの検証経路を分ける。\n<code class=\"language-text\">daytrade_10-30man</code> では単体テストとブラウザ確認、ブログ側では frontmatter validation を使い、同じ「検証」という言葉でも中身を混ぜないようにした。</li>\n<li>書き込み後の成果物を人手で具体化する。\n自動生成された文章をそのまま使わず、対象リポジトリ名、変更箇所、実施した検証、未実施のデプロイや公開を明記する。</li>\n<li>リリース可否を別判定にする。\n初稿作成時は下書き管理に留め、レビュー後に公開する。この切り分けが事故防止に効く。</li>\n</ol>\n<h2>制約と残課題</h2>\n<p>一番大きな課題は、自動生成された初稿がそのままでは「読む価値のある技術記録」にならないことだった。対象アプリ名が曖昧なまま残ったり、ローカル文脈に依存した記述が混ざったりすると、後から読んでも再利用できない。</p>\n<p>次の課題は、作業量が薄い日の扱いだった。実装差分が少ない日は、無理に別リポジトリの話を足すより、その日に実際に行った運用改善や検証作業を正確に書いた方が品質が高い。この事例のブログ側まわりの複数日ログは、その割り切りを実践した形になっている。</p>\n<p>最後に、デプロイや公開については「やっていないことをやっていないと書く」必要があると分かった。特にこの事例では <code class=\"language-text\">validate-content.js</code> までで止めており、ビルド全体、公開、リリースは未実施だった。この境界を書かないと、読者は導入済み範囲を誤解しやすい。</p>\n<h2>次の改善候補</h2>\n<ul>\n<li>草稿生成スキル 側で未解決プレースホルダや抽象語を検出し、write 前に警告できるようにする。</li>\n<li>ブログ側で frontmatter validation に加えてレンダリング確認を入れ、本文構造の崩れも早めに拾えるようにする。</li>\n<li><code class=\"language-text\">daytrade_10-30man</code> 側では売買手数料、スリッページ、入力異常系を扱うテストを増やし、ローカル確認から次の実運用検証へ進める。</li>\n<li>週次記事の生成では、この事例のように実装対象が複数ある場合に、どの変更を中心テーマに据えるかを事前に決める基準を用意する。</li>\n<li>draft 記事のままでもビルド、プレビュー、公開可否を段階的に判定できるよう、release 前チェックを別の運用ルールとして外出しする。</li>\n</ul>","excerpt":"2026年06月22日から2026年06月28日にかけては、Gatsby ベースの個人技術ブログに、毎日の作業記録をそのまま置くのではなく、読み返して再利用できる技術記録へ整形する運用を固めた。合わせて、 という Codex…","frontmatter":{"date":"2026年06月28日","path":"/2026-06-28-weekly-knowledge","title":"実装ログを公開できる技術記録へ変換する運用","thumbnail":"/kenRp-blog/assets/image-4.jpg","metaDescription":"daytrade_10-30man の初期実装とブログ運用を題材に、実装ログを公開可能な技術記録へ変換する構成、検証、制約を整理する。","category":"Knowledge","tags":["testing","automation","weekly-knowledge"]}}},"pageContext":{"slug":"/2026-06-28-weekly-knowledge"}}}