favorite

next-js

statistics

undraw content team 3epn

laravel-and-vue

Contentful

Next.js

TypeScript

JavaScript

React

この記事では Headless CMS として有名な [Contentful](https://www.contentful.com/) の TypeScript 用型定義ファイルを自動的に生成する方法と Next.js で Contentful からのレスポンスを受け取る方法についても合わせて紹介します。

Contentful では様々なコンテンツを定義できるため自由度が高く、その反面手動で型定義をするのは大変なのでそれらを自動で生成できると便利です。

## 準備
### ライブラリのインストール
Contentful で自動的に型定義ファイルを生成するには `contentful-typescript-codegen` というライブラリを使用します。

[card](https://github.com/intercom/contentful-typescript-codegen)

公式 JavaScript ライブラリの `contentful` と `contentful-management` も使用するため合わせてインストールしてください。

```bash
npm install contentful contentful-management contentful-typescript-codegen
```

もしくは

```bash
yarn add contentful contentful-management contentful-typescript-codegen
```

### Contentful のトークンを取得する
インストールが完了したら次は型定義ファイルを生成するための Contentful Management API Token を取得しましょう。

[Contentful](https://www.contentful.com/) へログインし、「Settings」から「API keys」を押してトークン一覧画面を開きます。

次に「Content management tokens」のタブを選択し、「Generate Personal token」を押してトークンを作成します。

![contentful](//images.contentful.com/fdt52x6qf2de/7BpFnBhc2drfqsCPg8Kwze/e528bf60623dacaa8c0f082195316e11/contentful.png)

トークン名を設定して「Generate」を押すとトークンが表示されるのでメモしてください。
あとから確認することはできず一度忘れてしまうと再度作成する必要があるため注意です。

また、トークンは `dotenv` を利用して管理すると便利です。

まだインストールしていない場合は以下のコマンドでインストールしておきましょう。

```bash
npm install dotenv
```

もしくは

```bash
yarn add dotenv
```

次に以下のように `.env` ファイルを作成した上で取得したトークンを `CONTENTFUL_MANAGEMENT_API_ACCESS_TOKEN` へコピペします。

```
CONTENTFUL_SPACE_ID = ****
CONTENTFUL_ENVIRONMENT = ****
CONTENTFUL_MANAGEMENT_API_ACCESS_TOKEN = ****
CONTENTFUL_DELIVERY_TOKEN = ****
CONTENTFUL_PREVIEW_TOKEN = ****
```

`CONTENTFUL_SPACE_ID` は「Settings」の「General settings」から、`CONTENTFUL_ENVIRONMENT` は同じく「Settings」の「Environments」確認することができます。

![contentful 2](//images.ctfassets.net/fdt52x6qf2de/HRwNIX7EqlIYykXynz4q3/26e0bf035aa8fe9516a0b8edf460dac0/contentful_2.png)

`CONTENTFUL_DELIVERY_TOKEN` はコンテンツを取得するためのトークン、`CONTENTFUL_PREVIEW_TOKEN` はプレビュー機能を利用する場合に使うトークンで、どちらも「Settings」から「API keys」のトークン一覧画面で「Content delivery / preview tokens」のタブから作成します。

「Add API Key」を押すとトークンが作成され、「Content Delivery API - access token」と「Content Preview API - access token」が表示されるためそれぞれ上記の `.env` ファイルへコピペしてください。

![contentful 3](//images.contentful.com/fdt52x6qf2de/5vDV6UAT3gpDgRoV9Y4zXy/c19137b99853cfebfaebcd9a628c869f/contentful_3.png)

### 型定義ファイルを生成する
プロジェクトのルートディレクトリに `getContentfulEnvironment.js` というファイルを以下の内容で作成します。

```js
require('dotenv').config()

const contentfulManagement = require("contentful-management")

module.exports = function() {
  const contentfulClient = contentfulManagement.createClient({
    accessToken: process.env.CONTENTFUL_MANAGEMENT_API_ACCESS_TOKEN,
  })

  return contentfulClient
    .getSpace(process.env.CONTENTFUL_SPACE_ID)
    .then(space => space.getEnvironment(process.env.CONTENTFUL_ENVIRONMENT))
}
```

次に `package.json` の `scripts` へ実行時に型定義ファイルを生成する以下のスクリプトを追加します。

```
{
  // ...
  "scripts": {
    "contentful-typescript-codegen": "contentful-typescript-codegen --output @types/generated/contentful.d.ts"
  }
}
```

最後に `npm run contentful-typescript-codegen` もしくは `yarn contentful-typescript-codegen` を実行して型定義ファイルを生成します。

これで `contentful.d.ts` という名前の型定義ファイルが `@types/generated` に作成されているはずです。

## Next.js でレスポンスを受け取る
### 準備
型定義ファイルを作成できたら、次は Next.js で Contentful からのレスポンスを取得する方法について見ていきましょう。

まずは `utils` フォルダを作成し、 `client.ts` というファイルを以下の内容で作成します。

```ts
import { createClient } from 'contentful'

const config = {
  space: process.env.CONTENTFUL_SPACE_ID,
  accessToken: process.env.CONTENTFUL_DELIVERY_TOKEN
}

export const client = createClient(config)
```

##### `client.ts` はコンテンツを取得するためだけに使用するので取得用トークンである `CONTENTFUL_DELIVERY_TOKEN` を使用しています。

### コンテンツ一覧を取得する
上記で用意した `client.ts` を使用して特定のコンテンツ一覧を取得してみます。

また、ここでは一般的にブログを作る場合によく用いられる `post` という Contentful のコンテンツタイプを作成していることを想定しています。

```tsx
import { GetStaticProps } from 'next'
import { client } from '../utils/client'
import { Entry, EntryCollection } from 'contentful'
import { IPostFields } from '../@types/generated/contentful'

interface Props {
  posts: EntryCollection<IPostFields>
}

export default function Home({ posts }){
  return (
    <>
      {posts.map((post: Entry<IPostFields>) =>
        <div>
          <h1>{post.fields.title}</h1>
          <p>{post.fields.body}</p>
        </div>
      )}
    </>
  )
}

export const getStaticProps: GetStaticProps<Props> = async () => {
  const posts = await client.getEntries<IPostFields>({
    content_type: "post",
    order: "-sys.createdAt",
  })

  return {
    props: {
      posts: posts,
    }
  }
}
```

コンテンツ一覧取得に使われる `getEntries()` は引数に `content_type` を指定することで特定のコンテンツタイプのみを取得することが可能です。
また、`order` でソートすることもでき、今回は `createdAt` （作成日）の降順でソートをおこなっています。

`Entry<IPostFields>` にはコンテンツの内容を保持している `fields` の他にシステム的な情報を保持している `sys` というプロパティで作成日や更新日などの項目も取得することが可能となっています。

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

## まとめ
今回は Contentful で型定義ファイルを自動的に生成する方法を紹介しました。

ライブラリを利用することで手動で型定義をする必要なく、快適に TypeScript の恩恵を受けることができます。
今回は簡単な例で紹介しましたが、複雑なモデルになっている場合でもエディターの予測変換に従っていけば目的の項目を見つけられるのはとても便利ですね。

Contentful の TypeScript 用型定義ファイルを自動的に生成する方法と Next.js で Contentful からのレスポンスを受け取る方法について解説します。

Contentful のレスポンスを TypeScript で取得する方法

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

Lighthouse を回していると `Remove unused JavaScript` という表記がでてスコアが下がってしまう場合があります。
これは JS バンドルサイズが大きいことが原因で発生している可能性がありますので、今回は Next.js で作成したアプリの JS バンドルサイズを確認する方法とその最適化について紹介していきます。

## バンドルサイズを確認する
![illust](//images.contentful.com/fdt52x6qf2de/3XUrbSIP5LaOOl9tQeBsoy/e7a2b9216f2d6d6e33d9186dbe525f47/undraw_analyze.svg)
まずは、バンドルサイズを確認する必要があります。
Next.js でバンドルサイズを確認するのは [@next/bundle-analyzer](https://www.npmjs.com/package/@next/bundle-analyzer) というライブリを使用します。

[card](https://www.npmjs.com/package/@next/bundle-analyzer)

### インストール
```bash
npm install @next/bundle-analyzer
```

もしくは

```bash
yarn add @next/bundle-analyzer
```

上記のコマンドでインストールします。

### 事前準備
インストールが終わったら、`next.config.js` に先程インストールした `@next/bundle-analyzer` を使用する設定を記載していきます。
デフォルトでは `next.config.js` というファイルが存在していないため、必要であればルート直下に作成してください。

```js
const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
})

module.exports = withBundleAnalyzer({
  // config
})
```

上記で　`ANALYZE=true` という環境変数を追加することで `@next/bundle-analyzer` が使用できるようになったため、次は `package.json` の `scripts` へ以下のようにコマンドを追加します。

```js
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "analyze": "ANALYZE=true next build"
  },
```

### バンドルサイズの確認

これで `@next/bundle-analyzer` を使用する準備が完了し、以下のコマンドで実行できるようになっていますので早速実行してみましょう。

```bash
yarn analyze
```

以下のような色分けされた html が表示されたら成功です。

![analyze](//images.contentful.com/fdt52x6qf2de/5BPAerGVcMyZ5has9ecuEB/72e8b59797af0c84134a2c51394aa38f/analyze.png)

クライアントとサーバーの2つの html が生成されますが、今回は `client.html` を確認すれば OK です。

各チャンク毎にバンドルされているライブラリが色分けされており、四角のサイズがそのままバンドルサイズとして表現されています。

特に左下の `latest.json` が大きな割合を占めていることがわかると思います。
これは `moment-timezone` で使用しているものになりますね。

左上もかなり大きなチャンクになっていますが、こちらは別の方法で最適化していますので後日記事にしようと思います。

## バンドルサイズを最適化

基本的には上記の手順でバンドルサイズを確認できたら、四角のサイズが大きいものから順に最適化を施していくと効率的におこなうことができます。

最適化方法については様々なやり方があるため、ここでは `moment-timezone` というライブラリで使用している巨大な `latest.json` というファイルを最適化する方法について記載しています。

### latest.json

![analyze 2](//images.contentful.com/fdt52x6qf2de/7oTqKBsgZKSqM9vKulGsMf/58fb832951af5474cf2ffae345f025a2/analyze_2.png)

この `latest.json` の最適化方法については以下の記事で詳しく解説しています！

[card](https://gizanbeak.com/post/next-moment-timezone)

## まとめ
いかがだったでしょうか？

バンドルサイズが大きすぎると最初のページロードが遅くなり、使いづらいサイトとなってしまいます。
最適化は1つ1つ見ていく必要があるため大変な作業ではありますが、時間を見つけてやっていきたいですね。

ここまで読んでいただきありがとうございました！

Lighthouse で 「Remove unused JavaScript」 が表示された場合の対処方法である JS バンドルサイズの最適化について解説しています。

Next.js で JS バンドルサイズを削減して高速化する方法

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

私が作成している Next.js アプリを Lighthouse で確認してみたところ、最初に読み込まれる JS のサイズが大きく、その中でも `moment-timezone` に含まれる `latest.json` がかなり大きかったので削減してみました。
今回はその方法について書いていきます。

## バンドルサイズを確認する
![illust](//images.contentful.com/fdt52x6qf2de/4ySpzF062M8QFGYtv6nDq0/74fe9b974845ba2d52848276b3cb82c5/undraw_Web_search_re_efla.svg)
最適化の前に現状のバンドルサイズを確認しておきましょう。

Next.js でのバンドルサイズは [@next/bundle-analyzer](https://www.npmjs.com/package/@next/bundle-analyzer) というライブリを使用して確認することができます。
以下の記事で詳しく解説していますのでよければ参考にしてください！

[card](https://gizanbeak.com/post/bundle-analyzer)

### 原因を確認
![analyze 2](//images.contentful.com/fdt52x6qf2de/7oTqKBsgZKSqM9vKulGsMf/58fb832951af5474cf2ffae345f025a2/analyze_2.png)

`@next/bundle-analyzer` を実行すると　`client.html` へ上記のように各チャンク毎にバンドルされているライブラリが色分けされて表示されます。

その中でも `moment-timezone` で使用している `latest.json` というファイルが特に巨大なのがわかると思います。

では問題となっている箇所を確認できましたので、`latest.json` を最適化していきましょう。

## バンドルサイズを最適化

デフォルトでは `latest.json` は全てのタイムゾーン設定を記載している json ファイルのためサイズがかなり大きくなっています。

そこで、使用するタイムゾーンの設定のみを適用することで最適化をおこなっていきます。

### ライブラリをインストール

タイムゾーンの設定を日本のデータのみへ変更するには [moment-timezone-data-webpack-plugin](https://github.com/gilmoreorless/moment-timezone-data-webpack-plugin) というライブラリを使用します。

[card](https://github.com/gilmoreorless/moment-timezone-data-webpack-plugin)

まずは、以下のコマンドで `moment-timezone-data-webpack-plugin` をインストールします。

``` bash
npm install --save-dev moment-timezone-data-webpack-plugin
```

もしくは

``` bash
yarn add --dev moment-timezone-data-webpack-plugin
```

### next.config.js へ設定を追加

インストールが完了したら `next.config.js` へ `moment-timezone-data-webpack-plugin` を使用する設定を追記していきます。

デフォルトでは `next.config.js` というファイルが存在していないため、必要であればルート直下に作成してください。

Next.js で webpack の plugin を使用する場合は [公式ドキュメント](https://nextjs.org/docs/api-reference/next.config.js/custom-webpack-config) にあるように記載していけば OK です。

具体的には以下のように記載します。

```javascript
const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
})
const MomentTimezoneDataPlugin = require('moment-timezone-data-webpack-plugin')

module.exports = withBundleAnalyzer({
  webpack: (config) =>  {
    config.plugins.push(
      new MomentTimezoneDataPlugin({
        matchCountries: 'JP'
      })
    )
    return config
  },
})
```

`matchCountries` へ `JP` を設定することで日本のみのデータに限定しサイズを削減しています。
これで最適化は完了です。

## 結果を確認する
最適化が完了したら再度バンドルサイズを確認してみましょう。

![analyze 3](//images.contentful.com/fdt52x6qf2de/6ky3m1VLKeU4hFrFsU6mFH/1ec5fef13f8aeaa59d13dc1e21ba86c2/analyze_3.png)

上記のように `client.html` へ表示されている `latest.json` が小さくなっていれば成功です。

色が変わっていますが、半分ほどの大きさだった `latest.json` が見事に見えないくらい小さくなっていることがわかりますね。

サイズも無事 84.28KB → 58.77KB まで小さくなっています。

## まとめ
ふと導入したライブラリの影響でいつの間にバンドルサイズが大きくなってしまいパフォーマンスへ影響を与えてしまう場合があります。
いつの間にか遅いサイトになっていた、とならないようこまめに確認しておきたいですね。

ここまで読んでいただきありがとうございました！

Next.js で moment-timezone のバンドルサイズを削減する方法について解説しています。

巨大な latest.json のバンドルサイズを削減する方法

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

最近よく Next.js という単語を聞くけどよくわからない。という方もいらっしゃると思います。
私も以前までは使ったことすらなかったのですが、個人サービスを作るために利用して以降、その魅力にどっぷりハマっている一人になっています。

この記事ではそんな最近話題になっている React のフレームワークである Next.js について解説していきます！

## Next.js とは？
![illust](//images.ctfassets.net/fdt52x6qf2de/B0rlnzUaFFSw8CFQjhBsM/c8e5dfc0f45a818cbf65ca7c6fb60ea1/nextjs.png)
JavaScript の有名な3大ライブラリして [React](https://ja.reactjs.org/)、[Vue](https://jp.vuejs.org/index.html)、[Angular](https://angular.jp/)　があり、そのうちの [Next.js](https://nextjs.org/) は React のフレームワークになります。

> The React Framework for Production

と公式にかかれている通り「プロダクトを公開するために必要なものが揃ったフレームワーク」となっています。

## React と Next.js の違い
よく JavaScript ライブラリの React と Next.js はどう違うのかといった質問を見かけます。
決定的に違うのは **React が JavaScript ライブラリなのに対して、Next.js は React のフレームワーク** ということです。

なので、Next.js を使う場合は必然的に React も使う必要があります。

イメージ的には React はあくまで **ライブラリのため自由度が高く** 、その設計なども開発者に任せられています。
逆に Next.js は **フレームワークのためベストプラクティスというものがある程度決められて** おり、そのルールに沿って開発することで効率的に開発を進めていくことが可能です。

## 特徴
Next.js の便利な機能としては以下のようなものがあります。

- 画像最適化
- ファイルベースルーティング
- 複数のレンダリング方法
- ファストリフレッシュ
- ゼロコンフィグ

### 画像最適化
![illust](//images.ctfassets.net/fdt52x6qf2de/5euLfusu9bnubQgvuas58u/28a06a6d57b3a04f952bb0bc3da5a93d/undraw_Images_re_0kll.svg)
Next.js では従来の img タグの代わりに Image タグというものを使うことで簡単に画像ファイルの最適化をおこなうことができます。

使い方としては簡単で、以下のように img タグの代わりに Image タグを使用するだけです。

**従来の書き方**
```jsx
<img src="http://example.com/image.png" />
```

**Image を使った書き方**
```jsx
import Image from 'next/image'

<Image
 src="http://example.com/image.png"
 height={400}
 width={600}
/>
```

ただし、見ていただけると分かるように `height` と `width` を指定することが必須となっています。

ページ表示時に必要なサイズへリサイズされ無駄がなくなるのと共に WebP という次世代の画像フォーマットへ変換してくれるため高速に画像を提供することができます。

また、画像最適化を [Cloudinary](https://cloudinary.com) などの外部サービスへ任せることもできるため、こちらについては後日詳しく記事にしようと思います。

### ファイルベースルーティング
React でルーティングをおこなう場合、[react-router-dom](https://reactrouter.com/web/guides/quick-start) などのライブラリをを使うのが一般的です。

Next.js では標準でルーティングのための機能が用意されており、 `/pages` というフォルダ配下においたファイルが自動的にルーティングとして設定されます。

例えば `/pages/about.jsx` というファイルをおいた場合、`about.jsx` のページへは以下のパスでアクセスできるようになります。

> http://localhost:3000/about

このように簡単にルーティングが設定できるのも特徴の1つです。

### 複数のレンダリング方法
従来の React のようにクライアントサイド（**CSR**）でレンダリングするだけでなくサーバーサイド(**SSR**)やビルド時に全てのファイルを静的ファイルとして出力する(**SSG**)などプロダクトの特徴に合わせて柔軟にレンダリング方法を変更することが可能です。

- Client Side Rendering（CSR）
- Server Side Rendering（SSR）
- Static Site Generator（SSG）
- Incremental Static Regeneration（ISR）

という4種類のレンダリング方法が存在します。
こちらに関しては別記事で詳しく解説しようと思います。

### ファストリフレッシュ
![illust](//images.contentful.com/fdt52x6qf2de/37T2KG9CUqMmVVJ5rligmR/5687add0e12ba11c6a02ec7f51645dee/undraw_To_the_stars_qhyy.svg)
ファストリフレッシュとは開発環境においてソースコードが変更された場合に変更があった箇所のみ再描画されブラウザの画面が更新されるといった便利な機能です。

これだけだと React の Hot Reload と同じですが、Next.js では `state` と維持したまま更新がおこなわれます。

例えば `state` で値が管理されているフォームへ何か入力し、そのフォームのスタイルを変更した場合に入力された値が保持されたままスタイルが変更されます。
これにより快適に開発を進めていくことができます。

### ゼロコンフィグ
コンセプトとして **ゼロコンフィグ** を掲げているため上記のような便利な機能はほとんど事前の設定などが必要なくインストール後すぐに使い始めることができます。

また、必要な場合は `next.config.js` というファイルを作ることで細かく設定を変更することも可能となっています。

## まとめ
Next.js には今回ご紹介した機能の他にもまだまだ便利な機能が存在しており、それらを活用することで最高の開発体験を獲得することができます。

ここまで読んでいただきありがとうございました！
このブログも Next.js を活用して作成しており、今後も積極的に使用していきたいと思っています。

この記事では最近話題になっている React のフレームワークである Next.js について解説していきます。

Next.js とは？概要や特徴を詳しく解説

この記事では Next.js で作ったブログやサイトに Tocbot を使った目次機能を追加する方法を解説しています！

## Tocbot とは？
指定した要素に含まれる見出しタグ（h1, h2, h3）など抽出してそれらを自動的に目次として作成してくれる便利なライブラリです。

https://tscanlin.github.io/tocbot

このブログでも実際に Tocbot を使用して目次を作成しています。

## 使い方
### 導入

まずは以下のコマンドを実行して Tocbot をインストールしていきましょう！

```bash
npm install --save tocbot
```

Yarn を使っている場合はこちら
```bash
yarn add tocbot
```

これで Tocbot を使える状態になりました。

### 目次を作成する
React の　useEffect で以下のように Tocbot の設定を初期化します。

```tsx
import tocbot from 'tocbot'

  useEffect(() => {
    tocbot.init({
      tocSelector: '.toc',
      contentSelector: '.post',
      headingSelector: 'h2, h3',
    })

    return () => tocbot.destroy()
  }, [])
```

- `tocSelector` で目次を表示させる先のクラス名
- `contentSelector` で目次を抽出したい要素のクラス名
- `headingSelector` 抽出したい見出しタグ

### 全体のコード
全体のコードとしては以下のようになります。

```tsx
import { useEffect } from 'react'
import tocbot from 'tocbot'

export default function TopicsCard() {

  useEffect(() => {
    tocbot.init({
      tocSelector: '.toc',
      contentSelector: '.body',
      headingSelector: 'h2, h3',
    })

    return () => tocbot.destroy()
  }, [])

  return (
    <div>
      {/* 本文 */}
      <div className="body">
        <h2>見出し2</h2>
        <h3>見出し3</h3>
        <h2>見出し2</h2>
      </div>
      {/* 目次 */}
      <nav className="toc" />
    </div>
  )
}
```

この例では `.body`内に存在する `h2` と `h3` をすべて抽出し、`.toc` へ目次を追加しています。

### スタイルを適用する
目次を適用するには公式にも書かれているように CDN でスタイルを適用するか、独自で CSS を書いていくことになります。

CDN を利用する場合は Next.js の `<Head>` タグへ以下のように追加すれば OK です。

```tsx
<Head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.11.1/tocbot.css"/ >
</Head>
```

独自のスタイルを適用する場合は `tocSelector` で記載した要素に CSS を書いて適用していけば OK です。
また、Tocbot では現在アクティブになっているリンクへ `.is-active-link` というクラスが付与されるため、アクティブになっている要素のスタイルも変更可能です。

```css
.toc {
  /* 目次のスタイル */
}

.toc li {
  /* 目次のリストのスタイル */
}

.toc a {
  /* 目次のリンクのスタイル */
}

.toc a.is-active-link {
  /* 現在アクティブになっている目次のスタイル */
}
```

## まとめ
Zenn などでも使われている目次生成ライブラリである Tocbot の使い方について説明しました！
簡単に目次機能を追加でき、自由にカスタマイズもできるためオススメのライブラリです。


この記事では Next.js で作ったブログやサイトに Tocbot を使った目次機能を追加する方法を解説しています。

Next.js で作ったサイトに目次機能を追加する【Tocbot】

この記事では 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つの方法を紹介

この記事では、TypeScriptにおけるタイマー関数の使い方を深掘りしていきます。

`setTimeout` と `setInterval` の基本から、それらの違いまでわかりやすく解説します。
それではコード例を交えながら、実際の動作を理解していきましょう！

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

## `setTimeout`の使い方
まず最初に、特定の時間後にコードを実行する `setTimeout` について見ていきます。

``` typescript
setTimeout(() => {
  console.log("こんにちは！３秒経ちました");
}, 3000);
```

上記のコードは、3秒後に「こんにちは！３秒経ちました」とコンソールに表示します。
この関数は遅延実行が必要な場合に非常に便利ですね。

## `setInterval` の使い方
次に `setInterval` についてです。
この関数は、指定した時間ごとにコードを繰り返し実行する場合に使用します。

``` typescript
let count = 0;
const interval = setInterval(() => {
  count += 1;
  console.log(`インターバルのカウント: ${count}`);
  if (count >= 3) {
    clearInterval(interval);
  }
}, 1000);
```

この例では1秒ごとにカウントが1増え、それをコンソールに表示します。
そして、カウントが3になったらインターバルがクリアされます。

`setInterval` はこのような繰り返し処理に便利というわけですね。

## `setTimeout` と `setInterval` の違い
同じタイマーを使用する関数ですが、それぞれに違いがあるため両関数の違いを把握することが重要です。

- `setTimeout` は一度だけ実行されます。
- `setInterval` は指定した時間間隔で繰り返し実行されます。

さらに、`clearInterval` を使用して `setInterval` の繰り返しを停止することができます。

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

## まとめ
TypeScriptのタイマー関数は非同期処理の基本です。
やりたいことに対して適切な関数を選んで、コードを効率的にしましょう！

TypeScriptでsetTimeoutとsetIntervalをマスター。基本的な使い方から違いまで詳しく解説します！

illust

TypeScriptのタイマー関数setTimeoutとsetIntervalの使い方

こんにちは！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>` 要素を取得しクリックイベントリスナーを追加しています。

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

[card](https://gizanbeak.com/post/javascript-books)

## 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の即時関数について紹介します。
即時関数は聞き慣れないかもしれませんが、実はとても便利な技術なんですよ。

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

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

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

``` 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で即時関数を使う方法を解説！基本から実践的な使い方まで

こんにちは！

この記事ではTypeScriptのimport typeについて紹介しています。
この記事を読むことでimport typeとはなにか、必要性、メリット・デメリットについて理解できます。

それでは、はじめましょう！

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

## import typeとは？
TypeScriptには様々なモジュールや型を読み込むための方法があります。
その中でも **import type は型情報だけをインポート** する特別な方法となります。
例えば以下のような形で使用しますね。

``` typescript
import type { MyType } from './types';
```

上記のコードは `types` ファイルから `MyType` という型情報だけを取り込むものです。

## import typeは必要？
皆さんも思っているかもしれません。
「普通のimportでいいじゃん！」と。
実はimport typeには独自の役割があります。

たとえば、次のような状況を考えてみましょう。

``` typescript
Copy code
// types.ts
export type UserType = {
  id: number;
  name: string;
};

// user.ts
import { UserType } from './types';
```

この場合、`UserType` は型としてしか使用されていませんが、普通のimportを使用すると実行時のJavaScriptにも影響を及ぼす可能性があります。

しかし、import typeを使用するとその心配はありません！
なぜなら、import typeは **型の情報だけを取り扱うのでJavaScriptの実行時には影響を及ぼさない** からです。

## メリット・デメリット
![illust](//images.ctfassets.net/fdt52x6qf2de/2SrSaio3Mcr2WKF0PBSr4f/62434fece1378880984db5aefae0113b/undraw_add_information_j2wg.svg)

import typeを使用することにもメリットとデメリットが存在します。
その例を挙げてみます。

### メリット
- 明示的: import typeを使用することで読み込むのは型情報だけであることを明確に示せます。
- 効率的: 実行時のJavaScriptには影響を及ぼさないため、パフォーマンスの向上やバンドルサイズの削減が期待できます。

### デメリット
- 学習コスト: TypeScript初心者にはimportとの違いや使い分けを理解するのに時間がかかるかもしれません。

## まとめ
import typeはTypeScriptの便利な機能の1つです。
型情報だけを取り込むことで、より安全で効率的なコードを書くサポートをしてくれます。

この記事を通してimport typeについて、少しでも理解していただけたら嬉しいです！

TypeScriptのimport typeをわかりやすく解説！本質、必要性、メリット・デメリットを紹介します。

TypeScriptのimport typeをわかりやすく解説

not-found

## Gizanbeak とは？

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

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

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

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

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

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

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

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

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

blog

このサイトについて

この記事ではJavaScript学習の道標となるべき、以下5冊の書籍を紹介します。

- [1冊ですべて身につく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%2FB0BRR4N7SM)
- [確かな力が身につく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%2FB017AP49IQ)
- [独習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%2FB09HC854HS)
- [ステップアップ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%2FB09MQ53Y2C)
- [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%2FB0BT1CNF1C)

適切な書籍を選ぶことで学習の過程が格段に楽しく効率的なものとなります。
自分自身にとって最適な一冊を見つけましょう！

## 1冊ですべて身につくJavaScript入門講座
![illust](//images.ctfassets.net/fdt52x6qf2de/4QRxoKlEMKmSwvJmI16Kq/5d315967132c0ec86e297ec3e82e2a5b/B0BRR4N7SM.01._SCLZZZZZZZ_SX500_.jpg)

### 概要
[1冊ですべて身につく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%2FB0BRR4N7SM) の最大の魅力は、その **読みやすさと実践に即した内容** にあります。
図解や噛み砕いた表現が豊富に使われており、JavaScriptの初学者でも無理なく読み進めることができる構成になっています！
特にchapter 3の「defer属性」の解説などはそのわかりやすさにおいて際立っています。

書籍を通じて学べる制作物は、カラーピッカー、ローディング画面、ダークモードの切り替えボタンなど、実務やポートフォリオで直接使えるものばかり。
HTMLとCSSはダウンロードデータとして提供されており、JavaScriptの学習に集中できる点も大きな利点です。

約340ページという分量も学習者にとってちょうど良いボリューム感で、5日程度で1周することができます。
学習の流れも自然で前項で学んだ知識が次の項で活かされる構成になっており、記憶に残りやすいです。

### 感想
この書籍はJavaScriptの基礎から実用的なスキルまで、楽しみながら学べる内容が詰まっています！
特に、実務で使える制作物を作りながら学べる点は、学習モチベーションを維持しやすくする大きな要素だと感じました。

分量も読みやすさも、初学者にとってはありがたい配慮がされています。
ただ、HTMLとCSSについての基礎知識はある程度必要ですので、完全な初心者はその点だけ注意が必要です。

学習中の方から、実務でJsvaScriptを使う機会が発生したWebデザイナーまで、役立つJavaScriptのスキルを身につけたいすべての人にこの一冊を自信を持っておすすめします！

[af-1冊ですべて身につく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%2FB0BRR4N7SM "//images.ctfassets.net/fdt52x6qf2de/4QRxoKlEMKmSwvJmI16Kq/5d315967132c0ec86e297ec3e82e2a5b/B0BRR4N7SM.01._SCLZZZZZZZ_SX500_.jpg")

## 確かな力が身につくJavaScript「超」入門
![illust](//images.ctfassets.net/fdt52x6qf2de/7rgCnCuC35VCbUdhMrQfzr/2564dfb87aeda9187aaa2b578f50f0b2/81APAg5DutL._SL1500_.jpg)

### 概要
[確かな力が身につく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%2FB017AP49IQ) はプログラミングの初心者でも安心して学べるように細部にわたる丁寧な解説が特徴の一冊です。
組み立て方や考え方が示された後に新しいトピックについては詳しく、分かりやすく解説されています。
これによって、読者は置いてきぼりになることなく最後までしっかりと内容を理解することができます。

また、章ごとにスライダーやカウントダウン、ハンバーガーメニューなど、実際に動くパーツを一から作る体験ができるのも魅力の一つです。
小さなステップで動くパーツを作ることが、モチベーションの向上につながります。
さらに、Ajaxの基礎なども学べるため全体的な流れを把握することができます。

### 感想
この書籍は、JavaScriptを **「とりあえず動かす」ことから一歩進んで「なぜそのように動くのか」を理解** したい初心者にとって最適です。
一部、jQueryを使用した解説があり、jQueryを使わない場合の解説もあればもっと良かったと感じますが、それでもJavaScriptの基礎をしっかりと学ぶには充分な内容です。

ES6の新しい書き方や、HTML/CSSの知識が前提とされている部分もありますが、プログラミングの専門用語になじむまでに時間を要する方でも、この書籍なら挫折せずに学習を進めることができるでしょう！

実際に本書を2周した経験からも、初めての学習では理解できなかった部分も再読することで「そういうことだったのか」と理解できることも多くありました。
自分で考えながらコードを書くことの大切さも、この書籍を通じて学べます。

初心者がJavaScriptの世界に踏み出すには、この書籍が「確かな力」を身につけるための強力なサポートになるはずです。
他の書籍で挫折した方も、ぜひこの書籍を手に取ってみてください！

[af-確かな力が身につく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%2FB017AP49IQ "//images.ctfassets.net/fdt52x6qf2de/7rgCnCuC35VCbUdhMrQfzr/2564dfb87aeda9187aaa2b578f50f0b2/81APAg5DutL._SL1500_.jpg")

## 独習JavaScript
![illust](//images.ctfassets.net/fdt52x6qf2de/4vj81PCWjNTvQbmMDDSvY/0cda330f11c2454a312200b3af370544/B09HC854HS.01._SCLZZZZZZZ_SX500_.jpg)

### 概要
[独習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%2FB09HC854HS) は、JavaScriptの標準教科書として長年愛されてきた書籍の最新版です。
Udemyの人気講師、CodeMafiaこと外村将大氏による完全書き下ろしで、**JavaScriptにおける必須の知識・概念・機能を体系的かつ網羅的** に学べます。

この書籍はフレームワークやライブラリを使う前に知っておきたいJavaScriptの基本から応用までを、詳細に解説しています。
さまざまなサンプルプログラムを用いながら文法やプログラムの書き方を丁寧に説明しており、プログラミングの基礎知識がない方でも理解度を段階的に深めていくことができます。

特にフロントエンドエンジニアを目指す初心者にとっては、分厚いながらも非常に丁寧な解説が施されたこの書籍が学習の近道となるはずです。
簡単に使える薄い入門書で学ぶと勘違いや間違った知識を積み重ねがちですが、この書籍ではそうしたリスクを避け、しっかりとした基礎を構築できます。

### 感想
JavaScriptを独学で学ぶ際に相談できる人がいない、Web上の情報だけでは不十分と感じていた方々にとって「独習JavaScript」はまさに目から鱗の一冊です。
どうしてこうなるのかという疑問が自然と解消され、難しいと感じる部分も「初心者はスキップ可能」といったアドバイスがあるため安心して読み進められます。

さらに、練習問題や章末問題が豊富に用意されており、ダウンロードサイトではサンプルファイルや解説・解答がPDFファイルで提供されている点も独習者にとっては大きな助けとなります。
内容も最新でJavaScriptの学習に対する不安を払拭してくれる一冊と感じました。

デザイナーがUI/UX向上のためにJavaScriptを学びたい場合は、もっと薄い本やすぐに使えるサンプル集が適しているかもしれません。
しかし、JavaScriptの深い理解を求める方や、難易度が高いと感じている中級者にとってもこの書籍から得られることは多いはずです。

まだJavaScriptの駆け出しの方も、この書籍を手に取れば確実に一歩前進できます。
著者の温かい親切が随所に感じられる [独習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%2FB09HC854HS)、JavaScriptを学びたいすべての人におすすめしたい一冊です！

[af-独習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%2FB09HC854HS "//images.ctfassets.net/fdt52x6qf2de/4vj81PCWjNTvQbmMDDSvY/0cda330f11c2454a312200b3af370544/B09HC854HS.01._SCLZZZZZZZ_SX500_.jpg")

## ステップアップJavaScript
![illust](//images.ctfassets.net/fdt52x6qf2de/4FuUH8D9j01UKFsQ38pTWu/70cf6440ac9b8e5c7965f15aa19c2687/71n1K1A27lL._SL1500_.jpg)

### 概要
[ステップアップ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%2FB09MQ53Y2C) は、**なんとなく動くJavaScriptから一歩踏み出し本質的な理解** を目指す方に最適な一冊です。

多くの開発者が経験するであろう、フレームワークやライブラリを使用しながらの学習過程とそれに伴う断片的な知識の蓄積。
この書籍はそうした学び方から脱却し、JavaScriptの基本概念や非同期処理、スコープなど、深く理解するべきトピックを丁寧に解説しています。
また、実際のアプリケーション開発を通じた学習が知識の体系化に役立ちます。

この書籍は、正しい知識を身に着けたいと考えている初級者から中級者のフロントエンドエンジニアにとって理解の助けになるはずです。

### 感想
もしもっと早くこの書籍に出会っていたら、検索に頼った学習の日々をショートカットできたのではないかと感じました。
特に、ストップウォッチアプリの開発を通じて古いJavaScriptの知識を最新のものにアップデートする過程は、実践的でありながらも理解を深めるのに役立ちます。

本書はJavaScriptを使った開発においてしばしば直面する難しいトピックを、図解を交えてわかりやすく説明してている点が良かったです。
また、途中途中で入るAdviceやMemoには開発経験者ならではの洞察が散りばめられており、これからプロフェッショナルを目指す方にとっても非常に有益な内容となっています。

[ステップアップ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%2FB09MQ53Y2C) は、今までJavaScriptを"なんとなく"使ってきた方にとっては、知識の更新と理解を深めるために良い一冊です。
初級者から一歩進んだ理解を目指すすべての方に、自信を持っておすすめします。

[af-ステップアップ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%2FB09MQ53Y2C "//images.ctfassets.net/fdt52x6qf2de/4FuUH8D9j01UKFsQ38pTWu/70cf6440ac9b8e5c7965f15aa19c2687/71n1K1A27lL._SL1500_.jpg")

## JavaScript本格入門
![illust](//images.ctfassets.net/fdt52x6qf2de/5g9QU0oWNfbCggP1Of5zPR/39f8905b0912f5953acd786e51ee9a41/B0BT1CNF1C.01._SCLZZZZZZZ_SX500_.jpg)

### 概要
[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%2FB0BT1CNF1C) の最大の特徴は、最新のECMAScriptに準拠している点です。

これによりページ数が大幅に増え、最新のJavaScript入門書としての位置づけがなされています。
オブジェクトやクラスに関する説明が特に丁寧で、モダンなフロントエンド開発に必要な知識がしっかりと網羅されているため、これから **モダンなフロントエンド開発を学ぶ** 方にとっては非常に役立つはずです。

また、フロントエンド開発に必要な基礎知識がしっかりと章立てされており、DOMやブラウザオブジェクトなどの解説が含まれています。
コード例の解説にはどの位置かを分かりやすくするための例示線が示されているため、初心者にとっても理解しやすい構成になっています。

「言語ベース」での学習アプローチは、if文やfor文といった基本的な使い方から始まり、JavaScriptの言語としての視点で進んでいきます。
この方法は、学んだことがプラットフォームに依存しづらく応用が効きやすいという大きな利点があります。

そして、ES2015以前と以降の両方についての記述があるため実務での柔軟な対応が可能になります。
これは古いブラウザのサポートが必要な場合や、既存のコードスタイルに合わせる必要がある場合にも非常に役立ちますね。

### 感想
現在はTypeScriptの使用が多いかもしれませんが、根底にあるJavaScriptの知識は絶対に必要です。
この分厚い本は一見すると敬遠しがちですが、じっくり読めばJavaScriptの基礎力をしっかりと身につけることができます！

また、現役の開発者でもこの書籍を通じて最新の知識を得ることができると感じました。
最新規格に追随する内容を網羅的に、かつ体系的に学べる書籍はそう多くありません。
言語ベースでしっかりと基礎を学びたい方、または最新の知識を身につけたい開発者にこの書籍はおすすめです！

[af-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%2FB0BT1CNF1C "//images.ctfassets.net/fdt52x6qf2de/5g9QU0oWNfbCggP1Of5zPR/39f8905b0912f5953acd786e51ee9a41/B0BT1CNF1C.01._SCLZZZZZZZ_SX500_.jpg")

## まとめ
JavaScriptの学習に役立つ5冊の推薦書籍をご紹介しました！

各書籍が提供する独自の手法で、学習者の段階や求める知識に応じてJavaScriptを丁寧に説明しています。
自身の学習目標や関心に合わせて、是非とも一冊選んでみてください！

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

 JavaScriptの学習に最適な初心者から上級者を対象におすすめできる書籍5選をご紹介いたします！JavaScriptを効率的に学習するのに役立ちます。

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

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)

[card](https://gizanbeak.com/post/javascript-books)

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

エンジニアであれば一度は何か形になるサービスやアプリをリリースしてみたいですよね。
今回はそんな方に向けて [個人開発がやりたくなる本: クリエイター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エンジニア Next.js / React / TypeScript

profile

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