simple-weather

概要

Next.jsでRSCを使用して作った天気予報を表示するWebアプリで、1週間の期限を決めて画面設計から実装、デプロイまでを行いました。

このWebアプリでは検索フォームに入力した地域名や経緯度の天気予報を取得し、今日から2日後までの予報を表示します。 ホーム画面ではアクセス元のIPアドレスから地域情報を取得し、その地域の天気予報ページへのリンクも表示されます。 また、レスポンシブデザインを意識しているため、モバイル端末でも快適に閲覧できます。

検索フォーム

時間ごとの天気情報

使用した技術

• TypeScript
• Next.js
• Tailwind CSS
• PlayWright

実装の詳細

ts
export const Routes = {
    weatherSummary: (params: WeatherSummaryParams) => {
        return `/weather/${params.locationId}`;
    },
    // ...
}

export const ApiRoutes = {
    locationSearch: (params: LocationSearchParams) => {
        const searchParams = new URLSearchParams(params);
        return `/location-search?${searchParams.toString()}`;
    }
}

ts
// app/weather/[locationId]/schema.ts

import { z } from "zod";

export const WeatherSummaryParamsSchema = z
  .object({
    /** 地域検索の結果得られたID */
    locationId: z.string().min(1),
  })
  .strict();

export type WeatherSummaryParams =
    z.infer<typeof WeatherSummaryParamsSchema>;

tsx
// app/weather/[locationId]/page.tsx

export default async function Page({ params }: Props) {
    const { locationId } = 
        WeatherSummaryParamsSchema.parse(await params);

    // ...
}

tsx
function Page1() {
    return (
        <Layout header={<Page1Header />}>
            <Page1Content>
        </Layout>
    );
}

ts
text('テスト', async ({page, next}) => {
    next.onFetch((req) => {
        if (req.url === ApiUrl) {
            return new Response(JSON.stringify({/* ... */}));
        }
        return 'abort';
    });
})

学び

このWebアプリではスタイリングの技術をCSS Modules -> Panda CSS -> Tailwind CSSと切り替えてきたのですが、 開発生産性の点でいうとTailwind CSSが一番良いと思いました。

CSS Modulesは生のCSSを書けて腐りにくいというメリットはあると思うのですが、スタイルを確認するために別ファイルを開くという手間が面倒になりやすい、命名が難しいと感じました。 現代のHTML/CSSは、両者を切り離せるという考えはあまり適用できなくなっていると思います。例えばFlexなどはスタイルを変更するためにdivを追加するなどHTMLの構造を変更する必要が出てきます。 なのでスタイルを確認したいときや修正したいときには結局HTMLとCSSの両方を見なければいけず、ファイルを行き来するのが面倒でした。 また、スタイルをつけたい要素にはクラスをつけるのが一般的だと思うのですが、クラスの命名に時間がかかっていました。

Panda CSSではJSXとスタイル情報を一緒に見たい、命名を減らしたいという考えからインラインスタイルの記法を選択したのですが、行あたりのスタイルの情報量が少なく見通しが悪くなりやすいと感じました。 例えば以下はPanda CSSのplaygroundにあるサンプルコードなのですが、ほぼ1行に1つのプロパティを設定しています。

tsx
import { css } from 'styled-system/css';
import { center } from 'styled-system/patterns';

export const App = () => {
  return (
    <div className={center({ h: 'full' })}>
      <div
        className={css({
          display: 'flex',
          flexDirection: 'column',
          fontWeight: 'semibold',
          color: 'yellow.300',
          textAlign: 'center',
          textStyle: '4xl',
        })}
      >
        <span>🐼</span>
        <span>Hello from Panda</span>
      </div>
    </div>
  );
};

コンポーネントのコード量が少ない場合には見通しの悪さは感じないとは思うのですが、コンポーネントが大きくなってくるとスタイル情報が占める画面の割合が大きく、スタイル以外のコードが探しにくくなります。コンポーネントを分割することで解決できますが、僕は大体のケースで「ロジックが混ざっている」「再利用したい」という理由以外でコンポーネントを分割するのは逆にコードの変更が大変になると考えているので、あまりUIの都合でコンポーネントを分割したくなく、辛かったです。

Tailwind CSSには上記の問題が無く、書いていて快適だと感じました。 ドキュメントの構造とスタイルの情報が分離されていないため別のファイルに移動する必要はないですし、命名の機会も減り、1行に複数のスタイル情報を含めることができます。 よくTailwind CSSは見通しが悪くなるというデメリットがあると言われています。確かに一行に複数のスタイル情報が書かれていると、スタイルの情報に関心があるときには読んだり変更するのが少し面倒だとは思います。一方でドキュメント構造とスタイルを分離させないという手法を取る場合には、1行に1つのプロパティを指定する方法だとスタイルで他の情報の見通しが悪くなってしまいます。 僕は1行に1プロパティのほうがコードを触るのが辛いと感じたので、Tailwind CSSが一番快適にかけると感じました。

スタイリング以外だと、期限が決まっている開発ということもあって、自分がどの作業に時間がかかっているのかを把握することができました。 僕はUI関連とリファクタリングの作業にそれぞれ3割ほどの時間をかけていました。 UIのデザインに特に時間がかかっていると感じており、いい感じのUIをはやく考えるためにはもっとデザインの経験を積む必要があると感じました。 また、僕は最初に汚いコードを書いたあとにリファクタリングをするという方法でコードを書くことが多いのですが、ある程度は考えてから実装したほうが効率的だと感じたので、試してみたいです。