Angularで画面遷移を実装していると、 「別のページへ遷移したのに、前のページのスクロール位置がそのまま残っている」 という現象に遭遇することがあります。 これはAngularの仕様であり、withInMemoryScrolling を利用することで簡単に改善できます。 原…
Angularでフォームを作っていると、こんな構成にしたくなることがあります。 親コンポーネント 名前入力コンポーネント 住所入力コンポーネント 確認ボタンコンポーネント つまり、 「1つのフォームを、複数の子コンポーネントで分割して使いたい」 というケ…
Angular 17以降では、新しい制御フロー構文として @for や @if が追加されました。 例えば一覧表示はこんな感じで書けます。 @for (food of foods; track food) { <li>{{ food }}</li> } 初めて見ると、 なんで `track food` が必要なの？ と思う方も多いはず。 実際…
Angularのモジュールで必ず出てくるこの2つ @NgModule({ declarations: [], providers: [] }) なんとなく使い分けているけど 何が違うの？ なぜ分かれているの？ この記事では 本質からシンプルに理解する。 結論（まずここだけ） declarations テンプレー…
CSS Gridで「ラベル + 値」のレイアウトを作ったとき、 名前 田中 年齢 30 これに「行ごとに下線を引きたい」と思うことがある。 でもここ、ちょっとハマりポイントがある。 前提（よくあるGridレイアウト） .kv { display: grid; grid-template-columns: 1…
CSS Gridを触っているとよく出てくるのが fr という単位。 最初は「これ何？」となりがちだけど、理解するとレイアウトが一気に楽になる。 frとは何か fr は fraction（フラクション）＝割合 の略。 残りスペースを分割する単位 これがポイント。 基本の使…
AngularでWebサイトを作ると「SEOに弱いのでは？」と思われがちですが、 SSR / SSGを導入すれば十分にSEOに強い構成にできます。 この記事では、Angular（特にSSG構成）で行うべき 定番のSEO対策を実装ベースで整理します。 前提（この記事の対象） Angular…
AngularでSEO対応をしたい場合、SSG（静的生成）はかなり有効です。 今回は Angular 19 で、特定ページだけSSGにする方法をまとめます。 ■ 前提 Angular 19 Standalone構成 ルーティング済み ■ やりたいこと / → SSG /privacy → SSG /terms → SSG /import-gu…
CSSでよく見る「BEM（ベム）」という命名規則。 .home__button--primary この書き方、いつから使われているのか気になりませんか？ この記事では、BEMの歴史と普及の背景を整理します。 結論 誕生：2010年前後 普及：2013〜2016頃 今では「CSS設計の基本思…
AngularやWeb開発をしていると、こんなクラス名を見たことありませんか？ class="home__primary-btn" この「__（アンダースコア2つ）」には意味があります。 これは BEM（Block Element Modifier） というCSS設計の命名ルールです。 BEMとは BEMは、CSSクラ…
AngularやWeb開発をしているとよく出てくる言葉。 CIでビルドする 最初はこう思うはずです。 CIってなに？ ローカルでビルドすればいいのでは？ 今回は、現場目線でシンプルに整理します。 結論 CI = コードをpushしたら自動でビルド・テストしてくれる仕組…
Angularプロジェクトなどでよく出てくる話。 「人によってビルド通る・通らない問題」 その対策としてよく出てくるのがこれ npm ci を使う 確かにこれは正しいんだけど、 誤解されがちなのが 「npm ciすれば全部同じになる」わけではない という点。 今回は…
現場でちょっとハマったのでメモ。 Angular20のプロジェクトで CSVパース用に ngx-papaparse を使っていたところ、 ビルドできる人 ビルドでエラーになる人 が混在するという現象が発生した。 しかも node_modules削除してもダメな人はダメ npm installして…
Javaで開発していると、一度はお世話になるのがLombokです。 ただ最近、 recordが出てきた DTOにrecordを使うようになった ことで、「Lombokいらなくなるのでは？」と思う人も多いはずです。 結論から言うと、 Lombokの出番は減っている でも完全には無くな…
Javaを触っていると「recordって何？」と思うことがあると思います。 結論から言うと、 record = データ専用クラスをシンプルに書くための仕組み です。 特にSpring Bootでは、DTOとして非常に相性が良いので、知っておくと設計が一気に楽になります。 recor…
Spring BootでAPIを作るときに、よく迷うのが「DTOとEntityの使い分け」です。 なんとなく動くコードはすぐ書けますが、設計を間違えると後で確実に崩れます。 この記事では、実務でよく使われる「王道の構成」を整理します。 全体構成 まずは全体の流れです…
Javaで LocalDate を使っていると、 この日付は過去？ 今日？ 未来？ みたいな判定をしたくなることがよくある。 結論から言うと、専用メソッドが用意されているのでシンプルに書ける。 基本の判定方法 LocalDate target = LocalDate.of(2026, 3, 17); Local…
Spring Bootを3.4から4.0に上げたとき、地味にハマったポイントがあったのでメモ。 AngularからこんなJSONを送っているとする。 { "xxDate": "2026/03/17" } これをSpring Boot側でDTOの Date 型で受けていた。 すると… Spring Boot 3.4 → 2026/03/17 00:00…
IT業界でよく聞く「ミドルウェア」という言葉。 なんとなく聞いたことはあるけど、具体的に何なのか曖昧な人も多いと思います。 今回は、ミドルウェアの基本をわかりやすく整理していきます。 ミドルウェアとは ミドルウェア（middleware）とは、 OS（基本ソ…
結論から言うと、 かなり可能性は高い。 ただし100％とは言い切れない。 です。 まず前提整理 Spring Boot（組み込みTomcat）の場合、 TomcatのバージョンはSpring Bootが管理 Spring Bootを上げるとTomcatも上がる 個別にTomcatだけを議論することは少ない …
結論から言うと、 ある。 ただし最近はあまり一般的ではない。 です。 Spring Bootの基本 Spring Bootは、デフォルトで「組み込みTomcat」を内蔵しています。 つまり、 java -jar app.jar で起動すれば、そのままWebサーバーが立ち上がります。 これがSpring…
JavaのWeb開発を少しかじると、よく出てくる構成があります。 ブラウザ ↓ Apache ↓ Tomcat なぜわざわざ2つもサーバーを置いていたのでしょうか？ そして今はどうなっているのでしょうか？ 歴史とともに整理します。 昔なぜApache + Tomcat構成だったのか？ …
結論から言うと、 一般的な家庭のインターネット環境では、 フォワードプロキシは通常使われていません。 フォワードプロキシとは？ フォワードプロキシは、 クライアントの代理として 外部のインターネットにアクセスするサーバーです。 構造はこうです。 …
Web開発をしているとよく出てくる言葉があります。 リバースプロキシ Apache + Tomcat構成 Nginxを前段に置く なんとなく「間に入るサーバー」という印象はあるけれど、 正確に説明できる人は意外と少ないです。 この記事ではシンプルに整理します。 まずプ…
よくある疑問です。 TomcatはWebサーバー機能も持っている じゃあApacheと同じレベル？ それともWeb機能は「おまけ」なの？ 結論から言うと、 Tomcatは本格的なHTTPサーバーを内蔵しているが、 Web配信に特化したApacheとは設計思想が違う。 というのが正確…
JavaのWeb開発を学び始めると、必ず出てくる言葉があります。 JVM Tomcat どちらも「Javaを動かすもの」のように見えますが、実は役割がまったく違います。 この記事では、レイヤー構造で整理します。 JVMとは何か？ JVM（Java Virtual Machine）は、Javaプ…
Web開発をしていると、 Apacheってなに？ Tomcatってなに？ どっちもサーバーじゃないの？ と混乱することがあります。 実はこの2つ、役割がまったく違います。 この記事では、エンジニア視点でシンプルに整理します。 Apacheとは？ 正式名称は「Apache HTTP…
Web開発で避けて通れない「Cookie」。 ログイン状態の維持やセッション管理などで必ず登場しますが、 「Cookieってフロントが使うもの？サーバーが使うもの？」という疑問を持つ人も多いでしょう。 この記事では、Cookieの正体と設計上の正しい使い方を整理…
画面遷移時とAPI通信時の二重チェックが基本 アプリを作る上で欠かせないのが「ログイン状態のチェック」です。 ユーザーが未ログインのまま機能を使えないようにするのは当然ですが、 「どこでチェックするのが正解か？」 は迷いやすいポイントです。 結論…
Angular から Firestore を使うための最短ルートと、現場でよく使う Firebase CLI コマンドを一気に整理します。 全体像（最短フロー） Node と Firebase CLI の用意 Firebase プロジェクト紐づけ（firebase init firestore） AngularFire の導入（npm i fir…
