statistics

cryptocurrency

speech-to-text

laravel-and-vue

Next.js

TypeScript

JavaScript

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

JavaScript で料金表示のためなどに数値を3桁のカンマ区切りにしたい場合は割とあると思います。
今回はそんなときに使える便利な関数をご紹介します。

## toLocaleString()
![illust](//images.contentful.com/fdt52x6qf2de/1dri6clTFwE07repUp6NGg/1f1cb11ea15320fc561d2942baa6fd95/undraw_Calculator_0evy.svg)

数値を3桁のカンマ区切りにしたい場合は `toLocaleString()` という関数を使うと簡単に実現できます。([参考](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString))

具体的には以下のようにカンマ区切りにしたい数値が入った変数の後ろに `.toLocaleString()` とするだけで OK です。

```js
var num = 1000000;
num.toLocaleString();
// "1,000,000"
```

変換された数値は文字列として返却されます。

### EC サイトなどでよく見かける表記
また、EC サイトなどでよく見かける日本円の表記である `¥ 1,500` などは[テンプレートリテラル](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Template_literals)を使うことでとても簡単に実現できます。

```js
var price = 1500;
`¥ ${price.toLocaleString()}`
// "¥ 1,500";
```

### 文字列をカンマ区切りにする
文字列になっている数値をカンマ区切りにするには一度 Number へ変換してから `toLocaleString()` を実行します。

Number へ変換するには `Number()` を使用します。

```js
var strNum = '3333';
Number(strNum).toLocaleString();
// "3,333"
```

### ブラウザの対応状況
![browser](//images.contentful.com/fdt52x6qf2de/4eHydGKWMLzbqtTmW3cpZN/1d095332ab1303d1ed22775018948e50/browser.png)

[MDN Web Docs](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString#browser_compatibility) を見る限り、`toLocaleString()` はモダンなブラウザはもちろん IE11 や Edge なども対応しているため安心して使うことができますね。

## まとめ
`.toLocaleString()` を使った JavaScript で数値を3桁のカンマ区切りにする簡単な方法についてご紹介しました。

バックエンドから取得したデータを表示するというシチュエーションで使用することが多く、覚えておくと便利な関数です。

料金表示などのシチュエーションで使える JS で数値を3桁のカンマ区切りにする簡単な方法を紹介しています。

JavaScript で数値を3桁のカンマ区切りにする簡単な方法

こんにちは！ 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)）です。

このブログは記事を [Contentful](https://www.contentful.com/) で Markdown 形式にて管理しています。
なので Markdown から HTML に変換する必要があり、そのライブラリとして [marked.js](https://github.com/markedjs/marked) を利用しています。
その際に Markdown 側で改行をしても**変換時に改行が反映されない**問題があったため適用する方法を記事にしようと思います。

## 結論
いつもどおりまずは結論です。

marked.js には入力した Markedown を変換する時に**改行を適用するオプション**があるので、それを有効にするだけでした。
具体的には以下のように設定すれば OK です。

```js
marked.setOptions({ breaks: true })
```

## 解説
[公式ドキュメント](https://marked.js.org/using_advanced) を見ていただくとわかるように marked.js には色々なオプションが存在しています。

例えば GitHub 独自の Markdown 記法を許可する `gfm` や `h1, h2, h3` などの見出しタグに自動的に id を付与してくれる `headerIds` などがあります。
ちなみにこの `headerIds` は目次機能を追加する場合に有効です。

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

また、`renderer` というものを使用することで `img, a` などの各要素が変換されるときの処理を上書きすることができるようになります。

これによって**リンクを自動的にブログカードに変換**したり、画像に**クラスを付与させてスタイルを適用**させることも可能です。
この方法はまた後日記事にしようと思います。

ここまで読んでいただきありがとうございました！
この記事がみなさまのお役に立てれば幸いです。

Markdown を HTML へ変換する marked.js で改行が適用されない場合の対処法について紹介しています。

【Markdown】marked.js で改行が反映されない場合の対処法

この記事では 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` というプロパティで作成日や更新日などの項目も取得することが可能となっています。

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

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

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

undraw content team 3epn

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

こんにちは、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 とは？概要や特徴を詳しく解説

この記事では 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 を使った目次機能を追加する方法を解説しています。

favorite

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

not-found

## Gizanbeak とは？

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

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

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

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

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

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

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

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

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

blog

このサイトについて

この記事では最短1ヶ月から完全無料でエンジニア転職できる GEEK JOBスピード転職コースについての評判やメリット、よくある質問、実際の流れについて徹底解説していきます。

## GEEK JOBスピード転職コースとは
![geekjob speed](//images.contentful.com/fdt52x6qf2de/4Wm5n2c4K1iFkIr8x6xSeo/e74354360ed883fa4aa238c99b417b5e/geekjob_speed.png)

GEEK JOBスピード転職コースは**最短1ヶ月〜最長3ヶ月の完全無料で受講できるプログラミングスクール**です。
受講料0円で最短22日、就職成功率97.8%という実績があります。

未経験からエンジニアへ転職したいけどプログラミングスクールはどこも料金が高めですよね。
無料プログラミングスクールのGEEK JOBでは**エンジニアへ転職するために必要な技術や経験だけを効率的に**学ぶことができます。

##### GEEK JOBには「希望する企業への選考を勝ち抜くサポート」を目標とした  [GEEK JOBプレミアム転職コース](http://af.moshimo.com/af/c/click?a_id=2841383&p_id=2898&pc_id=6652&pl_id=40056&guid=ON) というものがあるためそちらも選択肢の1つとして考えてみてください。以下の記事にて詳しくまとめています。

[card](https://gizanbeak.com/post/geekjob-premium)

GEEK JOBスピード転職コースの主な特徴として以下のような点があります。

- 完全無料でエンジニアに転職できる
- 1ヶ月〜3ヶ月という短い期間で素早く転職を目指せる
- オンライン学習のためいつでも自宅から自分のタイミングで無理なく学習できる
- 現役エンジニアからの個別指導・転職メンターによるサポートが受けられる

メリットについて詳しく見ていきましょう。

[button](https://af.moshimo.com/af/c/click?a_id=2841382&p_id=1431&pc_id=2500&pl_id=26689&guid=ON "GEEK JOB公式サイトへアクセスする")

## GEEK JOBスピード転職コースのメリット
![illust](//images.contentful.com/fdt52x6qf2de/2jOjTyx0yjDAR86XmHbDIj/3983d358bf29ff7ee23963c7bc5e6267/undraw_Project_completed_re_pqqq.svg)

### 完全無料で受講が可能
一般的なプログラミングスクールは約30万円位が相場ですが、GEEK JOBスピード転職コースでは**完全無料でエンジニアへ転職が可能**です。

なぜ無料で受講が可能かというと、GEEK JOBは就職企業からの支援金によって運営されているため受講者は無料でカリキュラムを受けることができます。

無料でエンジニアへ転職するためのスキルが手に入れられるのは大きなメリットですね。

### 未経験からでも最短1ヶ月でエンジニアへ転職が可能
他のプログラミングスクールでは3ヶ月以上かかってしまうことが多いですが、GEEK JOBでは本人のやる気さえあれば**最短1ヶ月でエンジニアへ転職**することができます。

私もエンジニアとして働いていますが、プログラミングを学習するのであれば「勉強のためのプログラミング」よりも「現場で優秀なエンジニアに囲まれながら学習」の方が圧倒的に成長速度が早いです。

そのため早くプログラミングスクールを卒業して**実際にエンジニアとして働きながら効率的にプログラミングを習得**することができます。

### オンライン教材による自由度のある学習
GEEK JOBはオンライン教材のため**場所や時間を問わず学習することが可能**となっています。

夜の時間やスキマ時間にプログラミングの学習ができるのはありがたいですよね。
例えば現在の仕事を続けながら平日は夜間の19:00〜21:00、それに加えて土日はじっくり学習するなど時間を上手く使うことで**短期間で効率的にプログラミングを学ぶ**ことができます。

オンライン環境さえあれば昼休みや空き時間などでも学習できるのはメリットですね。

### 現役エンジニアの徹底サポート
プログラミングを学習する上で一番壁となるのが「問題をどう解決していいかわからない」「そもそもどうやればいいのかわからない」などの悩みだと思います。

GEEK JOBでは現役のエンジニアやインフラエンジニアからの**個別指導と質問し放題な環境**が揃っているためプログラミングに対する理解が深まり効率的に学ぶことができます。

エンジニアとして自分で検索して問題を解決する力はもちろん必要ではありますが、調べることに時間をかけてしまい結局あまり進めれなかったというのは無駄が多いですよね。

実際の現場でも周りのエンジニアへ質問してみると大したことではなく、すぐ解決できる問題というのは多いです。
そのように気軽に相談できる環境があるため**無駄なくプログラミングを習得したいかた**におすすめです。

### 転職メンターによる高確率の転職サポート
「いざプログラミングスクールを卒業してもどこへも就職できなかった...」という状況は避けたいですよね。

**転職保証**が付いており3500社を超える企業と提携しているGEEK JOBでは **97.8%** という高い転職成功率があるためほぼ転職できないということがありません。

GEEK JOBスピード転職コースでは「徹底した採用者目線」での就活支援にも力をいれているため、ただプログラミングを学ぶだけではなく**エンジニアとして転職するところまで徹底的にサポート**をおこなってくれます。
プログラミングを習得したあとにエンジニアとして働きたいかたにはGEEK JOBはおすすめです。

[button](https://af.moshimo.com/af/c/click?a_id=2841382&p_id=1431&pc_id=2500&pl_id=26689&guid=ON "GEEK JOB公式サイトへアクセスする")

## GEEK JOBスピード転職コースの評判
GEEK JOBには高評価の口コミが多く見られました。

**「無料で受けられることがよかった」** や **「エンジニアとして働く自信がついた」** 、 **「講義がわかりやすかった」** などの口コミが多々ありますね。

> まだ技術や知識もないのですが、課題を 繰り返しやってみて、講師にフィードバックをもらいならが進めると 「エンジニアって楽しいな」と感じましたし、ロジックを考える事に対して、 苦労しなくなりました。
考えすぎずにロジックを組めるようになったことによって、なんとなくですが 「こうすればいいのでは？」という感覚が生まれました。そういった面でITエンジニアとして働く自信がつきました。

> 講義が動画になっているので分かりやすかったです。好きな時間に見れることと、普通に動画見ているときにヒントが散らばってるのと、文章を見て頭で覚えやすいというのもありますね。家で見ていたり、作業しているときに見たりします。耳に残るので後から「そういえばこういうのあったな」というように覚えてます。キーワードみたいな感じで耳に残っているんですよね。だから、ポイントポイントで見ています。

## GEEK JOBスピード転職コースの注意点
![illust](//images.contentful.com/fdt52x6qf2de/bXGZukqgcAylhbEPepOPV/77bad334ae9b23818f2dddbf459e3c6b/undraw_Alert_re_j2op.svg)

ここまでメリットをご紹介しましたが、GEEK JOBスピード転職コースを受講する際の注意点としては以下のような点がありますので、受講前には必ず確認しておきましょう。

- 主な就職先は関東圏のSES企業
- 受講できる対象は20代
- 場合によっては違約金が発生する可能性がある

詳しく解説していきます。

### 主な就職先は関東圏のSES企業
主にGEEK JOBが紹介してくれる企業は関東圏のSES企業となります。

学習や就職支援についてはオンラインのためネット環境さえあれば学習することは可能ですが、就職のタイミングで関東へ引っ越しをする必要がでてきます。
そのため転職をきっかけに上京を考えているかたにておすすめできますが、地元でエンジニアになることを考えているかたにはおすすめできません。

また、主にSES企業への転職となるためSES企業への転職をしたくないかたにも向いていません。
ただし、WEB系企業で働いている私の周りでもSES企業で数年経験や実績を積んでWEB系へ転職したという人も多いです。

プログラミングスクールを利用する場合は転職後にどのような仕事をしたいのかをしっかり考えておきましょう。

### 受講できる対象は20代
GEEK JOBスピード転職コースの対象は19〜29才となっており、それ以外のかたは受講することができません。

##### GEEK JOBには「希望する企業への選考を勝ち抜くサポート」を目標とした  [GEEK JOBプレミアム転職コース](http://af.moshimo.com/af/c/click?a_id=2841383&p_id=2898&pc_id=6652&pl_id=40056&guid=ON) というものがあるためそちらも選択肢の1つとして考えてみてください。以下の記事にて詳しくまとめています。

[card](https://gizanbeak.com/post/geekjob-premium)

### 場合によっては違約金が発生する可能性がある
GEEK JOBスピード転職コースは無料ですが場合によっては違約金が発生する可能性もあるため注意が必要です。

なぜ違約金が発生するかというと、GEEK JOBは受講生を紹介した企業から報酬を受け取る仕組みのため受講生は完全無料で利用することが可能です。
しかし、受講生の規約違反などでGEEK JOBが企業から報酬を受け取れない場合、受講生へ違約金を請求し補填するしかないからですね。

主に注意する点としては以下の4つが挙げられます。

- 入会後15日以降にやめた場合
- コース終了後内定をもらったが就職しなかった場合
- 自己応募や他社サービスからの応募で転職した場合
- 迷惑行為によって途中退会させられた場合

ただし、エンジニアへ転職したいと本気で考えておりGEEK JOBを**普通に利用していれば基本的には違約金は発生しません**ので安心してください。

## こんな人におすすめ
![illust](//images.contentful.com/fdt52x6qf2de/1HAEn55kZjglJlYJf8wkQt/8d5e2f64ada2cf46e41e2d99b78467f7/undraw_happy_feeling_slmw.svg)

以上の内容をまとめると以下のようなかたにおすすめできるプログラミングスクールであると言えます。

- 20代の社会人
- 無料でプログラミングについて学びたい人
- 短期間で必要なことだけを効率的に学びたい人
- オンラインで自宅から学習したい人
- 未経験から短期間でエンジニアになりたい人

プログラミングスクールは一般的に高額な受講料が発生することが多いので、**無料で素早くエンジニアへ転職し実際に働きながら更にスキルを身に着けていきたい人**におすすめです。

卒業後に就職できないという不安も転職サポートが充実しているGEEK JOBならその不安もないため安心ですね。

[button](https://af.moshimo.com/af/c/click?a_id=2841382&p_id=1431&pc_id=2500&pl_id=26689&guid=ON "GEEK JOB公式サイトへアクセスする")

## 利用してからエンジニアへ転職するまでの流れ
![illust](//images.contentful.com/fdt52x6qf2de/1LuNM7WV7wXqMYPZwhZEOU/09873de006c3c269412f1e6cc22cbdfc/undraw_Publish_article_re_3x8h.svg)

では実際に申し込みから転職までの流れをみていきましょう。

### 1.無料カウンセリングに申し込む
まずは [GEEK JOB](https://af.moshimo.com/af/c/click?a_id=2841382&p_id=1431&pc_id=2500&pl_id=26689&guid=ON) の公式サイト（[https://camp.geekjob.jp](https://af.moshimo.com/af/c/click?a_id=2841382&p_id=1431&pc_id=2500&pl_id=26689&guid=ON)）の申し込みページから無料カウンセリングを申し込みましょう。

![geekjob](//images.contentful.com/fdt52x6qf2de/2wSpAQrXSClZL5zAgPKLwI/b1a4ad984efa19ea46df94e8a9547011/geekjob.png)

公式フォームを開いたら①へ名前や電話番号、都道府県などの必要な項目を入力します。
②では「無料カウンセリングを予約する」を選択します。

次に体験希望日や任意で質問、コメントを入力していきます。

![geekjob 2](//images.contentful.com/fdt52x6qf2de/1XNk8mZuLRfGhvau3w1BUd/9db9a0a72d179e42a594d877caa4854a/geekjob_2.png)

③に無料カウンセリングの希望日と希望時間を入力します。
開催日程と時間も書いてあるため自身のスケジュールと相談して参加できる日程を記入しましょう。

次に④と⑤へ任意で質問事項とコメントを記入します。
これは必須ではないため記入してもしなくても大丈夫です。

最後に利用規約を確認してから⑥の「上記について同意します」へチェックをいれてから「確認画面に進む」をクリックしましょう。

これで申し込みは完了です。

無料カウンセリングでは **「未経験からエンジニアになれるか不安」「自分でも転職できるかわからない」** などの不安についてアドバイスを受けることができます。

> カウンセリング担当の方の話し方や振る舞いがとても丁寧で信頼できるなと感じました。
どんな質問にも親身になって回答していただけたことが嬉しかったです。

という意見もあるため**実際に受講をする前に不安を払拭できる**カウンセリングが受けられるのは安心ですね。

### 2.受講開始
実際に無料カウンセリングへ参加したら本格的にプログラミングについての学習がスタートします。

現役エンジニアからの**個別指導＆質問し放題な環境**のため学習の効率を最大化し効率的に学ぶことができます。
それによって未経験からでも最短1ヶ月という短い期間でも実際の開発と近い経験を積むことができ、**面接の通過率の高い実績**を作ることができます。

### 3.就職支援
GEEK JOBでは参加当日から**履歴書や職務経歴書の添削、面接練習**などを**プロの転職メンターと一緒に**進めていくことができます。

他のプログラミングスクールでは学習が一通り終わってから就活をするのが一般的です。
プログラミングの学習だけでなく転職支援も一緒にやっていくことで転職までの時間が短縮できるわけですね。

### 4.エンジニアへ転職
プログラミング学習と就活が終わったらついにエンジニアとして転職することができるようになります。

GEEK JOBは**平均して50〜70社ほどの企業を紹介**してくれて、そこから**2〜3社の内定**を獲得できることが多いようです。
複数の企業から内定を獲得できれば、そこから**自分にとってより良い条件の企業を選ぶ**ことができ晴れてエンジニアとしてのキャリアをスタートできますね。

## GEEK JOBスピード転職コースのよくある質問
無料とはいっても新しいことに挑戦するのは不安ですよね。

そこで初めてプログラミングスクールに通うかたや事前に確認しておきたいことなど、GEEK JOBスピード転職コースについてのよくある質問についてまとめました。

以下で詳しく確認していきましょう。

### なぜ無料なのか？怪しくない？
メリットの箇所でも記載しましたが、GEEK JOBは**受講生からは受講料をもらわず転職が成功した企業から紹介料**をもらっています。
そのため完全無料で利用できるわけですね。

応募を20代に限定している理由も現在IT人材が不足しており、企業としても長期的に働いてくれる人材を求めているからです。
そのため**未経験であってもやる気があれば企業は積極的に採用**をおこなっています。

GEEK JOB自体も最先端スタートアップのサービス開発をしている株式会社Sun Asteriskという企業と資本業務提携しており、実際の開発をしているからこその本格的なプログラミングスクールを運営できるわけですね。

### 文系の未経験からでも大丈夫？
文系や未経験のかたでもちゃんと学習する意欲があれば**現役エンジニアのメンターによる全力サポート**によってWebアプリケーションを開発できるレベルまでしっかりと支援してもらえます。

GEEK JOBは **「就職という結果にコミットする」** という目標を大切にしているため、ただプログラムが書けるようになって終わりではなく**就職できるまで全力でサポート**してくれるため未経験でも安心して利用することができますね。

### どういう人が教えてくれるのか？
GEEK JOBでは**現役のエンジニアがメンターとなって質問への対応や疑問点の解消**をおこなってくれます。
それによって一人で悩まず、わからないところを随時質問することができるので安心して学習に集中することができるようになっています。

また、プログラミングを教えてくれるメンターとは別に**転職支援の専門メンター**がいるため、プログラミングだけでなく**面接の練習やエンジニアなってからのキャリアプランなども親身にサポート**して貰えます。

だからこそ転職成功率97.8%という高い数字を実現できるわけですね。

## まとめ
GEEK JOBスピード転職コースについて詳しくご紹介しました。

**完全無料で最短1ヶ月という短い期間でエンジニア転職を目指せる**GEEK JOBスピード転職コースは**エンジニアとして必要なことだけを効率的に学び、費用かけずに早く就職したい人**におすすめのプログラミングスクールです。

今後ますます需要が増えるエンジニアという職業に興味があるかたはぜひこの機会に挑戦してみてはいかがでしょうか？
きっとその一歩がこれからの自分の人生を変えていくはずです。

[button](https://af.moshimo.com/af/c/click?a_id=2841382&p_id=1431&pc_id=2500&pl_id=26689&guid=ON "GEEK JOB公式サイトへアクセスする")

最短1ヶ月から完全無料でエンジニア転職できる GEEK JOBスピード転職コースについての評判やメリット、実際の流れについて現役エンジニアが徹底解説していきます。

coding

現役エンジニアがGEEK JOBスピード転職コースを徹底解説

オリジナルサービス開発とポートフォリオ作成まで徹底サポートしてくれる GEEK JOBプレミアム転職コース。
そんな GEEK JOBプレミアム転職コースの特徴やメリット、デメリットについて現役エンジニアが詳しく解説していきます。

## GEEK JOBプレミアム転職コースとは
![geekjob premium](//images.contentful.com/fdt52x6qf2de/3os9IQbSPIi4OOYwvdpkPc/3853abebca03349c28270605e6f05b87/geekjob_premium.png)

GEEK JOBプレミアム転職コースは　**WEB エンジニアへ本気で転職することを目標としたプログラミングスクール** です。
**受講者満足度 97.3%** 、**転職成功率 97.8%** とどちらも高い実績を持っています。

更にプログラミング未経験からの利用率は 97.8% で、そこから実際にエンジニアへ転職できたのは 850 人以上という数値から優れたスクールであることがわかります。

WEB エンジニアになるためには単にプログラミングの学習だけでなく、転職活動もおこなわなくてはなりません。
そこで、GEEK JOBプレミアム転職コースは **「WEB エンジニアになるためのプログラミング学習」** と **「WEB エンジニアへの転職支援」** がセットになっています。

##### GEEK JOB には [GEEK JOBスピード転職コース](https://af.moshimo.com/af/c/click?a_id=2841382&p_id=1431&pc_id=2500&pl_id=26689&guid=ON) という「最短1ヶ月〜最長3ヶ月の完全無料で受講できるプログラミングスクール」も存在します。以下の記事で詳細をまとめていますので参考にしてみてください。

[card](https://gizanbeak.com/post/geekjob-speed)

そんな GEEK JOBプレミアム転職コースの特徴としては以下のとおりです。

- オリジナルポートフォリオの作成を徹底サポート
- 転職できない場合の全額返金保証
- 人気の WEB 系自社開発企業への転職が可能

詳しく解説していきます。

[button](http://af.moshimo.com/af/c/click?a_id=2841383&p_id=2898&pc_id=6652&pl_id=40056&guid=ON "GEEK JOB公式サイトへアクセスする")

## GEEK JOBプレミアム転職コースのメリット
![illust](//images.contentful.com/fdt52x6qf2de/37OZCq40QYNC0ZyGtDViX6/725f6056bc672a11277b2665c996d240/undraw_Preferences_re_49in.svg)

### オリジナルポートフォリオの作成を徹底サポート
GEEK JOBプレミアム転職コースでは PHP、Ruby、Java というプログラミング言語を選択して学習を進めていきます。

その際に単に学習用のプログラミングだけをするのではなく、 **実際の開発に近い環境で自分だけのオリジナルのポートフォリオ（成果物）を作成** することができます。

ポートフォリオを作成できることで、エンジニアとして転職する場合に自分の学習してきたことのアピールとなり優位に転職活動を進めることが可能です。
ただ単に **「これを学習しました」という人材** と **「これを学習し、その経験を活かしてこのポートフォリオを作成しました」という行動力のある人材** では企業がどちらを採用したいかは一目瞭然ですよね。

また、オリジナルのポートフォリオということはプログラミングだけではなく **自分で考えて WEB サービスを開発できる企画力** という点もアピールすることができます。

つまり、ポートフォリオを作成することができればエンジニアとして転職する場合に以下の２つの点をアピールすることができるというわけですね。

- 現場でも通用するプログラミングスキル
- 自分で考えサービスを開発できる企画力

### 転職できない場合の全額返金保証
GEEK JOBプレミアム転職コースには **６ヶ月以内に転職が決まらない場合に受講料の全額返金** を受けることができます。

仮に転職できなかった場合でも受講料は全額返金してもえる事にプラスしてプログラミングのスキルは残っているわけですから、とにかく **リスクを低くして挑戦することが可能** です。

「エンジニアへ転職できなかったらどうしよう...」という不安を感じることなく学習に集中することができるのはメリットですよね。

### 人気の WEB 系自社開発企業へ転職が可能
みなさんの中には自社で WEB サービスを運営している WEB 系自社開発企業へ転職したいと考えている方もいると思います。
WEB 系自社開発企業は自社で開発をおこなっているため **他社へ常駐する必要がなく、服装や働く時間帯などの自由度が高い** ことが特徴としてあります。

WEB 系自社開発企業はその自由度の高さなどから非常に人気が高く採用までのハードルが高いことが多くなっています。
そのため、 **他の候補者とは何か差別化できる要素が必要** になってくるわけです。

GEEK JOBプレミアム転職コースのメリットとして **「オリジナルポートフォリオの作成」** ができると紹介しました。
これによってプログラミングスキルだけではなく、 自分で **WEB サービスを企画できる能力をアピールすることで他の候補者と差別化** を図り転職の成功率を上げることが可能です。

実際に私がWEB 系自社開発企業へ転職活動をおこなった際には **「なぜそのサービスを作ろうとしたのか」「どういう利用者を想定して作成したのか」** という質問が多く、自社で開発をおこなっているからこそこだわりをもって開発ができるエンジニアを求めているのです。

優良なポートフォリオの開発ができれば **十分に WEB 系自社開発企業への転職が可能** です。

[button](http://af.moshimo.com/af/c/click?a_id=2841383&p_id=2898&pc_id=6652&pl_id=40056&guid=ON "GEEK JOB公式サイトへアクセスする")

## GEEK JOBプレミアム転職コースのデメリット
![illust](//images.contentful.com/fdt52x6qf2de/4SQDb5Lb8eFsTsPzJw02vR/56b8bcb92dea53a2ba2f669fb8158b8b/undraw_Notify_re_65on.svg)

### チーム開発を経験できない
実際にエンジニアとして仕事をする際に一人だけで開発をすることはほとんどありません。
実務の場合は何人かのチームで担当する機能や改修などの計画をたてて進めていきます。

GEEK JOBプレミアム転職コースではチームで開発する経験をすることはできません。

チーム開発を経験することでエンジニアとして転職した際により違和感なく開発することができるため、デメリットの１つとして挙げました。

ただし、チーム開発の経験がないからといってエンジニアとして採用されないわけではありません。
チーム開発に関しては実際に現場で時間をかけ学ぶことができるため、メリットでも挙げたポートフォリオがしっかりと作成できていれば、そちらの方が絶対に評価されます。

### 受講料は少し高め
GEEK JOBプレミアム転職コースの受講料は 398,000 円と平均よりも少し高めの設定になっています。
ただし、プログラミングスクールの受講料はだいたい 30万〜70万　くらいのため飛び抜けて高いというわけではありません。

転職できなかった場合は **全額返金保証** もあるため、そこまで問題になることではないかと思っています。

更にエンジニアという職種は厚生労働省の情報によると平均年収が 550万円とかなり高く、一度エンジニアになってしまえば十分に元をとることができます。
実際に私の回りでも上記の平均よりも多くもらっている人の方が多いくらいです。

## こんな人におすすめ
![illust](//images.contentful.com/fdt52x6qf2de/7BNaVErHXXzeFMeljc5aKi/da9c8432622c94de5e62019bf8d3e9e0/undraw_businessman_97x4.svg)

以上の情報をまとめると GEEK JOBプレミアム転職コースは以下のような方におすすめできるプログラミングスクールであると言えます。

- WEB 系自社開発企業へ転職したいと考えている人
- 自分で WEB サービスを作れるようになりたい人
- プログラミングだけでなく転職の支援もしてほしい人
- 他の人と差をつけより良い企業へ転職したい人

ただ単にどこでもいいからエンジニアとして転職したいというよりも、 **WEB 系自社開発企業などの目的の企業やより良い条件の企業へ転職したい** と考えている人におすすめできます。

また PHP、Java、Ruby といった WEB 開発でよく使用される言語を学び、自分のポートフォリオが作成できるということは **個人で WEB サービスを作成し収益を得る** こともできるようになるということです。

転職するための **オリジナルポートフォリオ作成まで徹底サポート** を受けられ、WEB エンジニアとして転職を成功させたいのであれば GEEK JOBプレミアム転職コースを利用するのは良い選択だといえます。

[button](http://af.moshimo.com/af/c/click?a_id=2841383&p_id=2898&pc_id=6652&pl_id=40056&guid=ON "GEEK JOB公式サイトへアクセスする")

## まとめ
ここまで GEEK JOBプレミアム転職コースについて現役エンジニアの私が徹底解説しました。
GEEK JOBプレミアム転職コースの結論は以下のようになります。

> ただ単にどこでもいいからエンジニアとして転職したいというよりも、WEB 系自社開発企業などの目的の企業やより良い条件の企業へ転職したいと考えている人におすすめできるプログラミングスクール

GEEK JOBプレミアム転職コースでは [無料キャリアカウンセリング](http://af.moshimo.com/af/c/click?a_id=2841383&p_id=2898&pc_id=6652&pl_id=40056&guid=ON) を開催しています。
オンラインで転職メンターに疑問点などを直接相談できることで具体的なイメージを持つことができると思います。

本気でエンジニアへ転職したいと考えているのであれば無料のカウンセリングを受けて、自分に合うプログラミングスクールかを確認した上で合わないと思ったらやめればいいのです。

今日から行動することできっとあなたの人生はより良くなっていくはずです。

[button](http://af.moshimo.com/af/c/click?a_id=2841383&p_id=2898&pc_id=6652&pl_id=40056&guid=ON "GEEK JOB公式サイトへアクセスする")

オリジナルサービス開発とポートフォリオ作成まで徹底サポートしてくれる GEEK JOBプレミアム転職コースの特徴やメリット、デメリットについて現役エンジニアが徹底解説していきます。

undraw Coding re iv62

現役エンジニアがGEEK JOBプレミアム転職コースを徹底解説

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

profile_icon

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