クソWebアプリ制作日記 その３

これまで

Herokuを使ってWebアプリを公開する方針に決定。まずは公開までの流れをやってみようと、仕事で使い慣れたnode.js＋vue-cliのサンプルを使うことにした。
GitHubに上げたものをクローンする方法を選択するも、久しぶりに使うGitHubの使い方を調べるところでメンドくさくなってギブアップ。

そして、4月アニメ「やはり俺の青春ラブコメはまちがっている。完」を100%楽しむために、アニメ1期、2期を一通り見直したところで、放送延期が決まって落胆。 一度上がった作品へのテンションを下げられるわけもなく、原作小説全14巻に手を出そうとするも、この状況でAmazonを利用するのは不謹慎なのか？と思い悩む。
Amazonを使うのか！？スーパーで買い物のついでに本屋で買うのか！？そっちのほうが不謹慎なのか！？そもそも本屋は営業しているのか！？果たしてどうなるのか？？

Gitのインストールに苦戦

GitHub、言わずと知れたGitをオンラインで管理するサービスで、よくIT業界の修飾活動のとき俺自己学習でこんなんやってましたよ！ってアピールに使われるイメージだが、 仕事で一度だけ使ったことがあるだけで、使い方も忘れてしまった。
めんどうだけど、復習する。

とりあえず、ローカルでGitを使えるようにしないといけないので、「Git for Windows」をインストール。 デフォルト設定でどんどん進めようとするも、何訊かれてるか分かんない項目が多くつまずく。英語が読めるようになりたい。


例えばこれ。デフォルトで使うエディターとのことで、VSCodeも選択肢にあったが、ここで選んだエディタがどう影響するのかよくわからない。 わからないけど、「Use Visual Studio Code as Git’s default editor」を選択してみる。


環境変数の設定。サードパーティソフトウェアでも使えるように環境変数を設定するか？という話と解釈。VSCodeでも使えるようにしたいので、デフォルトのまま進める。


認証方式。まだよくわかっていないが、GitHubと連携するにはOpenSSL方式を使用する必要があるみたい。デフォルトのまま。


改行を変換するかどうか。後で混乱しそうな気がするので、変換しない「Checkout as-is, commit as-is」を選択。


ターミナルエミュレータの設定。MinTTYをよく知らないけど、デフォルトのまま進めた。(思考停止)


「キャッシュの有効化」「認証サポート(GitHubと連携するには必要そう)」「シンボリックリックの有効化」。デフォルトのまま進めた。(思考停止)

なっげえーーよ！！！
まあ、最初に色々きいてくれるのは、むしろ親切なのか。

無事、インストール完了できたところで、早速昨日のnode.jsサンプルをGit管理する。 VSCodeから操作できるのかもしれないけど、まずはシンプルに「Git Bash」からやってみる。

XXX /c/work/sampleProject/sample-pj
$ git init
Initialized empty Git repository in C:/work/sampleProject/sample-pj/.git/

カレントフォルダをGitリポジトリを作成。

GitHubと連携するには、SSHの鍵を生成する必要がある。

XXX /c/work/sampleProject/sample-pj (master)
$ ssh-keygen -t rsa -b 4096 -C "majigomi web app"
Generating public/private rsa key pair.
Enter file in which to save the key (/c/Users/XXX/.ssh/id_rsa):
Created directory '/c/Users/XXX/.ssh'.
Enter passphrase (empty for no passphrase):
Enter same passphrase again:
Your identification has been saved in /c/Users/XXX/.ssh/id_rsa
Your public key has been saved in /c/Users/XXX/.ssh/id_rsa.pub
The key fingerprint is:
SHA256:bMNy5HRkunJfvSiHRDcykVtubVsa9H4ONKokYfVgJys majigomi web app
The key's randomart image is:
+---[RSA 4096]----+

GitHubと連携

GitHubのサイトにログイン。
repositoryタブの「New」を押して、新たなリポジトリを作成。

次に先ほど作った公開鍵をGitHUbに登録。
setting画面から、「SSH and GPG keys」を選択。公開鍵の内容をそのまま貼り付け。

GitHubに作成したリポジトリをローカルのリポジトリに関連付けて、リモートリポジトリへpush。

XXX /c/work/sampleProject/sample-pj (master)
$ git remote add origin https://github.com/XXX/webAppSample.git

XXX /c/work/sampleProject/sample-pj (master)
$ git remote -v
origin  https://github.com/XXX/webAppSample.git (fetch)
origin  https://github.com/XXX/webAppSample.git (push)

XXX /c/work/sampleProject/sample-pj (master)
$ git push origin master
error: src refspec master does not match any
error: failed to push some refs to 'https://github.com/XXX/webAppSample.git'

エラーになった。コミットされていないからみたい。そりゃそうだ。

XXX /c/work/sampleProject/sample-pj (master)
$  git add --all
XXX /c/work/sampleProject/sample-pj (master)
$ git commit -m "はじめてのコミット"

*** Please tell me who you are.

Run

  git config --global user.email "you@example.com"
  git config --global user.name "Your Name"

to set your account's default identity.
Omit --global to set the identity only in this repository.

fatal: unable to auto-detect email address (got 'XXX')

コミットしようとすると、email addressが自動検出できないと怒られる。
ユーザ名とメールアドレスを設定して、再度コミット。

XXX /c/work/sampleProject/sample-pj (master)
$ git config --global user.name "XXX"
XXX /c/work/sampleProject/sample-pj (master)
$ git config --global user.email XXX.co.jp
XXX /c/work/sampleProject/sample-pj (master)
$ git commit -m "はじめてのコミット"

うまくいったので、push。

XXX /c/work/sampleProject/sample-pj (master)
$ git push origin master
Enumerating objects: 36, done.
Counting objects: 100% (36/36), done.
Delta compression using up to 4 threads
Compressing objects: 100% (31/31), done.
Writing objects: 100% (36/36), 146.84 KiB | 4.89 MiB/s, done.
Total 36 (delta 0), reused 0 (delta 0), pack-reused 0
To https://github.com/XXX/webAppSample.git
 * [new branch]      master -> master

途中でGitHubのログイン画面が出てびっくりしたけど、冷静にログイン。

GitHubの画面を見ると、先ほどpushした内容が無事反映されていることを確認。
ただし、脆弱性のある依存関係があると認識され、『XXX/webAppSample] One of your dependencies has a security vulnerability』というタイトルのメールが7件も飛んできてビビった。。
どうやら、package-lock.jsonの内容に脆弱性のあるバージョンがあるとのことで、勝手にプルリクエストも作成された模様。

これはウザいので止めておく。
GitHubの画面のSecurityタブを選択し、「Automated security updates」のチェックを外した。これでよいはず。

勝手に作成されたプルリクエストにて、package.jsonの内容が更新されていた。まあせっかくなので、これを取り込んで今日は終わりにしよう。
GitHubのPull requestsタブで、変更された内容を確認してmasterにマージ。

Git Bashでpull。

XXX /c/work/sampleProject/sample-pj (master)
$ git pull origin master
From https://github.com/XXX/webAppSample
 * branch            master     -> FETCH_HEAD
Updating 27cc980..e2b6998
Fast-forward
 package-lock.json | 857 ++++++++++++++++++++++++++++++------------------------
 package.json      |   4 +-
 2 files changed, 478 insertions(+), 383 deletions(-)

無事、package.jsonが更新されていることを確認。疲れた。。

思ったこと

Gitは仕事で何度か使ったことがあるけど、Git Bashで操作するのはずっと昔で全く覚えてなく、苦戦した。
こういう、何かを使うための設定や覚えることが大量にあるのが、初心者(※自分はエンジニア歴10年だけど)の敷居を上げているんだよな～。
実際に動くものをコーディングすることを楽しく思う方は多いと思うけど、このへんでつまずく人は多いんじゃないだろうか。早くアプリ自体の作成に注力できるところまでいきたいな～、まだまだ道は長い。