StackBlitzでWEB開発の一連の手順

date
slug
stackblitz-workflow
status
Published
tags
2023
Workflow
summary
任意のGithubレポジトリと連携させてソースコードを編集し、反映させるまでの一連の手順をまとめています
type
Post
💡
下準備: あらかじめ先生から共同編集の権限をもらっておく
先生に自分のgithubのユーザー名を伝えて、招待メールをもらいましょう。招待メールを承認することで、レポジトリを共同編集する権限がアカウントに付与されます。

1/ エディタの初期設定

pipinosuke/advroomと入力し、Enterでエディタが開く。
Stackblitz Codeflowは通常のStackBlitzと違い、ファイルのアップロードやGitの操作が可能になっている

初期設定

左下の歯車→Settingで設定を開ける
notion image
auto saveと検索し、画像のように変更しておく
notion image

astro extensionsのインストール

左下の歯車→Extensionsで設定を開ける。
Astroと検索し、該当のExtensionをインストール
この画像にはないが、「install」ってボタンが表示されてるはずなのでそれを押す
この画像にはないが、「install」ってボタンが表示されてるはずなのでそれを押す

2/ 新しくブランチを切る

作業途中のブランチから作業を再開したい場合はこちらを参照
以下のコマンドで打つ
参照するブランチをdevelopに切り替える(現在はデフォルトでdevelopを参照している)。
次のGitコマンドを打ち込んで、新しくブランチを切る。
ブランチの名前はわかりやすい名前にする(日本語不可)
で新しく制作したブランチを確認できます。
💡
ブランチの役割
新しいブランチは基本的にdevelopから切る。
  • main: 本番環境(このブランチが実際にサイトとして公開されている。)
  • develop: 開発環境(万一バグっても大丈夫な環境)

3/ エディタでソースコードに対して変更を施す

例として今回はサイト上で登録されている著者のデータを追加してみる。著者データに関するデータは、src/data/authors.tsを編集することでいじれる。
このように著書のデータがauthorsという定数として定義されている。さらに著書データのオブジェクトの配列になっていることがわかる。従って、こんな感じで追加できる。
全てを解説すると膨大な量になるので、ここでは割愛。
画像データを追加するには?
ファイルツリー上で右クリック→Uploadで画像データを追加できる。今回authorのプロフィール画像はsrc/assets/authorsに格納されている。 同じ場所に配置する。
notion image

4/ git commitで、施した変更を保存する

編集が完了したら、commitの前に、まずcommit対象に含めたいファイルをステージングをする必要がある。順を追って手順を示す。
  • git add(ステージング)
始めに、現在どのファイルに変更が及ぼされているか確認する。
どのファイルもステージングされてない状態
どのファイルもステージングされてない状態
続いてcommit対象のファイルをgit add(ステージング)する。やり方はお好みで。
個別にファイルをステージングする場合
 
全てのファイルをステージングする場合
💡
pnpm-lock.yamlはコミット対象に含めないようにする
ステージングできたら、一旦状況を確認しておく。
ステージングされたファイルは緑表示される
ステージングされたファイルは緑表示される
  • git commit(コミット)
commit対象に含めたいファイルをステージングしたら、以下のコマンドでコミットを行う。
尚、コミットメッセージは作業内容がわかるように名付けるのが望ましい
コミットができたら
でログを表示することで、コミットされているか確認できる。ログ表示のモードはqで解除できる。

5/ git pushで、施した変更を実際のサイトに反映させる

git push(アップロード)
以下のコマンドで、ブランチ上で行った変更をgithubにアップロードする
今回の例では add_my_author_dataというbranchをpushした。pushが完了すると、レポジトリページ上でそのbranchやcommitが確認できる。
notion image
pull request の作成
最後にpull requestを作成する。このpull request(以下、”プルリク”)が僕に承認されれれば、あなたが行った作業が晴れて実際のソースコードに反映されることになる。
アクセス。
ボタンから pull requestを作成可能
ボタンから pull requestを作成可能
base positoryはpipinosuke/clarkbaseはdevelopに指定すること。
この場合はadd_my_author_dataで行った変更がdevelopへと取り込まれることになる。
この場合はadd_my_author_dataで行った変更がdevelopへと取り込まれることになる。
プルリクエストにおいてコメントすべき内容があれば書き加える。
notion image
Create pull requestをクリックで作成完了!!プルリクが無事承認されるのを待とう。
💡
プルリクに不備があった場合について
プルリク承認されなかった時のコメントのやり取りを自作自演で再現
プルリク承認されなかった時のコメントのやり取りを自作自演で再現
プルリクでは元々のコードとあなたが変更を加えた箇所との差分を確認することができます。
加えた変更に不備があればレビュアーから指摘が入ります。ブランチを修正して再度pushしましょう。

6/ 一連のプロセスについて

上記のプロセスは、実際のソフトウェア開発の現場でも用いられます
  • ブランチ名やコミットメッセージがわかりやすいこと
  • コメントで考えを簡潔に伝えられること
こういった要素はソースコードとは直接関係ありませんが、チーム内のコミュニケーションを円滑にしてくれます。従って、テキストベースでのコミュ力みたいなものは意外と重宝されたりします。

© Yusuke Sugino 2023 - 2024