undraw Coding re iv62

cojinkaihatu

coding

website

エンジニア

個人開発

書籍

転職

コーディング

プログラミングスクール

VSCode

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

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

この記事では最短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スピード転職コースについての評判やメリット、実際の流れについて現役エンジニアが徹底解説していきます。

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

個人で 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")

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

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

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

みなさんは普段どのコードエディターを使っていますか？
この記事ではエンジニアがよく使うコードエディターである「Visual Studio Code」のおすすめ拡張機能について紹介していきます。

## Visual Studio Code とは？
![illust](//images.contentful.com/fdt52x6qf2de/6UXaRDvt4pboSTCJnLiwWy/f172b550847d195fedfabc10bc59fd0f/vscode.png)

[Visual Studio Code](https://azure.microsoft.com/ja-jp/products/visual-studio-code/) 通称 VSCode とは Microsoft が提供している無料で使用できるコードエディターです。

エンジニアの間で使いやすさと拡張性の高さから人気が高く、実際私の周りでもほとんどの人が VSCode を使用しています。

今回はそんな Visual Studio Code で使用できる拡張機能の中でもカテゴリ別におすすめのものをご紹介します。

## ビジュアル系
### Material Theme
最初にご紹介するのは「[Material Theme](https://material-theme.site/)」です。
これは Visual Studio Code のテーマ（カラー）を変更する拡張機能で、変更するだけでガラッとエディターの雰囲気が変わるためお気に入りのテーマを選びコーディング時のテンションを上げていきましょう！

Material Theme が提供しているテーマにはいくつか種類があり、以下に画像とともにリストを記載しますのでご自身が気に入ったテーマを探す参考になれば幸いです。

#### Material Theme
![material-theme](//images.contentful.com/fdt52x6qf2de/7oObyFQIXR8cYPiA9JqQMb/ad89565fb4e5ba626b6639343d364e42/material-theme.png)

青色をメインとした落ち着いた雰囲気の Material Theme のデフォルトテーマです。

#### Material Theme Darker
![material-theme-darker](//images.contentful.com/fdt52x6qf2de/6uwKnFiPkF8XfjkC4Ifj6U/4a7db8d17e94c7e657a0c9744c7aeb44/material-theme-darker.png)

Darker という名前の通り背景が黒になっているテーマです。
文字がくっくりと見えるためコードの可読性が上がり、また夜に使用する場合でも目に優しいです。

#### Material Theme Ocean
![material-theme-ocean](//images.contentful.com/fdt52x6qf2de/75i5CdcsPXycgHneH7rWRo/3e3acbee28224c12adacc5990ac00272/material-theme-ocean.png)

紫っぽい雰囲気かつ暗めのテーマです。
Darker よりも更にコードが目立つ感じがしますね。

#### Material Theme Palenight
![material-theme-palenight](//images.contentful.com/fdt52x6qf2de/7k0oa7locWlMRE8cbPMteG/6c90e8d58cfd79e108ed1a3c3d257845/material-theme-palenight.png)

palenight とは「薄光」という意味で、Ocean よりも更に紫かつ明るめとった雰囲気になっています。

### Material Icon Theme
![material-icon-theme](//images.contentful.com/fdt52x6qf2de/4u84zxt624No3LLxcpC9eh/a44520bdc7b84e3cea1feefd5109f99c/material-icon-theme.png)

「[Material Icon Theme](https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme)」はエディター左側のファイル一覧に表示されるアイテムのアイコンを変更する拡張機能です。

先程の Material Theme と同じ　Material Design にもとづいて作られているため一緒に使うことで統一感のあるエディターになります。

アイコンの数が多く、全ては記載できないため各アイコンは以下の公式リンクからご確認ください。

[card](https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme)

## ユーティリティ系
### Bracket Pair Colorizer
ユーティリティ系の最初の拡張機能としてご紹介するのは「[Bracket Pair Colorizer](https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer)」という拡張機能です。

コーディングをしていて、「この括弧はどことつながっている括弧だったかな...」となることは多々あると思います。
その時に Bracket Pair Colorizer を入れていると以下のように括弧をそれぞれハイライトしてくれるため、それがどこにつながっているのかをひと目で確認することができるためオススメです。

![bracket-pair-color](//images.ctfassets.net/fdt52x6qf2de/2PxHzQlEqNtxLVXx0rkxew/965e79cf9eeb26ab4371b2ac552d8481/bracket-pair-color.png)

### indent-rainbow
![indent-rainbow](//images.contentful.com/fdt52x6qf2de/gWmlbGp3HWfbVbKAFZ8oe/5e322c90af13a96811cdbebd0dd87c2c/indent-rainbow.png)

「[indent-rainbow](https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow)」は各インデント（スペース）をレインボーにハイライトしてくれる拡張機能です。
こちらも Bracket Pair Colorizer と同じように入れているだけでインデントのズレなどをすぐに把握でき、快適にコーディングできるようになります。

### Auto Rename Tag
![auto-rename-tag](//images.contentful.com/fdt52x6qf2de/5ewjM0FlKbxGs6C313OqBT/ba83d790d8299ed51cc3158e0fa6759f/auto-rename-tag.gif)

HTML を書いている時にあとからタグをリネームしようとしてタグと閉じタグを編集するのは手間ですよね。
そんな時にこの「[Auto Rename Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag)」をいれていると、片方のタグを編集するともう片方のタグを自動的にリネームしてくれます。

### CSS Peek
![css-peek](//images.contentful.com/fdt52x6qf2de/42usosWgpYjqyjHCROW1vh/e846924f2921d2e204696fe8c7f26ff7/css-peek.png)

次にご紹介するのは「[CSS Peek](https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-css-peek)」という HTML のクラス名をホバーすることで適用されている CSS の情報を瞬時に取得できる拡張機能です。

「あのクラスに適用されている CSS はどれだったか...」という手間を減らせすことができるため便利です。管理している CSS の量が膨大になっていて適用されている CSS を探すのに時間がかかってしまう時に重宝しますね。

### Emmet
![illust](//images.contentful.com/fdt52x6qf2de/3lKatRRwhkJV3i7YULiRsW/982b14032320af86244a24596ebab258/emmet.svg)

最後にご紹介する「[Emmet](https://marketplace.visualstudio.com/items?itemName=FallenMax.mithril-emmet)」はHTMLやCSSを効率よくコーディングするための拡張機能です。

例えば通常であれば `h1` タグを書く場合に `<h1></h1>` と入力しないといけませんが、Emmet を使うと `h1` と入力し Tab を押すだけで自動的に `<h1></h1>` というタグを挿入してくれます。

他にも `html:5` と入力することで以下のような HTML の雛形を素早く作成することができます。

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

</body>
</html>
```

他にも様々なショートカットが存在しますが全て紹介すると長くなってしまうため、ここでは省略させていただきます。
以下のサイトでわかりやすくまとめられていました。

[card](https://technical-creator.com/vscode-emmet)

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

今回は Visual Studio Code を使う上でいれておくと便利な拡張機能をご紹介しました。
このように様々な拡張機能を取り入れることで自分だけの快適なコードエディターを作ることができます。

本当に様々なものがあり、ここでは紹介しきれなかったものもありますが、快適なコーディングライフのお役に立てれば幸いです！

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

[af-Visual Studio Code完全入門](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%2F4295013455 "//images.ctfassets.net/fdt52x6qf2de/7poUHanhMAbob10xWKC1Z2/b2b7adec5a97a368b53412b605178597/vscode.jpg")

エンジニアの間で人気の高いコードエディターである「Visual Studio Code」のおすすめ拡張機能について紹介していきます。

VSCode に入れておきたいおすすめ拡張機能7つ

この記事では 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

このサイトについて

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

profile_icon

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