![見出し画像](https://assets.st-note.com/production/uploads/images/166716942/rectangle_large_type_2_1732dd44f73ff86e6f579f5c5f59014a.png?width=1200)
StackBlitzのセットアップ方法。はじめてのAngular超入門。実践で学ぶ本格Webアプリ開発【TypeScript】
▶︎完全版はこちら
▶︎ダイジェスト動画はこちら
プロジェクトの保存方法
StackBlitzで直接コードを編集可能ですが、ブラウザを閉じると変更が失われる可能性があります。
自分の環境に保存し、後から再利用できる状態を作るにはプロジェクトを「フォーク」する必要があります。
フォークの手順
プロジェクト画面の左上にある「フォーク」ボタンをクリック。
フォークにはログインが必要。GitHubアカウントを利用すると簡単にログイン可能。
GitHubアカウントがない場合は、公式ページからアカウントを作成。
GitHubアカウントの作成方法
GitHub公式サイトで「Sign Up」をクリック。
メールアドレスとパスワードを入力し、アカウントをセットアップ。
ゲームのようなインターフェースで、直感的に操作が可能。
フォーク後の管理
フォークが完了すると、プロジェクト名を自由に変更可能。
過去に作成したプロジェクトは左上の「ダッシュボード」から一覧で確認できる。
プロジェクトを選択すれば、いつでも再編集・復元可能。
プロジェクトの共有
「シェア」ボタンを使えば、プロジェクトのURLを共有可能。
他の人も指定された状態のプロジェクトを閲覧できる。
リアルタイムビルドとエディター
編集内容はリアルタイムで右側に表示されるビルド結果に反映される。
ビルド画面を広く表示したい場合は「Open in New Tab」ボタンを利用可能。
保存はWindowsでは「Ctrl + S」、Macでは「Command + S」で行う。保存後、プロジェクトは次回も同じ状態で開くことができる。
トラブル対処
URLを忘れた場合も、ダッシュボードからプロジェクトを復元可能。
ビルド結果が見えない場合は「Open」ボタンで復元可能。
以上の手順で、StackBlitzを使った効率的な開発環境を整えられます。次はAngular開発に進みましょう!
![](https://assets.st-note.com/img/1735609051-4a36DFVUbroAYTSJ8gvKlQ0M.png?width=1200)
次の記事はこちら▽
いいなと思ったら応援しよう!
![浜田篤【Udemyベストセラー講師】](https://assets.st-note.com/production/uploads/images/163458721/profile_37708c3d0b630987e3169e93647061c2.jpg?width=600&crop=1:1,smart)