My Profile プログラミング学習歴②ヶ月目のアカウントです！ プログラミングスクールで学んだ内容や自分が躓いた箇所等のアウトプットの為に発信しています。 また、プログラミング初学者の方にわかりやすく、簡潔にまとめて情報共有できればと考えています。 もし、投稿した記事の中に誤り等ございましたら、コメント欄でご教授いただけると幸いです。　 対象者 一度実施した変更箇所をもとに戻したい方 目的 変更箇所をもとに戻す 実際の手順と実例 1.git restore . Terminalで下記コマンドを実行する（ドットが大事） 正確にrestoreを解説すると「指定したコミットのファイルをワーキングツリーに復元してくれる」コマンドです カレントディレクトリでもとに戻せます $ git restore . 2.$ git restore --source [コミット識別子] [ファイル名] これだと指定コミット識別番号の状態にできます。 $ git restore --source [コミット識別子] [ファイル名] $ git checkout [コミット識別子] [ファイル名] 3.ちなみに、、、、 関係ないけどファイル変更差分が見れる下記コマンドすごく使える $ git diff 参照 第8話 switchとrestoreを使ってみよう 【連載】マンガでわかるGit ～コマンド編～ 第9話 git diff で差分を確認！【連載】マンガでわかるGit ～コマンド編～

はじめに macbookでプログラミングを学習していた際、 デフォルトの表示だと、gitのブランチ名がプロンプトに表示されなかったり、 コマンドやブランチ名の自動補完機能がなかったので使い辛かった思い出がありました。そこで備忘録としてこの記事を作成することにしました。この記事が誰かのお役に立てば幸いです。 環境 MacBook Air (Retina, 2018) Homebrewをインストール のちに使うwgetコマンドをインストールするため、 最初にHomebrewをインストールする。 Homebrewのページに飛び、インストールコマンドをコピーし、 ターミナル上で実行する。 上でコピーしたものをterminal画面上で実行 $ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" 途中でパスワードの入力を求められるため、適宜ご自身のパスワードを入力 「Install successful!」と表示されたら、ターミナル上で terminal画面 $ brew -v もしくは $ brew help を実行して、Homebrewのバージョンやヘルプ一覧が表示されていれば、 インストール完了です。 こちらの記事を参考にさせていただきました↓ wgetコマンドをインストール wgetコマンドとは？ wgetは、ソースコードやバイナリのダウンロードだけでなく、Webサイト全体あるいは特定の階層を一括取得できるコマンドのこと wgetコマンドの構文 $ wget [options] [url] [options]：ダウンロードプロセスをカスタマイズするために利用できる様々なオプションを設定可能 [url]：ここで指定したURLからファイルをダウンロードすることができる。 詳しい使い方等については、下記記事に色々と載っており、とても参考になりました 「wget」コマンド――URLを指定してファイルをダウンロードする 話が若干それましたが、 wgetコマンドを利用するためにまずターミナルを起動した後、 terminal $ brew install wget を実行. インストールが完了したら terminal $ wget -h を実行し、wgetのオプション一覧等がズラーっと表示されていれば、インストール完了。 git-completion.bashを導入する git-completion.bashとは？ ターミナル内でgitコマンドを補完してくれるようになる補完スクリプト 今回はこれを読み込む 参考：git-completion.bash 導入方法 ターミナルで terminal $ wget https://raw.githubusercontent.com/git/git/master/contrib/completion/git-completion.bash -O ~/.git-completion.bash $ chmod a+x ~/.git-completion.bash $ echo "source ~/.git-completion.bash" >> ~/.bashrc $ source ~/.bashrc を順番に実行していく これにより、下記のようになる。 terminal [例]「git che」通した状態でtabキーを押すと、 $ git che checkout cherry cherry-pick と、候補が表示されるようになる。 [例] 「git chec」でtabキーを押すと、 $ git checkout と表示される。 git-prompt.shを導入する git-prompt.shとは？ プロンプトにgitに関する各種追加情報を表示できるようにするスクリプトのこと。 参考：git-prompt.sh そもそもプロンプトとは プロンプトとは、terminal内でデフォルトで表示されている、 「〇〇〇macbook:(フォルダ名 もしくは ~) 〇〇〇＄」の部分のこと 左側にあるmacbookの表示や、自分のユーザー名など いらない情報が含まれていることがあるので、この部分をこのgit-prompt.shを使って編集します。 導入方法 導入方法は先ほどのgit-completion.bashと同じように、 $ wget https://raw.githubusercontent.com/git/git/master/contrib/completion/git-prompt.sh -O ~/.git-prompt.sh $ chmod a+x ~/.git-prompt.sh $ echo "source ~/.git-prompt.sh" >> ~/.bashrc $ source ~/.bashrc を順番に実行していく。 完了したら、エディターを使って、~/.bashrcファイルを開き、中身を以下のように編集 ~/.bashrc source $HOME/.git-completion.bash source $HOME/.git-prompt.sh GIT_PS1_SHOWDIRTYSTATE=1 GIT_PS1_SHOWUPSTREAM=1 GIT_PS1_SHOWUNTRACKEDFILES= GIT_PS1_SHOWSTASHSTATE=1 export PS1='\[\033[1;32m\]\u\[\033[00m\]:\[\033[1;34m\]\w\[\033[1;31m\]$(__git_ps1)\[\033[00m\] \$ ' 最後のexportの中身によって、表示状態を変更することができるます。 文字の太さや背景色、文字の色など、より自分好みにカスタマイズしたい場合は、下記記事にがとても参考になりました。 これで今回のカスタマイズによって、ブランチ名も表示できるようになったと思います。 最後に これで導入は完了ですが、このままだとターミナルを再起動したときに、プロンプトがまたデフォルトの状態に戻ってしまうので、 エディターで~/.bash_profileを開き、下記を追記してください。 ~/.bash_profile if [ -f ~/.bashrc ]; then source ~/.bashrc fi そして、この設定を反映させるため $ source ~/.bashrc $ source ~/.bash_profile を入力。これにより、 再起動した時でもプロンプトが設定した表示になったと思います。 参考

はじめに コードレビュー依頼時に「ローカルの Git アカウントと GitHub のユーザー情報が一致していなそうなので、合わせておきましょう！」とご指摘頂きました。 どうやって判断してるんだ？と思っていましたが、どうやらPRのcommit logにGitHub上で設定しているアイコンが表示されていれば一致している、されていなければ一致していないということのようです。 今まで全く気にしていませんでしたが、GitHub上へプッシュした際、commit logにアイコンが表示されてないと、別アカウントとして認識されているように見えてしまうので修正しておきたいと思います。 イメージ 結論 そもそもローカルのGitで名前とメールアドレスを設定してなかったので、そちらをGitHubのユーザー情報と同じものにすれば解決します。 手順 それでは早速ローカルのGitアカウントの設定をしていきましょう。 今回は全体のプロジェクトで、共通のユーザー名とメールアドレスを使用する前提で説明していきます。 ※リポジトリごとにも設定できます。その際は以下で紹介するコマンドの global を localに置き換えればOKです。 1.Gitのアカウント情報を確認 まずは現在の設定がどのようになっているかを確認しましょう。 # ユーザー名の確認 % git config --global user.name # メールアドレスの確認 % git config --global user.email 2. Gitアカウントの設定 以下コマンドを実行することで、~/.gitconfigファイルに設定を書き込むことができます。 ※gitconfigはGitの設定ファイルです。 # ユーザー名の確認 % git config --global user.name "name" # メールアドレスの確認 % git config --global user.email "email@example.com" 3. commit logの確認 以上で設定の変更が完了したため、適当にコミットしてGitHubへプッシュしてみましょう。 以下のようになっていれば、ユーザー情報を一致させることに成功しています。 おわりに 個人でやってると全然気にしませんが、チーム開発だと誰の変更かひと目で分かるため、ぜひ設定しておきたいですね。

ブランチ運用 Git Flow GitHub Flow コミットメッセージ issue 管理 GitHub 使うと PullRequest から issue のクローズができる コードレビュー google のエンジニアリングガイド lgtm OSS プロジェクト kubernetes ワークフローがまとめられている。 aws GitHub の Project を使用したタスク管理。何の機能が今後リリースされるのかなどが分かる。

準備 ブランチを作る > git checkout -b feature > git branch * feature main 適当なファイルを作成してコミットする > touch date.txt > date > date.txt > git add date.txt > git commit -m "add date.txt ログを確認する > git lol * 5c78969 (HEAD -> feature) add date.txt * 586cb56 (main) update mainブランチでブランチを進める > git checkout main > echo "Hello world v2" > main.txt > git commit -am "update" ログを確認 > git lol * 4e69dea (HEAD -> main) update | * 5c78969 (feature) add date.txt |/ * 586cb56 update featureのブランチを1つ進める > git checkout feature > date > date.txt > git commit -am "date update" ログを確認 > git lol * 886de2b (HEAD -> feature) date update * 5c78969 add date.txt | * 4e69dea (main) update |/ * 586cb56 update squshでコミットをまとめる featureでの2つのコミットを1つにまとめる > git rebase -i HEAD~2 エディタが立ち上がるので、squashするコミットを選択する。 pick 5c78969 add date.txt - pick 886de2b date update + s 886de2b date update # Rebase 586cb56..886de2b onto 586cb56 (2 commands) # # Commands: # p, pick <commit> = use commit # r, reword <commit> = use commit, but edit the commit message # e, edit <commit> = use commit, but stop for amending # s, squash <commit> = use commit, but meld into previous commit # f, fixup <commit> = like "squash", but discard this commit's log message # x, exec <command> = run command (the rest of the line) using shell # b, break = stop here (continue rebase later with 'git rebase --continue') # d, drop <commit> = remove commit # l, label <label> = label current HEAD with a name # t, reset <label> = reset HEAD to a label # m, merge [-C <commit> | -c <commit>] <label> [# <oneline>] # . create a merge commit using the original merge commit's # . message (or the oneline, if no original merge commit was # . specified). Use -c <commit> to reword the commit message. # # These lines can be re-ordered; they are executed from top to bottom. # # If you remove a line here THAT COMMIT WILL BE LOST. # # However, if you remove everything, the rebase will be aborted. # ログを確認する。 コミットが1つにまとまってhash値が変更されている。 > git lol * 12f2b31 (HEAD -> feature) date update | * 4e69dea (main) update |/ * 586cb56 update rebase mainブランチをfeatureブランチに取り込む > git rebase main ログを確認する。mainブランチの最新のコミットからfeatureが作られhash値も新しいものに変わった。 > git lol * e9b7465 (HEAD -> feature) date update * 4e69dea (main) update * 586cb56 update リモートブランチをrebaseで取り込む mainブランチのコミットを1つ進める > git switch main > echo "Hello world v3" > main.txt > git commit -am "update" > git push origin main ログを確認 > git lol * 25b1b5c (HEAD -> main, origin/main, origin/HEAD) update | * e9b7465 (feature) date update |/ * 4e69dea update * 586cb56 update リモートのmainブランチをrebaseして取り込む > git switch feature > git pull --rebase origin main ログを確認する。 git rebase mainと同様にfeatureブランチはmainブランチから続くようにコミット履歴が改変された。 > git lol * ebef349 (HEAD -> feature) date update * 25b1b5c (origin/main, origin/HEAD, main) update * 4e69dea update * 586cb56 update

SvelteでWebサイトを作っているときに、Modalを表示したいなと思ったので調べてみた。 イメージとしては、ReactのcreatePortalのような感じ。 modal.svelteを、メインのApp.svelteとは、別のHTMLElementで作成して、表示したい。 使ったもの ●　svelte-portal 上記のComponentを自身のプロジェクトにインストールして使用した。 作成したコード modal.svelte <script> import Portal from 'svelte-portal'; </script> <Portal target="#rootModal"> <div class='Modal'> <slot></slot> </div> </Portal> <style> .Modal{ position:absolute; top:0; left:0; display:flex; justify-content:center; align-items: center; height:100%; width:100%; background-color:rgba(0,0,0,.5); } </style> インストールしたsvelte-portalから、Portalコンポーネントを使用します。target="指定したいHTMLElement"になるので、htmlファイルにあるmodal用のidを指定します。 作成したModal 感想 Reactをかじり、Vueをかじった私からしても、svelteはとても使いやすいと実感している。でも、日本語のドキュメントが少ないので、調べたものを地道にまとめていきたいと思う。がんばるぞ。。。 参考 svelte練習用のWebサイトとして、やっすんさんのReact入門を参考にsvelteで再構築しています。 　React入門 未経験から1週間でReactをマスターする #01. プロジェクトの作成と立ち上げ