Open6

Web開発に関する用語についてまとめる

adaptomyadaptomy

ライブラリとフレームワークの違い

ライブラリとフレームワークの違いは、主に 「主導権」「使用方法」 にあります。
それぞれ詳しく説明します。

ライブラリ

  • 定義
    特定の機能や目的に特化した、再利用可能なコードの集まり。
    開発者が必要なときに呼び出して使用するツール。

  • 特徴

    1. 開発者が主導権を持つ
    • 開発者がコードの流れを制御し、必要なタイミングでライブラリを呼び出して利用します。
    • 「何を使うか」「どのタイミングで使うか」を自分で決められる。
    1. 特化性が高い
    • 特定の目的に最適化されている。
    • 例: React(UI構築)、Lodash(データ操作)、D3.js(グラフ描画)など。
    1. 柔軟性が高い
    • 他のライブラリと自由に組み合わせて使える。
  • import React from 'react';
    function App() {
        return <h1>Hello, Library!</h1>;
    }
    

フレームワーク

  • 定義
    アプリケーション全体の構造や設計を提供する枠組み。開発者はフレームワークに従ってコードを書く。

  • 特徴

    1. フレームワークが主導権を持つ
    • フレームワークがコードの流れを制御し、開発者はフレームワークが提供するルールや構造に沿って開発します。
    • 開発者は指定されたポイントでコードを追加する。
    1. 包括性が高い
    • アプリケーション全体の設計ができる。
    • 例: Next.js(SSR/SSG対応のReactベースフレームワーク)、Ruby on Rails、Angularなど。
    1. 制約が多い
    • フレームワークのルールや慣習に従う必要がある。
  • (Next.js)

    export default function Home() {
        return <h1>Hello, Framework!</h1>;
    }
    

主な違い

項目 ライブラリ フレームワーク
主導権 開発者がコードの流れを制御 フレームワークがコードの流れを制御
目的 特定の機能や部分的な処理を支援 アプリケーション全体の構築を支援
自由度 高い(好きなタイミングで使える) 低い(提供される枠組みに従う必要あり)
包括性 部分的(特定の目的に特化) 全体的(アプリ全体を管理)

簡単に言うと

  • ライブラリ: 「好きに使って!必要なところで手助けするよ!」
  • フレームワーク: 「このルールで進めて!枠組みは私が用意するから!」

開発プロジェクトに応じて、どちらを使うか選ぶと良いですね!

adaptomyadaptomy

ブートストラップされるとは?

create-next-appで「ブートストラップされる」というのは、Next.jsプロジェクトの初期設定や基本構造が自動的に生成されるということを意味します。
簡単に言うと、「Next.jsプロジェクトをすぐに始められるよう、最低限必要なファイルや設定を準備してくれるツール」のことです。

ブートストラップとは?

  • ソフトウェア開発におけるブートストラップは、「プロジェクトの初期状態を整えること」を指します。
  • 必要なディレクトリ、ファイル、設定を生成することで、開発者がすぐにコーディングに集中できる環境を用意します。

create-next-appの役割

  • Next.js公式のCLIツールで、新しいNext.jsアプリを簡単に作成できます。
  • 実行するだけで、以下のような基本的なプロジェクト構造が用意されます。

create-next-appで生成されるもの

以下は、コマンド実行後に自動生成される主なファイルやフォルダです。

1. pages/ ディレクトリ

  • Next.jsの基本構造で、ページルーティングのためのファイルが入ります。
  • 例: index.js(ルートページ)、api/hello.js(APIエンドポイント)。
pages/
├── index.js  // ホームページ
├── _app.js   // アプリ全体の設定
└── api/
    └── hello.js  // APIルートのサンプル

2. styles/ ディレクトリ

  • CSSファイルのサンプルが格納されます。
  • 例: globals.css(全体のスタイル設定)。

3. public/ ディレクトリ

  • 静的ファイル(画像、アイコン、フォントなど)を置くためのフォルダ。
public/
├── favicon.ico
├── vercel.svg
└── ...

4. package.json

  • プロジェクトで使用する依存関係(Next.jsやReactなど)やスクリプトが記述されています。
{
  "dependencies": {
    "next": "latest",
    "react": "latest",
    "react-dom": "latest"
  },
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  }
}

5. README.md

  • プロジェクトの説明や、次のステップについて書かれた基本的な説明書。

実際のコマンド例

以下のコマンドを実行すると、新しいNext.jsプロジェクトが作成されます。

npx create-next-app my-next-app

実行後、my-next-appというフォルダが作成され、その中に必要なファイルや設定がすべて揃います。

「ブートストラップされる」メリット

  1. 手間を省ける
    自分でディレクトリや設定を作る必要がない。

  2. ベストプラクティスを採用できる
    Next.js公式推奨のプロジェクト構造が用意される。

  3. すぐに開発を開始できる
    必要な環境が整っているため、「準備」に時間をかけずにコーディングを始められる。

まとめ

create-next-appでブートストラップされるとは、「Next.jsの公式ツールが、プロジェクトの初期構成を自動的にセットアップしてくれる」ということです。このおかげで、複雑な設定や構造を気にせずに、開発のスタート地点に立てます!

adaptomyadaptomy

型について

扱うデータがどういった種類なのかを指定する事で、プログラムの動作を安全にする仕組み。
基本的には以下の型がある

基本的な型(プリミティブ型)の種類
  • 文字列型(String)
    例: "Hello, world!", 'TypeScript'
  • 数値型(Number)
    例: 42, 3.14, -100
  • 真偽値型(Boolean)
    例: true, false
  • 配列型(Array)
    例: [1, 2, 3], ['a', 'b', 'c']
  • オブジェクト型(Object)
    例: { name: "Alice", age: 25 }
  • null 型 / undefined 型
    例: null, undefined
応用の型

TypeScriptの型: ユニオン型、ジェネリック型、Branded型、Extends型

TypeScriptには、柔軟性や型安全性を向上させるための便利な型が用意されています。
ここでは、ユニオン型ジェネリック型Branded型Extends型について詳しく説明します。


1. ユニオン型(Union Type)

何?

  • 複数の型を1つにまとめた型です。ある変数や引数が複数の異なる型を受け取る場合に使います。
  • 記述には縦棒(|)を使います。

使用例

let value: string | number;

value = "hello"; // OK: string 型
value = 42;      // OK: number 型
value = true;    // エラー: boolean 型は許容されない

利点

  • 柔軟性が高く、異なる型の値を扱いたい場合に便利。
  • 明確に型を指定するため、TypeScriptは型に基づいた補完やチェックを提供します。

応用例

function formatInput(input: string | number): string {
  if (typeof input === "string") {
    return input.toUpperCase();
  } else {
    return input.toFixed(2); // 数値の場合
  }
}

2. ジェネリック型(Generic Type)

何?

  • 型を引数のように渡すことができる型
    どんな型にも対応できる汎用的な構造を作りたいときに使います。
  • <> で型を定義します。

使用例

function identity<T>(value: T): T {
  return value;
}

identity<string>("hello"); // "hello" が返る
identity<number>(42);      // 42 が返る

利点

  • 再利用性が高く、型安全を保ちながら柔軟に使える。
  • 特定の型に縛られないため、さまざまなデータ型に対応可能。

ジェネリック型の応用例

function merge<T, U>(obj1: T, obj2: U): T & U {
  return { ...obj1, ...obj2 };
}

const merged = merge({ name: "Alice" }, { age: 25 });
console.log(merged.name); // "Alice"
console.log(merged.age);  // 25

3. Branded型(ブランド型)

何?

  • 特定の型に識別子を付けることで、他の同じ構造の型と区別するための型。
  • 型に「タグ」を付けて拡張するために使います。

使用例

type UserId = string & { __brand: "UserId" };
type OrderId = string & { __brand: "OrderId" };

function getUserById(id: UserId) {
  // UserId型を受け取る関数
  console.log(`Fetching user with id: ${id}`);
}

const userId = "user123" as UserId;
const orderId = "order123" as OrderId;

getUserById(userId); // OK
getUserById(orderId); // エラー: 型が一致しない

利点

  • 同じ基本型(例: string)であっても、別の型として扱えるため、意図しない型の使用を防げます。
  • IDや識別子など、型の区別が重要な場面で役立つ。

4. Extends型

何?

  • 型に制約を付けるための構文で、ジェネリック型とよく一緒に使われます。
  • extends を使うことで、「特定の型に従う必要がある」ことを指定できます。

使用例

function getLength<T extends { length: number }>(item: T): number {
  return item.length;
}

getLength("hello");      // OK: string 型は length を持つ
getLength([1, 2, 3]);    // OK: 配列も length を持つ
getLength(42);           // エラー: number 型は length を持たない

利点

  • 型に制約を加えることで、より型安全なコードを記述できます。
  • ジェネリック型と組み合わせることで柔軟性を高めながら、安全性を保つことができます。

まとめ

用途
ユニオン型 複数の型を1つにまとめたい場合。 `string
ジェネリック型 型を柔軟に指定したい場合。 <T>
Branded型 同じ基本型でも特定の用途で型を区別したい場合。 string & { __brand: "UserId" }
Extends型 ジェネリック型に制約を付けたい場合。 <T extends { length: number }>

これらの型をうまく活用することで、TypeScriptでより柔軟かつ安全なプログラムを作成できます!

型安全

型安全についての詳細

型安全とは?

型安全(Type Safety)とは、プログラム内でデータ型が一貫して正しく使われることを指します。
これにより、予期しないエラーを防ぐことができます。具体的には、型安全性があると、型が不正なデータや操作に対してエラーを出し、プログラムの誤動作を防ぎます。


型安全のポイント

  1. 正しい型のデータのみ扱う
    ある変数や関数が「期待する型」と異なるデータを扱おうとした場合に、エラーとして検出します。

  2. 静的型付けと型安全

    • 静的型付け言語(TypeScript、Javaなど)では、コンパイル時に型チェックを行い、エラーを早期に発見できます。
    • 動的型付け言語(JavaScript、Pythonなど)では型安全性が弱い場合があり、実行時エラーのリスクが高まります。

型安全のない場合

JavaScriptの例(型安全が弱い)

function add(a, b) {
  return a + b;
}

console.log(add(1, 2));       // 3(OK: 数字同士)
console.log(add("1", 2));     // "12"(問題: 暗黙的に文字列結合が起きる)
console.log(add({}, []));     // "[object Object]"(問題: 意味不明な結果)

JavaScriptでは関数に渡す引数の型がチェックされないため、不正な型を渡しても実行時までエラーが出ません。その結果、意図しない挙動をする場合があります。


型安全な場合

TypeScriptの例(型安全が強い)

function add(a: number, b: number): number {
  return a + b;
}

console.log(add(1, 2));        // OK: 結果は 3
console.log(add("1", 2));      // エラー: "1" は number 型ではない
console.log(add({}, []));      // エラー: {} や [] は number 型ではない

TypeScriptでは、型チェックが働き、期待されない型を渡した場合にコンパイルエラーとなります。これにより、実行前にエラーを修正でき、バグの発生を防ぎます。


型安全のメリット

  1. 実行時エラーの削減
    コンパイル時に型の不整合を検出するため、プログラムの実行中に発生するエラーを減らせます。

  2. 意図した挙動の保証
    関数やクラスが設計通りに動作することを保証します。間違ったデータ型が原因で挙動が変わることを防ぎます。

  3. コードの読みやすさと保守性向上
    型注釈によって、コードが何を期待しているかが明示されるため、読みやすくなり、他の開発者が理解しやすくなります。

  4. 開発時の補助
    型情報を利用してIDE(統合開発環境)が自動補完やエラー検出をサポートします。


型安全の実例

関数の引数と返り値の型チェック

function greet(name: string): string {
  return `Hello, ${name}!`;
}

greet("Tom");   // OK: 結果は "Hello, Tom!"
greet(42);      // エラー: 引数に number 型は渡せない

配列操作の型安全

const numbers: number[] = [1, 2, 3];
numbers.push(4);  // OK: 配列に number 型を追加
numbers.push("5"); // エラー: 配列には number 型のみ許容

オブジェクトの型定義

interface User {
  name: string;
  age: number;
}

const user: User = { name: "Alice", age: 25 };  // OK
const invalidUser: User = { name: "Bob" };      // エラー: `age` プロパティが不足

型安全と型推論

TypeScriptなどでは、明示的に型を指定しなくても、型推論によって型安全が保たれることがあります。

型推論の例

let count = 0;  // 型は自動的に number に推論される
count = 42;     // OK
count = "42";   // エラー: number 型に文字列は代入不可

まとめ

  • 型安全とは、データ型の不整合を防ぎ、コードが正しく動作することを保証する仕組みです。
  • TypeScriptなどの型安全な言語を使うことで、次のようなメリットがあります:
    1. 実行時エラーの削減
    2. プログラムの意図した挙動を保証
    3. コードの読みやすさと保守性の向上
    4. 開発の効率化(IDEサポート)

型安全なプログラミングは、バグの少ない、信頼性の高いコードを書くための基本的な考え方です!

型推論

以下の記事がわかりやすい。
https://qiita.com/tonio0720/items/6ab9ac56ae0406aad9dc

adaptomyadaptomy

NextJSの静的ファイルの保管場所

publicフォルダは以下に置いたファイルは静的ファイルとして配信される

adaptomyadaptomy

雑多な単語

シンプルな単語をまとめていきます

CRUD

CRUDとは、データベースやアプリケーションが持つ基本的な操作を表す用語で、以下の4つの英単語の頭文字を取ったものです:

  1. Create(作成)
    データを新規に作成する操作。
    例:ユーザー登録、記事の投稿。

  2. Read(読み取り)
    データを取得して表示する操作。
    例:プロフィールの表示、商品の一覧表示。

  3. Update(更新)
    既存のデータを変更する操作。
    例:プロフィールの編集、記事の内容を修正。

  4. Delete(削除)
    データを削除する操作。
    例:アカウント削除、投稿の削除。

これらは、ほとんどのシステムやアプリで基本的に実装される機能です。データを管理する仕組みの核となる概念なので、開発者にとっては非常に重要です。