JavaScript
JavaScript | 1 日 90 分 × 7 日アプリ学習：タブ切り替えアプリ（初級編）
@lifehacker
C# C# Tips | コレクション・LINQ：HashSet活用
はじめに：「HashSet活用」は“とにかく速く・かんたんに重複と集合を扱う”技業務で LINQ やコレクションを使っていると、こういう処理がよく出てきます。同じ値が含まれているかを高速に判定したい重...
C# C# Tips | コレクション・LINQ：比較用EqualityComparer
はじめに：「比較用EqualityComparer」は“何をもって同じとみなすか”をコードにする道具LINQ やコレクションを使っていると、こういう場面がよく出てきます。「ユーザーIDが同じなら同じユ...
C# C# Tips | コレクション・LINQ：シャローコピー
はじめに：「シャローコピー」は“速いけど、油断すると元を汚すコピー”ディープコピーの逆側にあるのが シャローコピー（浅いコピー） です。一言でいうと、「入れ物は別だけど、中身（参照先）はそのまま共有す...
C# C# Tips | コレクション・LINQ：ディープコピー
はじめに：「ディープコピー」は“元データを絶対に汚したくないときの保険”業務コードを書いていると、こういうことが起きがちです。「編集用にコピーしたつもりが、元のデータまで変わってしまった」「画面でキャ...
C# C# Tips | コレクション・LINQ：Immutable変換
はじめに：「Immutable変換」は“絶対に書き換えられないコレクション”を手に入れる技業務システムを書いていると、こういう悩みが出てきます。「このコレクション、誰かにうっかり書き換えられてバグにな...
C# C# Tips | コレクション・LINQ：Span対応変換
はじめに：「Span対応変換」は“速さを意識した LINQ の次の一歩”LINQ は書きやすいけれど、「配列や文字列をガッツリ触る処理」でパフォーマンスを突き詰めたいときには、メモリ確保（アロケーショ...
C# C# Tips | コレクション・LINQ：ReadOnlyCollection化
はじめに：「ReadOnlyCollection化」は“触ってほしくないコレクションに鍵をかける”技業務コードを書いていると、こういう気持ちになる場面がよくあります。「このコレクション、外から中身をい...
C# C# Tips | コレクション・LINQ：ObservableCollection変換
はじめに：「ObservableCollection変換」は“画面とコレクションをつなぐ橋”業務アプリ（特に WPF / MAUI / WinUI など）を書くと、List<T> や IEnumera...
C# C# Tips | コレクション・LINQ：キャッシュ付き検索
はじめに：「キャッシュ付き検索」は“同じものを何度も探さない”ための技LINQ で検索を書くとき、最初はだいたいこうなります。var user = users.FirstOrDefault(x => ...
C# C# Tips | コレクション・LINQ：高速検索
はじめに：「高速検索」は“探し方を変えるだけで世界が変わる”テクニックLINQ を覚えたての頃は、だいたいこう書きがちです。var user = users.FirstOrDefault(x => x...
C# C# Tips | コレクション・LINQ：順序保持Distinct
はじめに：「順序保持 Distinct」は“最初に出てきた順だけを残す”技「重複を消したいけど、元の並び順は崩したくない」——業務でデータを扱っていると、かなり頻繁に出てきます。ログの順番はそのままに...
C# C# Tips | コレクション・LINQ：重複カウント
はじめに：「重複カウント」は“どれがどれだけ被っているか”を一発で見抜く技業務でデータを扱っていると、こういうことを知りたくなる場面がよく出てきます。どの商品が何回注文されているかどのユーザーが何回ロ...
C# C# Tips | コレクション・LINQ：インデックス付きSelect
はじめに：「インデックス付き Select」は“要素の値＋位置情報”を同時に扱える便利ワザLINQ の Select は「値を変換する」ためのメソッドですが、実務では「値だけでなく、その要素が何番目か...
C# C# Tips | コレクション・LINQ：Empty除外
はじめに：「Empty除外」は“中身がないものを先にどかす”テクニックnull を除外する話をしましたが、実務ではもう一つよく出てくる「やっかいな存在」がいます。それが「空文字」や「空コレクション」、...
C# C# Tips | コレクション・LINQ：Null除外
はじめに：「Null除外」は“ゴミを先に掃き出してから考える”テクニック業務コードを書いていると、ほぼ確実にこうなります。データのどこかに null が紛れ込むnull を意識せずにプロパティにアクセ...
C# C# Tips | コレクション・LINQ：AsParallel制御
はじめに：「AsParallel制御」は“並列の暴れ方に手綱をつける”技前回の「並列 LINQ」は、「AsParallel() を付けると並列になるよ」という話でした。でも、実務で本気で使うなら、どれ...
C# C# Tips | コレクション・LINQ：並列LINQ
はじめに：「並列 LINQ」は“同じ処理をみんなで手分けする”仕組み同じような処理を大量のデータに対して繰り返すとき、1 件ずつ順番に処理するとどうしても時間がかかります。そこで出てくるのが「並列 L...
C# C# Tips | コレクション・LINQ：Batch処理
はじめに：「Batch処理」は“まとめてやるけど、やり過ぎない”ための設計業務で C# を書いていると、こういう悩みがよく出てきます。一度に 10 万件 INSERT すると重いし、失敗したときの巻き...
JavaScript JavaScript | Web API：クリップボード・共有 － UX 改善パターン
クリップボード・共有の UX は「技術」より「気づかい」で差がつくコピー・ペースト・共有って、コード的にはどれも数行で書けます。でも、「使っていて気持ちいいかどうか」 はその数行の周りにある“気づかい...
JavaScript JavaScript | Web API：クリップボード・共有 － URL 共有
「URL 共有」は“このページを誰かに渡す”ための一番シンプルな機能URL 共有は、ざっくり言うと「今見ているページのリンクを、他の人や自分の別の端末に渡す」ための仕組みです。JavaScript で...
JavaScript JavaScript | Web API：クリップボード・共有 － ネイティブ共有
「ネイティブ共有」は“ブラウザの外の世界”に渡すための出口Web アプリの中だけなら、URL をコピーしたり、画面に何か表示したりすれば完結します。でも実際のユーザーは、このページを LINE で送り...
JavaScript JavaScript | Web API：クリップボード・共有 － Share API
Share API は「このページいい感じだから誰かに送ろう」をボタン一発にする仕組みスマホでブラウザを見ていると、「共有」ボタンからLINE やメール、Twitter などに URL を送れますよね...
JavaScript JavaScript | Web API：クリップボード・共有 － セキュリティ制限
クリップボードのセキュリティ制限は「ユーザーを守るための強いガード」クリップボードには、ユーザーがコピーしたあらゆる情報が入ります。パスワード、クレカ番号、住所、仕事の文章、社外秘のコード——全部です...
JavaScript JavaScript | Web API：クリップボード・共有 － 読み取り権限
クリップボードの「読み取り権限」は“ユーザーのプライバシーを守るための最重要ポイント”クリップボードには、ユーザーがコピーした パスワード・住所・クレカ番号・仕事の文章 など、とてもセンシティブな情報...
JavaScript JavaScript | Web API：クリップボード・共有 － 書き込み権限
「書き込み権限」は“クリップボードを勝手にいじらないためのブレーキ”Clipboard API の「書き込み権限」は、ざっくり言うと 「このサイトに、クリップボードへ書き込ませていいか？」 をブラウザ...
JavaScript JavaScript | Web API：クリップボード・共有 － ペースト処理
「ペースト処理」は“ユーザーのクリップボードの中身を、アプリに連れてくる”ことコピー処理が「アプリ → クリップボード」だとしたら、ペースト処理はその逆、「クリップボード → アプリ」 です。ユーザー...
JavaScript JavaScript | Web API：クリップボード・共有 － コピー処理
「コピー処理」は“ユーザーの手を 1 回減らす”ための仕組みコピー処理は、ユーザーが本来やるはずだったテキストをドラッグで選択Ctrl+C / 右クリック → コピーという手順を、ボタン 1 回で代わ...
JavaScript JavaScript | Web API：クリップボード・共有 － Clipboard API
Clipboard API は「コピー／ペーストをコードから扱うための正式な入口」普段、コピーやペースストはキーボードの Ctrl+C / Ctrl+V や右クリックメニューでやりますよね。Clipb...
Python Python 業務自動化 | Excel業務自動化：Excel基本操作 － Excelテンプレ作成
Excelテンプレ作成は「毎回同じフォーマットを自動生成し、作業時間を大幅削減する」ための最強スキルExcel業務自動化の中でも、テンプレート（雛形）を自動生成する処理は特に効果が大きいです。なぜなら...
Python Python 業務自動化 | Excel業務自動化：Excel基本操作 － 別名保存
別名保存は「元ファイルを壊さず、安全に新しいExcelを作る」ための超重要テクニックExcel業務自動化では、別名保存（Save As） が非常に重要です。なぜなら、次のような実務ニーズがあるからです...
Python Python 業務自動化 | Excel業務自動化：Excel基本操作 － Excel保存
Excel保存は「作ったExcelを確実に残し、業務自動化を完成させる」ための最重要ステップPythonでExcelを操作する際、保存処理（save）は必ず最後に必要になります。どれだけセル操作・書式...
Python Python 業務自動化 | Excel業務自動化：Excel基本操作 － 行高さ変更
行高さ変更は「Excelの見た目を整え、読みやすいシートを自動生成する」ための基本テクニックExcel業務自動化では、行の高さを調整する処理がとても重要です。なぜなら、次のような問題を防げるからです。...
Python Python 業務自動化 | Excel業務自動化：Excel基本操作 － 列幅変更
列幅変更は「Excelの見やすさを劇的に改善し、読みやすい帳票を自動生成する」ための基本テクニックExcel業務自動化では、列幅を自動で調整する処理がとても重要です。なぜなら、次のような問題を防げるか...
Python Python | テスト・設計・品質：Web アプリの本番運用
「本番運用」って何？一言でいうと「“たまたま動く”から“24時間ちゃんと動き続ける”にすること」ローカルで FastAPI や Django を動かして「動いた！」は、まだスタートラインです。本番運用...
Python Python | テスト・設計・品質：API のモック
APIのモックって何？一言でいうと「本物の代わりに動く“テスト用の偽物サーバー”」API のモックは、「本物の外部APIを呼ばずに、その代わりをする“偽物”を用意してテストすること」です。本物のAPI...
Python Python | テスト・設計・品質：環境変数管理
環境変数管理って何？一言でいうと「コードに書いちゃいけない“秘密と設定”を外に出してあげること」環境変数管理は、「本番・開発・テストで変わる値」や「絶対にコードに埋め込んではいけない秘密」を、コードの...
Python Python | テスト・設計・品質：コンテナ構築
コンテナ構築って何？一言でいうと「動く箱を作るための“レシピづくり＋焼き上げ”」ここでいう「コンテナ構築」は、ほぼ「Docker コンテナを作ること」と考えてOKです。レシピを書くフェーズ（Docke...
Python Python | テスト・設計・品質：Docker
Dockerって何？一言でいうと「どこでも同じように動く“持ち運べる開発環境”」Docker は、ざっくり言うと「アプリとその周りの環境を、ひとまとめにして箱に入れて持ち運べるようにする仕組み」です。...
Python Python | 1 日 120 分 × 7 日アプリ学習：クラスで作る商品管理アプリ（中級編）
1日目のゴール1日目のテーマは「class・__init__・オブジェクトを、“商品”という身近な題材で体に入れること」 です。辞書でユーザーを扱ったときと同じように、今度は「商品」をクラスで表現して...
CSS CSS Tips | 超実務コアCSSテクニック：タイポグラフィ － 見出しスケール設計
見出しスケール設計は「階層の意味 × 読みやすさ × デザインの一貫性」を作る技術見出し（H1〜H6）は、ただ大きさを変えるだけでは不十分です。階層の差が明確で、読みやすく、デザインとして美しいスケー...
CSS CSS Tips | 超実務コアCSSテクニック：タイポグラフィ － リンクデザイン設計
リンクデザインは「読みやすさ × 分かりやすさ × 美しさ」を同時に満たす設計リンクは UI の中で最も重要な要素のひとつ。どれがリンクか一瞬で分かること、読みやすく邪魔にならないこと、デザインとして...
CSS CSS Tips | 超実務コアCSSテクニック：タイポグラフィ － text-decoration応用
text-decoration は「線の種類・位置・色・太さ」を自由に操るプロパティリンクの下線だけでなく、強調・アクセント・装飾・UI 表現 まで幅広く使えるのが text-decoration の...
CSS CSS Tips | 超実務コアCSSテクニック：タイポグラフィ － text-align最適化
text-align は「文章の重心」を決めるプロパティ文章は“どこに揃えるか”だけで読みやすさや印象が大きく変わります。text-align を最適化すると、見出し・本文・UI ラベル・ボタン・カー...
CSS CSS Tips | 超実務コアCSSテクニック：タイポグラフィ － writing-mode
writing-mode は「文字の流れる方向」を変えるプロパティ横書き・縦書き・縦中横など、日本語特有のレイアウトにも対応できる強力な CSS 機能です。特に日本語サイトでは、縦書きの見出し・帯・サ...
CSS CSS Tips | 超実務コアCSSテクニック：タイポグラフィ － word-break制御
word-break は「単語のどこで折り返すか」をコントロールするプロパティテキストが枠からはみ出すとき、どこで折り返すか（または折り返さないか） を決めるのが word-break です。特に日本...
CSS CSS Tips | 超実務コアCSSテクニック：タイポグラフィ － white-space制御
white-space は「改行・空白・折り返し」をコントロールするタイポグラフィの基礎文章がどう折り返されるか、空白がどう扱われるかは 読みやすさ・レイアウトの安定性 に直結します。white-sp...
CSS CSS Tips | 超実務コアCSSテクニック：タイポグラフィ － text-overflow省略
text-overflow は「入りきらないテキストをどう見せるか」をコントロールするUI デザインでは、タイトル・カード・ボタン・リストなど、テキストが枠からはみ出す場面が必ず発生します。そのときに...
CSS CSS Tips | 超実務コアCSSテクニック：タイポグラフィ － text-transform活用
text-transform は「文字の見せ方を一瞬で変える」タイポグラフィのスイッチ大文字化・小文字化・単語の頭だけ大文字など、文章の“印象”を一瞬で変える強力なプロパティ が text-trans...
CSS CSS Tips | 超実務コアCSSテクニック：タイポグラフィ － letter-spacing最適化
letter-spacing（字間調整）は「読みやすさ」と「デザインの質」を決める重要パラメータ特に日本語は欧文よりも字面が大きく、フォントによっても見え方が大きく変わるため、適切な letter-s...
CSS CSS Tips | 超実務コアCSSテクニック：タイポグラフィ － clampで可変フォント
clamp() を使うと「画面幅に応じて自然に伸び縮みするフォントサイズ」が作れるしかも、最小値・理想値・最大値を 1 行でコントロールできるので、レスポンシブタイポグラフィの“最強ツール”と言ってい...
CSS CSS Tips | 超実務コアCSSテクニック：タイポグラフィ － remとemの使い分け
rem と em は「どこを基準にサイズが決まるか」が違うだけでも、この違いを理解すると タイポグラフィ設計が一気に安定 します。rem → ルート（html）のフォントサイズを基準にするem → そ...
JavaScript JavaScript | Web API：ファイル・データ操作 － 大容量ファイルの扱い
「大容量ファイルの扱い」は“全部一気にやらない”が合言葉まず前提からいきます。数 KB〜数 MB 程度のファイルなら、FileReader.readAsText や readAsArrayBuffer...
JavaScript JavaScript | Web API：ファイル・データ操作 － CSV / JSON ファイル処理
CSV / JSON ファイル処理は「テキストとして読み、オブジェクトとして扱い、またテキストに戻す」流れCSV も JSON も、本質はただのテキストファイルです。JavaScript から扱うとき...
JavaScript JavaScript | Web API：ファイル・データ操作 － バイナリデータ処理
「バイナリデータ処理」は“0と1の生データ”を意識して触ることふだん JavaScript で扱っているのは、文字列・数値・オブジェクトなど「人間に優しい形」のデータです。でも、画像・音声・PDF・Z...
JavaScript JavaScript | Web API：ファイル・データ操作 － input type=”file”
input type="file" は「ユーザーにファイルを選んでもらうための唯一の正規ルート」まず大前提として、ブラウザの JavaScript は、勝手にユーザーのパソコンの中を覗けません。「この...
JavaScript JavaScript | Web API：ファイル・データ操作 － ドラッグ＆ドロップ
ドラッグ＆ドロップは「マウスでつかんで、そのままブラウザに渡す入力方法」ドラッグ＆ドロップ（D&D）は、「ユーザーがファイルや要素をマウスでつかんで、別の場所に“落とす”操作をイベントとして扱う仕組み...
JavaScript JavaScript | Web API：ファイル・データ操作 － ダウンロード処理
「ダウンロード処理」は“ブラウザの中のデータ”を“ユーザーのファイル”に変えることJavaScript でいう「ダウンロード処理」は、ブラウザの中にあるデータ（文字列・JSON・画像・Blob など）...
JavaScript JavaScript | Web API：ファイル・データ操作 － URL.createObjectURL
URL.createObjectURL は「Blob や File に一時的な URL を貼る魔法」URL.createObjectURL は、Blob や File に「一時的にアクセスできる UR...
JavaScript JavaScript | Web API：ファイル・データ操作 － Blob
Blob は「生データ（バイナリやテキスト）をまとめて持つ“データのかたまり”」Blob は、「ファイルっぽい“データのかたまり”をメモリ上に表現するためのオブジェクト」 です。画像・テキスト・JSO...
JavaScript JavaScript | Web API：ファイル・データ操作 － FileReader
FileReader は「ファイルの中身を“いろんな形”で読み出すための専用リーダー」前回の File API で出てきた File は、「ユーザーが選んだファイルへのハンドル（取っ手）」でした。でも...