入門

スポンサーリンク
JavaScript

JavaScript | Web API:パフォーマンス・セキュリティ - API 利用のベストプラクティス

API 利用のベストプラクティスは「安全・高速・壊れない」を同時に満たす設計API を使うときに初心者がつまずきやすいのは、「動くコード」と「正しいコード」の違い です。API は動くだけなら簡単です。でも、実際のアプリではネットワークが遅...
JavaScript

JavaScript | Web API:パフォーマンス・セキュリティ - 権限管理設計

「権限管理設計」は“技術”じゃなくて“信頼”の設計位置情報、カメラ、マイク、通知、センサー、ストレージ…。Web API の多くは「権限(permission)」をユーザーに確認してから使います。ここで大事なのは、「どうやって権限を取るか」...
JavaScript

JavaScript | Web API:パフォーマンス・セキュリティ - HTTPS の重要性

HTTPS は「盗み見・改ざん・なりすまし」をまとめて防ぐ“前提条件”まず一番大事なことから。今どきの Web 開発で「HTTP でいい場面」はほぼゼロ です。ログインがあるから HTTPSクレジットカードを扱うから HTTPSではなく、フ...
JavaScript

JavaScript | Web API:パフォーマンス・セキュリティ - CSP(Content Security Policy)

CSP は「このページで何をしていいか」をブラウザに教えるルールブックCSP(Content Security Policy)は、「このページでは、こういうリソースだけ読み込んでいい/こういうスクリプトだけ実行していい」とブラウザに約束させ...
JavaScript

JavaScript | Web API:パフォーマンス・セキュリティ - CSRF 対策

CSRF は「ユーザーになりすまして勝手に操作させる攻撃」まずイメージからいきます。CSRF(Cross-Site Request Forgery)は、「ログイン中のユーザーになりすまして、別サイトから勝手に操作させる」 攻撃です。ポイント...
JavaScript

JavaScript | Web API:パフォーマンス・セキュリティ - XSS 対策

XSS は「ユーザーの入力が“そのままスクリプトになる”事故」まず、XSS(クロスサイトスクリプティング)のイメージからいきます。XSS は、ざっくり言うと「ユーザーが入力した文字列が、そのまま HTML や JavaScript として実...
JavaScript

JavaScript | Web API:パフォーマンス・セキュリティ - 非同期パフォーマンス

「非同期パフォーマンス」は“待ち時間をどう見せるか”の技術JavaScript のパフォーマンスって聞くと、「処理をどれだけ速くするか」をイメージしがちですが、非同期の世界ではもう一つ大事な視点があります。それは、「待ち時間そのものは減らせ...
JavaScript

JavaScript | Web API:パフォーマンス・セキュリティ - メモリ監視

「メモリ監視」は“どれだけ詰め込んでいて、どれだけ片付いていないか”を見ることパフォーマンスは「速さ」だけじゃなくて、「どれだけメモリを使っているか」も重要です。メモリを使いすぎると、ブラウザが重くなったり、最悪タブがクラッシュします。Ja...
JavaScript

JavaScript | Web API:パフォーマンス・セキュリティ - 計測(time / mark)

「計測」は“なんとなく遅い”を数字に変えるための技術パフォーマンスの話で一番大事なのは、「速い/遅い」を 感覚ではなく数字で話せるようになること です。そのために使うのが、console.time / console.timeEnd とpe...
JavaScript

JavaScript | Web API:パフォーマンス・セキュリティ - Performance API

Performance API は「なんとなく速い/遅い」を数字にするための道具「このページ、なんか重いな…」「この処理、体感遅いけど、どれくらい遅いんだろう?」Performance API は、こういう“なんとなく”を 数字で測るための...
Python

Python | DevOps・運用:CI 自動テスト

CI 自動テストって何?一言でいうと「人がサボっても、機械が毎回テストしてくれる仕組み」CI 自動テストは、コードを GitHub に push したり Pull Request を作ったタイミングで、機械が自動でテストを実行してくれる仕組...
Python

Python | DevOps・運用:Issue 管理

Issue 管理って何?一言でいうと「やるべきこと・困っていることを“見える化”して、迷子をなくす仕組み」Issue 管理は、「タスク・バグ・改善点・相談ごと」をすべて Issue として記録し、整理し、進めるための運用ルールのことです。G...
Python

Python | DevOps・運用:コードレビュー運用

コードレビュー運用って何?一言でいうと「一人の頭の中のコードを、チームの知恵に変える仕組み」コードレビュー運用は、「Pull Request をどうレビューするか」を、チームとしてのルールや習慣に落とし込んだものです。単に「誰かが見てOKと...
Python

Python | DevOps・運用:Pull Request

Pull Requestって何?一言でいうと「この変更、main に入れていいか一緒に確認してもらうための“申請書”」Pull Request(PR)は、「自分がブランチで作った変更を、main(や他のブランチ)に取り込んでいいか、レビュー...
Python

Python | DevOps・運用:GitHub Flow

GitHub Flowって何?一言でいうと「小さく枝を切って、小さくレビューして、小さく本番に出すためのルール」GitHub Flow は、「GitHub を使って開発するときの、シンプルなブランチ運用ルール」です。難しいことはなくて、流れ...
TypeScript

TypeScript | 関数・クラス・ジェネリクス:ジェネリクス基礎 - ジェネリクス設計の判断基準

ゴール:「ここはジェネリクスにする/しない」を自分で決められるようになることジェネリクスを“書ける”ようになった次のステップは、「どこで使うべきか」「どこでは使うべきでないか」を判断できることです。これはもう、文法の話ではなく“設計のセンス...
TypeScript

TypeScript | 関数・クラス・ジェネリクス:ジェネリクス基礎 - 実務でよくある失敗例

ゴール:「“ありがちな事故パターン”を先に知っておいて、自分のジェネリクスを危険運転にしない」ジェネリクスは強力だけど、そのぶん「やらかしポイント」も多いです。しかも、やらかした瞬間はコンパイルが通るので、気づくのはだいたい本番かテストです...
TypeScript

TypeScript | 関数・クラス・ジェネリクス:ジェネリクス基礎 - 可読性の高いジェネリクス

ゴール:「型が強いのに“怖くないコード”としてジェネリクスを書けるようになる」ジェネリクスって、慣れてない人から見ると「T とか U とかよく分からん記号が飛び交ってて怖いコード」に見えがちです。でも、本当にいいジェネリクスは逆で、「読んだ...
TypeScript

TypeScript | 関数・クラス・ジェネリクス:ジェネリクス基礎 - 過剰ジェネリクスの回避

ゴール:「ジェネリクスは“カッコいい飾り”じゃなくて、“必要なときだけ出す道具”だと理解するジェネリクスに慣れてくると、ほぼ確実に一度は通る道があります。それが 「何でもかんでも <T> を付けたくなる病」 です。でも、ジェネリクスは“書け...
TypeScript

TypeScript | 関数・クラス・ジェネリクス:ジェネリクス基礎 - ジェネリクスの再利用設計

ゴール:「そのジェネリクス“だけ”で終わらせず、プロジェクト全体で使い回せる形に育てる感覚を持つここまでで、ジェネリクスそのものの書き方はかなり分かってきていると思います。ここから一歩進めて大事になるのが、「そのジェネリクスを“その場限り”...
JavaScript

JavaScript | Web API:位置情報・センサー - プライバシー配慮

センサーとプライバシーは「技術」じゃなくて「人の生活」に触れている話位置情報・カメラ・マイク・DeviceMotion・DeviceOrientation…。これらは全部、「あなたがどこにいて、何をしていて、どう動いているか」に直結する情報...
JavaScript

JavaScript | Web API:位置情報・センサー - センサー利用の注意点

センサー利用の「注意点」は“技術”と“人間”の両方を見ること位置情報・DeviceOrientation・DeviceMotion・カメラ・マイク…。どれも「現実世界のあなた」を Web に持ち込むための強い機能です。だからこそ、「どうやっ...
JavaScript

JavaScript | Web API:位置情報・センサー - バッテリー API(廃止傾向)

バッテリー API は「端末の電池残量をブラウザから覗く仕組み」だったまずイメージからいきます。バッテリー API(Battery Status API)は、ブラウザから「この端末のバッテリー残量や充電状態」を取得できる仕組みでした。何%残...
JavaScript

JavaScript | Web API:位置情報・センサー - DeviceMotion

DeviceMotion は「端末がどれくらい“揺れているか・加速しているか”」を教えてくれるセンサーまずイメージからいきます。DeviceMotion は、スマホやタブレットの「動き」そのものを数値で教えてくれる仕組みです。端末を振る端末...
JavaScript

JavaScript | Web API:位置情報・センサー - DeviceOrientation

DeviceOrientation は「端末がどっち向いているか」を教えてくれるセンサーまずイメージからいきます。DeviceOrientation は、スマホやタブレットの「向き」を教えてくれる仕組みです。端末を左右に傾ける前後に傾けるく...
JavaScript

JavaScript | Web API:位置情報・センサー - 権限管理

「権限管理」は“ユーザーの OK がないと触れない領域をどう扱うか”の話位置情報・カメラ・マイク・通知・センサー系は、どれも「ユーザーのプライバシーや安全」に直結します。だからブラウザは、こういう機能を使うときに必ず「ユーザーの許可(権限)...
JavaScript

JavaScript | Web API:位置情報・センサー - 精度と誤差

「精度と誤差」は“どれくらい当たっていて、どれくらいズレているか”の話位置情報を扱うときに絶対に避けて通れないのが「精度(accuracy)」と「誤差(error)」 です。地図アプリを開いたら、自分の位置が 10m くらいズレていること、...
JavaScript

JavaScript | Web API:位置情報・センサー - watchPosition

watchPosition は「動いたらそのたびに現在地を教えてもらう」仕組み前回の getCurrentPosition は「今どこ?」を一回だけ聞く API でした。watchPosition はそれの“連続版”です。ユーザーが移動する...
JavaScript

JavaScript | Web API:位置情報・センサー - 現在地取得

「現在地取得」は“ブラウザに今いる場所を一回だけ教えてもらう”こと「現在地取得」と聞いたら、まずイメージしてほしいのはこれです。ブラウザに「今どこにいる?」と一度だけ質問して、緯度・経度などの位置情報を返してもらう処理JavaScript ...
JavaScript

JavaScript | Web API:位置情報・センサー - Geolocation API

Geolocation API は「ブラウザに“今どこにいるか”を教えてもらう窓口」まずイメージからいきます。Geolocation API は、ブラウザに対して「このユーザーが今どこにいるか教えて」とお願いするための仕組みです。スマホなら...
TypeScript

TypeScript | 関数・クラス・ジェネリクス:ジェネリクス基礎 - interfaceのジェネリクス

ゴール:「interface は“型のテンプレート”であり、<T> で“穴あきテンプレート”にできると理解するクラスのジェネリクスが「インスタンス全体のルール」を決めるものだとしたら、interface のジェネリクスは「型の設計図に穴を開...
TypeScript

TypeScript | 関数・クラス・ジェネリクス:ジェネリクス基礎 - クラスのジェネリクス

ゴール:「クラスにも <T> が付くんだ、しかも“インスタンス全体の型のルール”になるんだ、を体で覚える関数のジェネリクスはだいぶ見慣れてきたと思います。クラスのジェネリクスは、その 「型パラメータを“インスタンス全体”に効かせる版」 です...
TypeScript

TypeScript | 関数・クラス・ジェネリクス:ジェネリクス基礎 - ジェネリクスとintersection

ゴール:「T & U は“足し算された型”だ、と直感でわかるようになる」ジェネリクスと intersection(交差型、&)を一緒に使うときのキーワードは、「型を“混ぜる”のではなく、“足し算する”」です。union(|)は「どちらか一方...
TypeScript

TypeScript | 関数・クラス・ジェネリクス:ジェネリクス基礎 - ジェネリクスとunionの併用

ゴール:「T なのに T | U もアリ?を“安全に混ぜる感覚”で理解するジェネリクスと union(|)を一緒に使うとき、最初に出てくるモヤモヤはだいたいこれです。「T って“1つの型”じゃないの?T | U みたいに“複数の型”とどう共...
TypeScript

TypeScript | 関数・クラス・ジェネリクス:ジェネリクス基礎 - ジェネリクス配列操作

ゴール:「配列操作は全部 any で書けるけど、あえてジェネリクスで“型を守る”感覚をつかむ配列操作は、正直 any[] でも全部書けます。でもそれをやると、バグも型の穴も“侵入し放題”になります。ジェネリクス配列操作の本質は、「どんな要素...
JavaScript

JavaScript | Web API:グラフィック・メディア - アニメーション処理

アニメーション処理は「毎フレーム、画面を描き直す仕組み」を作ることグラフィック系の JavaScript でいう「アニメーション処理」は、ざっくり言うと「時間の経過に合わせて、毎フレームごとに“今の状態”を画面に描き直す」という仕組みをコー...
JavaScript

JavaScript | Web API:グラフィック・メディア - WebRTC の概要

WebRTC は「ブラウザ同士を直接つないで、映像・音・データをやり取りする仕組み」まず一言でいうと、WebRTC は「ブラウザ同士を“ほぼ直接”つないで、カメラ映像・マイク音声・任意のデータをリアルタイムで送るための仕組み」です。Zoom...
JavaScript

JavaScript | Web API:グラフィック・メディア - ストリーム処理

「ストリーム処理」は“流れてくる映像・音を、そのまま扱う”考え方グラフィック・メディアの世界でいう「ストリーム」は、ざっくり言うと「時間とともに流れてくるデータ(映像・音)の連続」です。カメラからの映像マイクからの音画面共有の映像ネット越し...
JavaScript

JavaScript | Web API:グラフィック・メディア - MediaDevices(カメラ・マイク)

MediaDevices は「ブラウザからカメラ・マイクを借りるための窓口」スマホや PC には、カメラやマイクが付いています。普段はカメラアプリやビデオ通話アプリがそれを使っていますが、実は Web ページからも JavaScript 経...
JavaScript

JavaScript | Web API:グラフィック・メディア - Audio API

Audio API は「ブラウザの中にある音のミキサー&シンセサイザー」JavaScript で音を扱う方法は大きく分けて 2 つあります。ひとつは <audio> タグを JavaScript から操作する、シンプルなやり方。もうひとつは...
JavaScript

JavaScript | Web API:グラフィック・メディア - 動画制御

「動画制御」は“ブラウザにあるビデオプレイヤーのリモコンを自分で作る”ことHTML の <video> タグは、それだけで再生ボタンやシークバーを持っています。でも JavaScript から操作すると、それを「自分好みのリモコン」で動かせ...
JavaScript

JavaScript | Web API:グラフィック・メディア - 画像読み込み

「画像読み込み」は“ファイルをブラウザに連れてきて、キャンバスに貼る”ことCanvas で画像を扱うときに必ず通るのが「画像読み込み」です。ざっくり言うと、画像ファイルをブラウザに読み込む読み込みが終わったら、Canvas に描くこの二段階...
JavaScript

JavaScript | Web API:グラフィック・メディア - 描画処理

「描画処理」は“毎回、画面をどうやって作るか”を決めることCanvas API の世界でいう「描画処理」は、ざっくり言うと「キャンバスという白い紙に、どの順番で、何を、どこに、どういう見た目で描くか」をコードで表現することです。HTML の...
JavaScript

JavaScript | Web API:グラフィック・メディア - 2D コンテキスト

「2D コンテキスト」は“キャンバスに絵を描くためのペン箱”Canvas API を使うとき、必ず最初にやるのがこれです。const canvas = document.querySelector("#canvas");const ctx ...
JavaScript

JavaScript | Web API:グラフィック・メディア - Canvas API

Canvas API は「ブラウザの中にあるお絵かき用の白い紙」Canvas API は、HTML の <canvas> 要素と JavaScript を使って図形・文字・画像・アニメーションなどを「ピクセル単位」で描くための仕組みです。普...
JavaScript

JavaScript | Web API:クリップボード・共有 - UX 改善パターン

クリップボード・共有の UX は「技術」より「気づかい」で差がつくコピー・ペースト・共有って、コード的にはどれも数行で書けます。でも、「使っていて気持ちいいかどうか」 はその数行の周りにある“気づかい”でほぼ決まります。ここでは、初心者でも...
JavaScript

JavaScript | Web API:クリップボード・共有 - URL 共有

「URL 共有」は“このページを誰かに渡す”ための一番シンプルな機能URL 共有は、ざっくり言うと「今見ているページのリンクを、他の人や自分の別の端末に渡す」ための仕組みです。JavaScript でやるときの代表的なパターンは、だいたいこ...
JavaScript

JavaScript | Web API:クリップボード・共有 - ネイティブ共有

「ネイティブ共有」は“ブラウザの外の世界”に渡すための出口Web アプリの中だけなら、URL をコピーしたり、画面に何か表示したりすれば完結します。でも実際のユーザーは、このページを LINE で送りたいこの記事を Twitter に投げた...
JavaScript

JavaScript | Web API:クリップボード・共有 - Share API

Share API は「このページいい感じだから誰かに送ろう」をボタン一発にする仕組みスマホでブラウザを見ていると、「共有」ボタンからLINE やメール、Twitter などに URL を送れますよね。Share API は、その「共有ダイ...
JavaScript

JavaScript | Web API:クリップボード・共有 - セキュリティ制限

クリップボードのセキュリティ制限は「ユーザーを守るための強いガード」クリップボードには、ユーザーがコピーしたあらゆる情報が入ります。パスワード、クレカ番号、住所、仕事の文章、社外秘のコード——全部です。もし Web ページが、ユーザーの知ら...
JavaScript

JavaScript | Web API:クリップボード・共有 - 読み取り権限

クリップボードの「読み取り権限」は“ユーザーのプライバシーを守るための最重要ポイント”クリップボードには、ユーザーがコピーした パスワード・住所・クレカ番号・仕事の文章 など、とてもセンシティブな情報が入っている可能性があります。もし Ja...
JavaScript

JavaScript | Web API:クリップボード・共有 - 書き込み権限

「書き込み権限」は“クリップボードを勝手にいじらないためのブレーキ”Clipboard API の「書き込み権限」は、ざっくり言うと 「このサイトに、クリップボードへ書き込ませていいか?」 をブラウザが管理する仕組みです。クリップボードって...
JavaScript

JavaScript | Web API:クリップボード・共有 - ペースト処理

「ペースト処理」は“ユーザーのクリップボードの中身を、アプリに連れてくる”ことコピー処理が「アプリ → クリップボード」だとしたら、ペースト処理はその逆、「クリップボード → アプリ」 です。ユーザーが Ctrl+V で貼り付ける代わりに、...
JavaScript

JavaScript | Web API:クリップボード・共有 - コピー処理

「コピー処理」は“ユーザーの手を 1 回減らす”ための仕組みコピー処理は、ユーザーが本来やるはずだったテキストをドラッグで選択Ctrl+C / 右クリック → コピーという手順を、ボタン 1 回で代わりにやってあげるイメージです。JavaS...
JavaScript

JavaScript | Web API:クリップボード・共有 - Clipboard API

Clipboard API は「コピー/ペーストをコードから扱うための正式な入口」普段、コピーやペースストはキーボードの Ctrl+C / Ctrl+V や右クリックメニューでやりますよね。Clipboard API は、その「クリップボー...
Python

Python | テスト・設計・品質:Web アプリの本番運用

「本番運用」って何?一言でいうと「“たまたま動く”から“24時間ちゃんと動き続ける”にすること」ローカルで FastAPI や Django を動かして「動いた!」は、まだスタートラインです。本番運用はそこから先の世界で、いつアクセスしても...
Python

Python | テスト・設計・品質:API のモック

APIのモックって何?一言でいうと「本物の代わりに動く“テスト用の偽物サーバー”」API のモックは、「本物の外部APIを呼ばずに、その代わりをする“偽物”を用意してテストすること」です。本物のAPIは、遅い・お金がかかる・回数制限がある・...
Python

Python | テスト・設計・品質:環境変数管理

環境変数管理って何?一言でいうと「コードに書いちゃいけない“秘密と設定”を外に出してあげること」環境変数管理は、「本番・開発・テストで変わる値」や「絶対にコードに埋め込んではいけない秘密」を、コードの外に出して、安全かつ一貫したやり方で扱う...
Python

Python | テスト・設計・品質:コンテナ構築

コンテナ構築って何?一言でいうと「動く箱を作るための“レシピづくり+焼き上げ”」ここでいう「コンテナ構築」は、ほぼ「Docker コンテナを作ること」と考えてOKです。レシピを書くフェーズ(Dockerfile を書く)レシピからイメージを...
Python

Python | テスト・設計・品質:Docker

Dockerって何?一言でいうと「どこでも同じように動く“持ち運べる開発環境”」Docker は、ざっくり言うと「アプリとその周りの環境を、ひとまとめにして箱に入れて持ち運べるようにする仕組み」です。Python でよくある悩みとして、自分...
スポンサーリンク