スポンサーリンク
Java

Java | Web 基礎・HTTP・REST:Web 全体像 - 静的コンテンツ

静的コンテンツを一言でいうと静的コンテンツは、「サーバー側で中身が変わらないファイルを、そのままブラウザに配るもの」です。HTML、CSS、画像(PNG/JPEG)、JavaScript ファイル、P...
Java

Java | Web 基礎・HTTP・REST:Web 全体像 - アプリケーションサーバー

アプリケーションサーバーを一言でいうとアプリケーションサーバーは「ビジネスロジックを本気で動かすための“Java 実行プラットフォーム”」だと思ってください。Web サーバーが「HTTP を受け取って...
Java

Java | Web 基礎・HTTP・REST:Web 全体像 - Web サーバーとは

Web サーバーを一言でいうとWeb サーバーは、「ブラウザ(クライアント)からの HTTP リクエストを受け取り、HTTP レスポンスを返す“受付兼配達係”」です。ブラウザが「このページください」「...
Java

Java | Web 基礎・HTTP・REST:Web 全体像 - ブラウザの役割

ブラウザの役割を一言でいうとブラウザは、「人間と Web の世界をつなぐ“通訳兼プレイヤー”」です。人間が URL を入力したりボタンを押したりすると、ブラウザがサーバーに HTTP リクエストを送り...
Java

Java | Web 基礎・HTTP・REST:Web 全体像 - クライアントとサーバー

クライアントとサーバーを一言でいうとクライアントとサーバーは、「お願いする側」と「応える側」です。ブラウザやスマホアプリが クライアント、そのリクエストを受け取って処理するのが サーバー。Web の世...
Java

Java | Web 基礎・HTTP・REST:Web 全体像 - Web アプリの仕組み

Web 全体像をざっくりつかむまずは「ブラウザで URL を開くと、裏で何が起きているのか」をイメージでつかみましょう。あなたがブラウザに と入力して Enter を押すと、ブラウザは「サーバー」に対...
JavaScript

JavaScript | 非同期処理:実務での非同期制御 - 排他制御の考え方

排他制御を一言でいうと排他制御(はいたせいぎょ)は、「同時に走ると困る処理を、“必ず1つずつしか動かさないようにする考え方” です。非同期処理が増えてくると、「同じデータを同時に書き換える」「同じ処理...
JavaScript

JavaScript | 非同期処理:実務での非同期制御 - 競合状態(Race Condition)

競合状態(Race Condition)を一言でいうと競合状態(Race Condition)は、「どっちの非同期処理が先に終わるかによって、結果が変わってしまう危険な状態」 です。コード上は「こう動...
JavaScript

JavaScript | 非同期処理:実務での非同期制御 - 非同期状態管理

「非同期状態管理」を一言でいうと非同期状態管理は、「今この非同期処理が、どの状態にいるのかをコードと UI で一貫して扱うこと」 です。例えば、API 呼び出しひとつ取っても、状態はざっくりこう変わり...
JavaScript

JavaScript | 非同期処理:実務での非同期制御 - WebSocket との比較

WebSocket とポーリングの違いを一言でまとめるとポーリングは 「クライアントが定期的にサーバーへ様子を見に行く」 方式。WebSocket は 「サーバーとクライアントが常時つながり、サーバー...
JavaScript

JavaScript | 非同期処理:実務での非同期制御 - ポーリング

ポーリングを一言でいうとポーリング(polling)は、「サーバー側の状態が変わったかどうかを、クライアント側から定期的に“様子見”しに行く仕組み」です。サーバーから「変わったよ!」と通知してくれるの...
JavaScript

JavaScript | 非同期処理:実務での非同期制御 - スロットリング

スロットリングを一言でいうとスロットリング(throttle)は、「どれだけ連続でイベントが発生しても、“一定間隔ごとにしか処理を実行させない”テクニック です。スクロール、マウス移動、リサイズなどは...
JavaScript

JavaScript | 非同期処理:実務での非同期制御 - デバウンス

デバウンスを一言でいうとデバウンスは、「連続して何度も呼ばれる処理を、“最後の1回だけ”にまとめるテクニック」 です。ユーザーがキーボードを連打したり、入力ボックスに高速で文字を打ち込んだりすると、イ...
JavaScript

JavaScript | 非同期処理:実務での非同期制御 - キャンセル処理(AbortController)

キャンセル処理(AbortController)を一言でいうとAbortController は、「一度投げた非同期処理(特に fetch)を、あとから“やっぱりやめる”と止めるための仕組み」 です。...
JavaScript

JavaScript | 非同期処理:実務での非同期制御 - 多重送信防止

多重送信防止を一言でいうと多重送信防止は、「ユーザーが同じ操作を連打しても、サーバーには“1 回分だけ”しか飛ばさないようにする仕組み」 です。非同期処理(特にフォーム送信やボタン押下)では、ユーザー...
JavaScript

JavaScript | 非同期処理:実務での非同期制御 - ローディング表示

ローディング表示を一言でいうとローディング表示は、「今、アプリはちゃんと動いているよ。止まっているんじゃなくて“待っているだけ”だよ」とユーザーに伝えるためのサインです。非同期処理(fetch / A...
TypeScript

TypeScript | 関数・クラス・ジェネリクス:ジェネリクス基礎 - 明示的に型を指定するケース

ゴール:「ふだんは推論に任せる。でも“ここだけは型を言語化したい”場面を見抜けるようになる」ジェネリクスは基本的に「型推論に任せる」のが正解です。それでも、あえて <T> を書いた方がいい場面がいくつ...
TypeScript

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

ゴール:「<T> を書かなくても、勝手に T を決めてくれる感覚をつかむジェネリクスの一番おいしいところのひとつが、「型パラメータをほとんど書かなくていい」ことです。TypeScript が、関数の引...
TypeScript

TypeScript | 関数・クラス・ジェネリクス:ジェネリクス基礎 - デフォルト型パラメータ

ゴール:「毎回 <T, string> と書かなくても済む“親切なジェネリクス”を書けるようになるデフォルト型パラメータは一言でいうと、「ジェネリクスに“デフォルトの型”を用意しておく仕組み」です。関...
TypeScript

TypeScript | 関数・クラス・ジェネリクス:ジェネリクス基礎 - 制約付きジェネリクス関数

ゴール:「なんでも T」ではなく「こういう T だけOK」を自分でコントロールできるようになる制約付きジェネリクス関数は一言でいうと、「ジェネリクスの“自由さ”に、ちょっとだけ“条件”を足した関数」で...
TypeScript

TypeScript | 関数・クラス・ジェネリクス:ジェネリクス基礎 - 型パラメータの制約(extends)

ゴール:「T はなんでもアリ」から「T は“こういう型だけ”に絞る」感覚をつかむジェネリクスに制約(extends)をつける一番の目的は、「T はなんでもいいわけじゃなくて、“この条件を満たす型だけ”...
TypeScript

TypeScript | 関数・クラス・ジェネリクス:ジェネリクス基礎 - 複数型パラメータ

ゴール:「T だけじゃ足りないときに、自然に型パラメータを増やせるようになる」ジェネリクスに慣れてくると、「T だけじゃ足りないな…もう1種類、型を扱いたい」という場面が必ず出てきます。複数型パラメー...
TypeScript

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

ゴール:「どっちも“なんでも受け取れる”のに、なぜジェネリクスが偉いのか」を腑に落とすジェネリクスも any も、一見どちらも「どんな型でも受け取れる」ように見えます。だからこそ初心者ほどこう思いやす...
TypeScript

TypeScript | 関数・クラス・ジェネリクス:ジェネリクス基礎 - 型パラメータの命名規則

ゴール:「T って何?を“意味のある名前”にできるようになる」ジェネリクスを書き始めると、まず最初に出てくる疑問がこれです。「T って、なんでみんな T って書いてるの?U とか K とか、あれ何?」...
TypeScript

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

ゴール:「型だけ違う同じ関数」を、1本のジェネリック関数で書けるようになるジェネリック関数の本質はとてもシンプルです。「型だけ違って、やっていることは同じ関数」を、1本にまとめるための書き方です。<T...
TypeScript

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

ゴール:「型を“あとから差し込める穴”として扱う感覚をつかむ」ジェネリクス(Generics)は一言でいうと、「型に“変数”を導入して、あとから具体的な型を差し込める仕組み」です。関数でいうと、(x:...
C#

C# | 2週間で身につくアプリを作りながら学ぶC#の基本 - 14日目

14日目のゴールとテーマ14日目のテーマは「2週間で作ってきたものを“振り返りながら仕上げる”」です。今日は新しい文法をどんどん増やす日ではなく、今ある診断アプリを「自分の手で少し改造してみる」2週間...
C#

C# | 2週間で身につくアプリを作りながら学ぶC#の基本 - 13日目

13日目のゴールとテーマ13日目のテーマは「エラーに強いアプリにする(例外処理とメニュー化)」です。ここまでで、機能としてはかなり“それっぽい”アプリになってきましたが、まだ弱いところがあります。ファ...
C#

C# | 2週間で身につくアプリを作りながら学ぶC#の基本 - 12日目

12日目のゴールとテーマ12日目のテーマは「クラス同士に“役割分担”をさせて、アプリ全体を整理する」です。10〜11日目で、Result クラスと List<Result>、LINQ を使って「データ...
C#

C# | 2週間で身につくアプリを作りながら学ぶC#の基本 - 11日目

10日目のテーマとゴール10日目は「複数の診断結果(Result オブジェクト)をまとめて扱い、集計や検索ができるようにする」ことがテーマです。昨日は Result クラスを作り、ログ1行を Resu...
C#

C# | 2週間で身につくアプリを作りながら学ぶC#の基本 - 10日目

10日目のゴールとテーマ10日目のテーマは「クラスとオブジェクトで“自分の型”を作る」です。ここまでは、int や string、DateTime のような「既に用意されている型」を使ってきました。今...
C#

C# | 2週間で身につくアプリを作りながら学ぶC#の基本 - 9日目

9日目のゴールとテーマ9日目のテーマは「“記録”を少しだけ本格的にする」です。8日目で、診断結果をファイルに保存して「履歴」を持てるようになりました。今日はそこから一歩進めて、日付と時刻も一緒に保存す...
C#

C# | 2週間で身につくアプリを作りながら学ぶC#の基本 - 8日目

8日目のゴールとテーマ8日目のテーマは「ファイルに保存して“アプリの記憶”を持たせる」です。これまでのアプリは、実行している間だけ動き、終了するとすべて消えていました。今日はここに一歩踏み込んで、テキ...
C#

C# | 2週間で身につくアプリを作りながら学ぶC#の基本 - 7日目

7日目のゴールとテーマ7日目のテーマは「ここまでの全部を使って、1つの“ちゃんとしたミニアプリ”を完成させる」です。1〜6日目で学んだのは、入力、出力、if、for、配列、メソッド。今日はそれらをバラ...
C#

C# | 2週間で身につくアプリを作りながら学ぶC#の基本 - 6日目

6日目のゴールとテーマ6日目のテーマは「メソッドでコードを“部品化”する」です。ここまでで、入力・条件分岐・繰り返し・配列・クイズアプリの土台まで来ました。今日はそこに「メソッド」という考え方を足して...
CSS

CSS Tips | 超実務コアCSSテクニック:ボックスモデル - border-radius応用

border-radius 応用を理解すると「角のデザイン」で一気にプロっぽくなるborder-radius は「角を丸くする」だけじゃなく、カード・バッジ・吹き出し・ピル型ボタン・円形サムネイルなど...
CSS

CSS Tips | 超実務コアCSSテクニック:ボックスモデル - borderの省略記法

border の省略記法を理解すると「短く・正確に・読みやすく」書けるborder は CSS の中でも使用頻度が高いプロパティですが、省略記法(ショートハンド)を理解するとコード量が減り、意図が明確...
CSS

CSS Tips | 超実務コアCSSテクニック:ボックスモデル - line-heightセンタリング

line-height を使ったセンタリングは「テキストを縦方向に揃える」ための最もシンプルな方法line-height は本来「行の高さ」を決めるプロパティですが、単一行のテキストを縦方向に中央揃え...
CSS

CSS Tips | 超実務コアCSSテクニック:ボックスモデル - vertical-align

vertical-align を理解すると「インライン要素のズレ」が自在にコントロールできるvertical-align は名前だけ見ると「縦方向の中央揃え」に使えそうですが、実際は インライン要素・...
CSS

CSS Tips | 超実務コアCSSテクニック:ボックスモデル - object-position

object-position を理解すると「どこを切り取るか」をコントロールできるobject-position は、object-fit とセットで使うと真価を発揮するプロパティです。一言でいうと...
CSS

CSS Tips | 超実務コアCSSテクニック:ボックスモデル - object-fit

object-fit を理解すると「画像・動画が枠にきれいに収まる」デザインが作れるobject-fit は、画像や動画を「どのように枠に収めるか」をコントロールするプロパティです。縦横比がバラバラな...
CSS

CSS Tips | 超実務コアCSSテクニック:ボックスモデル - aspect-ratio活用

アスペクト比(aspect-ratio)を理解すると「どんな画面でも崩れない」レイアウトが作れるaspect-ratio は、ボックスモデルの中でも 画像・カード・動画枠・サムネイルなど、縦横比を固定...
CSS

CSS Tips | 超実務コアCSSテクニック:ボックスモデル - min-height / max-height

min-height / max-height を理解すると「高さが安定した UI」が作れるmin-height / max-height は、ボックスモデルの中でも 高さの伸び縮みをコントロールする...
CSS

CSS Tips | 超実務コアCSSテクニック:ボックスモデル - min-width / max-width

min-width / max-width を理解すると「伸び縮みするレイアウト」が自在に扱えるmin-width / max-width は、ボックスモデルの中でも レスポンシブ設計の核になるプロパ...
CSS

CSS Tips | 超実務コアCSSテクニック:ボックスモデル - overflow-x / y分離

overflow-x / overflow-y を分離してコントロールすると「横だけスクロール」「縦だけ切り取り」が自在になるoverflow は「要素の中身がはみ出したときの扱い」を決めますが、ov...
C#

C# | 2週間で身につくアプリを作りながら学ぶC#の基本 - 5日目

5日目のゴールとテーマ5日目のテーマは「文字列の配列を使って、クイズアプリの土台を作る」です。4日目までは「数値の配列」で点数を扱いましたが、今日は質問文や選択肢、答えを「文字列の配列」で管理するfo...
C#

C# | 2週間で身につくアプリを作りながら学ぶC#の基本 - 4日目

4日目のゴールとテーマ4日目のテーマは「配列で“まとめて”データを扱う」です。3日目までは、点数や年齢などを「1 個ずつ」変数に入れていました。今日はここを一気にレベルアップさせて、複数の点数を「配列...
C#

C# | 2週間で身につくアプリを作りながら学ぶC#の基本 - 3日目

3日目のゴールとテーマ3日目のテーマは「繰り返し(ループ)で、同じ処理を自動化する」です。1日目は「表示と入力」、2日目は「条件分岐(if)」でした。今日はそこに「同じことを何回もやる」を足して、アプ...
C#

C# | 2週間で身につくアプリを作りながら学ぶC#の基本 - 2日目

2日目のゴールとテーマ2日目のテーマは「条件分岐(if 文)で、アプリに“判断”をさせる」です。昨日は「入力してもらったものを、そのまま表示する」だけでした。今日はそこに一歩踏み込んで、「入力された内...
C#

C# | 2週間で身につくアプリを作りながら学ぶC#の基本 - 1日目

この2週間コースと「1日目」のゴール1日目のテーマは、難しいことを全部横に置いて「C# のコードを自分の手で書いて、コンソールアプリを1つ動かす」ここまで行くことです。今日のゴールは次の3つです。C#...
JavaScript

JavaScript | 1 日 120 分 × 7 日アプリ学習:モーダルウィンドウ管理

1日目のゴールと今日やること1日目のテーマは「モーダルウィンドウを“クラス”として設計し、きれいに開閉を制御できるようになる」ことです。今日のゴールは、ざっくり言うとこの3つです。モーダルを「1つのク...
PHP

PHP Tips | 文字列処理:ログ・表示向け - デバッグ用 var_export 文字列化

「デバッグ用 var_export 文字列化」とは何をしたいのかデバッグしているとき、「この変数の中身、今どうなってるの?」って何度も思いますよね。配列、オブジェクト、ネストしたデータ構造……目で確認...
PHP

PHP Tips | 文字列処理:ログ・表示向け - 長文をログ向け短縮

なぜ「長文をログ向け短縮」する必要があるのか業務システムのログには、ときどき「とんでもなく長い文字列」が流れてきます。巨大な JSON、ユーザーの長文入力、外部 API のレスポンス全文などが典型です...
PHP

PHP Tips | 文字列処理:ログ・表示向け - ログ用 1 行整形

なぜ「ログ用 1 行整形」が必要なのかログって、本来は「あとから原因を追いやすくするための情報」ですよね。でも、何も考えずに文字列をそのまま error_log() に投げていると、こうなりがちです。...
PHP

PHP Tips | 文字列処理:ログ・表示向け - エラーメッセージ整形

なぜ「エラーメッセージ整形」が必要なのかエラーメッセージって、放っておくとすぐに「バラバラ」になります。同じようなエラーなのに、「必須です」「入力してください」「この項目は必須です」みたいに表現が揺れ...
PHP

PHP Tips | 文字列処理:ログ・表示向け - 表示安全文字列生成

「表示安全文字列生成」とは何をするものかここで言う「表示安全文字列」は、ざっくり言うとこういう文字列です。画面に出してもレイアウトが壊れない。ログに出してもビューアが変にならない。HTML やターミナ...
PHP

PHP Tips | 文字列処理:ログ・表示向け - 制御文字除去

なぜ「制御文字除去」が必要になるのか業務で外部システムやユーザー入力の文字列を扱っていると、ときどき「見えない変な文字」が紛れ込みます。コピー&ペーストしたテキスト、外部 API のレスポンス、古いシ...
PHP

PHP Tips | 文字列処理:ログ・表示向け - 伏字変換

「伏字変換」で何をしたいのか伏字変換は、「文字列の一部を別の文字(*や●など)に置き換える」ことです。目的はだいたい 2 つあります。1つ目は「見せたくない情報を隠す」こと。NG ワード、暴言、機密情...
PHP

PHP Tips | 文字列処理:ログ・表示向け - 表示用マスク(名前)

「表示用マスク(名前)」で何を守りたいのか名前も、メールや電話と同じく「個人を特定しやすい情報」です。でも業務では、こういうニーズがよく出てきます。ログや通知には「誰の処理か」は分かりたい。サポート画...
PHP

PHP Tips | 文字列処理:ログ・表示向け - 表示用マスク(電話)

「表示用マスク(電話)」で何を守りたいのか電話番号もメールと同じく、個人をかなり特定できる情報です。でも業務では、こういうニーズがよく出てきます。誰のレコードかは判別したい。ログや画面には「丸裸の番号...
スポンサーリンク