DEVELOPMENT NOTES

試して、分かったことを残す。

小さなウェブサービスをつくる中で扱った課題と、実際に動かして確かめた結果。知りたいことから記事を選べます。

どこから読む?

まず手を動かしてみたい方には、ブラウザで結果を比べられるCSVの記事がおすすめです。サービスを使う目的なら、Sheer Clipの使い方ToolShedの使い方へどうぞ。

データ変換・再生

2 NOTES

データ変換 公開 2026.09.24

カンマで区切るだけでは、なぜCSVが崩れる?

CSVのカンマと改行を、値のまま扱う

引用符を含む入力を同じ条件で比較し、列の不足や余剰、壊れた入力の扱いを確かめます。記事内の比較欄で、実際の変換結果も試せます。

分かること
単純分割との違い・入力時に気をつける条件
手元で試す
TypeScriptの変換関数とテスト

ブラウザで試せる

記事を読む

再生と状態管理 公開 2026.09.23

同じ動画の別の歌唱部分を、どう区別する?

選んだ歌唱区間を、そのまま再生キューへ渡す

動画ID・区間ID・時刻の役割を分け、選んだ3件目からキューを始める小さな実装を動かします。再生状態と実際の動画再生の境界も整理します。

分かること
区間データと選択位置を保つ設計
手元で試す
Node.jsで実行するサンプルとテスト

JavaScriptの配列から

記事を読む

サイト運営

3 NOTES

サイト運営 公開 2026.09.24

連絡先を公開せず、問い合わせを受け取るには?

メールアドレスを公開しない問い合わせフォーム

フォームと小さなAPIを組み合わせ、宛先固定・入力チェック・失敗時の案内を検証します。モックテストと受信箱への到着確認を分けて考えます。

分かること
固定宛先・返信先・送信失敗の扱い
手元で試す
サーバーのサンプルと送信モックテスト

APIの作り方に関心がある方へ

記事を読む

サイト運営 公開 2026.09.24

確認用の設定を、本番へ持ち込まないためには?

プレビューと公開サイトの、検索への出し分け

noindex・robots.txt・canonicalの役割を整理します。生成したHTMLと、公開先で配信される内容の両方を確かめる手順です。

分かること
検索向けの設定と公開前後の確認箇所
手元で試す
HTML・robots.txtの設定例

サイトを公開する方へ

記事を読む

サイト運営 公開 2026.09.24

リンクを消したのに、古いページが開くのはなぜ?

削除したページを、生成先に残さない

上書き・削除して生成・別フォルダで生成する方法を比較。古いファイルを除去し、生成失敗時には前回の出力を守る処理をテストします。

分かること
静的出力の更新方法と失敗時の扱い
手元で試す
出力切替モジュールとテスト

静的サイトを作る方へ

記事を読む

サンプルを試す前に

記事に使うデータは説明用の架空の値です。まず例をそのまま動かし、次に一箇所だけ変えて結果を比べると、何が影響したかを追いやすくなります。

  1. 使い方を知りたいときは、画面と手順を読む。
  2. 実装を試すときは、配布ファイルを新しい作業フォルダへ保存し、記事にあるNode.jsのバージョンとコマンドを使う。
  3. 期待した結果だけでなく、空の入力や形式の違いなど、記事で挙げた制約も確認する。

記事のサンプルは機能を説明するために範囲を絞っています。サービスの本番コードから複製したものと、説明用に独立して作ったものは各記事で区別しています。確認範囲は編集方針にもまとめています。