「pubの方使えばいいんだっけ？」とかなってしまう自分用忘備録。 AWSのCodecommitも似たような方法で出来ると思います。 環境情報 Windows10 SourceTree 3.4.3 PuTTYgen Release 0.74 GitHubに登録する ここはさすがに略しますゾー https://github.com/ SSHキー GitHubのリポジトリのアクセス時に利用するため、 ここでコマンドを実行して作成しておきます。 キーの生成 # PCのユーザー名とか不要なら ssh-keygen -t rsa -b 4096 -C "" # メールアドレスも追加するなら ssh-keygen -t rsa -b 4096 -C "sample@example.com" パスフレーズはご自由に。 完了したらid_rsaとid_rsa.pubが作成されています。 GitHubへSSHキーを登録 SSH and GPG keys > New SSH Keyを選択。 id_rsa.pubのファイルの中身をコピペ。 タイトルはご自由に。 リポジトリの追加 右上のメニューからNew repositoryを選択。 いろいろ入力したら、Create repositoryでリポジトリ作成完了。 分からなければREADMEファイルと.gitignoreファイルぐらいは選択した方が良いかも。 リポジトリのチェックアウト とりあえずSourceTreeでも使ってチェックアウトします。 https://www.sourcetreeapp.com/download-archives .ppkファイルの作成 Import keyで秘密鍵（.pubでない方）を読み込み、 Save private keyで.ppkファイル形式で保存します。 チェックアウトの実行 リポジトリ画面のCode > SSHで、クローンする文字列を持ってきます。 元のパス/URLの箇所に先ほどの文字列を貼り付け。 SSHキーを要求されたら選択したりします。 無事読み込まれたらこんな感じ。 README.mdとか生成していたら、Initial Commitが見えるはず。 参考にした記事（主にキー生成回り https://dev.classmethod.jp/articles/ssh-keygen-tips/ https://qiita.com/suthio/items/2760e4cff0e185fe2db9

はじめに 前回の記事[1]でデプロイまでできたのですが、いまいち何をしているのか理解できませんでした。 そもそもReactは何をしているのか、どのような流れでデプロイするのかをまとめたいと思います。 Reactは何をしているのか Reactとはjavascriptのライブラリという風に書かれていることが多いと思います。 ただ、C言語の#includeライブラリ名.hみたいにインクルードすればいいのかいうと全く違います。 個人的にはHTMLを値として持てるjavascriptを使ってプログラムする仕組みだと思っています。 この表現は正確ではないと多くの人に言われそうですが、ライブラリだと思ってると認識のずれが生じます。 たぶんライブラリとかフレームワークの定義が統一されていないからこういうことになるんでしょう。 そもそもReactは単体では動きません。 大きく分けて4つのものに構成されています[2]。 javascript 当然javascriptの知識は知らないとだめです。nodejsとかの区別は一旦置いといていいです。 JSX これがReactの中枢を担っている気がします。 JSXはjavascriptの拡張言語です。 一番の違いはDOMを値として扱えることです。 定数などに代入したり、DOMそのものを返り値とすることが出来ます。 そこさえ押さえておけば仕組みは分かります。 Babel JSXはそうすると楽だよねって勝手に作った拡張言語です。 サーバーにアップして使う際にはjavascriptでないと当然動きません。 この拡張言語をjavascriptに変換するのがBabelです。 またjavascriptの標準的な書き方がES5からES6に移行しました。 この2つは割と大きな違いがあり、かつすべてのブラウザがES6に対応しているわけではありません。 下位互換性を持たせるためにすべてのjavascriptをES5にするべきです。 このES5への変換もBabelが担っています。 イメージとしては JSX→javascript→javascript(ES5) みたいな流れでしょうか。 逐次的に変換しているのか、まとめて変換しているのかは分かりませんがこんな理解でいいでしょう。 要するにJSXのjavascriptへの変換、javascript(ES5)への変換をしてくれるツールです。 webpack [2]より引用 webpackは、JavaScriptを依存関係を考慮してひとまとめにしてくれるツール  要するに散らかってるjavascriptをひとまとめにしてくれるというものです。  まとめたjavascriptをBabelに通します。 この4つによるプログラム生成の仕組みを前提として動いているのがReactです。 Reactを使うということはこれらの仕組みを使うということと同義です。 ライブラリとしてのReactはこれらの仕組みの上に成り立ったものです。 webエンジニアが直接触るのはJSXだけですが、ここら辺は理解しておきましょう。 デプロイまでの流れ 結局JSXプログラムを書いたらどうすればいいのでしょうか。 HTML/CSS/javascriptだったらサーバーに置いたらOKです。 Cなどのコンパイル言語ならコンパイルして実行すればいいです。 pythonなどのスクリプト言語なら書いてすぐ実行できます。 しかしJSXではjavascriptをまとめて変換しないといけません。 頭ではわかってもコマンド上はどうなるのでしょうか。 そのための環境構築コマンドとしてcreate-react-appコマンドがあります。 このコマンドによってwebpack、babel、reactライブラリなどがプロジェクトディレクトリ配下のnodemodulesディレクトリにダウンロードされます。 これらをNode.jsのアプリケーションとして動かす場合は yarn start とすればローカルで立ち上げることが出来ます[3]。 しかし、webサーバーにアップロードする場合は変換しなければなりません。 この変換の作業を一般的にはビルドと呼ばれています。 makefileとかでもビルドという言葉使っていた気がします。 ここでのビルドはソースコードを使える状態に変換するようなニュアンスでしょう。 コンパイルと言い換えてもあまり差し支えないように感じます。 もちろんCのコンパイルのようにコードをバイナリに変換してるわけではありません。 しかし、webサーバーで使える形式に変えているのです。 コマンド上では yarn build などでビルド出来ますが、実際にはjsonファイルのスクリプトが実行されています。 このファイルをwebサーバー上におけばデプロイ完了というわけです。 僕の場合は yarn deploy でビルドとデプロイ同時にやってくれます。 あとこのサイト[4]が割と流れを丁寧に説明してくれているので読んでおくことをお勧めします。 おわりに React複雑すぎる。 こんなの一発で分かる訳ないでしょうと思っちゃいますね。 JSXの考え自体は好きなんですが、この仕組み自体をもう少し抽象化して欲しいです。 参考文献 [1]:GitHub Pages で最小構成のreactのhelloworldをデプロイしてみた [2]:Reactをなんとなく理解できるようになるまでのステップ [3]:Reactの基本的な仕組みを理解しよう (1/4) [4]:reactの基本がnode.jsだと聞いたのですがどういうことですか？書き方が同じということですか？まだ全くの初心者なのでやさしく教えていただけると助かります。

説明 Gitコマンドの簡単な説明をしています。 Gitの初学者向けに使い方の説明とコマンドを忘れた時の手助けになればと書き始めました。 今回はコマンド一覧と簡単な説明だけで次回、以降詳しく説明していきます。 主なコマンド一覧＆簡単な説明 git init ->リポジトリの初期化 git status ->リポジトリの状態確認 git add ファイル名 ->ステージ領域へファイルを追加 git commit ->リポジトリの歴史を記録（詳細なコミットメッセージを記述できる） git commit -m "コミットメッセージを記述する" ->リポジトリの歴史を記録（1行のコミットメッセージを記述する） git commit -am "コミットメッセージを記述する" ->git addとgit commit -mを同時に行う git commit --amend ->コミットメッセージを修正 git log ->コミットログを確認できる git log --pretty=short ->コミットログのコミットメッセージの１行目のみを表示する git log --graph ->ブランチを資格的に確認できる git diff ->変更差分を確認できる git diff HEAD ->ワークツリーと最新のコミットの差分を確認できる git branch ->ブランチの一覧表示 git branch -a ->リモートリポジトリの一覧も表示してくれる git checkout ブランチ名 ->任意のブランチに切り替える git checkout -b ブランチ名 ->ブランチを作成し切り替える git checkout - ->1つ前のブランチに切り替える git merge --no-ff ->ブランチをマージする git reset --hard コミットID ->歴史を戻る git reflog ->リポジトリで行われた作業のログを確認できる git rebase -i ->歴史を押しつぶして改変する git remote add origin "clone sshのURL" ->リモートリポジトリを登録できる git push -u origin ->リモートリポジトリへ送信する git clone "clone sshのURL" ->リモートリポジトリを取得する git pull ->最新のリモートリポジトリブランチを取得する

【想定読者】 ・gitの導入が済んでいる方 ・githubのアカウントを持っている方 ・lfsの導入が済んでいる方 ・Unityプロジェクトを持っている方 (1) githubでリモートリポジトリを作成する。 Add .gitignoreにチェックを入れて、Unityを選択しておきましょう。 Public/Privateの設定は、他の人に公開しないならばPrivateに設定しましょう。 (2) 出来上がったリポジトリのURLを確認する。(3で使います) リポジトリを開いて一番最初に出てくる画面の、 緑色のCodeというボタンを押すと表示されるURLです。 (2021/6/13現在) (3) 自分のUnityプロジェクトにgitを導入する。 git init git remote add origin [2のurl] コマンドプロンプト(Macの場合はターミナル)で自分のUnityプロジェクトに移動し、上記のコマンドを実行する。 私の実行環境では、下記のようなフォルダです。 実行しても何も表示されないので、不安な方は「git remote -v」というコマンドを実行して、2のURLが表示されれば成功です。 (4) リモートの情報を取り込む git pull origin main (5) Unityプロジェクトの情報をリモートリポジトリに反映する git add . git commit -m "Add project" git push origin main [git add .]は、gitで管理するファイルを選択するコマンドです。[.]は全てという意味ですが、個別に指定したい場合はファイル名/フォルダ名を入力します。 [git commit -m "Add project"] 選択したファイルを実際にコミットするコマンドです。["Add project"]の部分は自由に決められるメッセージですが、あとで識別しやすいような文章を入れるのがおすすめです。 [git push origin main]実際にリモートリポジトリに反映するコマンドです。gitのバージョンによっては、[main]の部分を[master:main]とする必要があるかもしれません。 これは自分のmasterローカルブランチからmainリモートブランチへ送信するという意味です。 ローカルもリモートもどちらもmainの場合は、main:mainと書かずにmainと省略できます。 (6) lfsを導入する git lfs install git lfs track "*.png" [git lfs track]コマンドでlfsで管理するファイルを選択します。 [git lfs track "*.png"]コマンドでpngファイルを全てlfsで管理するように設定できます。 一度上記のコマンドを実行した後はカレントディレクトリに[.gitattributes]ファイルが出来上がるので、それを直接編集するのがおすすめです。 .gitattributesの例 *.cs diff=csharp text *.cginc text *.shader text *.mat merge=unityyamlmerge eol=lf *.anim merge=unityyamlmerge eol=lf *.unity merge=unityyamlmerge eol=lf *.prefab merge=unityyamlmerge eol=lf *.physicsMaterial2D merge=unityyamlmerge eol=lf *.physicsMaterial merge=unityyamlmerge eol=lf *.asset merge=unityyamlmerge eol=lf *.meta merge=unityyamlmerge eol=lf *.controller merge=unityyamlmerge eol=lf ## git-lfs ## #Image *.jpg filter=lfs diff=lfs merge=lfs -text *.jpeg filter=lfs diff=lfs merge=lfs -text *.png filter=lfs diff=lfs merge=lfs -text *.gif filter=lfs diff=lfs merge=lfs -text *.psd filter=lfs diff=lfs merge=lfs -text *.ai filter=lfs diff=lfs merge=lfs -text #Audio *.mp3 filter=lfs diff=lfs merge=lfs -text *.wav filter=lfs diff=lfs merge=lfs -text *.ogg filter=lfs diff=lfs merge=lfs -text #Video *.mp4 filter=lfs diff=lfs merge=lfs -text *.mov filter=lfs diff=lfs merge=lfs -text #3D Object *.FBX filter=lfs diff=lfs merge=lfs -text *.fbx filter=lfs diff=lfs merge=lfs -text *.blend filter=lfs diff=lfs merge=lfs -text *.obj filter=lfs diff=lfs merge=lfs -text #ETC *.a filter=lfs diff=lfs merge=lfs -text *.exr filter=lfs diff=lfs merge=lfs -text *.tga filter=lfs diff=lfs merge=lfs -text *.pdf filter=lfs diff=lfs merge=lfs -text *.zip filter=lfs diff=lfs merge=lfs -text *.dll filter=lfs diff=lfs merge=lfs -text *.unitypackage filter=lfs diff=lfs merge=lfs -text *.aif filter=lfs diff=lfs merge=lfs -text *.ttf filter=lfs diff=lfs merge=lfs -text *.rns filter=lfs diff=lfs merge=lfs -text *.reason filter=lfs diff=lfs merge=lfs -text *.lxo filter=lfs diff=lfs merge=lfs -text #Asset *.asset filter=lfs diff=lfs merge=lfs -text (7) lfsの導入をリモートリポジトリに反映する。 git add . git commit -m "Add lfs" git push origin main 備考 今回は全てコマンドで実行しましたが、SourceTreeなどのソフトを利用してもいいと思います。 git, github, lfsの導入方法は別の記事に残すかもしれないです。 Jenkinsを使ってgithubで管理しているUnityプロジェクトを一括でビルドする方法も記事にしたいです。

Slackで「このファイルを見てほしいですけど」という時にGitHubのURLで共有しています。 すごく便利なのですが、ファイルをいちいちGitHubから選択する必要があり、深いフォルダにあるファイルの場合には一苦労です。 OctTreeやGitakoの検索機能もとても優秀なのですが、もっと手早く共有できないかと思っていました。 VSCodeであればファイルを右クリックして「Open in GitHub」からGitHubで開いたり、URLをコピーしたりといった機能があります。 PhpStormにもそういう機能が無いかな…と思っていたいたところ、ありました。 Preferencesを開き、Menus and Toolbarsを選ぶ 「Editor Tab Popup Menu」（ファイルタブ） もしくは 「Project View Popup Menu」（左ファイル一覧）を選ぶ メニューを追加したい箇所を選択し、上部のプラスマーク（＋）をクリックする Open on GitHub を選択して保存する これで快適になります！

はじめに pushする時に毎回パスワードとユーザー名聞かれるのめんどくさかったので調べた。 対策 こちらのサイト[1]を参考にした。 どうやらhttps通信だとだめでssh接続にしないといけないよう。 冷静に考えれば確かにそう。 既存のリポジトリのURLを変更。 git remote set-url origin git@github.com:ユーザ名/レポジトリ名.git httpsからssh接続に変更。 そしたらsshの鍵のパスワードを聞かれるようになってしまった。 これもめんどくさいので調べてこちらのサイト[2]を参考にした。 参考サイト通りにしたら成功、パスワードが聞かれなくなった。 おわりに 調べたら出てくる時代に感謝。 もうちょっと成長したら参考にするばっかじゃなくて自分で１から記事を書いて貢献します。 それではまた。 参考文献 [1]:git パスワード を毎回聞かれる問題の解決方法 [2]:gitにpushする時、毎回SSHキーのパスワードを聞かれる問題の解決方法

はじめに 前回の記事[1]でwsl2でreact環境を構築してみましたが、ポートフォリオを作るためには公開しなければいけません。 ポートフォリオの公開のためにサーバー関係をいろいろやっていると時間がとられるのでGitHub Pagesで公開することにしました。また、create-react-appコマンドで生成されたプロジェクトディレクトリの構成がよく分からないのでいらないものは削除して本当にhelloWorldのみを出力するディレクトリ構成にしました。 wslでやってますが、linux、macでも可能だと思います。 環境 windows10Home wsl2 Ubuntu 20.04LTS nodebrew nodejs 14.17.0 yarn 1.22.5 デプロイ とりあえずデプロイしてからいろいろ考えようと思います。 こちらのサイト[2][3][4]を参考にしました。 もともとGitHub Pagesのリポジトリは作っていたのでそれを使います。 分からない人は先ほどあげたサイトにも載っていますし、調べれば出てくるのでそちらを参照してください。 今回の記事でのGitHub Pagesのリポジトリの名前はreact_portfolioとします。 前回の記事で作成したプロジェクトディレクトリの中身をごっそりreact_portfolioに移動します。 とりあえずpushします。 今までの地獄のような環境構築の経験からyarnとnpmっていう2つのパッケージマネージャー混ぜない方がいいんじゃないかと思い調べたところ、一応混ぜない方が良さそうです[5]。 傾向としてもyarnを使っていこうみたいな流れがある気がするので本記事ではyarnを使っていきます。 なんかよく分からんけど必要らしいものをダウンロードします。 yarn add --dev gh-pages 参考サイトを参考にpackage.jsonにhomepageとdeploy、predeployを追加、ついでに名前も変更しておきました。 当然homepageのgithubのところは自分のに変えてください。 "devDependencies"の部分は上のコマンドしたら勝手に追加されたと思います。 正直このファイル自体よく分かっていないのですが依存関係なども管理しているっぽいです。 あんまり気にしすぎると本末転倒なのでポートフォリオ完成してから理解することにします。 あと参考サイトではnpmでビルドしているのをyarnでしています。 たぶん変えなくても大丈夫ですが個人的にこういうのめちゃくちゃ気になるので変えてます。 { "homepage": "https://it-tsumugi.github.io/react_portfolio", "name": "react_portfolio", "version": "0.1.0", "private": true, "dependencies": { "@testing-library/jest-dom": "^5.11.4", "@testing-library/react": "^11.1.0", "@testing-library/user-event": "^12.1.10", "react": "^17.0.2", "react-dom": "^17.0.2", "react-scripts": "4.0.3", "web-vitals": "^1.0.1" }, "scripts": { "predeploy": "yarn build", "deploy": "gh-pages -d build", "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, "eslintConfig": { "extends": [ "react-app", "react-app/jest" ] }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] }, "devDependencies": { "gh-pages": "^3.2.0" } } デプロイします もしかしたらリモートリポジトリを追加する際の名前をorigin以外にしているとエラー出るかもしれないです。 yarn deploy このコマンドだけで勝手にデプロイされます。 なんて便利！無宗教ですがyarn教に入信しそうです。 ただこのままだと反映されません。 githubのリポジトリのsettingのpagesでsourceをgh-pagesにしましょう。 ディレクトリはdocsにしてルートにindex.htmlが無くてもいいように出来るらしいですがrootでいいです。 これで反映されているはずなのでGitHub PagesにあるURLにアクセスしましょう。 GitHub Pagesは反映がかなり遅いのでもともと何か入れていた場合は数分かかるかもしれません。 数分待っても反映されない場合は何か間違っているかもしれません。 僕はhomepageのところの最後に間違えて「/」をいれていたせいで1時間くらいもがいてました。 とりあえずあのマークが表示されたらデプロイには成功しています。 余計なファイルを消す とりあえずデプロイには成功しました。 しかし、余計なものが多すぎます。 なんでこのマークぐるぐるしてるのか意味が分かりません。 無駄なものがあると思考がぐちゃぐちゃして訳が分からなくなるのでいらないものは消しましょう。 このサイト[6]を参考にしました。 publicとsrcはこのサイト通りにしましたが、yarn.lockとREADME.mdは残しておきました。 yarn.lockは依存関係的なのに影響しそうなのとREADME.mdはあとでどうせ作ろうと思っていたので。 まあそこらへんは気分ですね。 App.jsとindex.jsも参考サイト通り変えましょう。 変更がすべて終わったらpushしてdeployします。 例によって更新に数分かかります。 数分後に確認したらhelloworldが出力されているはずです。 その後他の文字に変えて更新してみて遊んでみてもいいです。 数分かかるけど。 検証 pushしないと変わらないのかなあと思っていたのですが、一回した後はdeployだけでページは更新されるみたいです。 たぶん普通のことなんだと思うんですが個人的にはなんかワクワクしますね！ ローカルでプログラムしてデプロイして動作確認みたいな感じになるんでしょうか。 おわりに 今回はGitHub Pagesでreactのhelloworldをデプロイして、最小構成にしました。 本当はdocker、docker-compose、kubernetes、circleciとかで環境構築、デプロイとかも楽にするんでしょうね。 ちょっと首をつっこんでみたのですが沼りかけたのでおとなしくリリースするまではやめとくことにしました。 reactとデプロイ周りは前提知識、必要なツールが多すぎてリサーチと理解に割と時間かかりました。 デプロイ出来たのはちょっと感動です。 とりあえずこの最小構成からスタートしてどういう風にポートフォリオを作成するか考えていきたいと思います。 それではまた。 参考文献 [1]:【Mac難民】WSL2でのreactの環境構築 [2]:ReactのアプリをGithub pagesにデプロイしようとしたのにできなかった時の話と解決策 [3]:github pagesにreactアプリをデプロイして少しハマった話 [4]:Github PagesでReactアプリケーションをデプロイ [5]:[npm & Bower] Yarn 入門: npm との違いを探る [6]:Create React App で生成される React アプリを最小構成にする