超モダンな技術で開発をしている話

はじめに

修正や追加等はコメントまたはGitHubで編集リクエストをお待ちしております。

本題

現在、私は社内唯一のエンジニアです。(会社の規模は10人程度で、資金がない)
そんな訳で、全ての工程と裁量を持って開発をしています。
今回はその中で使っている技術について紹介します。

• TypeScript
• Next.js
• Supabase
• TailwindCSS
• Material-UI
• Rome
• Zod
• Recoil
• Jest
• GitHub Actions
• Notion

TypeScript

これはもう言うまでもないですね。
型があることで、コードの品質が上がります。
使ってないプロジェクトは、今すぐにでもTypeScriptに移行してください。

https://www.typescriptlang.org/

Next.js

Next.jsはReactのフレームワークです。
Reactの開発を楽にするために作られたフレームワークです。
コンポーネント単位でのSSRや、静的ファイルの配信などができます。
詳しい説明は他の方の記事を参照してください。

https://nextjs.org/

Supabase

SupabaseはFirebaseのオープンソース版みたいなものです。
双方無料枠がありますが、Firebaseは、読み取り回数に応じて課金が発生します。
そのため、キャッシュなどを使い、読み取り回数を減らす必要があります。
どうしても開発時は読み取り回数が増えてしまいます。
Supabaseは読み取り回数に応じて課金が発生しないので、開発時に使いやすいです。
データベースの容量に応じて課金されます。
データベースのリクエスト方法もSQLよりの操作ができるので、開発が楽になります。

Supabase.ts

import { createClient } from "@supabase/supabase-js";

const supabase = createClient(
  process.env.NEXT_PUBLIC_SUPABASE_URL,
  process.env.NEXT_PUBLIC_SUPABASE_KEY
);

const { data, error } = await supabase
  .from("users")
  .select("*")
  .eq("id", 1);

Firebase.ts

import firebase from "firebase/app";

const firebaseConfig = {
  apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
  authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
  projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
  storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
  measurementId: process.env.NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID,
};

if (!firebase.apps.length) {
  firebase.initializeApp(firebaseConfig);
}

const db = firebase.firestore();

const doc = await db.collection("users").doc("1").get();

https://supabase.io/

TailwindCSS

TailwindCSSはCSSフレームワークです。
TSX(JSX)ファイルから離れずにCSSを当てることができます。
また、TailwindCSSのクラス名をVSCodeで入力すると、適応されるCSSが表示されるので、CSSの記述が楽になります。

https://tailwindcss.com/

Material-UI

Material-UIはReactのUIフレームワークです。
TailwindCSSと併用することで、CSSの記述を減らすことができます。
また、Material-UIのコンポーネントをTailwindCSSでカスタマイズできます。
私はあまりデザインセンスがないので、Material-UIを使っています。

https://material-ui.com/

Rome

RomeはJavaScriptのコードフォーマッターです。
Prettierと同じような機能を持っていますが、Rustで書かれているので、速いです。
また、ESLintのような機能も持っています。
めんどくさい設定をしなくても、コードの品質を保つことができます。
設定は、rome.jsonに記述します。
↓私の設定です。

{
    "formatter": {
        "enabled": true,
        "indentStyle": "tab",
        "lineWidth": 80,
        "ignore": [
            "node_modules",
            ".next"
        ],
        "formatWithErrors": true
    },
    "linter": {
        "enabled": true,
        "ignore": [
            "node_modules",
            ".next"
        ],
        "rules": {
            "recommended": true,
            "correctness": {
                "noUndeclaredVariables": "off",
                "noUnusedVariables": "off"
            },
            "style": {
                "noImplicitBoolean": "warn",
                "noNegationElse": "error",
                "useBlockStatements": "error",
                "useFragmentSyntax": "warn"
            },
            "nursery": {
                "noBannedTypes": "error",
                "noConstructorReturn": "error",
                "noDistractingElements": "warn",
                "noDuplicateObjectKeys": "error",
                "noEmptyInterface": "warn",
                "noExtraNonNullAssertion": "warn",
                "noNonNullAssertion": "error",
                "noRedundantUseStrict": "error",
                "noSetterReturn": "error",
                "noStringCaseMismatch": "error",
                "noVar": "error",
                "useConst": "warn",
                "noVoidTypeReturn": "error",
                "useCamelCase": "warn",
                "useDefaultSwitchClauseLast": "error",
                "useEnumInitializers": "error"
            }
        }
    }
}

https://rome.tools/

Zod

ZodはTypeScriptの型定義とバリデーションを行うライブラリです。

import { z } from "zod";

const schema = z.object({
  name: z.string(),
  age: z.number(),
  email: z.string().email(),
  password: z.string().min(8),
});

type User = z.infer<typeof schema>; // => { name: string; age: number; email: string; password: string; }

schema.parse({
  name: "John",
  age: 20,
  email: "hoge",
  password: "1234567",
}); // => ZodError: Invalid email address

https://zod.dev/

Recoil

RecoilはReactの状態管理ライブラリです。
Reactの開発をしているFacebookが作っています。
ReduxやMobXと比べて、状態管理が簡単になります。
利用方法は useState とほぼ同じです。

Counter.tsx(Recoil)

import { atom, useRecoilState } from "recoil";

const countState = atom({
  key: "countState",
  default: 0,
});

const Counter = () => {
  const [count, setCount] = useRecoilState(countState);

  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  );
};

https://recoiljs.org/

Jest

JestはJavaScriptのテストフレームワークです。
テストコードを書くことで、コードの品質を保つことができます。
宣言的な記述ができるので、テストコードを書くのは簡単です。

import { sum } from "./sum";

test("adds 1 + 2 to equal 3", () => {
  expect(sum(1, 2)).toBe(3);
});

https://jestjs.io/

GitHub Actions

GitHub Actionsは、GitHubのリポジトリに対して、CI/CDを実行するためのサービスです。
テストやデプロイを自動化できます。
コードを書くことに最大限集中できるので、開発効率が上がります。

https://docs.github.com/ja/actions

Notion

ドキュメントは全てNotionに書きました。
非エンジニアの方も操作が簡単なので、ドキュメントを書くのに適しています。
タスク管理もできるので、チーム開発にも使えます。
(現在は私しかエンジニアいませんけどね😢)

https://www.notion.so/

頼もしいサポーター

GitHub Copilot

GitHub Copilotは、コードを自動生成してくれるサービスです。
開発効率が爆あがりします。
最近突然死ぬことがあるので、そこだけ注意してください。

https://copilot.github.com/

ChatGPT

ChatGPTは、AIアシスタントです。
質問に答えてくれたり、コードを自動生成してくれたり、コードレビューもしてくれます。
そのうち有料になると思いますが、今は無料で使えます。

https://chat.openai.com/

まとめ

選定したライブラリは、私が使いやすいと思ったものを選んだので、他にもいろいろなライブラリがあります。
プロジェクトに合わせて、選定してください。
P.S. 体がもう1つ欲しいです。

参考

• Next.js
• Supabase
• TailwindCSS
• Material-UI
• Rome
• Zod
• Recoil
• Jest
• GitHub Actions
• Notion
• GitHub Copilot
• ChatGPT