Angularで開発する際に守るべき一般的なスタイルガイドをまとめました。公式ガイド（https://angular.io/guide/styleguide）をベースに、日本語でわかりやすく紹介します。 ✩ ファイル構成・命名規則 要素 命名例 備考 コンポーネント hero.component.ts ク…

AngularはGoogleが開発している強力なフロントエンドフレームワークです。大規模開発にも耐えられる設計がされており、構成要素がしっかり分かれています。 この記事では、Angularを構成する主な要素を5つに絞って、わかりやすく紹介します。 1. Component…

TypeScriptの型システムには、「他の言語ではあまり見かけない強力な機能」がたくさんあります。その中でも今回紹介するのが、 keyof（キー型） この keyof を使うと、「あるオブジェクト型のプロパティ名だけを型として扱う」ことができます。 keyof って…

TypeScript（JavaScript）には、ちょっとややこしいことに2つのループ構文があります。 for (const key in obj) { ... } for (const value of array) { ... } 初心者の頃によく思いませんか？ 「in と of、何が違うの？なぜ2種類あるの？」 今回はこの疑問に…

こんにちは！今回はTypeScriptを書く中でよく出てくる「巻き上げ（hoisting）」について、初心者にも分かりやすく解説します。 普段JavaやDartなど、静的型付け言語に慣れている人ほど、「え、なんでこんな挙動になるの？」と驚くポイントでもあるので、Java…

素晴らしい記事があったのでリンクをメモします。 qiita.com zenn.dev

Angularでアプリを開発していると、CSSの設計で迷うことはありませんか？この記事では、共通CSSの扱い方とコンポーネントごとのスタイルのベストプラクティス、そしてAngularの重要な機能であるViewEncapsulation（ビューカプセル化）について解説します。 …

こんにちは！今日は TypeScript や Angular を使っているときに、初心者がよくハマる 「setInterval の中の this 問題」 について紹介します。 実際にこんなコードを書いて、うまく動かなかったことありませんか？ export class HelloComponent implements O…

Dartとの比較から見るTypeScriptのError設計 Dartでは、例外処理において Exception と Error の2種類が存在し、それぞれ以下のように目的が明確に分かれています： Exception: 実行時に発生しうる回復可能なエラー（ネットワーク失敗など） Error: プログラ…

JavaScript（TypeScript）の Promise と、Flutter（Dart）の Future は、どちらも非同期処理を表すオブジェクトです。 この2つは構造や使い方が非常に似ていますが、エラー処理の書き方（rejectとthrow）に違いがあります。 今回は「reject と throw の役割…

アプリのアーキテクチャ設計において、MVVM（Model-View-ViewModel）はよく採用される選択肢の一つ。 特に画面とロジックを綺麗に分離したいとき、MVVMの構造はとても役立ちます。 今回は人気の4大フロントエンド／モバイルフレームワーク Angular / Vue / R…

MVVM（Model-View-ViewModel）って、UI設計でよく聞くアーキテクチャですよね。 最近FlutterとAngularを触っていて「どっちがMVVMに向いてるんだろう？」と感じたので、構造の違いや設計思想から比較してみました。 MVVMってどんなアーキテクチャ？ ざっくり…

Web開発で人気の Angular と、スマホアプリ開発で人気の Flutter 。 両者を使っていると、特に気になるのが ライフサイクル の違いです。 この記事では、AngularとFlutterの主要なライフサイクル関数の使い分けについて比較しながら整理します。 Angular vs…

最近よく聞く「Node.js」。 名前は知ってるけど、「結局なに？」って感じてる人も多いのでは？ この記事では、JavaやFlutterをやってきた人にも分かりやすいように、Node.jsの正体を整理してみます！ Node.jsってなに？ 一言でいうと、「JavaScriptをサーバ…