投稿者: ichiei

GitHubが2021年8月13日より「HTTPSでのパスワード認証」を廃止したことによる対策

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for

上記のエラーが出た場合、以下の対応が必要となります。

HTTPSでリポジトリをクローン・プッシュする場合は「パーソナルアクセストークン（Personal Access Token）」または「SSH認証」を使う必要があります。

1. SSH経由でクローンする

もしSSHキーを登録済みなら、次のコマンドでクローンできます：git clone git@github.com:{リポジトリ情報}

2. HTTPSの場合はパーソナルアクセストークンを使う

HTTPSでアクセスしたい場合は、GitHubでパーソナルアクセストークン（PAT）を発行し、
パスワードの代わりに入力してください。

3. 既存のリモートURLをSSHに変更する場合

git remote set-url origin git@github.com:{リポジトリ情報}

おすすめはSSHキー認証です。
まだSSHキーを作成・登録していない場合は、
以下のコマンドで作成し、GitHubに公開鍵を登録してください：ssh-keygen -t ed25519 -C “your_email@example.com”

作成した公開鍵（例：~/.ssh/id_ed25519.pub）をGitHubアカウントに登録します。

node.jsをインストール (zsh: command not found: npm が出力されたら)

zsh: command not found: npmというエラーは、Zshシェル（macOSのデフォルトシェルであり、Linuxでもよく使われます）が、コマンドを実行するために探すディレクトリのリスト（これをPATH環境変数と呼びます）にnpmの実行ファイルを見つけられないことを意味します。

このエラーが発生する主な理由は以下のいずれかです。

  1. Node.js（およびnpm）がインストールされていない。 npmはNode.jsにバンドルされているパッケージマネージャーです。
  2. Node.js（およびnpm）はインストールされているが、そのインストール場所がシェルのPATHに含まれていない。 そのため、あなたがnpmと入力しても、シェルがどこを探せば良いか分からない状態です。
  3. インストールが破損しているか、不完全である。

ステップ1: Node.jsとnpmがインストールされているか確認する

まず、Node.jsとnpmがシステムに認識されているか確認しましょう。ターミナルを開いて、以下のコマンドを実行します。Bash

node -v
npm -v
  • 両方のコマンドがバージョン番号を返す場合（例: Nodeがv20.12.2、npmが10.12.0など）：Node.jsとnpmはインストールされています。問題はPATHの設定にある可能性が高いので、ステップ3に進んでください。
  • どちらか一方、または両方のコマンドがzsh: command not foundなどのエラーを返す場合：Node.jsとnpmが適切にインストールされていないか、設定されていません。ステップ2に進んでください。

ステップ2: Node.js（とnpm）をインストールする

Node.js（とそれに含まれるnpm）をインストールする最も一般的でおすすめの方法は、パッケージマネージャーを使用することです。

オプションA: Homebrewを使用する（macOSにおすすめ）

Macをご利用の場合、Homebrewはパッケージを管理するのに最も簡単な方法です。

  1. Homebrewをインストールする（まだの場合）: ターミナルを開き、以下のコマンドを貼り付けて実行します。 Bash/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" 画面の指示に従ってください。ユーザーパスワードの入力が求められる場合があります。
  2. Node.jsをインストールする: Homebrewがインストールされたら、以下のコマンドを実行します。 Bashbrew install node HomebrewがNode.jsの最新LTS（Long Term Support）バージョンとそのバンドルされたnpmをダウンロードしてインストールします。
  3. インストールを確認する: インストールが完了したら、現在のターミナルウィンドウを閉じて、新しいターミナルを開いてください。これは、Homebrewが行ったPATHの変更がシェルに反映されるようにするためです。その後、以下を実行します。 Bashnode -v npm -v これで両方のバージョン番号が表示されるはずです。まだ表示されない場合は、ステップ3に進んでください。

オプションB: nvmを使用する（柔軟性を求めるすべてのOSにおすすめ）

nvm（Node Version Manager）は、システム上に複数のNode.jsバージョンをインストールして管理できるため、異なるNodeバージョンを必要とする複数のプロジェクトで作業する場合に非常に便利です。

  1. nvmをインストールする: Bashcurl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash このスクリプトがnvmのインストールを実行します。
  2. Zsh用にnvmを設定する: インストーラースクリプトは通常、新しいターミナルを開くたびにnvmをロードするために、シェルの設定ファイル（~/.zshrcまたは~/.zprofile）にいくつかの行を追加するように指示します。これらの行は通常以下のようになります。 Bashexport NVM_DIR="$HOME/.nvm" [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm [ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion" # This loads nvm bash_completion ~/.zshrcファイル（または、ログインシェルを主に使用する場合は~/.zprofile）をテキストエディタ（例: nano）で開きます。 Bashnano ~/.zshrc 上記の行をファイルの末尾に追加します。保存して終了します（nanoの場合: Ctrl+X, Y, Enter）。
  3. 変更を適用し、nvmでNode.jsをインストールする: 現在のターミナルを閉じて新しいターミナルを開くか、以下を実行します。 Bashsource ~/.zshrc 次に、nvmを使ってNode.jsのバージョンをインストールします。最新のLTS（Long Term Support）バージョンをインストールすることをおすすめします。 Bashnvm install --lts nvm use --lts 特定のバージョンをインストールすることもできます: nvm install 20 特定のバージョンを使用するには: nvm use 20
  4. インストールを確認する: Bashnode -v npm -v これでバージョン番号が表示されるはずです。

ステップ3: PATHの問題をトラブルシューティングする（Node/npmがインストールされているのに見つからない場合）

Node.jsとnpmがインストールされているのに、node -vやnpm -vがまだcommand not foundを返す場合、問題はnpmの実行ファイルがあるディレクトリがシェルのPATHに含まれていないことです。

  1. nodeがどこにインストールされているかを見つける: node実行ファイルのパスを見るには、以下のコマンドを実行します。 Bashwhich node 典型的な出力は以下のようになります。
    • /usr/local/bin/node（Intel MacでのHomebrewや手動インストールで一般的）
    • /opt/homebrew/bin/node（Apple Silicon Mac – M1/M2/M3でのHomebrewで一般的）
    • /Users/あなたのユーザー名/.nvm/versions/node/vX.Y.Z/bin/node（nvm経由でインストールした場合）
    npmの実行ファイルは通常、nodeと同じbinディレクトリにあります。
  2. 現在のPATHを確認する: Bashecho $PATH これは、シェルがコマンドを検索するディレクトリのコロン区切りのリストを表示します。ステップ3.1で見つかったディレクトリ（例: /usr/local/bin、/opt/homebrew/bin、またはnvmのbinパス）がこのリストに含まれていることを確認してください。
  3. 正しいディレクトリをPATHに追加する（もし不足している場合）:
    • Apple Silicon（M1/M2/M3）のHomebrewを使用している場合: ~/.zshrc（または~/.zprofile）を開き、以下の行が存在することを確認してください。 Bash# HomebrewをPATHに追加 (通常はHomebrewインストーラー自体が追加します) export PATH="/opt/homebrew/bin:$PATH" これは、which nodeが/opt/homebrew/bin/nodeを返した場合です。
    • Intel MacのHomebrewや直接インストールの場合: もしwhich nodeが/usr/local/bin/nodeを返した場合、これがPATHに含まれていることを確認してください。 Bashexport PATH="/usr/local/bin:$PATH"
    • nvmを使用している場合: nvmのインストールスクリプトが、nvmで管理されるNodeバージョンのPATHを正しく設定するために、必要な行を~/.zshrcにすでに追加しているはずです。もしnvm自体が機能しない（nvm command not found）場合は、ステップ2、オプションB.2を見直してください。
    ~/.zshrcを編集するには: Bashnano ~/.zshrc ファイルの最後にexport PATHの行を追加します。保存して終了します（Ctrl+X, Y, Enter）。
  4. 変更を適用する: Bashsource ~/.zshrc または、現在のターミナルを閉じて新しいターミナルを開くだけでも構いません。
  5. 再度確認する: Bashnpm -v これでバージョン番号が返されるはずです。

GitHubのウェブサイトで新しいリポジトリを作成する

  1. GitHubにログイン: ウェブブラウザでGitHubにアクセスし、ご自身のGitHubアカウントにログインします。
  2. 新しいリポジトリの作成ページへ移動:
    • 画面左上の**「+」アイコンをクリックし、ドロップダウンメニューから「New repository」**を選択します。
    • または、GitHubのトップページで緑色の**「New」**ボタンをクリックします。
  3. リポジトリの詳細を設定: 以下の項目を設定します。
    • Owner: あなたのGitHubアカウント名が表示されます。
    • Repository name: リポジトリの名前を決めます。これはプロジェクト名になります。例えば、「my-first-project」や「portfolio-website」など、半角英数字とハイフン、アンダースコアが使えます。一度設定すると変更が難しいので、慎重に決めてください。
    • Description (Optional): リポジトリの簡単な説明を入力します。何のためのプロジェクトなのかがわかるように書くと良いでしょう。
    • Public/Private:
      • Public: インターネット上の誰でもこのリポジトリを見ることができます。（オープンソースプロジェクトなどに適しています）
      • Private: あなたと、あなたがアクセスを許可した人だけが見ることができます。（個人プロジェクトや企業内のプロジェクトなどに適しています）
      • どちらかを選択してください。
    • Initialize this repository with:
      • Add a README file: 強く推奨します。これにチェックを入れると、リポジトリ作成時にREADME.mdというファイルが自動的に作成され、プロジェクトの説明を記述できます。後からでも追加できますが、最初に作っておくと便利です。
      • Add .gitignore: プログラミング言語やフレームワークに応じて、Gitの管理から除外したいファイル（一時ファイルや設定ファイルなど）を自動的に設定してくれます。例えば、Pythonなら「Python」、Node.jsなら「Node」などを選択できます。後から追加することも可能です。
      • Choose a license: プロジェクトのライセンスを選択します。オープンソースプロジェクトの場合に重要ですが、個人利用なら「None」でも構いません。
  4. リポジトリの作成: 設定が完了したら、緑色の**「Create repository」**ボタンをクリックします。

これで、GitHub上に新しいリポジトリが作成されました！

次のステップ：ローカルにクローンする

リポジトリを作成したら、次にそのリポジトリをあなたのMacのローカル環境にダウンロード（クローン）します。

  1. リポジトリのURLをコピー: 作成したリポジトリのページに移動します。緑色の**「Code」ボタンをクリックし、「SSH」**タブが選択されていることを確認して、表示されているURLをコピーします。（例: git@github.com:your_username/your_repository.git）
  2. ターミナルでクローン: Macのターミナルを開き、プロジェクトを保存したいディレクトリ（例: Documents/GitHub/など）に移動します。 Bashcd ~/Documents/ mkdir GitHub # まだGitHubディレクトリがなければ作成 cd GitHub/ 次に、以下のコマンドを実行してリポジトリをクローンします。先ほどコピーしたURLを貼り付けてください。 Bashgit clone git@github.com:your_username/your_repository.git これで、ローカルの指定したディレクトリ内に、新しく作成したリポジトリと同じ名前のフォルダが作成され、GitHub上のリポジトリの内容がダウンロードされます。

これで、ローカルでの作業とGitHub上のリポジトリが連携できるようになります。

SSH方式でMacのローカルターミナルとGitHubを連携させる手順

SSH方式で連携させるためには、以下の手順を踏みます。

ステップ1: SSHキーの生成

まず、Mac上でSSHキーを生成します。

  1. ターミナルを開く: 「アプリケーション」→「ユーティリティ」→「ターミナル」を開きます。
  2. SSHキーを生成するコマンドを実行: 以下のコマンドをターミナルに入力し、実行します。your_email@example.com の部分は、GitHubに登録しているメールアドレスに置き換えてください。 Bashssh-keygen -t ed25519 -C "your_email@example.com"
    • -t ed25519: 鍵の種類を指定しています。最新のアルゴリズムで、より安全です。
    • -C "your_email@example.com": コメントとしてメールアドレスを付与します。
  3. 保存場所とパスフレーズの設定:
    • Enter file in which to save the key (/Users/your_username/.ssh/id_ed25519): これは、SSHキーを保存する場所を聞いています。特に変更がなければ、そのままEnterキーを押してください。デフォルトの場所が推奨されます。
    • Enter passphrase (empty for no passphrase): パスフレーズ（パスワードのようなもの）を設定するかどうかを聞いています。セキュリティ向上のため、パスフレーズを設定することをお勧めします。入力しても画面には表示されませんが、正しく入力してください。
    • Enter same passphrase again: 確認のため、もう一度同じパスフレーズを入力します。
    SSHキーが生成されると、公開鍵（id_ed25519.pub）と秘密鍵（id_ed25519）のペアが生成されます。

ステップ2: SSHエージェントの起動とSSHキーの追加

SSHエージェントは、SSHキーをメモリに保持し、パスフレーズの入力を省略できるようにするものです。

  1. SSHエージェントを起動: 以下のコマンドを実行して、SSHエージェントが起動していることを確認し、起動していなければ起動します。 Basheval "$(ssh-agent -s)"
  2. configファイルの作成（初回のみ）: もし.sshディレクトリにconfigファイルがない場合、作成します。 Bashtouch ~/.ssh/config
  3. configファイルの設定: ~/.ssh/configファイルに以下の設定を追加します。これにより、SSHキーが自動的にSSHエージェントに追加されるようになります。 BashHost * AddKeysToAgent yes UseKeychain yes IdentityFile ~/.ssh/id_ed25519 この設定をファイルに追記するには、テキストエディタを使うか、以下のコマンドで直接追記できます。 Bashecho "Host *" >> ~/.ssh/config echo " AddKeysToAgent yes" >> ~/.ssh/config echo " UseKeychain yes" >> ~/.ssh/config echo " IdentityFile ~/.ssh/id_ed25519" >> ~/.ssh/config UseKeychain yes を設定することで、パスフレーズをmacOSのキーチェーンに保存し、次回以降の入力を省略できます。
  4. SSHキーをSSHエージェントに追加: 以下のコマンドで、生成した秘密鍵をSSHエージェントに追加します。パスフレーズを設定した場合は、ここで入力が求められます。 Bashssh-add -K ~/.ssh/id_ed25519 -Kオプションは、macOSのキーチェーンにパスフレーズを保存するよう指示します。

ステップ3: GitHubに公開鍵を登録

生成した公開鍵をGitHubアカウントに登録します。

  1. 公開鍵の内容をコピー: ターミナルで以下のコマンドを実行し、公開鍵（id_ed25519.pub）の内容をコピーします。 Bashcat ~/.ssh/id_ed25519.pub 表示された文字列をすべてコピーします。ssh-ed25519 AAAA... your_email@example.comのような形式です。
  2. GitHubにログイン: ウェブブラウザでGitHubにアクセスし、ログインします。
  3. SSHキーの設定ページへ移動:
    • 画面右上のプロフィールアイコンをクリックし、「Settings」を選択します。
    • 左側のサイドバーで「SSH and GPG keys」を選択します。
  4. 新しいSSHキーを追加:
    • 「New SSH key」または「Add SSH key」ボタンをクリックします。
    • 「Title」には、このキーの識別しやすい名前（例: My Mac など）を入力します。
    • 「Key」のテキストエリアに、先ほどコピーした公開鍵の内容をペーストします。
    • 「Add SSH key」ボタンをクリックします。
    • GitHubのパスワードの入力を求められる場合があります。

ステップ4: 接続テスト

GitHubとの接続が正しく設定されたかを確認します。

  1. ターミナルで接続テスト: 以下のコマンドをターミナルで実行します。 Bashssh -T git@github.com
  2. 接続成功の確認: 初回接続時、The authenticity of host 'github.com (IPアドレス)' can't be established. のようなメッセージが表示されることがあります。これはGitHubのフィンガープリントを確認するもので、yesと入力してEnterを押します。 その後、以下のようなメッセージが表示されれば成功です。 Hi your_username! You've successfully authenticated, but GitHub does not provide shell access. your_usernameの部分は、あなたのGitHubユーザー名に置き換わっています。

これで連携は完了！

これで、MacのローカルターミナルとGitHubがSSHで連携されました。

今後の作業の流れ（例）

  1. 新しいリポジトリを作成する場合:
    • GitHub上で新しいリポジトリを作成します。
    • リポジトリ作成後、表示されるSSH形式のリポジトリURL（例: git@github.com:your_username/your_repository.git）をコピーします。
    • ローカルの作業したいディレクトリに移動し、以下のコマンドでリポジトリをクローンします。 Bashgit clone git@github.com:your_username/your_repository.git
  2. 既存のリポジトリで作業する場合:
    • ローカルに既存のリポジトリがある場合、そのリポジトリのディレクトリに移動します。
    • もしリモートURLがHTTPSになっている場合は、SSHに変更します。 Bashgit remote set-url origin git@github.com:your_username/your_repository.git （your_usernameとyour_repositoryは実際の情報に置き換えてください）

これで、git pushやgit pullなどの操作をパスワードなしで実行できるようになります。

React+typescriptのお仕事してました

ブログを始めようとしましたが、気づいたら1年経過してました。。。。

2020年の1年は、React.js + typescriptのお仕事をしてました。
以下のカッコ内が1年間に触ったもの
( git, vscode, jenkins, jest, html, css, sass, React+typescript, jQuery, redux )

実装した機能はざっくりと

  • 非同期通信でAPI実行、実行結果を表示
  • atomicdesignでコンポーネント実装
  • UAでiphone、Androidの表示分け
  • CMSの機能追加(webに表示する画像、テキストを入力可能で表示する)
  • jestでのテストコード(enzymeも実装)

いろいろと対応させていただいたのですが、

機能追加であれば、どう実装するかある程度事前に調査した上で実装するものの、やはり、いざ実装となると問題が発生→悩む(すぐに聞くと楽しくないので聞かない)→解決を繰り返していました。

人によるのかもしれないですが、

詰まる→解決するのが 自分は楽しかったりするので、とても充実した1年でした。

2020年もあと少し、2021年はブログの更新回数を増やそうかと思っています。

React.jsのメリット、デメリット

最近業務開発で使用しているReact.jsのメリット、デメリットについて箇条書きで書いてみました。（随時更新します。。。。）

Reactとは

Facebookが開発したJavascriptのフレームワーク

html,cssで出来たフロント画面の動きを担当

Reactは何ができる？

フロント画面のチェックボックスやドロップダウンなどにアニメーションを付加

またサーバ側との非同期通信により取得したデータを使用してのレンダリング表示が可能

Reactを導入するメリット

UIコンポーネントライブラリが豊富（ボタン、テキストボックスなど）

　（個人的に準備されているUIの見た目が良い！）

コンポーネント単位で開発でき再利用する事が可能

公式のドキュメントが日本語化に対応した

stateのnextpropsを使用する事でデータ更新時のタイミングをキャッチしやすい

　（React,Vueにて良く発生するデータタイミング問題をキャッチしやすい）

Reactを導入するデメリット

vue.js ➡︎ React の流れを組むと辛い

導入の敷居が高い

開発環境の構築に手間がかかる(Node.js, npmでのインストールなどなど）

Stateをいつでも更新する事が出来ない ( Readonly でのエラーになる）

終わりに

勉強中なので随時更新します！vue.jsとReactの対比も出来れば、

React周りでJSXやRedux-sagaなんかについても書こうと思っています。