NextJS on YAGI BLOG

Journalを支える技術

Tue, 20 Apr 2021 20:50:14 +0900

Journalというジャーナリングをするアプリをリリースしました。ジャーナリングとは自分が思っていることを書き出すことで自分について理解を深めたり、自分がやりたいことを見つけるのに役立ったりします。日記をイメージしてもらうのがわかりやすいと思います。

今回はJournalを支えている技術について紹介します。

フロントエンド

Next.js

フロントエンドはNext.js（React）とTypeScriptを使っています。なるべくシンプルに作りたかったので全ページをSPAで作っていますが、SSGできそうなところはSSGを使って静的ファイルにしたいと思ってます。

Tailwind CSS

CSSにはTailwind CSSを使っています。Next.jsとの相性が良さそうだったのとシンプルで使いやすそうだと思って選びました。CSSの知識が乏しいのでネットの有識者を参考にした結果、Tailwind CSSにしました。

Vercel

フロントエンドの本番環境のデプロイ先にはVercelを使っています。 VercelはNext.jsの運営元でデプロイがとても簡単で使いやすかったので選びました。 GitHubのリポジトリを指定すれば自動でデプロイをしてくれますし、設定も少なめで本当に簡単です。

Vectr

サイトのロゴやファビコンを作るのにVectrを使っています。Vectrはsvg形式のファイルを無料で作れるので利用しました。

バックエンド

Echo

バックエンドはGoのフレームワークであるEchoを使っています。 GoでAPIを作るのにEchoはとてもお手軽とのことだったので選びました。アーキテクチャにはクリーンアーキテクチャを選んでいます。クリーンアーキテクチャでコードを書いたことがありませんでしたが、テストコードが書きやすかったり、外部のライブラリなどの依存が減るので採用してよかったなと思っています。また、コード量が増えたことはデメリットかなと思います。

Cloud Run

バックエンドの本番環境のデプロイ先はCloud Runを使っています。ローカルの開発環境でDockerを利用していて同じようなDockerfileでCloud Runにデプロイができ、Cloud Runがいい感じにリクエストをさばいてくれます。

ただ、アプリが起動するまでに10秒弱ぐらい時間がかかってしまいAPIのレスポンス待ちになってしまうのがデメリットかなと思います。Cloud RunはフルマネージドでAPIを叩かれていないときはコンテナが起動していないのでレスポンスに少し時間がかかってしまうのは仕方ないですね。

Cloud SQL

データベースの本番環境はCloud SQL(PostgreSQL)を使っています。普段の仕事でも使っているRDBが自分としては使いやすいの選びました。

その他に利用しているサービス

GitHub Actions
CI/CDツール。バックエンドのデプロイに使っています。
Firebase Authentication
ログイン認証のため。
Google Domains
ドメイン取得のため。なるべくGCPにサービスを寄せている。

Next.js(React),Go kit(Golang)で「SENRYU」を個人開発した

Sun, 20 Sep 2020 22:04:18 +0900

今回はじめて個人開発でアプリを作りました！！今年の1月に個人開発をしようと考えてから、アプリ企画・技術選定をして、開発途中で作るアプリを変えたりと色々と迷走しましたが、なんとか一区切りつきました！！（8か月ぐらいかかるなんてチンタラやってたなあ（笑））

開発したアプリや今まで考えていたことなどをまとめます。

アプリ概要

川柳を共有することができるSNSアプリ「SENRYU」を開発しました。

機能

ログイン
ユーザー登録
ログアウト
川柳一覧表示
マイ川柳一覧表示
川柳投稿

フロントエンド

Next.js(React)

フロントエンドにはNext.jsを利用しました。TypeScriptを使ってみたくて、TypeScriptと相性がいいReactを選択して、最近話題のNext.jsにしようと決めました。
Next.jsはルーティング設定が楽だし、SSG, SSR, SPAをページごとに設定できて便利だしと使って良かったなと思っています。ただ、認証はFirebaseやNextAuth.jsを利用して他のSNSアカウントとかでログインする実装にするのが楽だと感じました。

Material-UI

ReactのUIコンポーネントライブラリであるMaterial-UIを利用してUIの基礎を作りました。簡単に見た目を整えることができるので、とても便利です。

styled-components

Material-UIの見た目を調整したい時にCCS in JSのstyled-componentsを利用しました。TypeScript内でCSSを書けるので普段CSSとかを書かない僕には使いやすかったです。

バックエンド

Go kit(Golang)

個人的にGolangを利用したかったのとマイクロサービス構成でアプリを作ってみたいという理由からGo kitを利用しました。使ってみた感想としてあまり日本語のドキュメントとかなく調べるのが大変でしたが、Golangにはホットリロードがあってコンパイルが速く言語に慣れれば開発スピードが上がりそうだなと思いました。

データベース

MongoDB

NoSQLを利用したことがなかったので今回利用しました。MongoDBの基礎的な知識を身につけることはできましたが、RDBMSよりもNoSQLを利用するメリットがあんまりわからなかったです。

開発環境

Docker

マイクロサービス構成でアプリ開発をしていたので、それぞれのサービス毎にコンテナを作成しました。ローカルでDockerコンテナを立てて開発するときはVSCodeのRemote Containerが非常に便利でした。ぜひ使ってみてほしいです。

対象リポジトリ

senryu-frontend
senryu-user
senryu-post

記事を書くまでの経緯

元々、今年の1月に他のサービス開発を考えていました。技術選定の時には

Next.js(React)
TypeScript
Go kit(Golang)
MongoDB
Docker
Github Actions
AWS
K8s
マイクロサービス

でアプリを開発してリリースをしようと思っていました。せっかくの個人開発だし勉強もかねて挑戦してやる！っていう気持ちで技術選定をしましたが、今思うとDocker以外はほぼ経験がなかったのでめちゃくちゃ無謀だったなと思います。（笑）
そんな感じで技術選定をしてから要件や仕様決めて開発を始めましたが、わからないことが多すぎで全然進捗がなかったです。。亀の足のような遅さでしたがなんとか進めていた 4月頃か5月頃に気づいてしまいました。
「クラウドでK8s使うと金けっこうかかるやんけ！」
今思うと当たり前だし、調査不足すぎだよ自分。。ということがあり、最初に作りたかったサービスは世にリリースするのが厳しいなと思いましたが、せっかくある程度までは勉強して作っていたので、違うサービスとして開発をしてGithubで公開してポートフォリオ的な感じにしようと決めました。
といった経緯で今に至ります。結果的には個人開発したアプリをリリースすることはできませんでしたが、Next.jsとGolangを学べたり個人開発の雰囲気を味わえたので良かったです。

最後に

個人開発はすべてを自分で考えないといけないので、とても大変ですが技術選定や作業の進め方など誰からも指図されずに好きなようにできるので、楽しいし学びが多いですね。

Next.jsのgetServerSidePropsでリダイレクトをする

Sun, 13 Sep 2020 00:24:52 +0900

勉強用にNext.jsで個人開発をしていて、cookieに値がない時トップ画面にリダイレクトする実装をしたかったのですが、参考にできる情報が少なかったので記事にしました。

リダイレクト方法

import { parseCookies } from "nookies";
import { GetServerSideProps } from "next";

// ...

export const getServerSideProps: GetServerSideProps = async (context) => {
  const cookies = parseCookies(context);
  const userId = typeof cookies.userId === "undefined" ? "" : cookies.userId;
  if (userId === "") {
    context.res.writeHead(302, { Location: "/" });
    context.res.end();
  }

  return {
    props: {},
  };
};

cookieにuserIdを仕込んでいて、userIdがなかったらログインしていないとみなしてトップ画面に戻す実装をしました。

最後に

RFC: Returning redirects from getServerSideProps / getStaticProps にもあるようにgetServerSidePropsでリダイレクトする方法が書かれていますが、うまく実装ができなかったのでレスポンスを書き換える感じの実装にしました。
Next.js関連は日本語の記事が少ないので、情報を探すのが大変ですね。

「React Hook Form」でフォームを簡単に作る

Tue, 26 May 2020 09:00:24 +0900

Next.js(React)でログイン機能を実装していて、フォーム作成に苦戦していました。そもそも、Reactを全然理解していないので、フォームの値はどうやって取得すればいいのか？みたいなところからわかりませんでした。

今回はReact+TypeScriptでフォームを作成するのにReact Hook Formがとても便利だったので、紹介します。

React Hook Formとは

公式サイトを見ると「高性能で柔軟かつ拡張可能な使いやすいフォームバリデーションライブラリ」らしいです。
詳細は以下公式サイトを見てください。
React Hook Form

さっそく実装をする

まずはReact Hook Formをインストールします。以下コマンドをプロジェクト配下で実行します。

npm install react-hook-form

インストールしたら、importしてフォームの値をサポートするためのFormData型を作成します。

import { useForm } from "react-hook-form";

type FormData = {
  username: string;
  password: string;
};

今回はログイン用のフォームを作成するために、string型のusernameとpasswordを用意しました。次に、useFormを使ってフォーム作成に必要なメソッドを受け取ります。

import { useForm } from "react-hook-form";

type FormData = {
  username: string;
  password: string;
};

export default function Login() {
  const { register, handleSubmit, watch, errors } = useForm<FormData>();
}

useForm<FormData>()のように書いてフォームで使う型を設定できます。 constで定義されているメソッドについては以下にまとめました。

register:　input/selectのRefとバリデーションルールをReact Hook Formに登録する
handleSubmit:　フォームバリデーションに成功するとフォームデータを渡す
watch:　指定されたinput/inputsを監視し、その値を返す
errors:　各inputのフォームのエラーまたはエラーメッセージを含む

これらのメソッドを使って、フォームを作成します。

import { useForm } from "react-hook-form";

type FormData = {
  username: string;
  password: string;
};

export default function Login() {
  const { register, handleSubmit, watch, errors } = useForm<FormData>();
  const onSubmit = (data: FormData): void => console.log(data);

  console.log(watch("username"));
  console.log(watch("password"));

  return (
      <form onSubmit={handleSubmit(onSubmit)}>
        <div className="filed">
          <label className="label">username</label>
          <input
            name="username"
            placeholder="username"
            ref={register({ required: true })}
          />
          {errors.username && "usernameを入力してください。"}
        </div>
        <div className="filed">
          <label className="label">password</label>
          <input
            name="password"
            placeholder="password"
            ref={register({ required: true })}
          />
          {errors.password && "passwordを入力してください。"}
        </div>
        <div className="filed">
          <button>login</button>
        </div>
      </form>
  );
}

フォームの流れにそって解説します。
フォームのinputで作成したFormDataを使うためにはname属性に設定します。また、ref={register({ required: true })}のように書くことで、inputは入力必須にしています。 {errors.username && "usernameを入力してください。"}はusernameがバリデーションエラーになったら表示されます。最後に、フォームに入力をしてボタンを押してバリデーションエラーが発生していない場合、<form onSubmit={handleSubmit(onSubmit)}>が動いて、const onSubmit = (data: FormData): void => console.log(data);が実行されてコンソールに入力された値が表示されます。フォームに入力がない状態でボタンを押すと以下のような挙動をします。 console.log(watch("username"));はusernameに入力された値が変わるとその都度コンソールに表示します。

Go製APIから「fetch」するのにハマった

Tue, 19 May 2020 21:04:08 +0900

Next.js(React)+Goで個人開発をしていて、FetchAPIを利用してGoでローカル環境にたてたAPIをNext.jsで呼び出す際に、値が取れずにはまりました。今回はどうやって解消したのか記事にしました。

今回発生したエラー

Next.jsでfetchを使ってPOSTした際に、以下のようなエラーが発生。

Error serializing `.postData` returned from `getServerSideProps` in "/posts/get-api". Reason: `object` ("[object Promise]") cannot be serialized as JSON. Please only return JSON serializable data types.

ようわからんけど、APIから値が取れてないみたいでした。 Next.jsからfetchする際のコードは以下のようにしていました。

export const getServerSideProps: GetServerSideProps = async () => {
  const url = "http://localhost:8080/login";　←　APIはローカルの8080番ポートにたてていました。
  let postData = {};
  await fetch(url, {
    method: "POST",
    cache: "no-cache",
    headers: {
      "Content-Type": "application/json charset=utf-8",
    },
    body: JSON.stringify({ username: "yagiyu", password: "miran" }),
  }).then(function (response) {
    console.log(response);
    postData = response.json();
  });
  return {
    props: {
      postData,
    },
  };
};

また、上記を実行した時のレスポンスが以下で、APIと通信はできたが、値を取れませんでした。

Response {
  size: 0,
  timeout: 0,
  [Symbol(Body internals)]: {
    body: PassThrough {
      _readableState: [ReadableState],
      readable: true,
      _events: [Object: null prototype],
      _eventsCount: 2,
      _maxListeners: undefined,
      _writableState: [WritableState],
      writable: false,
      allowHalfOpen: true,
      _transformState: [Object],
      [Symbol(kCapture)]: false
    },
    disturbed: false,
    error: null
  },
  [Symbol(Response internals)]: {
    url: 'http://localhost:8080/login',
    status: 200,
    statusText: 'OK',
    headers: Headers { [Symbol(map)]: [Object: null prototype] },
    counter: 0
  }
}

ターミナルからcurlを実行すると、以下のように成功していました。