Zenn
🕌

メモアプリみたいの作ってみたいんだけどGUIが全然わかんないからTwitterで聞いてみたらQiitaの記事を教えてもらったので試してみる2

2022/03/24に公開
メモアプリ
tech

前回の
https://zenn.dev/momoandbanana/articles/8108c0f4b48e49
続き。

記事を読むと、

「github に練習用のコードも全部置いてます。１機能づつプルリクエスクを作ってるので、順に追っていくとわかりやすいと思います。」

ってあって、STEP1は、index.htmlだけのようです。この状態のプログラムを取り出してみたいのですが、githubの使い方がわかりません💦しかたがないので、git cloneして自分のPC上でログを見てみます。


Open With Github Desktop


git clone on github-desktop

そしてそれをVisual Studio Codeで開きます。VSCodeには拡張機能「Git Graph」をインストールしてあるので、このようにグラフ表示でgitのcommitログを確認することができます。


git graph

見つけました。下から２つ目のところに「feat: [1st step] React template without any build」というコミットがあります。まずはこれをチェックアウトしましょう。

momoandbanana@desktop MINGW64 ~/Documents/GitHub/stayhome-board-minimum (master)
$ git checkout 38ed80e1282c234e467058cf3792f0a4a5c12a18
error: Your local changes to the following files would be overwritten by checkout:
        .gitignore
        README.md
        index.html
        socket-io-version/README.md
        socket-io-version/index.html
        socket-io-version/index.js
        socket-io-version/package.json
        socket-io-version/yarn.lock
Please commit your changes or stash them before you switch branches.
Aborting

momoandbanana@desktop MINGW64 ~/Documents/GitHub/stayhome-board-minimum (master)
$

あれ、エラーになっちゃいました。cloneした段階で未コミットの変更ファイルがあるんですね。（っていうか、こんな未コミットのものをリポジトリに格納できるんですね。どうやるんだろう？）一度stashしてからチェックアウトしましょう。


checkoutしました

チェックアウトしているコミットが赤い矢印のとこです。左側に表示されているのがこのコミットに存在しているファイルですが、index.htmlとREADME.mdの２つだけになっているのがわかります。ちゃんとチェックアウトできているようです。index.htmlを見てみましょう。


index.htmlを開いたところ

これがまさにQiitaの記事にある内容ですね。ブラウザでこのindex.htmlを開いてみましょう。


index.htmlをブラウザで開いたところ

chromeで開いてみました。記事と同じですね。（当たり前ですけど）

では、次はこのindex.htmlの中を読んでいきます。

～今日はここまで～

Discussion