cloudflare-pages

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 バージョンを変更する方法

TypeScriptで日常的によく使われるのが文字列と数字の相互変換です。
これをマスターすることで、データの加工や変換がよりスムーズに行えます。

この記事ではTypeScriptを使用して、文字列と数字を相互に変換する方法に焦点を当てて解説していきます。
具体的には以下の内容を取り上げます。

- 文字列から数字への変換方法とその活用シーン
- 数字から文字列への変換技術とその特性
- それぞれの変換方法のメリットとデメリット

## 文字列を数字に変換🔢
まず最初に文字列を数値に変換する方法を紹介します。

文字列を数値に変換するには、主に3つの方法があるため順に説明していきます。

### `parseInt` と `parseFloat`
``` typescript
let strNum1: string = "123";
let num1: number = parseInt(strNum1);
console.log(num1); // 123
```

上のコードでは `parseInt` 関数を使用して文字列 `"123"` を数値 `123` に変換しています。

文字列に小数点が含まれる場合は以下のように `parseFloat` を使用します！

``` typescript
let strNum2: string = "123.45";
let num2: number = parseFloat(strNum2);
console.log(num2); // 123.45
```

### `+` 演算子
もう一つ、シンプルな方法もあります。

``` typescript
let strNum3: string = "123";
let num3: number = +strNum3;
console.log(num3); // 123
```

この方法は `+` 演算子を使って文字列を数値に変換しています。
短くて覚えやすいですよね！

## 数値を文字列に変換🔤
次は数値を文字列に変換する方法です。

数字を文字列に変換するには `toString` もしくはテンプレートリテラルを使用します。

### `toString` メソッド
``` typescript
let num4: number = 123;
let strNum4: string = num4.toString();
console.log(strNum4); // "123"
```

上記のコードでは `toString` メソッドを使って数値 `123` を文字列 `"123"` に変換しています。
とても簡単に変換できますね！

### テンプレートリテラル
``` typescript
let num5: number = 456;
let strNum5: string = `${num5}`;
console.log(strNum5); // "456"
```

テンプレートリテラルを使うと、数値を簡単に文字列に変換できます。
値を表示する時によく用いられるのがテンプレートリテラルですね！

## 変換に使用する関数による違い🤔
![illust](//images.ctfassets.net/fdt52x6qf2de/7owxPwO858piDzrTuWW4mi/734e8d44fc5aed8e6435fbd86fc1430f/undraw_server_push_re_303w.svg)

変換に使用する関数によっては、変換後の結果に差異が生まれることがあります。

以下が主な特徴になります。

- `parseInt` と `parseFloat` は、文字列の先頭から数値部分を読み取り数値に変換します
- `+` 演算子や `Number()` 関数は文字列全体が数値でなければエラーになります
- `toString` メソッドは数値を直接文字列に変換します

このように、適切な変換方法を選ぶことでバグを防ぐことができます。

TypeScriptの数値変換はとってもシンプルですね！
適切な方法を選んでコードのバグを少なくしましょう。

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

TypeScriptでの文字列⇔数字相互変換のポイントわかりやすく解説！それぞれの特徴や違いなども含めて紹介します。

illust

TypeScriptの数値変換　 文字列⇔数字を相互変換する方法を解説

こんにちは！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はコンパイル不要でそのままブラウザで実行できます。

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

## 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)

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

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

javascript icon 130900

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

この記事では TypeScript の配列をループする方法について紹介します。

具体的なコード例を用いて `for` 文、`for-of` 文、`Array.forEach` 文の3つの方法を紹介します。
さらに、各ループ方法に関するポイントと実践的な例題もお届けします。

さっそく始めましょう！

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

## for 文を使ってループ
まずは一番基本的な for 文を使ったループ方法を見てみましょう。

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

for (let i = 0; i < numbers.length; i++) {
  console.log(numbers[i]);
}
```

このコードでは `numbers` という配列を定義して、for 文を使ってインデックス `i` を0から配列の長さまで増やしながら、配列の各要素をコンソールに出力しています。

for 文は最も高速なループ方法であるため、パフォーマンスが重要な場面では for 文を選択することをおすすめします。

## for-of 文を使ってループ
次に for-of 文を使ったループ方法です。

こちらはもっとシンプルで読みやすいですね。

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

for (const number of numbers) {
  console.log(number);
}
```

for-of 文では `numbers` 配列の各要素を直接取得し、`number` という変数に格納してコンソールに出力しています。

for-of 文は可読性が高く、配列の要素に対して直接アクセスできるためコードが簡潔になります。

## Array.forEach 文を使ってループ
最後に紹介する Array.forEach 文を使った方法は、関数型プログラミングのスタイルに基づいています。
これは配列の要素に対して関数を適用する方法で、コードがよりシンプルで直感的になります。

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

numbers.forEach((number) => {
  console.log(number);
});
```

Array.forEach 文では `numbers` 配列に対してアロー関数を渡し各要素をコンソールに出力しています。

Array.forEach を使うと関数型プログラミングスタイルを採用でき、コードがより宣言的になります。
ただし、Array.forEach は for 文や for-of 文と比べるとパフォーマンスがやや劣る場合があるので、パフォーマンスが重要な場面では注意が必要です。

## 実践的な例題
最後に実践的な例題として、配列内の偶数だけを抽出する処理を紹介します。

これによりループを使った実際の問題解決に役立つと思います！

``` typescript
const numbers: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const evenNumbers: number[] = [];

for (const number of numbers) {
  if (number % 2 === 0) {
    evenNumbers.push(number);
  }
}

console.log(evenNumbers); // [2, 4, 6, 8, 10]
```

このコードでは `numbers` 配列から偶数を見つけて `evenNumbers` 配列に追加しています。

次にfor-of文を使って、`numbers` 配列をループしています。
そして `number % 2 === 0` という条件式を使用して、各要素が偶数かどうかを判定しています。

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

## まとめ
これで TypeScript の配列をループする方法、for 文、for-of 文、Array.forEach 文を学びました！

それぞれの方法には特徴があるので使い分けを意識してコードを書くことが大切です。
また、各ループ方法に関するパフォーマンスも考えられるとより優れた実装に繋がります。

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

初心者向けにTypeScriptの配列をループする方法を分かりやすく解説！for、for-of、forEachの3つを紹介。

undraw not found re bh2e

TypeScript で配列をループする簡単な3つの方法を紹介

こんにちは！
今日はReactの世界に潜ってTypeScriptと一緒にuseStateを使う方法について紹介します。

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

## useStateをTypeScriptと一緒に使ってみよう
まずはTypeScriptで `useState` を使ってみましょう。
以下のコードは簡単なカウンターコンポーネントの例です。

``` typescript
import React, { useState } from 'react';

const Counter: React.FC = () => {
  const [count, setCount] = useState<number>(0);

  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  );
};

export default Counter;
```

ここで注意すべきは `useState<number>(0)` の部分です。

この行では `useState` に初期値 `0` を渡しています。
また、`<number>` によってこの `state` が数値であることをTypeScriptに伝えています。

これによってこの `useState` で **使用できる変数が数値** がであることが保証できるわけですね。

## TypeScriptの型推論を活かそう
TypeScriptは初期値から型を推論できるので多くの場合に、`useState` の **型を明示的に指定する必要はありません** 。

以下の例では `useState` の引数に `0` を渡していますが、`<number>` の部分を省略しています。

``` typescript
import React, { useState } from 'react';

const Counter: React.FC = () => {
  const [count, setCount] = useState(0); // numberと推論される

  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>Add</button>
    </div>
  );
};

export default Counter;
```

このように `<number>` を省略しても問題ありません。
なぜなら、TypeScriptは `0` が数値であることから `count` が数値型であると推論してくれるからです。

とても便利ですね！

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

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

## まとめ
以上がTypeScriptと一緒に `useState` を使う方法と、その型推論の活用法についてです。

`useState` を活用することで関数コンポーネント内で状態管理を簡単に行うことができます。
また、TypeScriptの型推論を活用すればコードをよりシンプルに保つことができます。

TypeScriptとReact HooksのuseStateの活用方法を初心者でも理解できるよう解説！状態管理の基本を掴もう

初心者向け！TypeScriptとReactのuseState活用ガイド

この記事では、TypeScriptの即時関数について紹介します。
即時関数は聞き慣れないかもしれませんが、実はとても便利な技術なんですよ。

## 即時関数とは？書き方🖋
まずは、即時関数の基本から紹介します。

即時関数とは **定義された直後に実行される関数** のことを言います。
通常の関数とは違って名前を持たず、すぐに実行される特性があります。

具体的には以下のように書けます。

``` typescript
(function() {
  console.log("これは即時関数です！");
})();
```

このコードでは関数が定義された直後に、コンソールにメッセージが出力されます。

私も最初は「なんでこんな書き方があるんだろう？」と思いました。

## 引数を持つ即時関数の使い方
次に即時関数に引数を渡す方法を紹介します。

引数を渡すことで、外部からのデータを関数内で利用することができます。
さっそくコードを見てみましょう。

``` typescript
(function(name: string) {
  console.log(`こんにちは、${name}さん！`);
})("Gizanbeak");
```

上記のコードを実行すると「こんにちは、Gizanbeakさん！」というメッセージが表示されます。

簡単ですよね！😉
引数を渡すことでさらに柔軟に即時関数を活用することができます。

## アロー関数と合わせて使う✨
![illust](//images.ctfassets.net/fdt52x6qf2de/S5SfTuQhXh1a3giv9xkC0/f37e966695452d03f7ec4a9860eec27c/undraw_speed_test_re_pe1f.svg)

TypeScriptやES6ではアロー関数という書き方が使えますね。

このアロー関数を即時関数と組み合わせることで、さらにスタイリッシュなコードを書くことができます。

``` typescript
(() => {
  console.log("アロー関数と即時関数の組み合わせ！");
})();
```

シンプルで美しいですよね。
私もこの組み合わせはよく使います。🌟

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

## 即時関数のメリット
ここまで読んでいただいた方の中には「なぜ即時関数を使うの？」と思った方もいるかと思います。
そこで、即時関数のメリットについてお伝えします。

- **変数のスコープを制限**：即時関数内で定義された変数はその関数の中でのみ有効です
- **コードの衝突を避ける**：他のスクリプトやライブラリと変数名が重複することを避けることができます
- **初期化時の処理をまとめ**：ページのロード時などに一度だけ実行したい処理をまとめて書くことができます

即時関数を使用することで上記のようなメリットがあるため、覚えておくと便利です！

## まとめ
いかがでしたか？
即時関数は一見複雑に見えるかもしれませんが、理解すれば非常に強力なツールとして活用できます。

即時関数の使い方、メリットを理解してぜひ活用してみてくださいね！🚀

TypeScriptの即時関数の基本から応用まで、具体的なコード例とともに解説します！

TypeScriptで即時関数を使う方法を解説！基本から実践的な使い方まで

not-found

## Gizanbeak とは？

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

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

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

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

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

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

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

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

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

blog

このサイトについて

TypeScriptを学びたいとき、どの本がいいのか分からないという悩みはないでしょうか？

どんな本があるのか、その中でどの本がいいのかが気になっているかもしれません。

この記事ではTypeScriptを学習する上でおすすめの書籍として厳選した次の5冊を紹介します！

- [プロを目指す人のためのTypeScript入門](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%2FB09Y527YPV)
- [TypeScriptとReact/Next.jsでつくる実践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%2FB0B74C3TNQ)
- [ゼロからわかるTypeScript入門](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%2FB09YGKMYFQ)
- [プログラミングTypeScript ―スケールするJavaScriptアプリケーション開発](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%2F4873119049)
- [手を動かしながら学ぶTypeScript](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%2FB09KZJXDN1)

## プロを目指す人のためのTypeScript入門
![illust](//images.ctfassets.net/fdt52x6qf2de/1wlalONwnyjdh8ckyB2PDH/e77c08e0858db4468e13d7288aab7d40/51BhhfT6IyL.jpg)

### 概要
[プロを目指す人のためのTypeScript入門](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%2FB09Y527YPV) の第1章ではTypeScriptがどれほど革命的な言語であるかと、その誕生の背景が紹介されています。
また、JavaScriptやECMAScriptとの関係性も触れられ、実際の開発環境の構築もサポートされています。

初心者はもちろん、すでにTypeScriptを使用している中級者もこの書籍の豊富な情報から多くのことを学べると思います。

基本的な文法から、文と式の違い、そして高度な型や非同期処理など、TypeScriptの深い部分まで幅広くカバー。
特に `any` 型のセクションでは「TypeScriptにおいて最凶の危険性を誇る機能」とも言われる型の真価と、それをどう活用すべきかの知識が得られます。

### 感想
この書籍の文章は非常に読みやすく技術的な内容も明瞭に解説されていました。
筆者がTypeScriptに関する深い知識と経験を持っていることが伝わり、そのアドバイスや推奨事項が非常に価値があると感じました。

また、入門書としての側面だけでなく経験者にとっても新しい発見や学びが得られる内容となっています。
特にコラムは面白くさまざまな疑問や課題に対する筆者の洞察を得られるのは大変魅力的です。

明るく、分かりやすい言葉でしかし深い内容をしっかりと伝えるスタイルは、技術書として理想的です。
私もTypeScriptを使って開発していますが、この書籍を読むことで新しい視点や知識を得られました。
TypeScriptに関して学びたいすべての人にこの書籍おすすめします！

[af-プロを目指す人のためのTypeScript入門](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%2FB09Y527YPV "//images.ctfassets.net/fdt52x6qf2de/1wlalONwnyjdh8ckyB2PDH/e77c08e0858db4468e13d7288aab7d40/51BhhfT6IyL.jpg")

## TypeScriptとReact/Next.jsでつくる実践Webアプリケーション開発
![illust](//images.ctfassets.net/fdt52x6qf2de/4w5bWy6fxMymceB1NXoi8N/15c15d9fd3a7ab2553518966a17c6395/B0B74C3TNQ.01._SCLZZZZZZZ_SX500_.jpg)

### 概要
Next.jsやTypeScriptを活用したモダンなフロントエンドの開発手法と、それらの背景にある歴史を深く解説してるのが [TypeScriptとReact/Next.jsでつくる実践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%2FB0B74C3TNQ) です。
ReactとNext.jsの独自の機能やその適用例についても詳しく触れています。

この書籍は、既にサーバーサイドのプログラム経験を持つ方や、TypeScriptやReactの基本を知っている方に最適だと思います。
独自の視点でのトピック提供や、実務での実例も豊富に紹介されているので実践的な学びを求める方には特にオススメできます。

TypeScriptの速習や、React/Next.jsの基本操作から実際のWebアプリケーションを構築する方法まで、詳しく解説されています。
特に、CSR, SSR, SSG, ISRの適切な使用方法や、Next.jsのアーキテクチャ図などは非常に面白いため初心者から経験者まで得るものが多いです。

### 感想
特に良かった点は、筆者の深い知識と経験が色濃く出ている本です。
細部まで丁寧に解説されているため技術的な点だけでなく、実際の開発現場でのノウハウもしっかりと伝わってきます。
また、最新の技術やトレンドもきちんと取り入れられており、今後のフロントエンド開発にも役立つ内容が盛りだくさんです。

この書籍を読むとTypeScriptやReactの魅力を再認識できます！
筆者の明るく分かりやすい言葉での解説は学習のハードルを下げてくれるため、私自身も多くの新しい知見を得ることができました。
全体的にフロントエンド開発に関心がある方にこの書籍をおすすめします。

[af-TypeScriptとReact/Next.jsでつくる実践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%2FB0B74C3TNQ "//images.ctfassets.net/fdt52x6qf2de/4w5bWy6fxMymceB1NXoi8N/15c15d9fd3a7ab2553518966a17c6395/B0B74C3TNQ.01._SCLZZZZZZZ_SX500_.jpg")

## ゼロからわかるTypeScript入門
![illust](//images.ctfassets.net/fdt52x6qf2de/13kCAGnRe1sdGo2pVwdy0R/fea0131041b65048aaf6a0382cb77b41/B09YGKMYFQ.01._SCLZZZZZZZ_SX500_.jpg)

### 概要
Webフロントエンドの現場で人気急上昇のTypeScript。

特にReactやVueなどのフレームワークでの採用が目立ってきましたね。
[ゼロからわかるTypeScript入門](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%2FB09YGKMYFQ)  ではTypeScriptの魅力とその基本を分かりやすく解説しています。

JavaScriptを既に知っている人はもちろん、完全な初心者でも安心。
なぜなら、この書籍はJavaScriptもTypeScriptも基礎から丁寧に説明されているからです。

JavaScriptの基本概念、変数、演算子、条件分岐から始めて、最終的には非同期Webアプリの制作まで解説されています。
そして、実際に天気情報のAPIを利用したアプリケーションを手を動かしながら学べるのが特徴です。

特に良かった点としては以下の点です。
- **分かりやすい解説**: この書籍の一番の魅力はコードと本文の関連性を明確に示している点です。番号で対応しているのでどの部分が何を意味しているのか一目瞭然。
- **実践的な練習問題**: 各章の終わりにある練習問題で学んだ内容をしっかりと身につけることができます。
- **実際の成果物制作**: 最後には学んだ知識を活かして実際のWebアプリケーションを制作。これによって、学んだ内容が実際の開発にどのように役立つのかが体感できます。

### 感想
私自身、Webフロントエンドの開発に関わっていますが、この書籍を通じてTypeScriptの深い部分をさらに理解することができました。

初心者だけでなく、すでにある程度の知識を持っている方にも新しい発見があると感じます。
明るく、読みやすい文体で深い内容もスムーズに頭に入ってきます。
この書籍を手に取ることで、TypeScriptの可能性とその魅力を再認識すること間違いなしです！

この書籍はTypeScriptをしっかりと学びたい方に特におすすめします。

[af-ゼロからわかるTypeScript入門](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%2FB09YGKMYFQ "//images.ctfassets.net/fdt52x6qf2de/13kCAGnRe1sdGo2pVwdy0R/fea0131041b65048aaf6a0382cb77b41/B09YGKMYFQ.01._SCLZZZZZZZ_SX500_.jpg")

## プログラミングTypeScript ―スケールするJavaScriptアプリケーション開発
![illust](//images.ctfassets.net/fdt52x6qf2de/7bjs6FJkv9JXJ8oF7nUoJX/7ecc8d2d0084e521b2515fd227fe7ce1/71G0osmMgSL.jpg)

### 概要
[プログラミングTypeScript ―スケールするJavaScriptアプリケーション開発](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%2F4873119049) ではサブタイプや関数の挙動、さらには非同期処理などJavaScriptをベースとしつつ、TypeScriptが提供する強力な型システムの恩恵を詳しく解説しています。

JavaScriptの基礎知識がある人はもちろん、TypeScriptに初めて触れる方にもこの書籍は大変役立つと思います。
ただし、JavaScriptに全く触れたことがない方はコードサンプルの一部が少し難しく感じるかもしれません。

TypeScriptの基礎から、細かい文法や型システムの特徴、実践的な使い方まで幅広くカバーしています。
特に、型に関する章ではTypeScriptの型システムがどれほど強力で柔軟であるかを、具体的なコード例とともに学べます。

特に良かった点として、訳書でありながら文章は非常にスムーズで読みやすい点です。
ジョークの部分も適度に挟まれているので、テクニカルな内容でも楽しく読めます。
一方でいくつかの節では直訳的な部分があるため、その都度コードを動かす必要が感じられる部分も一部あります。

しかし、それが逆に読み手にコードと向き合うきっかけを提供しているとも言えますね。

### 感想
この書籍を読み進める中でTypeScriptの強力な型システムとその実用性を深く理解することができました。
特に、型や関数に関する詳細な説明は他の書籍ではあまり見られない内容で、非常に新鮮でした。

また、訳書特有の読みづらさもあるものの、それを補って余りあるほどの実践的な内容が盛り込まれているためTypeScriptの魅力を再発見することができました。

この書籍を手に取ることで、JavaScriptだけでなくTypeScriptの真骨頂を理解し、更なるスケールの大きなアプリケーション開発に挑戦したくなるはずです！

[af-プログラミングTypeScript ―スケールするJavaScriptアプリケーション開発](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%2F4873119049 "//images.ctfassets.net/fdt52x6qf2de/7bjs6FJkv9JXJ8oF7nUoJX/7ecc8d2d0084e521b2515fd227fe7ce1/71G0osmMgSL.jpg")

## 手を動かしながら学ぶTypeScript
![illust](//images.ctfassets.net/fdt52x6qf2de/7KKkqMpyFMM0ezQhzl7L9W/3cbba3acb0b7d1dcc168abf8ae26955b/4863543557.01._SCLZZZZZZZ_SX500_.jpg)

### 概要
[手を動かしながら学ぶTypeScript](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%2FB09KZJXDN1) はTypeScriptの単なる文法解説だけでなく、実際のコードでの実践的な活用や設計、リファクタリングの考え方まで網羅しています。
なので、読者はこの書籍を通じてJS/TS力全体を飛躍的に向上させることができると思います。

以下のような人には特におすすめです！

- 静的型付け言語の経験はあり、JSも書けるがTSは未経験の人
- TypeScriptの基本文法は知っているが、具体的な実用シーンがイメージしにくい人

遅延評価勉強法（技術書を頭からコツコツ読んでいくのではなく、実践で使う技術を都度勉強してすぐにアウトプットに生かす勉強法）に基づきながら、3つの異なるサンプルアプリの制作を通じてTypeScriptの理解を深められます。

冒頭では基本のTypeScript解説が最小限に止められ、タイトル通り手を動かしながら学ぶ実際のアプリ制作が多く盛り込まれています。

このアプローチによって読者は文法や機能の「なぜ」「なにを」「どこに」「どんなとき」を効果的に把握することができると感じました。

### 感想
手を動かしながら学ぶスタイルはとても効果的で楽しかったです。

300ページ程度で様々なチュートリアルを楽しみながら、TypeScriptの魅力とその実力をしっかり体感できました。
また、実際のコーディング時に考慮すべきポイントやコード設計のTipsも非常に参考になりました。

特に良かった点として、実際の開発で役立つコードの設計やリファクタリングの考え方に触れることができ、ただの文法の学習では得られない実践的なノウハウが詰まっています。
また、初心者が迷うことが多い「interfaceと型エイリアス」や「列挙型の活用方法」に関するTipsなど、実際の現場で役立つ情報が豊富に紹介されています。

効果的に深くTypeScriptを学びたい人にこの書籍をおすすめします。

[af-手を動かしながら学ぶTypeScript](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%2FB09KZJXDN1 "//images.ctfassets.net/fdt52x6qf2de/7KKkqMpyFMM0ezQhzl7L9W/3cbba3acb0b7d1dcc168abf8ae26955b/4863543557.01._SCLZZZZZZZ_SX500_.jpg")

## まとめ
以上、TypeScriptを学ぶためのおすすめ書籍5選を紹介しました！

それぞれの書籍は読者のレベルや学びたい内容に応じて異なるアプローチでTypeScriptを解説しています。
自分のニーズや目的に合わせてぜひ一冊手にとってみてくださいね！

TypeScriptを学ぶ際に初心者から上級者まで幅広くおすすめできる書籍5選を紹介します！TypeScriptを効果的に学習するのに役立つこと間違いなしです。

TypeScriptの学習におすすめしたい書籍5選！

『[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 サービスやアプリをリリースしてみたいけどどうやったらいいかわからない...
使ってみたい技術はあるけど良いアイディアが見つからない...

エンジニアであれば一度は何か形になるサービスやアプリをリリースしてみたいですよね。
今回はそんな方に向けて [個人開発がやりたくなる本: クリエイター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&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 などフロントエンド系がメインの技術ブログです。