【なろう系】たったの『15分』で個人開発者になれるんですか？【Next.js x Vercel 】

この記事を読んだあなたは、

:white_check_mark: たったの15分で！
:white_check_mark: フロントエンドとバックエンドからなるwebアプリを作り
:white_check_mark: それを永久無料でデプロイし
:white_check_mark: CDの設定までできるようになります

# まえがき
個人開発歴は半年程度しかない僕ですが、今日まで挫折しながらいくつかの方法を試してきました。

そんな僕が、今最もオススメな、**挫折しない個人開発の始め方**を紹介します。
# ステップ1：nodeのインストール
> nodeが入ればなんでもいいです。以下ではnodenvを使った方法を説明します。
> nodenvはディレクトリごとにnodeのバージョンを切り替えられるのが利点です。
> 僕のように仕事でもnodeを使う人には特にオススメできます。

- [nodenvをインストール](https://github.com/nodenv/nodenv#installation)する
- nodeの好きなバージョンをインストールします
    - 使いたいライブラリが最新版に対応していないなどの特殊な理由がなければ、最新版を選択するのがいいでしょう

    ```bash
    # インストール可能なバージョンの一覧を見る
    nodenv install -l
    # 特定のバージョンのnodeをインストール
    nodenv install 13.11.0
    ```

- 適当なディレクトリを作成します


    ```bash
    mkdir node-dev
    cd node-dev
    ```

- nodeのバージョンを指定

    ```bash
    nodenv local 13.11.0
    # nodenv install したバージョンしか指定できないので注意
    # これでこのディレクトリではnodev13.11.0が使われるようになりました
    ```

> linux (wsl)だとコレがラクそう
> https://qiita.com/seibe/items/36cef7df85fe2cefa3ea

# ステップ2：next.jsプロジェクトを新規作成
- next.jsプロジェクトをつくる

    ```bash
    npm init next-app
    # プロジェクト名など、少しの質問に答えていきます
    ```

- noxt.jsプロジェクトをローカルで確認する
    - 以下コマンドを入力すると、devサーバーが立ち上がるので、ブラウザで`http://localhost:3000`にアクセスしてみてください

    ```bash
    cd your-project-name
    npm run dev
    ```

<img width="1904" alt="image.png (869.5 kB)" src="https://img.esa.io/uploads/production/attachments/11466/2020/05/29/55180/93b4c627-94fa-4b70-a164-9002cdf384e6.png">

# ステップ3：コードをちょっと変更してみる
- `your-project-name/pages/index.js`のコードをテキトーに変更して、保存してみましょう
<img width="1665" alt="working.gif (561.8 kB)" src="https://img.esa.io/uploads/production/attachments/11466/2020/05/29/55180/9fa091fd-db2f-43d0-ac33-9a2e35a105a4.gif">

**おめでとうございます！今ここに、世界に一つだけのnext.jsプロジェクトが爆誕しました。**
# ステップ4：githubリポジトリにnext.jsプロジェクトをpushする
- github(gitlabでも可)のページ上で新しいリポジトリを作成する
- add&commit して作成したリポジトリにpushする

    ```bash
    git add .
    git commit -m "launch"
    git remote add origin git@github.com:XXXXXXXXXX/xxxxxxxxxx.git
    git push -u origin HEAD
    ```

# ステップ5：vercelでデプロイする
- [vercelにサインアップ](https://vercel.com/signup)
    - Continue with GitHub (GitLab)でサインアップする
- 先ほど作成したgithubリポジトリと接続する
    - `From Git Repository`を選択
    - `Import Project from GitHub` から 先ほどのリポジトリを選択
    - あとは次へ連打でOK
<img width="1665" alt="ezgif.com-gif-maker.gif (770.2 kB)" src="https://img.esa.io/uploads/production/attachments/11466/2020/05/29/55180/5f769a6b-c110-46a7-bbbe-a9570a5752f4.gif">

**なんとこれでデプロイ完了！今ここに、世界に一つだけのwebアプリが爆誕しました。**

- 少し待つと、ビルドが終了し、世界に向けてwebアプリが公開されます。右上にあるvisitボタンをクリックして見に行ってみましょう。当然、スマホからでも見られます。
<img width="1646" alt="image.png (206.6 kB)" src="https://img.esa.io/uploads/production/attachments/11466/2020/05/29/55180/a79604c1-5415-4b14-af67-3f0f326ff63d.png">

---

- vercelのすごいところは、**CD(Continuous Deployment)の設定も自動**でやってくれることです。
- そのほかにも、**pull requestをつくると、自動で動作確認環境**を作ってくれたりもします。
- さらに、最も驚くべきが価格、なんとこれ、[**永久無料**](https://vercel.com/pricing)です！！！

> Vercelは別にnext.js専用のプラットフォームではないです。

> HTML＋CSS＋JSで作ったアプリとか、create-react-appで作ったアプリとか、Gatsbyで作ったアプリとかなら、なんでも動きます。

> ただ、**Vercelとnext.jsは作っている会社が一緒**なので、相性が良いです。

> さらに、next.jsはバックエンドAPIも同一のプロジェクト内に定義できるので、**フロントエンドもバックエンドもまとめてVercelでデプロイできる**のが良いです。

### CDの良さを体感できる動画
- `コード変更 → git push → 40秒待つ → 本番環境に自動デプロイ` の様子
- コードを変更してそれがすぐにデプロイされるのをみると、モチベが落ちにくいです。このスピード感がキモなのです。
<img width="1665" alt="working２.gif (1.0 MB)" src="https://img.esa.io/uploads/production/attachments/11466/2020/05/30/55180/a3a5d741-f5f7-4810-9138-68bf1ff0e108.gif">

# おまけ：このあとどうすれば良い？
- 何か作りたいものを作ってみましょう。それが一番学べるんじゃないかなと僕は思っています。
- 作りたいものが見つからない人は定番の、カウンターやtodoリストを作ってみましょう。
- Reactって何？って人は[公式のチュートリアル](https://ja.reactjs.org/tutorial/tutorial.html)を参考に、your-project-name/pages/index.jsを書き換えていくと、Reactがわかってくるかもしれません。
- next.jsの[公式のチュートリアル](https://nextjs.org/learn/basics/navigate-between-pages)もわかりやすかったです。
- いい感じの見た目にならなくて困っている方は、[Material UI](https://material-ui.com/)などのライブラリを使用することをオススメします。
- DBを使うwebアプリを作りたい場合は、[RDS](https://aws.amazon.com/jp/rds/)や[Cloud Firestore](https://firebase.google.com/docs/firestore?hl=ja)などを使うと良いかもしれません。
    - 実は僕も模索中なので、安くて使いやすいDBサービスあったら教えてください。

> 質問あったらコメントください。

> 不適切な表現があったら教えてください。