Web技術の基礎
JavaScriptから画像処理まで

どこから読み始めるか

JavaScriptにまだ慣れていなければ、変数、関数、DOM操作、イベントの順に確認します。ITの基礎知識があり、画像を使うプログラムを動かしたい方は、次の3記事から始めると処理の流れを追いやすくなります。

1. File APIとObject URL：選んだファイルを画像として読み込む。
2. Canvas API：読み込んだ画像を描き、加工して保存する。
3. async/await：画像やモデルの準備が終わるのを待ってから実行する。

スマホの表示がずれるならレスポンシブ対応、画像を何度も開いて重くなるならメモリ管理へ進みます。全部を順番に読み切る必要はありません。作りたい処理と、いま分からない部分を選んで学べます。

愛猫の写真で、読み込みから保存まで試す

File API → Canvas → async/awaitの完成サンプルでは、このプロジェクトの愛猫写真を読み込み、4枚配置したPNGを保存できます。2026年10月12日のChrome 154・Windowsで、800×589 pxの写真から960×720 pxのPNGを生成し、保存したファイルの寸法と容量が画面の結果と一致することを確認しました。

最初はブラウザでボタンを押して試し、Canvasの記事の完全コードと起動手順へ進みます。File APIの記事では画像の準備、async/awaitの記事では読み込みと保存データの生成を待つ部分を追います。この教材は、実際の証明写真ツールの配置を学びやすく単純化した例です。

制作中に起きた問題から読む

原理を読むだけでは切り分けにくい時は、このサイトで実際に起きた症状から進めます。各制作メモは、当時確認できた結果と、まだ確定していない原因・解決を分けています。

• PCで動くスライダーが、スマホでは効かなかった：入力、Canvasの画素、保存結果を分ける。
• プレビューが見えても、iPhoneで保存できなかった：表示と、端末の保存操作を分ける。
• スマホで放置した画面へ戻ると、エラーになった：サイズ上限と、復帰時の確認を考える。
• Astroへの変換で、メニューや注意書きが消えた：ビルド成功と、元の仕様を保つことを分ける。

基礎を確認できる公式資料

記事内で見たAPIを詳しく調べるときは、ブラウザの仕様や使用例をまとめたMDNも参照できます。次のリンクは別タブで開きます。

• MDN：File APIの概要とファイルの扱い方
• MDN：Canvas APIの概要と描画の学習資料