入門

スポンサーリンク
TypeScript

TypeScript | 基礎文法:変数・基本型 – リテラル型とは

リテラル型とは何か(ざっくりイメージ)リテラル型は、「特定の値そのものを型として扱う」ための仕組みです。普通の string 型は「どんな文字列でもOK」、number 型は「どんな数値でもOK」です...
TypeScript

TypeScript | 基礎文法:変数・基本型 – const時の型の固定

const は「値」と「型」をその場で固定する宣言const は「再代入できない変数」を宣言するキーワードですが、TypeScriptでは型の固定のされ方にも特徴があります。const で宣言した瞬間...
TypeScript

TypeScript | 基礎文法:変数・基本型 – 再代入時の型チェック

「再代入時の型チェック」とは何をしているのかTypeScriptは「一度決めた型に対して、その後もずっと一貫しているか」をコンパイル時にチェックします。変数に最初に値を入れた瞬間、あるいは型注釈を書い...
TypeScript

TypeScript | 基礎文法:変数・基本型 – 明示型と推論型の使い分け

「明示型」と「推論型」とは何かTypeScriptには、型を扱う2つのスタイルがあります。ひとつは「明示型」——自分で : string や : number のように型を書いて宣言するやり方。もうひ...
TypeScript

TypeScript | 基礎文法:変数・基本型 – 型推論の仕組み

型推論とは何か型推論(type inference)は、「あなたが書いたコードから、TypeScriptが自動的に型を推測してくれる仕組み」です。毎回すべての変数や関数に型注釈を書かなくても、初期値や...
TypeScript

TypeScript | 基礎文法:変数・基本型 – 型注釈の書き方

型注釈とは何か型注釈(type annotation)は、「この変数・この引数・この戻り値には、こういう型の値しか入れません」とコードの中で宣言するための書き方です。TypeScriptでは、変数名や...
TypeScript

TypeScript | 基礎文法:変数・基本型 – null / undefined

null / undefined は「値がない」を表す特別な2人まず大枠からいきます。null と undefined は、どちらも「値がない状態」を表すための特別な値です。ただし、まったく同じ意味で...
TypeScript

TypeScript | 基礎文法:変数・基本型 – boolean型

boolean型とは何かboolean型は、「真か偽か」を表すための型です。取れる値はたった2つ、true(真)か false(偽)だけ。「ログインしているか?」「在庫はあるか?」「エラーが起きたか?...
TypeScript

TypeScript | 基礎文法:変数・基本型 – number型

number型とは何かTypeScriptのnumber型は、「数値」を表すための基本型です。整数も小数も、正の数も負の数も、すべてまとめてnumberとして扱います。JavaScript/TypeS...
TypeScript

TypeScript | 基礎文法:変数・基本型 – string型

string型とは何かTypeScriptのstring型は、「文字列」を表すための基本型です。人の名前、メッセージ、住所、IDなど、「文字の並び」で表現されるものはすべてstringで扱います。Ty...
TypeScript

TypeScript | 基礎文法:変数・基本型 – let / const の違い

let と const は「変えられるかどうか」を表すスイッチまず大事な前提として、TypeScript(というかモダンなJavaScript)では、変数宣言に var ではなく let と cons...
TypeScript

TypeScript | 基礎文法:環境・前提理解 – VSCodeでのTypeScript補完確認

VSCodeはTypeScriptと相性がいい「賢いノート」VSCodeは、TypeScriptを使うときにほぼ標準と言っていいエディタです。理由はシンプルで、「TypeScriptの型情報を理解して...
TypeScript

TypeScript | 基礎文法:環境・前提理解 – コンパイルの流れ(ts → js)

TypeScriptコードはそのままでは動かないまず大前提として、ブラウザも Node.js も TypeScript を「そのまま」実行することはできません。理解できるのはあくまで JavaScri...
TypeScript

TypeScript | 基礎文法:環境・前提理解 – strict モードの意味

strict モードとは何かTypeScript の strict モードは、一言でいうと「型チェックを最大限きびしくするスイッチ」です。tsconfig.json の compilerOptions...
TypeScript

TypeScript | 基礎文法:環境・前提理解 – tsconfig.json の役割

tsconfig.jsonとは何かtsconfig.json は、TypeScript プロジェクトの「設定ファイル」です。TypeScript コンパイラ(tsc)が「どのファイルを、どんなルールで...
TypeScript

TypeScript | 基礎文法:環境・前提理解 – TypeScriptのインストール

TypeScriptをインストールする前に知っておく前提TypeScriptは単体で動くわけではなく、「Node.js」と「npm」が前提になります。npmはNode.jsに付属しているパッケージ管理...
TypeScript

TypeScript | 基礎文法:環境・前提理解 – npm / npx の違い

npmとnpxは「似てるけど役割が違う道具」npmとnpxは、どちらもNode.jsをインストールすると一緒についてくるコマンドです。名前が似ているのでややこしいですが、役割はけっこう違います。ざっく...
TypeScript

TypeScript | 基礎文法:環境・前提理解 – Node.jsの役割

Node.jsとは何かと、TypeScriptとの関係Node.jsは「ブラウザの外でJavaScriptを動かすための実行環境」です。中身では、もともとChromeなどのブラウザで使われている高速な...
TypeScript

TypeScript | 基礎文法:環境・前提理解 – TypeScriptが解決する問題

TypeScriptが解決しようとしている世界の悩みTypeScriptは「かっこいい新しい言語を作りたかったから」生まれたわけではなく、「JavaScriptで本気の開発をするときに、みんながハマっ...
TypeScript

TypeScript | 基礎文法:環境・前提理解 – JavaScriptとの違い

TypeScriptとJavaScriptの関係と前提理解TypeScriptは「JavaScriptを拡張した言語」で、よく「JavaScriptのスーパーセット」と呼ばれます。つまり、JavaSc...
TypeScript

TypeScript | 基礎文法:環境・前提理解 – TypeScriptとは何か

TypeScriptとは何かTypeScriptは「JavaScriptをもっと書きやすく、安全にしたバージョン」と考えるとイメージしやすいです。技術的には「JavaScriptのスーパーセット(上位...
Python

Python | Web フレームワーク:Django のモデル

概要(Django のモデル=「DBテーブルを Python クラスとして扱う仕組み」)Django の「モデル」は一言でいうと、「データベースのテーブルを、Python のクラスとして表現したもの」...
Python

Python | Web フレームワーク:テンプレート(Jinja2)

概要(テンプレート=「HTML の型にデータを流し込む仕組み」)テンプレート(Jinja2)は一言でいうと、「HTML のひな型(型)をあらかじめ用意しておいて、Python のデータをそこに流し込ん...
Python

Python | Web フレームワーク:ドキュメント UI

概要(ドキュメント UI=「API 仕様書をブラウザで触れる画面」にしたもの)ドキュメント UI は、「API の仕様を、人間がブラウザ上で見たり、その場で試したりできる画面」のことです。FastAP...
Python

Python | Web フレームワーク:OpenAPI

概要(OpenAPI=「API の設計図を機械と人間で共有するためのフォーマット」)OpenAPI は、「この Web API は、どんな URL があって、どんな入力を受け取り、どんなレスポンスを返...
Python

Python | Web フレームワーク:静的ファイル

概要(静的ファイル=「ただ置いておくだけで中身が変わらないファイル」)静的ファイルは、「サーバー側で中身を計算したり書き換えたりせず、そのままブラウザに渡すだけのファイル」のことです。具体的には、よく...
JavaScript

JavaScript | ES6+ 文法:テンプレート文字列 – 従来文字列との比較

何が違うのか(テンプレート文字列 vs 従来の文字列)テンプレート文字列はバッククォートで囲み、${...} に式をそのまま埋め込めて、複数行も“書いたとおり”に保持します。従来の文字列(' や ")...
JavaScript

JavaScript | ES6+ 文法:テンプレート文字列 – 可読性向上パターン

可読性向上パターンの考え方テンプレート文字列は“見た目をコードにそのまま表せる”のが強みです。ここが重要です:見た目(レイアウト)とロジック(計算・整形)を分離し、式の埋め込みは短く保つことで、初心者...
JavaScript

JavaScript | ES6+ 文法:テンプレート文字列 – XSS 対策の注意点

テンプレート文字列と XSS の基本認識テンプレート文字列はバッククォートで囲み、${...} に式を埋め込める便利な仕組みですが、ここが重要です:テンプレート文字列自体には自動エスケープ機能がありま...
JavaScript

JavaScript | ES6+ 文法:テンプレート文字列 – タグ付きテンプレート

タグ付きテンプレートとは何かタグ付きテンプレートは、テンプレート文字列の先頭に“関数名”を置き、文字列と式の分解結果をその関数で“加工してから”最終文字列を得る仕組みです。ここが重要です:通常のテンプ...
スポンサーリンク