51pPURigx6L

cloudflare-pages

AWSで実現するモダンアプリケーション入門 ～サーバーレス、コンテナ、マイクロサービスで何ができるのか

Node

Cloudflare

この記事では Cloudflare Pages で実行されている Node.js のバージョンを変更する方法について解説しています。

## 問題
このブログは Cloudflare Pages でホスティングしているのですが、先日デプロイ時に以下のエラーに遭遇しました。

```
error next@12.1.6: The engine "node" is incompatible with this module. Expected version ">=12.22.0". Got “12.18.0"
error Found incompatible module.
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command. 
Error during Yarn install
```

Cloudflare Pages　ではデフォルトで node v12.18.0 が使用されているため、 node のバージョンを変更する必要があるようです。

![node-12.18.0](//images.ctfassets.net/fdt52x6qf2de/3pltbyySEYarlGVs3ws21S/98cef6e3949254e24277bf9a09985ce4/____________________________2023-04-08_17.01.13.png)

## バージョン変更方法
Cloudflare Pages のデプロイしたい Pages を選択後に「設定」→「環境変数」から 変数名を`NODE_VERSION`、値を `v16.14.2` のように設定すればデプロイ時にそのバージョンを使用してくれるように変更されます。

![cloudflare-pages-node-version](//images.ctfassets.net/fdt52x6qf2de/1Gn1xvJ7tID1Yto7tEcIjr/032a0c58bfd478081321d0ab08fe7720/____________________________2023-04-08_17.10.24.png)

この状態でデプロイしてみるとログから実際に指定した node バージョンが使用されていることが確認できます。

![node-version](//images.ctfassets.net/fdt52x6qf2de/63jrnO2R9ldrFEPuPkBKaI/3773caf0d129daf0bdadbc9d15ee7c80/____________________________2023-04-08_17.14.55.png)

また、アプリケーションレベルで node のバージョン管理をしたい場合は `package.json` と同じ階層で `.nvmrc` や `.node-version` を追加して node のバージョンを記述することで変更する方法もあるようです。

[card](https://developers.cloudflare.com/pages/platform/build-configuration)

Cloudflare Pages で実行されている Node.js のバージョンを変更する方法について解説しています。

Cloudflare Pages の node バージョンを変更する方法

みなさん、こんにちは！
この記事は初心者向けに作られており、Reactの基本を楽しく学べるようになっています

ではさっそくReactについて学んでいきましょう！

## Reactとは？ 🤔
![illust](//images.ctfassets.net/fdt52x6qf2de/76Ql1wTffAlOhcoLDKkrGk/c5ef3b6b4580fc3233ba55c37ef522cf/react.svg)

ReactはFacebookが開発し、オープンソースで公開されているJavaScriptライブラリです。

Reactはユーザーインターフェースを構築するために使用され、Webアプリケーションのフロントエンド開発で広く使われています。

Reactの主な特徴はコンポーネントベースのアーキテクチャと、仮想DOM（Virtual DOM）を使った効率的なDOM操作です。
これにより、開発者は、パフォーマンスの高いWebアプリケーションを迅速に構築できます。

それでは、Reactの魅力を体験していきましょう！

## 環境準備 ✨
まずは、React開発環境をセットアップしましょう。手順は以下の通りです。

1. Node.jsをインストール
2. create-react-app を使ってプロジェクトを作成
3. プロジェクトを実行

### Node.jsのインストール
Node.jsは、JavaScriptを実行できる環境です。
Reactは、Node.jsを使って開発されるので、まずはNode.jsをインストールしましょう。[Node.js公式サイト](https://nodejs.org/)からダウンロードしてインストールしてください。

### create-react-appでプロジェクト作成
次に、create-react-appを使って新しいReactプロジェクトを作成しましょう。
以下のコマンドを実行してください。

```
npx create-react-app my-react-app
```

このコマンドは、my-react-appという名前のReactプロジェクトを作成します。

### プロジェクトを実行
プロジェクトが作成されたら、以下のコマンドでプロジェクトを実行してみましょう。

``` bash
cd my-react-app
npm start
```

これで、[http://localhost:3000](http://localhost:3000) にアクセスしてReactアプリが正常に動作しているか確認できます。

![2023-04-10 22.57.24](//images.ctfassets.net/fdt52x6qf2de/4BZtQ3G9fU48nLrtO6VuRY/b65f91837d7111cbe7393d57c4f3301c/____________________________2023-04-10_22.57.24.png)

正しくセットアップできていれば上のように表示されます！

## コンポーネントの作成 🧩
Reactの基本は、コンポーネントです。

コンポーネントは、UIの一部を表現する再利用可能なJavaScriptのクラスまたは関数です。
コンポーネントを作成して、アプリケーションを構築していきましょう。

### Appコンポーネントを編集
まずはsrc/App.jsファイルを開いて、以下のように書き換えてください。

``` javascript
import React from "react";

function App() {
  return (
    <div>
      <h1>Hello, React!</h1>
    </div>
  );
}

export default App;
```

これで、Hello, React!と表示されるコンポーネントが作成されました。

[http://localhost:3000](http://localhost:3000) に移動し、以下のように表示されていれば成功です。

![2023-04-10 23.03.27](//images.ctfassets.net/fdt52x6qf2de/5SjA1bejj31KNLd42FCzL4/259cf69edd2b615523a0cc46a49674f9/____________________________2023-04-10_23.03.27.png)

## 状態管理とイベント処理 🔄
Reactでは、コンポーネントの状態管理やイベント処理が重要です。

状態とはコンポーネント内で管理されるデータのことで、イベント処理はユーザーアクション（クリックやキー入力など）に対する処理です。

### 状態を持つコンポーネントの作成
useStateフックを使って状態を持つコンポーネントを作成しましょう。
src/Counter.jsという新しいファイルを作成し、以下のコードを記述します。

``` javascript
import React, { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>カウント: {count}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  );
}

export default Counter;
```

ここでは、countという状態を作成しボタンをクリックするたびにカウントが増加するようにしました。

### CounterコンポーネントをAppに追加
次に、src/App.jsを開いて先ほど作成したCounterコンポーネントを追加しましょう。

``` javascript
import React from "react";
import Counter from "./Counter";

function App() {
  return (
    <div>
      <h1>Hello, React!</h1>
      <Counter />
    </div>
  );
}

export default App;
```

これで、アプリケーションにカウンター機能が追加されました！

![2023-04-10 23.04.06](//images.ctfassets.net/fdt52x6qf2de/3yMl8qZkZt57B4qn9kNBsf/c4c4f84cf460c57b16a64faed538f9f1/____________________________2023-04-10_23.04.06.png)

アプリを実行して+1ボタンをクリックすることで、カウンターが動作することを確認してください。

## 親子コンポーネント間のデータの受け渡し 🤲
Reactでは、親子コンポーネント間でデータを受け渡すことができます。
これをprops（プロパティ）と呼びます。

親コンポーネントから子コンポーネントへのデータ受け渡し例として、AppコンポーネントからCounterコンポーネントにデータを渡してみましょう。

src/App.jsを開いて、以下のように書き換えます。

```javascript
import React from "react";
import Counter from "./Counter";

function App() {
  return (
    <div>
      <h1>Hello, React!</h1>
      <Counter initialCount={5} />
    </div>
  );
}

export default App;
```

ここでは、`initialCount` という名前のpropsをCounterコンポーネントに渡しています。

次に、src/Counter.jsを開いて、Counterコンポーネントで `initialCount` を受け取りましょう。

```javascript
import React, { useState } from "react";

function Counter({ initialCount }) {
  const [count, setCount] = useState(initialCount);

  return (
    <div>
      <p>カウント: {count}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  );
}

export default Counter;
```

これで、Counterコンポーネントの初期値がAppコンポーネントから渡されるようになりました。

アプリを実行して、カウンターの初期値が5になっていることを確認してください。

![2023-04-10 23.04.57](//images.ctfassets.net/fdt52x6qf2de/6fkdEu6mBdbOcV0yWeFi0h/f851a0c007f34556eda6478ba87d1a25/____________________________2023-04-10_23.04.57.png)

## まとめ 🏁
お疲れ様でした！このチュートリアルでは、Reactの基本的な概念を学びました。

- 環境準備
- コンポーネントの作成
- 状態管理とイベント処理
- 親子コンポーネント間のデータ受け渡し

これらの概念を理解し実践すれば、Reactでシンプルなアプリケーションを構築できるようになります。
もちろん、Reactにはまだまだ学ぶべき概念や技術がたくさんありますが、このチュートリアルで学んだ内容はReactの基礎を固めるための良いスタートとなるでしょう。

今後もReactの勉強を続けて、さらに素晴らしいアプリケーションを作成していきましょう！

React開発の最初の一歩になるチュートリアルを簡潔にわかりやすく紹介しています。

react

はじめてのReact：楽しく学ぶハンズオンチュートリアル 

TypeScriptはJavaScriptに静的型付けの機能が追加された言語で初学者でも手軽に利用できます。

この記事では、TypeScriptの使いこなすと効率がアップするユーティリティ型を8つ取り上げ、使い方やユースケースを紹介します。
また、コードも一緒に見ていくことでより理解が深まります。

## ユーティリティ型とは？
ユーティリティ型は特定の目的に使われる型で、TypeScriptの型定義を手助けしてくれます。

そんな便利なユーティリティ型には、`Partial`、`Readonly`、`Pick`、`Required`、`Record`、`Omit`、`Exclude`、`Extract`の8つが存在し、特徴と使い所を解説します。

## Partial\<T\>
### 特徴
Partial型は、オブジェクトのプロパティをオプションに変換します。これにより、オブジェクト型のプロパティが任意となります。

### 使い所
オブジェクトの一部を更新する関数の引数や、オプショナルなプロパティを持つオブジェクトを扱う場合に便利です。

``` typescript
interface Profile {
  name: string;
  age: number;
}

function updateProfile(profile: Profile, updates: Partial<Profile>): Profile {
  return { ...profile, ...updates };
}

const profile: Profile = {
  name: "Alice",
  age: 30,
};

const updatedProfile = updateProfile(profile, { age: 31 });
```

## Readonly\<T\>
### 特徴
Readonly型は、オブジェクトのプロパティを読み取り専用に変換します。これにより、オブジェクトのプロパティが変更できなくなります。

### 使い所
変更されては困るデータを扱う際や、関数の引数で変更を禁止したい場合に使用されます。

``` typescript
interface Point {
  x: number;
  y: number;
}

const p1: Readonly<Point> = { x: 10, y: 20 };
p1.x = 30; // Error: 'x' is a read-only property
```

## Pick<T, K>
### 特徴
Pick型は、オブジェクトから指定したプロパティだけを抜き出すことができます。これにより、必要なプロパティだけのオブジェクト型を簡単に作成できます。

### 使い所
特定のプロパティを持つ部分オブジェクトを作成したり、特定のプロパティのみを扱う関数の引数として使用する場合に便利です。

``` typescript
interface Profile {
  name: string;
  age: number;
  address: string;
}

type ProfileNameAndAge = Pick<Profile, "name" | "age">;

const profile: ProfileNameAndAge = {
  name: "Alice",
  age: 30,
};
```

## Required\<T\>
### 特徴
Required型は、オブジェクトのすべてのプロパティを必須に変換します。これにより、オプショナルなプロパティがあっても、全て必須となります。

### 使い所
必須のプロパティを持つオブジェクトを扱う場合や、APIから返ってくるオブジェクトで欠けているデータがある場合に便利です。

``` typescript
interface Profile {
  name: string;
  age: number;
  address?: string;
}

type RequiredProfile = Required<Profile>;

const profile: RequiredProfile = {
  name: "Alice",
  age: 30,
  address: "123 Main St", // このプロパティは必須になります
};
```

## Record<K, T>
### 特徴
Record型は、指定したキーに対して同じ型の値を持つオブジェクトを作成します。これにより、特定のキーの集合に対して値を割り当てたり、オブジェクトのキーを動的に扱うことができます。

### 使い所
キーと値のペアを持つオブジェクトを扱う場合や、辞書型のデータ構造を表現する際に便利です。

``` typescript
type AnimalType = "cat" | "dog" | "bird";
type AnimalInfo = { name: string; age: number };

const animalMap: Record<AnimalType, AnimalInfo> = {
  cat: { name: "Fluffy", age: 5 },
  dog: { name: "Rex", age: 7 },
  bird: { name: "Tweety", age: 2 },
};
```

## Omit<T, K>
### 特徴
Omit型は、オブジェクトから指定したプロパティを取り除くことができます。これにより、特定のプロパティを削除したオブジェクト型を簡単に作成できます。

### 使い所
特定のプロパティを除外したい場合や、一部のプロパティを非公開にしたい場合に活用できます。

``` typescript
interface Profile {
  name: string;
  age: number;
  address: string;
}

type ProfileWithoutAddress = Omit<Profile, "address">;

const profile: ProfileWithoutAddress = {
  name: "Alice",
  age: 30,
};
```

## Exclude<T, U>
### 特徴
Exclude型は、型 T から型 U に含まれる型を取り除くことができます。これにより、特定の型を除外する必要がある場合に、簡単に新しい型を作成できます。

### 使い所
型の集合から特定の型を排除したい場合や、条件に適合しない型を除外する際に便利です。

``` typescript
type AvailableColors = "red" | "green" | "blue" | "yellow";
type UsedColors = "red" | "blue";

type RemainingColors = Exclude<AvailableColors, UsedColors>; // "green" | "yellow"
```

## Extract<T, U>
### 特徴
Extract型は、型 T と型 U の両方に含まれる型を抽出することができます。これにより共通する型を取得することが容易になります。

### 使い所
型の集合から共通する型を抽出したい場合や、複数の条件に適合する型を取得する際に便利です。

``` typescript
type AvailableColors = "red" | "green" | "blue" | "yellow";
type SelectedColors = "red" | "blue" | "purple";

type ValidSelectedColors = Extract<AvailableColors, SelectedColors>; // "red" | "blue"
```

## まとめ
ユーティリティ型はTypeScriptを実務で使う上では欠かせない便利な機能です。
`Partial`、`Readonly`、`Pick`、`Required`、`Record`、`Omit`、`Exclude`、`Extract`の8つのユーティリティ型を使いこなすことでコードが読みやすくなり、安全性もアップします。

これらの型を理解してTypeScriptをもっと効果的に使いましょう！

使いこなすととても便利なTypeScriptのPartial、Readonly、Pick、Required、Record、Omit、Exclude、Extractのユーティリティ型について特徴と使い所を解説します。

ts-lettermark-blue

超便利なTypeScriptの8つのユーティリティ型で効率アップ

こんにちは！Syuu（[@syuu_n18](https://twitter.com/syuu_n18)）です。

今回はこれからプログラミングを始める初心者かたに向けて、TypeScriptのチュートリアルをご紹介します。
わかりやすく、楽しみながら学べるハンズオン形式で進めていきますのでどうぞお楽しみください！

## TypeScriptの準備と環境設定 ✨
これから説明するように自分のPCで環境を整えるのも大事ですが、まず軽く触ってみたい方は [TypeScript Playground](https://www.typescriptlang.org/play) を使うのもおすすめです！

[card](https://gizanbeak.com/post/typescript-playground-howto)

まずはTypeScriptの開発環境を整えましょう。

Node.jsとnpmがインストールされていることを確認し、次のコマンドでTypeScriptをインストールします。

```
npm install -g typescript
```

これでTypeScriptのコンパイラが使えるようになりました！

次にエディタの設定です。
基本的にはVisual Studio Codeを使うことをおすすめしますが、他のエディタでも大丈夫です。

適切なプラグインをインストールして、TypeScriptのシンタックスハイライトや自動補完が利用できるようにしましょう。

[card](https://gizanbeak.com/post/vscode)

## 最初のTypeScriptプログラム 👶
![illust](//images.ctfassets.net/fdt52x6qf2de/5EQNpUvNuIDvI8VnMV6dIn/824b7b1344064af2b37bb420615a1b58/undraw_font_re_efri.svg)

それでは、最初のTypeScriptプログラムを書いてみましょう！

`hello.ts` というファイルを作成し次のコードを入力してください。

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

console.log(hello("TypeScript"));
```

このコードは、`name` という文字列を受け取り、`Hello, ${name}!` という文字列を返すhello関数を定義し、それを使って `Hello, TypeScript!` と出力するものです。

コードを書き終えたらターミナルで次のコマンドを実行してTypeScriptをJavaScriptにコンパイルしましょう。

```
tsc hello.ts
```

これで、`hello.js` というファイルが生成されます。
続けて次のコマンドで実行してみましょう。

```
node hello.js
```

`Hello, TypeScript!` と表示されたら成功です。
おめでとうございます！最初のTypeScriptプログラムが完成しました。

## 型の基本 📚
TypeScriptの大きな特徴は「型」です。

型とは変数や関数の引数が取りうる値の範囲を指定するもので、コードの品質や保守性を向上させます。
ここでは型の基本を学びましょう。

まずは以下のコードを見てください。

``` typescript
let age: number = 25;
```

このコードは `age` という変数を `number` 型で宣言し、25という値を代入しています。
`number`型は整数や小数を表す型です。

``` typescript
let message: string = "Hello, TypeScript!";
```

このコードは、`message` という変数を `string` 型で宣言し、`"Hello, TypeScript!"` という文字列を代入しています。
`string` 型は文字列を表す型です。

他にもいくつかの基本型があります。以下にそれらをまとめています。

- `boolean`: 真偽値（`true` または `false` ）を表す型
- `null`: `null` 値のみを表す型
- `undefined`: `undefined` 値のみを表す型
- `any`: 任意の型を表す型（型チェックが緩くなるためできるだけ使わないことが理想です）

TypeScriptの基本的な型については以上です。

## 配列とタプル 🧮
次に配列とタプルについて学びましょう。

### 配列
配列は複数の値をまとめて扱うためのデータ構造です。
TypeScriptでは以下のように型を指定して配列を定義できます。

``` typescript
let numbers: number[] = [1, 2, 3, 4, 5];
```

このコードは `number` 型の値の配列を宣言し、`[1, 2, 3, 4, 5]` という値を代入しています。

### タプル
タプルは異なる型の値をまとめて扱うためのデータ構造です。
以下のように型を指定してタプルを定義できます。

``` typescript
let person: [string, number] = ["Alice", 30];
```

このコードは、`string` 型と `number` 型の値を持つタプルを宣言し、`["Alice", 30]` という値を代入しています。

## 関数と型 🔧
関数も同様に型を利用して引数や戻り値を明示的に指定できます。

以下のコードを見てください。

``` typescript
function add(x: number, y: number): number {
  return x + y;
}
```

このコードは、`x` と `y` という `number` 型の引数を受け取り、`number` 型の戻り値を返す `add` 関数を定義しています。

## オブジェクトとインターフェース 📦
次に学ぶべきはオブジェクトとインターフェースです。

オブジェクトはキーと値のペアをまとめて扱うデータ構造です。

TypeScriptではインターフェースを使ってオブジェクトの型を定義することができます。

次のコードは、`name` と `age` というキーを持つ `Person` インターフェースを定義し、それに従ったオブジェクトを `alice` 変数に代入しています。

``` typescript
interface Person {
  name: string;
  age: number;
}

let alice: Person = {
  name: "Alice",
  age: 30
};
```

## クラスと継承 👩‍👧
JavaScriptと同じようにTypeScriptではクラスを使ってオブジェクト指向プログラミングを行うこともできます。

まずは以下のコードを見てください。

``` typescript
class Animal {
  constructor(public name: string) {}

  speak(): void {
    console.log(`${this.name} は鳴き声を発する。`);
  }
}

class Dog extends Animal {
  speak(): void {
    console.log(`${this.name} は吠える。`);
  }
}

let dog = new Dog("Snoopy");
dog.speak();
```

このコードは、`Animal` クラスを定義し、そのサブクラスとして `Dog` クラスを定義しています。
`Dog` クラスは `Animal` クラスの `speak` メソッドをオーバーライドして独自の挙動を実装しています。

## おわりに 🏁
これでTypeScriptの基本的な使い方を学びました！

基本的な型定義さえ覚えてしまえばJavaScriptよりも型安全に開発できるTypeScriptはとても優れています。

このチュートリアルでは、TypeScriptの基本的な概念と使い方を紹介しました。
これらの知識を応用して実際にアプリケーション開発にぜひ挑戦してみてください。

使いこなすと効率がアップするTypeScriptのユーティリティ型について以下で解説していますので合わせて読むと理解が深まると思います！

[card](https://gizanbeak.com/post/ts-utility-types)

最後にこのチュートリアルが初心者の皆さんにとってわかりやすく楽しいものであったことを願っています。
これからもTypeScriptを使ったプログラミングを楽しみながらスキルを向上させていきましょう！

TypeScriptを初めて学ぶ方向けのハンズオン形式チュートリアル。基本からクラスまで楽しく学びましょう！

919832

TypeScript入門ガイド2023｜ハンズオンで学ぶ基本技術

こんにちは！Syuu（[@syuu_n18](https://twitter.com/syuu_n18)）です。

今回はプログラミング初心者の方々にTypeScriptとJavaScriptの違いをわかりやすく解説します！
両言語の特徴を押さえつつ、どのようなシーンでどちらを使うべきかもお伝えします。

## JavaScriptとは？
![illust](//images.ctfassets.net/fdt52x6qf2de/3wpdpheYB8IhuMGJChefHd/e4be1d224b81c65cb817d44394e34450/javascript_icon_130900.svg)

まずはJavaScriptについて解説します。

JavaScriptは1995年に登場したプログラミング言語で、主にWebブラウザ上で動作するスクリプト言語です。
HTMLやCSSと組み合わせることでWebページに動的な要素を追加することができます。

例えば以下のコードはボタンがクリックされるとアラートが表示されるJavaScriptのサンプルです。

``` javascript
document.querySelector("button").addEventListener("click", () => {
  alert("Hello, World!");
});
```

このコードはHTMLの `<button>` 要素を取得しクリックイベントリスナーを追加しています。

ボタンがクリックされたときアラートが表示される関数が実行されます。

## TypeScriptとは？
![illust](//images.ctfassets.net/fdt52x6qf2de/3hDwv6ffILtKqCb4wTtRbo/495ecb9633005c917bfd6bc6b51ad273/file_type_typescript_official_icon_130107.svg)  

次にTypeScriptについて説明します。

TypeScriptはJavaScriptのスーパーセットと呼ばれており、2012年にMicrosoftによって開発されました。
TypeScriptはJavaScriptに静的型付け機能を追加しコードの品質や保守性を向上させることを目的としています。

例えば、以下のコードはTypeScriptで書かれたコードです。

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

このコードは `a` と `b` の引数に `number` 型を指定し戻り値も `number` 型であることを明示しています。
これにより型の不整合が起こることを防ぎバグを減らすことができます。

[card](https://gizanbeak.com/post/typescript-tutorial)

## TypeScriptとJavaScriptの違い
次はTypeScriptとJavaScriptの違い紹介します。

### 型システム
TypeScriptは静的型付けをサポートしており、コンパイル時に型チェックが行われます。
これによりバグを早期に発見しやすくなります。

一方JavaScriptは動的型付けであり型チェックは実行時に行われます。

### クラスベースのオブジェクト指向
TypeScriptではES6のクラス構文やインターフェースを使ってより簡潔で分かりやすいコードを書くことができます。

JavaScriptでもクラス構文を使用できますがTypeScriptの方が強力なオブジェクト指向機能を提供しています。

### 開発ツールのサポート
TypeScriptは強みとして、より強力な開発ツールのサポートを提供しています。

例えば、型情報を元にしたコード補完やリファクタリングが可能です。
JavaScriptも開発ツールのサポートがありますが、型情報がないため限定的です。

### コンパイル
また、TypeScriptは実行前にはコンパイルが必要です。

TypeScriptのコードは実行前にJavaScriptにトランスパイルされる必要があります。JavaScriptはコンパイル不要でそのままブラウザで実行できます。

## TypeScriptとJavaScriptどちらを使うべきか？
![illust](//images.ctfassets.net/fdt52x6qf2de/5iLZLD0bs8Yd1d5ndzhDtO/89cacb6b255a413c3f84437d69cf6e74/undraw_Questions_re_1fy7.svg)

どちらを使うべきかはプロジェクトやチームの状況によります。

### TypeScriptを使うべき場合

- 大規模なプロジェクトでコードの保守性や品質が重要な場合
- 型チェックによりバグを減らしたい場合
- 強力な開発ツールのサポートを活用したい場合

### JavaScriptを使うべき場合

- 小規模なプロジェクトやプロトタイプ開発で迅速に開発したい場合
- コンパイルの手間を省きたい場合
- 既存のJavaScriptのコードやライブラリとの互換性が重要な場合

## まとめ
今回は初心者向けにTypeScriptとJavaScriptの違いについて解説しました！

それぞれの言語には利点と欠点がありますが、プロジェクトやチームの状況に応じて適切な言語を選択することが重要です。

これからもっとプログラミングに慣れていく中でどちらの言語が自分に合っているか見極めてみてください。

[card](https://gizanbeak.com/post/typescript-playground-howto)

初心者向けにTypeScriptとJavaScriptの違いを解説。型システム、オブジェクト指向、開発ツール、コンパイルがポイント。状況に応じて適切な言語を選択。

javascript icon 130900

TypeScript vs JavaScript: 初心者が知るべき違いと使い分け

この記事ではTypeScriptのtypeとinterfaceの違いについて、実践的な例を交えて解説していきます。

これから、結論、TypeScriptのtypeの説明、TypeScriptのinterfaceの説明、typeとinterfaceの違い、どちらを使うべきか、という順番でお話しします！

## 結論
TypeScriptのtypeとinterfaceはどちらも **型を定義するための機能** です。

似ている機能だからこそどちらを使えばいいのか悩みますよね。
それぞれ使い方や適用範囲が異なりますが、**基本的にはどちらをつかっても問題はない** と思います。

個人的にはあとから勝手に型情報が変更されたりしないtypeの方が好みだったりします...！

## TypeScriptのtypeの説明
それでは、まずはTypeScriptのtypeについて説明していきます。

TypeScriptのtypeは **型エイリアス** とも呼ばれ、**新しい型を定義する** 際に使います。

例えば次のようにtypeを使って、新しい型を定義できます。

``` typescript
type User = {
  name: string;
  age: number;
};
```

上記のコードでは `name` プロパティが文字列型、`age` プロパティが数値型のオブジェクトを表す新しい型 `User` を定義しています。

また、typeは **既存の型を組み合わせて新しい型を作る** こともできます！

``` typescript
type Animal = "Dog" | "Cat" | "Bird";
```

この例では `Animal` という新しい型を定義して、この型には `Dog`、`Cat`、`Bird` のいずれかの値を入れることができます。
指定した値しか入れることができない新しい型、ということですね。

さらに、タプル型を使って **要素数が固定された配列型** を定義することができます。

``` typescript
type Point = [number, number];
```

この例では `Point` という新しい型を定義して、この型は2つの数値要素からなる配列（タプル）を表します。
２つ以上の数値を代入することができない配列型ということですね。

## TypeScriptのinterfaceの説明
TypeScriptのinterfaceについてはどうでしょうか？

TypeScriptのinterfaceは **オブジェクトの型を定義する** 際に使います。
例えば、次のようにinterfaceを使ってオブジェクトの型を定義できます。

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

先ほどのtypeの例と同じように、`name` プロパティが文字列型、`age` プロパティが数値型のオブジェクトを表す型 `User` を定義しています。
比べてみるとtypeとは書き方が少し違いますよね。

また、interfaceは **継承を使って他のinterfaceから型を引き継ぐ** ことができます。
これによって既存の型を再利用して、新しい型を定義することが容易になります。

``` typescript
interface Animal {
  species: string;
  sound: string;
}

interface Dog extends Animal {
  breed: string;
}
```

上記のコード例では `Animal` インターフェースを定義した後、`Dog` インターフェースで `Animal` を継承しています。
`Dog` インターフェースは `Animal` のプロパティに加えて `breed` プロパティも持っています。

interfaceは継承で他のinterfaceから型を引き継げますが、実はtypeとinterfaceはどちらも **ユーティリティ型** という型を使用することで同様に既存の型を引き継いで使用することもできます。

これについては以下の記事で詳しくまとめています！

[card](https://gizanbeak.com/post/ts-utility-types)

[card](https://gizanbeak.com/post/typescript-interface)

## typeとinterfaceの違い
![illust](//images.ctfassets.net/fdt52x6qf2de/LbEqnAgS84Y8UtASPtse2/0edcfcdd87cfd0cce8ed05d3c2435d60/undraw_voice_interface_re_206s.svg)

それでは、typeとinterfaceの違いを具体的なコードを使って詳細に説明します。

### interfaceの特徴
1. オブジェクトの型定義や継承ができる

interfaceの説明でもご紹介したようにinterfaceは既存のオブジェクトの型を引き継いで新しい型定義を作成することができます。

``` typescript
interface Vehicle {
  wheels: number;
  speed: number;
}

interface Car extends Vehicle {
  doors: number;
}

interface Motorcycle extends Vehicle {
  type: 'cruiser' | 'sport' | 'dirt';
}

const myCar: Car = {
  wheels: 4,
  speed: 120,
  doors: 4,
};

const myMotorcycle: Motorcycle = {
  wheels: 2,
  speed: 180,
  type: 'sport',
};
```

このコード例では最初に `Vehicle` インターフェースを定義し、その後 `Car` と `Motorcycle` インターフェースで `Vehicle` を継承しています。

`Car` インターフェースは `Vehicle` のプロパティに加えて、`doors` プロパティを持っています。
一方、`Motorcycle` インターフェースは `Vehicle` のプロパティに加えて `type`プロパティを持っています。

2. 宣言のマージができる

同名のインターフェースを複数回定義することでそれらが自動的にマージ（１つにまとめる）されます。

``` typescript
interface User {
  name: string;
}

interface User {
  age: number;
}

// 結果的にUserインターフェースは以下のようになります
// interface User {
//   name: string;
//   age: number;
// }
```

この例では `User` インターフェースが二度宣言されていますが、TypeScriptは自動的にマージして `name` と `age` のプロパティを持つ `User` インターフェースとして定義されます。

### typeの特徴
1. ユーティリティ型を使って型を拡張できる

typeはinterfaceのように継承を使うことはできませんが、ユーティリティ型を使うことで既存の型定義を再利用して新しい型を定義することができます！

``` typescript
type User = {
  name: string;
  age: number;
};

type PartialUser = Partial<User>;

// 結果的にPartialUser型は以下のようになります
// type PartialUser = {
//   name?: string;
//   age?: number;
// }
```

この例では `User` 型を定義した後、`Partial` ユーティリティ型を使って `PartialUser` 型を定義しています。

`PartialUser` は最初に定義した `User` と比較して `name` と `age` プロパティが任意項目となっています。
`name?: string` のように、 `?` がつくことで任意項目であることを意味しているわけですね。

2. 柔軟な型定義ができる

typeでは **ジェネリクス** という型を使用することで柔軟に型定義をすることができます。
最初は少し難しく感じることがあるかと思いますが、使いこなすととても便利な機能です！

``` typescript
type ApiResponse<T> = {
  status: 'success' | 'error';
  data?: T;
  message?: string;
}

type UserData = {
  id: number;
  name: string;
}

const response: ApiResponse<UserData> = {
  status: 'success',
  data: {
    id: 1,
    name: 'Alice',
  },
};
```

このコードでは、ジェネリクス型を用いて `ApiResponse` 型を定義しています。

`type ApiResponse<T>` と書くことでこれはジェネリクス型であることを宣言しているわけですね。
この `ApiResponse` 型は呼び出すときに `ApiResponse<UserData>` のように `<>` 内の `T` に型を書くことで、自動的に `data` プロパティの型に指定した型定義が使用されます。

これにより `ApiResponse` 型は任意の型 `T` を持つことができるため、非常に柔軟な型定義ができます！

## どちらを使うべきか
これまで紹介したように、TypeScriptのtypeとinterfaceはどちらも型を定義するための機能ですが使い方や特徴が少し違います。

interfaceは **オブジェクトの型定義や継承** をサポートしているため、拡張性と再利用性が高くなるなります。
一方、typeは **ユーティリティ型を使って型を拡張** することができ、**ジェネリクスを使うことで柔軟に型を定義** することが可能です。

結果として、typeとinterfaceはどちらを使っても問題ありません！

現在のプロジェクトで使用している方に統一したり、個人的に使いやすいと感じたほうを使うのが良いと思います。

ぜひこの記事の内容を今後のプログラミングに役立ててくださいね！

[card](https://gizanbeak.com/post/typescript-playground-howto)

TypeScript初心者向け! typeとinterfaceの違いと使い分けを実践的な例で紹介します！

undraw sync re 492g

TypeScript typeとinterfaceの使い分け入門

not-found

## Gizanbeak とは？

### ごあいさつ
はじめまして！
都内でソフトウェアエンジニアをしている Syuu といいます。

今まで個人サービスを作ったり仕事を通してインプットはしていたつもりでしたが、そういえばアウトプットはしてないな〜と思い、今更ながら技術ブログを作ってみました。

### 目的
上記のとおり、趣味や仕事を通して得られた知見を共有することでより知識の定着と書いた記事が誰かの役に立てれば良いかなと思っています。
エンジニアであれば個人の技術サイトに助けられたという人も多いですよね...！

### 筆者に関して
私は新卒で WEB 系ベンチャーに就職し、そこでサービス開発に2年半ほど携わっていました。
そこでは主に Ruby on Rails や Backbone.js などを学び、趣味でやっていた React と Next.js を活かして、2021 年の夏に不動産系の SaaS　企業に転職したという経歴となっています。

ブログや執筆活動などは未経験のため読みづらい文章になってしまうかもしれませんが、「わかりやすく」を大切に書いていければと思います。

### 書くこと
主に技術的なこと（問題の解決や新しいトピックなど）の投稿ですが、自身のオススメ書籍や周辺機器のレビューなども投稿していきたいと考えています。

このブログは Next.js(Typescript) + Contentful のいわゆる JAMstack と呼ばれる構成で作成しています。
そのため、まずはブログを作るにあたって得た知識を中心に記事にしていこうと思います！

このブログが少しでもみなさまのお役に立てれば幸いです。

このブログをはじめた経緯や筆者のプロフィールなどについて記載しています。

blog

このサイトについて

個人で WEB サービスやアプリをリリースしてみたいけどどうやったらいいかわからない...
使ってみたい技術はあるけど良いアイディアが見つからない...

エンジニアであれば一度は何か形になるサービスやアプリをリリースしてみたいですよね。
今回はそんな方に向けて [個人開発がやりたくなる本: クリエイター13人の実録エッセイ](https://af.moshimo.com/af/c/click?a_id=2811479&p_id=170&pc_id=185&pl_id=4062&url=https%3A%2F%2Fwww.amazon.co.jp%2Fexec%2Fobidos%2FASIN%2FB07R8WH6W7%2Fguitaristdais-22%2F) という書籍の紹介をさせていただきます。

## 本書の概要
### 概要
>個人開発者13名による、個人開発の体験談をまとめた合同誌です！
WEBサービスやスマホアプリを開発するコツ、失敗談やバズった話、他では言えないお財布事情まで！
これから個人開発を始めたい方、サービスを運営中の方におすすめです！

本書はWEBサービスやアプリを開発・運営されているクリエイター13人の葛藤や工夫をまとめたものです。

それぞれ手法や考え方が違い、**サービスの名前決めから具体的な技術まで様々なノウハウ**が詰め込まれています。
特に**実際に収益化に成功している手法**や、**運営費用（ランニングコスト）**などについても詳しく解説されているところが個人的にはとても参考になりました。

### こんな人におすすめ
- プログラミングを勉強したいが**何を作っていいかわからない**
- これから WEB サービスやアプリを作ってみたいと考えている
- 既に WEB サービスやアプリを作っているが**モチベーションが上がらず**困っている
- 既に WEB サービスやアプリを作っているが**リリースなどでつまずいている**

[af-個人開発がやりたくなる本: クリエイター13人の実録エッセイ](https://af.moshimo.com/af/c/click?a_id=2811479&p_id=170&pc_id=185&pl_id=4062&url=https%3A%2F%2Fwww.amazon.co.jp%2Fexec%2Fobidos%2FASIN%2FB07R8WH6W7%2Fguitaristdais-22%2F "//images.ctfassets.net/fdt52x6qf2de/6Pp7f5hPJ7UVeVn69utZUM/6af7c52989a157be4d317529b2e4e59f/cojinkaihatu.jpeg")

## 本書を読むことで得られること
![illust](//images.contentful.com/fdt52x6qf2de/DjgnXXNbNYH3YTIGhTQAu/735eb4eb64d6021df2f8edd58ff6f297/undraw_Booking_re_gw4j__1_.svg)

- 個人開発におけるモチベーションの保ち方
- 初期段階のアイディア出しや注意点
- サービス名、ドメインの決定方法
- 運営することによって発生する費用やそれを抑える方法
- 個人開発をする場合に使用すると便利な技術やサービスなど
- サービスやアプリをリリースしたあと実際にユーザーに使って貰う方法

上記の以外にもそれぞれのクリエイターが個人開発をおこなう上で**どういう問題が発生し、どう対処したか**という具体的な話がストーリーとして語られており、読み物としてもとても面白いです。

## 特によかった点
![illust](//images.contentful.com/fdt52x6qf2de/49Dt5vWzx0H7Pqd8P5Qlh3/b00c09ec15c4210d4665e319f9f4fff6/undraw_book_lover_mkck.svg)

私も個人サービスを運営している一人として、様々な悩みを抱えていたため本書は共感できる内容がとても多かったです。

その中でも**「そのサービス・アプリがどんな問題を解消するか」**という話が強く印象に残りました。

サービスやアプリというものは世の中に何か悩みや問題を抱えている人がいて、その人の悩みを解消するために存在していると思います。
せっかく苦労してリリースしたのに誰にも使ってもらえない...というのは悲しいですよね。

そうならないためにも**自分が身の回りで感じた不満や不便な点**を見つけ、**それを解決するため**に何か作ってみる。
そうすることで、まずは自分がそのサービス・アプリのファンとなり、**同じ悩みや不満を抱えるユーザー**によって広まり次第にファンが増えていく。
更には**収益化までしっかり考える**ことで長期的な運営をおこなうことが可能となる。

上記のように理想的な好循環のループを起こすために**「そのサービス・アプリがどんな問題を解消するか」**ということがとても大切なのだと感じました。

これから個人開発に挑戦してみたい・挑戦しているがモチベーションが上がらない。
そんなかたにオススメの1冊です。

[af-個人開発がやりたくなる本: クリエイター13人の実録エッセイ](https://af.moshimo.com/af/c/click?a_id=2811479&p_id=170&pc_id=185&pl_id=4062&url=https%3A%2F%2Fwww.amazon.co.jp%2Fexec%2Fobidos%2FASIN%2FB07R8WH6W7%2Fguitaristdais-22%2F "//images.ctfassets.net/fdt52x6qf2de/6Pp7f5hPJ7UVeVn69utZUM/6af7c52989a157be4d317529b2e4e59f/cojinkaihatu.jpeg")

個人で何かサービスやアプリを開発してみたい。既に取り組んでいるがモチベーションや悩みが多い。そんなかたにおすすめできる書籍のご紹介です。

cojinkaihatu

「個人開発がやりたくなる本: クリエイター13人の実録エッセイ」のレビュー

『[WEBを支える技術](https://af.moshimo.com/af/c/click?a_id=2811479&p_id=170&pc_id=185&pl_id=4062&url=https%3A%2F%2Fwww.amazon.co.jp%2Fdp%2FB07JK7FZH2)』は、ウェブ開発に関する幅広い知識とスキルを身につけることができる素晴らしい書籍です。

この記事ではこの本で学べること、おすすめする理由、対象の読者、印象に残った文章、について説明します。

## この本で学べること
### 基本的なウェブ技術の理解
本書では、HTML、CSS、JavaScriptといったウェブ開発において欠かせない基本技術を学ぶことができます。
これらの技術を習得することで、ウェブページの構築やデザイン、インタラクティブな要素の実装が可能になります。

### ウェブ通信の仕組みとセキュリティ
HTTPやHTTPS、RESTful APIなど、ウェブ通信に関する重要な概念を解説しています。これらの知識を学ぶことで、効率的かつ安全なウェブアプリケーションの開発ができるようになります。

また、セキュリティに関する最新の情報や対策方法についても触れられており、安全性の高いウェブサイト構築が可能になります。

### 最新のウェブ技術とトレンド
本書では、最新のウェブ技術やトレンドにも触れています。

例えばPWA（Progressive Web Apps）、WebAssembly、フロントエンドフレームワーク（React, Vue.js, Angular）などの話題にも触れられており、最新の技術を取り入れた開発ができるようになります。

[af-WEBを支える技術](https://af.moshimo.com/af/c/click?a_id=2811479&p_id=170&pc_id=185&pl_id=4062&url=https%3A%2F%2Fwww.amazon.co.jp%2Fdp%2FB07JK7FZH2 
"//images.ctfassets.net/fdt52x6qf2de/HT5sSDZrleLiWuKOucoYy/d20bf119ff056aef595293a1eb4565db/0B720E61-07D8-402A-9148-7BB89E86D931.png")

## おすすめする理由
![illust](//images.ctfassets.net/fdt52x6qf2de/1HAEn55kZjglJlYJf8wkQt/8d5e2f64ada2cf46e41e2d99b78467f7/undraw_happy_feeling_slmw.svg)

この本をおすすめする理由は、初心者から上級者までの幅広い層に対して、ウェブ開発の基本から最新の技術まで網羅している点です。
また、分かりやすい説明と豊富な例で理解しやすく、実践的なスキルを身につけることができます。

この本を読むことで、ウェブ開発のプロフェッショナルに一歩近づくことができるでしょう。

## 対象の読者
![illust](//images.ctfassets.net/fdt52x6qf2de/6ILRecJmOHA6DPgpcEMmL3/1d582831e03ec5cacc170317db9e6c65/undraw_reading_time_gvg0.svg)

この本は、ウェブ開発を学びたい初心者から、すでに一定の経験を持つ中級者、さらには上級者まで、幅広い層にお勧めできる書籍です。

特にこれからウェブ開発を始める方や、知識を深めたい方、最新のトレンドを追いかけたい方にはぴったりです。

## 印象に残った文章
「ウェブは単なる技術ではなく、人々が情報や知識を共有し、コミュニケーションを行うためのプラットフォームです。そのため、ウェブを支える技術を習得することは、現代社会において重要なスキルのひとつとなっています。」

この文章は、ウェブ開発の意義を端的に表していて、読者に対してウェブ技術の重要性を伝えていると思いました。

## まとめ
![illust](//images.ctfassets.net/fdt52x6qf2de/37OZCq40QYNC0ZyGtDViX6/725f6056bc672a11277b2665c996d240/undraw_Preferences_re_49in.svg)

『WEBを支える技術』は、基本的なウェブ技術から最新のトレンドまで幅広く学べる、ウェブ開発に関する素晴らしい書籍です。

分かりやすい説明と豊富な例により、初心者から上級者までの幅広い読者にお勧めできます。
ウェブ開発のスキルを総合的に向上させたい方には、ぜひ一読していただきたい一冊です。

WEBを支える技術書籍について学べることやおすすめの理由を含めて解説しています。

0B720E61-07D8-402A-9148-7BB89E86D931

「Webを支える技術」のレビュー

ものを作り出すエンジニアという職業にとって「何を作りどう運用するか」というのはとても大切なことです。

例えば WEB サービスを作る場合、ただ最初に作って終わりではなくその後も継続的に更新していくことが大切となってきます。
もちろんその為にはサーバー代やドメイン代などを負担する必要があるため収益化の方法を確立しておき、安定的に継続することでユーザーと開発者双方にメリットがあるわけです。

今回はそのような収益化の方法についてのエッセンスを学ぶことができる [金儲けのレシピ](https://af.moshimo.com/af/c/click?a_id=2811479&amp;p_id=170&amp;pc_id=185&amp;pl_id=4062&amp;url=https%3A%2F%2Fwww.amazon.co.jp%2Fdp%2FB08NPX48MQ) という書籍の紹介をさせていただきます。

## 本書の概要
### 概要
> 「精神論・根性論ではなく、理論に基づいた金儲けの技術を伝えたい」
最高のビジネススキルとは、
「金儲け術」である。

まず本書のインパクトあるタイトルに胡散臭さを感じるかたもいるかもしれません。
しかし、怪しい商法を勧める本ではなく **現代におけるビジネスモデルがどのように収益を得ているか** を端的に分かりやすくまとめたものです。

エンジニアと関係のあるところで言うと、 **インターネットを用いた 1:n 構造の優位性** や **SaaS のメリット** 、 広告ビジネスについてなどの参考になることが書かれています。

### なぜエンジニアと関係があるのか
本書は主にビジネスサイドの情報をまとめたものであり、技術的な書籍ではありません。

ただ、私としてはエンジニアもぜひ読むべき書籍だと思っています。

もちろん技術をとことん突き詰める技術志向のエンジニアにとっては不要の情報かもしれませんが、ビジネスサイドをしっかりと理解し **技術とビジネスの両面から意見を言えるエンジニア** はかなり市場価値が高く、今後さらに需要が増えてくるポジションです。

もし世の中のビジネスに対して少しでも興味があれば読んでみて損はないと思います。

### こんな人におすすめ
- サービス志向のエンジニアを目指している
- 収益化の方法についてのアイディアを見つけたい
- 現代のビジネスにおいて大切なことを知りたい
- 資本主義から身を守るための盾を知りたい

「なぜエンジニアと関係があるのか」でも書いたように「いかに考えたサービスを実現できるか」を大切にするサービス志向のエンジニアにおすすめできる１冊です。

その他にも儲かっているビジネスを理解するということは、自分が無駄に搾取されないような盾を持つという意味で非常に有益な情報が書かれています。

本書は難しい概念の説明本ではなく、実際にあなたも聞いたことのある企業がどういうビジネスモデルで収益をあげているのかを分かりやすく言語化して書かれているため読み物としても非常に面白いです。

[af-金儲けのレシピ](https://af.moshimo.com/af/c/click?a_id=2811479&amp;p_id=170&amp;pc_id=185&amp;pl_id=4062&amp;url=https%3A%2F%2Fwww.amazon.co.jp%2Fdp%2FB08NPX48MQ "//images.ctfassets.net/fdt52x6qf2de/6NbY3vEJ5Pdcdf7pBaBCvw/529b12bed2892b4aa21f5ea9dbaa2bce/money-recipe.jpeg")

## 本書を読むことで得られること
![illust](//images.contentful.com/fdt52x6qf2de/73towUE3VYt6BfWaXvTpvI/31439d448bb3c4843354a39105d80fd1/undraw_Booked_re_vtod.svg)

- 巷のビジネスモデルはどのように収益をあげているのか
- なぜ BtoB サービスは儲かるのか
- なぜ WEB サービスのような 1:n 構造は儲かるのか
- 消費者の行動原理
- 逆に企業から搾取されないよう注意するべきこと

## 特に良かった点
![illust](//images.contentful.com/fdt52x6qf2de/6ILRecJmOHA6DPgpcEMmL3/1d582831e03ec5cacc170317db9e6c65/undraw_reading_time_gvg0.svg)

個人的には東進ハイスクールを例にあげて説明されている 1:n 構造 の優位性についての話がとても面白かったです。

WEB サービスも一度作れば何人に使ってもらったとしてもさほど手間は変わらず、n の数が多ければ多いほど原価率を引き下げることができる点で同じです。

クラウド型会計ソフトの freee やクラウド型労務管理ソフトの SmartHR などの SaaS モデルが従来のライセンス型ソフトを淘汰し大きな収益をあげてきた歴史なども語られています。

なぜ SaaS というビジネスモデルが優れているかという理由では以下のような点が書かれていました。

- 月額課金のため将来の収益が読みやすく投資家が投資しやすい
- 1:n 構造のため損益分岐点を超えた部分の売上がそのまま利益になる
- 業務の中に組み込まれるソフトのため解約されずらい

SaaS は世の中に既に多く存在しており飽和状態と書かれていますが、まだまだニッチなジャンルや潜在的な需要を見つけることでその分野のシェアをとれる可能性のあるビジネスモデルだと思いました。

エンジニアは基本的に技術だけを磨いていく人が多いからこそ、技術だけではなくビジネスサイドも理解できるエンジニアは重宝されます。
そんなサービス志向のエンジニアにはぜひ読んでほしい１冊です。

世の中に存在するビジネスモデルについて分かりやすく言語化して書かれているエンジニアにも参考になる書籍の紹介です。

money-recipe

「金儲けのレシピ」のレビュー

フロントエンドが好きなWEBエンジニア Next.js / React / TypeScript

profile

Gizanbeak は Next.js, React, TypeScript などフロントエンド系がメインの技術ブログです。