この記事の最終更新日: 2023年3月6日
Node.jsのインストール
まず、storybookを使用するにはNode.jsが必要です。Node.jsがインストールされていない場合は、公式ウェブサイトからダウンロードしてインストールします。
Storybookのインストール
Node.jsがインストールされたら、ターミナルまたはコマンドプロンプトを開いて、以下のコマンドを入力します。
npx sb initこれにより、Storybookの初期設定が行われます。
Storybookの起動
Storybookの初期設定が完了したら、以下のコマンドを使用してStorybookを起動します。
npm run storybookこれにより、Storybookの開発サーバーが起動し、ブラウザでStorybookのUIが表示されます。
Gitリポジトリの作成
次に、gitリポジトリを作成します。プロジェクトのルートディレクトリに移動し、以下のコマンドを実行します。
git initこれにより、現在のディレクトリがgitリポジトリになります。
.gitignoreファイルの作成
次に、gitの管理から除外するファイルを指定するために、.gitignoreファイルを作成します。プロジェクトのルートディレクトリに移動し、以下のコマンドを実行します。
touch .gitignoreそして、.gitignoreファイルに除外するファイルやディレクトリを指定します。例えば、node_modulesディレクトリを除外する場合は、以下のように記述します。
node_modules/Gitの初期コミット
gitリポジトリが作成され、.gitignoreファイルが作成されたら、初期コミットを行います。プロジェクトのルートディレクトリに移動し、以下のコマンドを実行します。
git add .
git commit -m "Initial commit"これにより、現在のディレクトリ以下の全ての変更がステージングされ、初期コミットが行われます。
GitHubへのリモートリポジトリの作成
最後に、GitHubにリモートリポジトリを作成します。GitHubにログインし、新しいリポジトリを作成します。そして、以下のコマンドを実行して、ローカルリポジトリとGitHubのリモートリポジトリを紐付けます。
git remote add origin <GitHubのリポジトリURL>
git push -u originGitのブランチ管理
Gitでは、複数のブランチを使用することで、複数の機能や修正を同時に進めることができます。ブランチを作成し、ブランチを切り替える方法を説明します。
ブランチの作成
新しい機能を追加する場合など、新しいブランチを作成することがあります。以下のコマンドで新しいブランチを作成します。
git branch <new_branch_name>ブランチの切り替え
ブランチを切り替えるには、以下のコマンドを使用します。
git checkout <branch_name>例えば、developブランチに切り替える場合は、以下のようにコマンドを入力します。
git checkout develop新しいブランチでの変更とコミット
新しいブランチでの変更を行い、変更をコミットします。以下のコマンドで変更をコミットします。
git add .
git commit -m "Add new feature"ブランチのマージ
新しい機能が完成したら、ブランチをマージします。マージするには、以下のコマンドを使用します。
git merge <branch_name>例えば、featureブランチをdevelopブランチにマージする場合は、以下のようにコマンドを入力します。
git checkout develop
git merge featureGitのコミットメッセージの書き方
Gitのコミットメッセージは、変更の内容や目的を明確に伝える必要があります。以下は、Gitのコミットメッセージの書き方の例です。
<type>: <subject>
<body>
<footer>
type：変更の種類を表すキーワード。以下のようなものがあります。feat：新しい機能の追加fix：バグの修正docs：ドキュメントの変更style：コードのスタイルの変更refactor：機能の変更なしでコードを修正test：テストの追加や修正chore：ビルドプロセスや補助ツールの変更
subject：変更の要約。1行で記述します。body：変更の詳細。複数行で記述することができます。footer：参考情報や関連するバグ番号などを記述します。
例えば、以下は、新しい機能を追加した場合のコミットメッセージの例です。
feat: add user registration form
Add a new user registration form to the application. The form allows users to create an account with their email address and password.
Closes #123
この例では、featというキーワードで新しい機能が追加されたことを示し、add user registration formという要約で新しいユーザー登録フォームが追加されたことを示しています。bodyには、フォームの詳細が複数行で記述されており、footerには関連するバグ番号が記述されています。
GitHubへのプッシュ
最後に、Gitで管理しているストーリーブックのプロジェクトをGitHubにプッシュする方法を説明します。
リモートリポジトリの追加
リモートリポジトリを追加するには、以下のコマンドを使用します。
git remote add origin <GitHub_repository_URL>プッシュする
リモートリポジトリにプッシュするには、以下のコマンドを使用します。
git push -u origin mainここで、mainはプッシュするブランチの名前です。ブランチ名が異なる場合は、適宜変更してください。
以上がストーリーブックのプロジェクトを作成と、Gitで管理するまでの解説になります。
大阪のエンジニアが書いているブログ。
コメント