@lifehacker

スポンサーリンク
JavaScript

JavaScript | Web API:通信・ネットワーク系 - キャッシュ制御

「キャッシュ制御」は“いつまで古いデータを使っていいか”を決めるルールまずざっくりイメージからいきます。キャッシュは、「一度取ってきたデータを、次回以降は早く返すために手元に置いておく仕組み」 です。...
JavaScript

JavaScript | Web API:通信・ネットワーク系 - 認証ヘッダ

認証ヘッダは「あなたが誰なのか」をサーバーに伝えるための“身分証”まずイメージからいきます。認証ヘッダ(Authentication Header)は、「このリクエストは誰として送っているのか」 をサ...
JavaScript

JavaScript | Web API:通信・ネットワーク系 - Cookie の扱い

Cookie は「ブラウザが自動で持ち運んでくれる小さなメモ」まずイメージからいきます。Cookie は、「ブラウザがサーバーとの間で自動的に持ち運んでくれる小さなメモ」 です。サーバーが「このユーザ...
JavaScript

JavaScript | Web API:通信・ネットワーク系 - CORS の基本

まず「なぜ CORS なんてものがあるのか」からCORS を理解する一番の近道は、「ブラウザは、もともと“よそのサイトに勝手にリクエストさせない”ように作られている」という前提をちゃんと掴むことです。...
JavaScript

JavaScript | Web API:通信・ネットワーク系 - Headers

ヘッダーは「一緒にくっついて飛んでいくメモ書き」まずイメージからいきます。HTTP の世界では、リクエストやレスポンスは「封筒付きの手紙」みたいなものです。本文(ボディ)実際の中身。JSON や HT...
JavaScript

JavaScript | Web API:通信・ネットワーク系 - Request / Response オブジェクト

「Request / Response」は fetch がやり取りする“手紙の入れ物”まず大きなイメージからいきます。fetch は「サーバーと会話する窓口」でしたよね。その会話の中で実際に行き来して...
JavaScript

JavaScript | Web API:通信・ネットワーク系 - fetch API

fetch は「ブラウザからサーバーにお願いしに行く関数」まずイメージからいきます。fetch は、「ブラウザからサーバーに“ちょっとデータください”とか“これ送ります”とお願いしに行くための関数」 ...
CSS

CSS Tips | 超実務コアCSSテクニック:タイポグラフィ - font-display制御

font-display は「Webフォントが読み込まれるまでの見え方」をコントロールする仕組みWebフォントは便利ですが、読み込みが遅いと文字が消える(FOIT) や 途中でフォントが切り替わる(F...
CSS

CSS Tips | 超実務コアCSSテクニック:タイポグラフィ - Webフォント読み込み戦略

Webフォント読み込み戦略は「速さ・見え方・安定性」を同時に満たすための設計Webフォントはデザインの質を上げる強力な武器ですが、読み込みが遅いと 文字が一瞬消える(FOIT)、または 途中でフォント...
CSS

CSS Tips | 超実務コアCSSテクニック:タイポグラフィ - フォントスタック設計

フォントスタック設計は「どの環境でも破綻しない文字の見え方」を作る技術フォントスタック(font-family の並び順)は、「ユーザーの環境にフォントが無いとき、どのフォントにフォールバックするか」...
JavaScript

JavaScript | Web API:ストレージ系 API - IndexedDB の概要

IndexedDB は「ブラウザ内のちゃんとしたデータベース」localStorage / sessionStorage は「小さなメモ帳」でした。IndexedDB は一段レベルが違います。イメージ...
JavaScript

JavaScript | Web API:ストレージ系 API - セキュリティの注意点

「ストレージは安全な金庫」ではない、という前提から始めようlocalStorage / sessionStorage は便利ですが、「ここに入れておけば安全」な場所ではありません。ブラウザの中にあると...
JavaScript

JavaScript | Web API:ストレージ系 API - ストレージイベント

ストレージイベントは「別タブでの変更を教えてくれる仕組み」まず一言でいうと、ストレージイベント(storage イベント)は「他のタブで localStorage が書き換えられたことを教えてくれる通...
JavaScript

JavaScript | Web API:ストレージ系 API - 同期 API の特性

「同期 API」ってそもそも何者かまず言葉の整理からいきます。同期 API(synchronous API)というのは、呼び出した瞬間に処理が終わるまで、そのスレッドを止めてしまうタイプの API の...
JavaScript

JavaScript | Web API:ストレージ系 API - 容量制限

ストレージの「容量制限」をちゃんと意識すると設計が変わるlocalStorage / sessionStorage は便利ですが、「無限に保存できる魔法の箱」ではありません。どちらもブラウザごとに 容...
JavaScript

JavaScript | Web API:ストレージ系 API - JSON との組み合わせ

なぜ「ストレージ × JSON」がほぼセットなのかlocalStorage / sessionStorage は、とてもシンプルなストレージです。でも制約が一つあります——「保存できるのは文字列だけ」...
JavaScript

JavaScript | Web API:ストレージ系 API - removeItem / clear

removeItem / clear は「部分的に消す」と「全部消す」の違いストレージ系 API(localStorage / sessionStorage)には、データを「書く」「読む」だけでなく、...
JavaScript

JavaScript | Web API:ストレージ系 API - setItem / getItem

setItem / getItem は「ブラウザのメモ帳に書く・読む」操作まずざっくりイメージからいきます。setItem と getItem は、ブラウザの中にある小さなメモ帳に「書く」「読む」ため...
JavaScript

JavaScript | Web API:ストレージ系 API - SessionStorage の基本

SessionStorage は「タブごとの一時メモ帳」まずイメージからいきます。SessionStorage は 「ブラウザのタブごとに用意される、一時的なメモ帳」 です。LocalStorage ...
JavaScript

JavaScript | Web API:ストレージ系 API - LocalStorage の基本

LocalStorage は「ブラウザにメモ帳を置く」イメージまずざっくりイメージから。LocalStorage は、「ブラウザの中にある、キーと値を保存できる小さなメモ帳」 です。ページを閉じても、...
JavaScript

JavaScript | 非同期処理:設計・理解の深化 - プロとしての非同期設計

「プロとしての非同期設計」って何が違うのか非同期処理を「書ける」ようになるのは、正直そんなに難しくありません。async/await を覚えて、fetch を呼んで、try/catch を付ければ、と...
JavaScript

JavaScript | 非同期処理:設計・理解の深化 - 非同期バグの再現

なぜ「非同期バグの再現」がこんなに難しいのか非同期バグって、ほんとイヤらしいですよね。さっきまで出ていたのに、もう一回やると出ない。本番では起きるのに、ローカルでは起きない。理由はシンプルで、非同期バ...
JavaScript

JavaScript | 非同期処理:設計・理解の深化 - 例外仕様の文書化

なぜ「例外仕様の文書化」がそんなに大事なのか非同期処理は「うまくいくとき」だけ見ていると、わりと簡単そうに見えます。await fetch(...) して、res.json() して、画面に出す——こ...
JavaScript

JavaScript | 非同期処理:設計・理解の深化 - モック化戦略

「モック化戦略」ってそもそも何の話?非同期処理をテストしようとすると、必ずぶつかる壁があります。それが「外部とのやり取り」です。サーバーへのリクエストデータベースタイマー(setTimeout)ブラウ...
JavaScript

JavaScript | 非同期処理:設計・理解の深化 - テストしやすい非同期

なぜ「テストしやすい非同期」が大事なのか非同期処理って、バグが出ても再現しづらいし、「たまたま動いた」状態になりがちです。だからこそ、「テストしやすい形で非同期コードを書く」という発想がめちゃくちゃ重...
JavaScript

JavaScript | 非同期処理:設計・理解の深化 - 同期 API との境界

なぜ「同期 API との境界」を意識しないといけないのか非同期処理を学び始めると、「どこまでを同期で書いて、どこからを非同期にするのか」がだんだん分からなくなってきます。全部 async にしてしまう...
JavaScript

JavaScript | 非同期処理:設計・理解の深化 - 非同期 API 設計

「非同期 API 設計」って何を考えること?まず前提から整理します。ここでいう「非同期 API」は、サーバーの REST API というより、「あなたが JavaScript で提供する非同期関数の“...
JavaScript

JavaScript | 非同期処理:設計・理解の深化 - 非同期関数の命名

なぜ「非同期関数の命名」がそんなに大事なのか非同期処理って、それだけで頭を使います。そこに「名前がふわっとしている関数」が混ざると、一気に読めなくなります。doSomething(), handle(...
JavaScript

JavaScript | 非同期処理:設計・理解の深化 - 責務分離

「責務分離」を非同期コードで考える意味非同期処理って、それだけで頭を使いますよね。そこに「UI」「エラー処理」「キャッシュ」「ローディング表示」などを全部一緒に書き始めると、一瞬でカオスになります。だ...
JavaScript

JavaScript | 非同期処理:設計・理解の深化 - 非同期コードの可読性

なぜ「非同期コードの可読性」がそんなに大事なのか非同期処理って、動かすだけなら意外とすぐ書けます。async 付けて、await fetch(...) して、console.log して終わり——みた...
JavaScript

JavaScript | 非同期処理:パフォーマンス最適化 - 非同期設計レビュー

「非同期設計レビュー」って何をする時間か非同期処理のコードは、とりあえず動かすだけなら意外と簡単です。async/await を付けて、fetch を呼んで、console.log して終わり。でも「...
JavaScript

JavaScript | 非同期処理:パフォーマンス最適化 - UI ブロック回避

なぜ「UI ブロック回避」がそんなに大事なのかJavaScript は基本「1本のメインスレッド」で動いています。この1本の線の上で、描画・クリック処理・スクロール・あなたの書いた処理が、全部順番待ち...
JavaScript

JavaScript | 非同期処理:パフォーマンス最適化 - 長時間処理の分割

なぜ「長時間処理の分割」が必要になるのかJavaScript は基本的に「シングルスレッド」で動きます。つまり、1本の道に、処理が一列に並んで流れているイメージです。その道の上で、重い処理(ループ・計...
JavaScript

JavaScript | 非同期処理:パフォーマンス最適化 - 非同期処理の計測

なぜ「非同期処理の計測」が大事なのかパフォーマンス最適化って、つい「こうした方が速そう」と感覚でやりがちです。でも、本当にやるべきことはシンプルで、たった一つです。「遅いところをちゃんと測って、事実ベ...
JavaScript

JavaScript | 非同期処理:パフォーマンス最適化 - レイテンシ考慮

レイテンシってそもそも何?まず言葉からいきます。レイテンシ(latency)は「お願いしてから、最初の反応が返ってくるまでの時間」 です。ユーザーから見ると、ボタンを押してから画面が変わるまで検索ワー...
JavaScript

JavaScript | 非同期処理:パフォーマンス最適化 - ネットワーク最適化

ネットワーク最適化って何をすること?非同期処理のパフォーマンス最適化の中で、ネットワーク最適化は「サーバーとの通信をできるだけ速く・少なく・無駄なくする」ことです。JavaScript の世界だと、だ...
JavaScript

JavaScript | 非同期処理:パフォーマンス最適化 - バッチ処理

「バッチ処理」は“まとめてやるから速くて優しい”という発想バッチ処理は、「細かい処理を1個ずつやるのではなく、ある程度まとめて一気に処理する」という考え方です。非同期処理のパフォーマンス最適化では、・...
JavaScript

JavaScript | 非同期処理:パフォーマンス最適化 - Promise キャッシュ

Promise キャッシュって何者?Promise キャッシュは、「同じ非同期処理を何度も実行せず、“進行中 or 結果”を使い回すテクニック」 です。特に、「同じ API を短時間に何回も叩いてしま...
JavaScript

JavaScript | 非同期処理:パフォーマンス最適化 - 不要 await の削除

「不要な await」を消すと何が嬉しいのかawait は便利ですが、「なくてもいい場所に書いてしまうと、わざわざ処理を遅くしている」ことがあります。パフォーマンス最適化でよく効くのが、この「不要な ...
JavaScript

JavaScript | 非同期処理:パフォーマンス最適化 - 並列化の判断

「並列化の判断」は“どこを同時に走らせていいか”を見極めること非同期処理のパフォーマンス最適化で一番効くのが、「待ち時間の長い処理を、できるだけ同時に走らせる」ことです。でも、何でもかんでも並列にすれ...
JavaScript

JavaScript | 1 日 120 分 × 7 日アプリ学習:クラス設計アプリ(オブジェクト指向)

1日目のゴールと作るもののイメージ1日目のテーマは「class を使って、“それっぽいオブジェクト”を自分で設計できるようになること」です。キーワードはこの3つです。classカプセル化(中身を隠す・...
Python

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

Protocolって何?一言でいうと「“こう振る舞うもの”を型で表す」Protocol は、型ヒントの世界で「このオブジェクトは、こういうメソッドや属性を“持っているもの”として扱える」という“振る舞...
Python

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

Literalって何?一言でいうと「値そのものを型にする」Literal は、型ヒントの世界で「この引数(または値)は、この“決まった値”しか受け付けません」と表現するための道具です。普通の型ヒントは...
Python

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

Unionって何?一言でいうと「型の“どれか”を許すための道具」Union は、型ヒントの世界で「この値は、A か B か C のどれかです」と表現するための仕組みです。形式的にはこうです。from ...
Python

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

Optionalって何?一言でいうと「Noneかもしれない」を型で表す道具Optional は、型ヒントの世界で「この値は、あるときは T 型だけど、ないときは None かもしれない」という状態を表...
Python

Python | テスト・設計・品質:typing 型ヒント

型ヒントって何?まずは「コメント」だと思ってOKPython の「型ヒント(type hints)」は、「この変数や関数は、こういう型を想定しているよ」という情報を、コードの中に書き添える仕組みです。...
Java

Java Tips | 日付・時間:日付加算

「日付加算」は“カレンダーの面倒を Java に任せる”こと日付加算は、「今日から 7 日後」「月末から 1 日後」「3 ヶ月後の同じ日」といった“カレンダー計算”をコードでやることです。これを自前で...
Java

Java Tips | 日付・時間:日時→文字列

「日時→文字列」は“見せ方を決める”作業日時オブジェクト(LocalDate や LocalDateTime など)は、そのままだと「内部的に意味のある値」ですが、人間には少し分かりにくいことがありま...
Java

Java Tips | 日付・時間:文字列→日時

文字列→日時変換の全体イメージ「String で受け取った日付・時刻」を、そのまま文字列のまま扱うと、比較・加算・バリデーションがすべて自前実装になってしまいます。そこでやるべきことはシンプルで、「文...
Java

Java Tips | 日付・時間:Calendar変換

Calendar は「古い日付 API」だが、変換パターンを覚えれば怖くないjava.util.Calendar は、Date と同じく“古い日付 API”です。今の Java では LocalDat...
Java

Java Tips | 日付・時間:Date変換

古い Date と新しい java.time を「つなぐ」という発想java.util.Date は、昔からある「日時クラス」です。でも今の Java では、LocalDate / LocalTime...
Java

Java Tips | 日付・時間:Instant変換

Instant は「世界共通の“瞬間”を表すタイムスタンプ」Instant は、「UTC を基準にした、世界共通の“ある瞬間”」 を表すクラスです。「1970-01-01T00:00:00Z(UTC)...
Java

Java Tips | 日付・時間:ZonedDateTime生成

ZonedDateTime は「タイムゾーン付きの日時」ZonedDateTime は、「日付(年月日)+時刻(時分秒)+タイムゾーン」 をまとめて扱うクラスです。LocalDateTime は「どこ...
Java

Java Tips | 日付・時間:LocalDateTime生成

LocalDateTime は「日付+時刻」をまとめて扱うクラスLocalDateTime は、「年月日」と「時分秒(ナノ秒まで)」を一つにまとめて扱うクラスです。 タイムゾーンは持たないので、「ある...
Java

Java Tips | 日付・時間:LocalTime生成

LocalTime は「時刻だけ」を扱うクラスLocalTime は、「時・分・秒だけ」を扱うクラスです。日付(年月日)もタイムゾーンも持ちません。「営業開始時刻(09:00)」「締切時刻(17:30...
Java

Java Tips | 日付・時間:LocalDate生成

LocalDate は「日付だけ」を扱うクラスLocalDate は、「年月日だけ」を扱うクラスです。時刻(時分秒)もタイムゾーンも持ちません。「請求日」「締切日」「誕生日」「営業日」など、“日付だけ...
Python

Python 業務自動化 | Excel業務自動化:Excel基本操作 - コメント追加

コメント追加は「Excelに説明・注意書き・補足情報を埋め込み、使いやすいシートを作る」ための便利テクニックExcel業務自動化では、セルにコメント(メモ)を追加する処理がとても役立ちます。コメントを...
Python

Python 業務自動化 | Excel業務自動化:Excel基本操作 - データ検証設定

データ検証設定は「入力ミスを防ぎ、Excelを“壊れないシート”にする」ための最強テクニックExcel業務自動化では、データ検証(Data Validation)が非常に重要です。なぜなら、次のような...
Python

Python 業務自動化 | Excel業務自動化:Excel基本操作 - 条件付き書式

条件付き書式は「値に応じて自動で色や書式を変え、異常値や重要データを一瞬で見分ける」ための武器条件付き書式は、「セルの値に応じて、自動で色・フォント・アイコンなどを変える仕組み」です。人間が目でチェッ...
Python

Python 業務自動化 | Excel業務自動化:Excel基本操作 - Excelフィルタ

Excelフィルタは「必要なデータだけを抽出し、業務に必要な情報を瞬時に取り出す」ための超重要スキルExcel業務自動化では、フィルタ(抽出)が非常に多く登場します。なぜなら、実務のExcelは次のよ...
スポンサーリンク