全部一度は目を通しておいて欲しいです。あとは困った時などに参照してください。
セットアップとかはREADME.mdに書いてあるのでそちらを参照してください。
基本は Issue の中から自分のタスクを選ぶ or 任されて、そのタスクをこなすという感じです。できたら (というか途中でも Draft という形で) PR を出してもらって、それを:cp20:とかが Review して、適当に直した上でマージするという感じです。
そしてスタイリング (見た目をいい感じにすること) はやらなくても良いです。 (やっても良いです) とりあえず動くものができれば CSS はなんとかします。もちろん動く上で必要な CSS もあるのでその辺りはうまくやってほしいな～と思います。(スタイリングに限らずですが) 分からなかったら相談に乗ります。
1 日目は:cp20:があまり参加できないんですが、オンラインでは質問に答えられなくはないぐらいな感じで、休憩もあるので頑張ってコミットできるようにします。あとは 1 日目の進捗が芳しくなかったら責任を取って 1 日目夜に追い込みます。
サーバーと同時開発する関係でサーバー側が出来上がってないままフロント側を開発する必要があります。そのためとりあえずサーバーの API はモック (API の中身はないけどそれっぽいものが返ってくるやつ) を使って開発します。なので API を投げるときは @/lib/getApiBaseUrlからgetApiBaseUrl()を import してきて、`${getApiBaseUrl()}/path/to/api` のように使います。例えば/users/meエンドポイントを利用するので `${getApiBaseUrl()}/users/me` を叩くようにします。
推奨ライブラリはインストールしてもらえると嬉しいです。何か困ったことがあったらすぐに言ってください。
/から始まるパスはルートディレクトリからのパスを差します。例えば/src/componentsはsrc/componentsと同じです。
@/から始まるパスはsrcディレクトリからのパスを差します。例えば@/componentsはsrc/componentsと同じです。こちらは良く使うので覚えておいてください。
.
├── public
└── src
├── components
├── hooks
├── lib
├── pages
└── stylesコンポーネントを置くディレクトリです。コンポーネントはsrc/components以下に置くようにしてください。src/pages以下に置くとルーティングがうまくいかなくなるので注意してください。
小さいコンポーネントはファイルを直接書いてもいいですが、大きいコンポーネントはディレクトリを作ってその中にファイルを置くようにしてください。例えば、src/components/Headerというディレクトリを作ってその中のindex.tsxというファイルから本体のコンポーネントを export するようにします。さらにindex.tsxの中で、例えばsrc/components/UserAvatar.tsxなどを import して使うなどすると 1 つのコンポーネントが大きくなり過ぎないようにできます。
カスタムフック (useから始まる関数) を置くところです。カスタムフックとはコンポーネントのロジック部分だけ切り出してきたもので、一部の処理を共通化したり、コンポーネントの中身をすっきりさせるために使います。
コンポーネントとは関わらないロジックを書くところです。あんまり使う機会はないかもしれません。
ルーティングを参照してください。
スタイルを書くところです。基本はEmotionを使って CSS-in-JS 方式でスタイリングしていこうと思っているので使うことはないと思います。
pnpm は npm と同じくパッケージマネージャーです。npm と同じような機能を備えているのですが、コマンドが少し違うので対応表を書いておきます。
| npm | pnpm |
|---|---|
npm install / npm i |
pnpm install / pnpm i |
npm install -D / npm i -D |
pnpm install -D / pnpm i -D |
npm run dev |
pnpm dev |
npm run build |
pnpm build |
npm start |
pnpm start |
src/pages以下にあるファイルは、そのファイル名がそのままページ (URL) になります。例えば、src/pages/hoge.tsxは/hogeになり、src/pages/hoge/fuga.tsxは/hoge/fugaになります。 (例外: src/pages/index.tsxは/になる) なのでsrc/pages以下にはページのコンポーネントのみを置いて、他のコンポーネントはsrc/components以下などに置かなければいけません。
さらにサーバー側の API は/src/pages/api以下にファイルを作るということになっています。ただサーバー側は少し特殊なのでたぶん今回は使わないと思います。 (モックはたぶん:cp20:が書きます)
_app.tsxと_document.tsxは何？と思うかもしれませんが、とりあえずは無視して大丈夫です。いじることはまずないと思います。
Next.js ではいい感じに最適化するために**<a>タグを使わずに<Link>コンポーネントを使う**ことが強く推奨されています。<Link>コンポーネントはnext/linkからインポートできます。
publicディレクトリはそのまま/以下にルーティングされます。例えば、public/hoge.pngは/hoge.pngとしてアクセスできます。画像などを置くことになると思います。
Next.js のルーティングに対応して (pnpm devを実行している間は) 自動的に書き変わります。なんでこんなものを生成しているのかというと、typo を防ぐためです。
リンクなどを張りたい時にhref属性を設定すると思いますが、その時には/hogeと書くのではなく、@/lib/$path.tsからPagesPathを import してきて、PagesPath.hoge.$url()のように書いてください。(typo してると怒られます)
いい感じのコンポーネントを提供してくれてるライブラリです。
まずMantine のページに行って、左のナビゲーションバーの所からお目当てのコンポーネントを探します。Ctrl+Kで検索画面を出すこともできます。
お目当てのコンポーネントが見つかったら、そのページにいい感じにコードとかが書いてあると思うので、それをいい感じにコピーしたり調整したりして使ってください。
例. <Button>コンポーネントの Usage の例
スタイリング (CSS を書くため) のライブラリです。
次の例のように、css関数を使ってスタイルを書くことができます。 (CSS-in-JS 方式) 中身は普通の CSS とほぼ同じですが、少し違う点があります。&は自分自身を表し、例えば&:hoverと書くことで、その要素にマウスが乗った時のスタイルを指定できます。また、@mediaを使って、画面サイズによってスタイルを変えることもできます。その他に、& divと指定することで、その要素の子孫のdivにスタイルを適用することもできます。
import { css } from '@emotion/react';
const SampleComponent: FC = () => {
return (
<div
css={css`
color: red;
`}
>
こんにちは
</div>
);
};グローバルな状態 (全てのコンポーネントで共通のuseStateみたいなもの) を管理するためのライブラリです。
次のようにまずatomを作成します。
// 普通に初期化
const textAtom = atom('hello');
// 型を指定して初期化
const complexTypeAtom = atom<SomeComplexType>({ ... });そのあと、useAtom()を使って、そのatomを使うことができます。useAtom()は[state, setState]のように、useState()と同じように使うことができます。
const SampleComponent: FC = () => {
const [text, setText] = useAtom(textAtom);
return (
<div>
<input value={text} onChange={(e) => setText(e.target.value)} />
</div>
);
};これだけでuseAtom()の状態は他のコンポーネントなどと共有されます。 (グローバルに補完される)
アイコンを提供してくれてるライブラリです。
次のようにアイコンを import して使うことができます。アイコンはcolorプロパティで色、sizeプロパティでサイズを指定することができます。使えるアイコンの一覧はTabler Icons の公式ページを確認してください。
import { Icon123 } from '@tabler/icons-react';
const SampleComponent: FC = () => {
return (
<div>
<Icon123 color="red" size={32} />
</div>
);
};データを取得するためのライブラリです。
以下は公式のサンプルから拝借したものです。
import useSWR from 'swr';
function Profile() {
const { data, error, isLoading } = useSWR('/api/user', fetcher);
if (error) return <div>failed to load</div>;
if (isLoading) return <div>loading...</div>;
return <div>hello {data.name}!</div>;
}