潤羽るしあ のファンサイト

我らが推し、ホロライブ 3 期生潤羽るしあのファンサイトの Github になります。
当サイトの目的は 潤羽るしあ を多岐にわたって知ってもらいたい、日頃の感謝を伝えたいをモットーにしております。

当サイトはカバー株式会社のガイドラインに従い趣味の範疇での製作を行っています。

バグの修正、連絡や機能の追加など、PR など大歓迎ですので常識の範囲内かつ、よりよくするためにご要望のほういただけるとすごく嬉しいです。

使用技術/環境

※Next.js を用いた開発を行っているためNode.jsの環境が必須です。

使用エディタ: VSCode

フロントエンド技術

パッケージマネージャ: yarn

• TypeScript
• Next.js
• sass/scss
• tailwind
• storybook
• jest

インフラ構成図

Getting Started

パッケージの導入

yarn

開発環境の立ち上げ

yarn dev

開発環境のビルド

yarn build

Storybook の立ち上げ

yarn storybook

Storybook のビルド

yarn build-storybook

Eslint

yarn lint

Prettier

yarn prettier

Stylelint

yarn stylelint
or
yarn stylelint:fix

jest を用いたテスト

yarn test

Cypress を用いたテスト
※ dev 環境を立ち上げてから以下コマンドを打ってください。

yarn cy:run

開発環境の確認方法

yarn dev

上記のコマンドを実行することで http://localhost:3000 にアプリケーションが立ち上がりますのでアクセスして確認することができます。
最初に開かれるhttp://localhost:3000 では pages/index.tsxが割り振られています。

開発環境ではホットリロードが働くため内容を変更することで修正箇所のプレビューが即座に可能です。
VSCode では ESint、Prettier のアドオンを導入しているとプロジェクト内のそれぞれの設定が働き、自動でコードのフォーマットをかけてくれます。

Learn More

chromatic（Storybook、ビジュアルリグレッションテスト）
コンポーネントショーケース

デプロイリンク
潤羽るしあファンサイト

参考

stylelint 設定
IntersectionObserver の型定義参考
IntersectionObserver の動き参考 PWA 動画フォールバック