「なんも分からん」と叫びながらポートフォリオ開発を足掻いた記録① ～環境構築編～

目的

• 転職
• フロントエンドの開発に集中して生きたい
• 編集した箇所が目に見えて変わっていくの楽しい！
• 現職ではいろいろと叶わないので没頭できるところに転職しよう！
• とはいえ初心者に二年分の毛が生えた程度なので手を動かそう
• いつかの誰かを救うかもしれないので悪戦苦闘した過程の記録を残しておこう

開発環境

• Windows11
• WSL2(Ubuntu)
• VScode

方針

1. VScodeでReactの開発環境を作る
   • ツール選定基準
     • 使い慣れてる
     • 実際の開発環境でもメジャー
2. ローカルで動かす
3. GitHubのパブリックリポジトリで上げていく
   • 転職サイトで成果物として公開できるように
   • ふんわり知識のGitHubを実際に使ってみる
   • ※現職でのメインのバージョン管理がSubversionなので主流方法のGitの勉強を兼ねる

工程

1. Gitの準備
2. 開発環境の準備
3. Reactの公式チュートリアル
   • https://ja.legacy.reactjs.org/tutorial/tutorial.html
   • 中途半端な知識なので基礎から勉強する
4. ポートフォリオ用の自己開発

この記事で触れるもの

工程の1と2

実施内容

1. Git環境を構築

   1. Gitインストール
      • GitHubでの管理に必要だから
   2. Git管理にGUIツールをインストール
      • CUIでもいいが視覚化した方が楽
      • GitKrakenとSourcetreeを比較してGitKrakenを採用
      • 新規着手だからこそ使い慣れたら楽なものをやってみる
      1. https://www.gitkraken.com/ → 「Download GitKraken Client Free」からDL
      2. exeファイルを実行したらサインイン（GitHubアカウントは作っていたのでそれを使用）
      3. サインイン後、GitKrakenを起動したらユーザー名とメアド入力欄が表示されるので任意の情報を入力
      • インストール作業はここまで
   3. GitHubでリポジトリを作る
      • とりあえずReactチュートリアル用
      • 採用担当者に確認されていいようにpublic設定
   4. ローカルにリポジトリをClone
      • 前項のリポジトリを操作できるようにローカルに連携
   5. ブランチを作る
      • masterブランチがないんじゃが
      • もう分からんのでGitKraken上でリモートリポジトリ作りなおす
      • Github上で作ったリモートリポジトリを削除
   6. リポジトリを作り直す
      1. GitKraken上からリポジトリ作成→GitHubで作る
      • 秒で作成。ちゃんとmasterブランチもある
      • 慣れてないのにブラウザとGUIをごちゃまぜにしたのが敗因と推測
   7. ブランチを作る
      • 無事にmasterがあるので作業ブランチを作る
   8. 更新してみる
      1. 「README.md」の中身を更新する
      2. GitKraken上から反映する
      3. GitHub上でプルリクエストをレビュー（一人でやっているのでセルフレビュー）
      4. masterにマージする
      5. GitKrakenのmasterブランチをpull(更新)する
   9. 追加・削除してみる
      • commit後、pullリクエストの作成を忘れて詰まりかけた

2. VScodeの設定

   1. 拡張機能を入れまくる
      • 参考： React開発効率を3倍にするVS Code拡張機能&環境設定

3. 仮想環境で開発準備を整える

   • この辺でやっぱMac買っておけばよかったと後悔

   1. これ(WSL2 + Ubuntu + VSCodeでの開発環境構築)を見ながら四苦八苦

   2. Ubuntu 20.04.6 LTS をMicrosoftStoreから取得

   3. ユーザー作成

   4. NVMインストール

      $ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash
      

   5. 最新のNode.js（安定版）をインストール

      $ nvm install --lts
      

   6. npmをインストールする

      $ sudo apt-get update
      

   7. reactのインストール

      $ sudo npm -g install create-react-app
      

4. 試しにプロジェクトを作ってみる

   1. プロジェクト作成

      $ create-react-app sunaba001
      

   2. プロジェクトに移動して起動

      $ cd sunaba001
      $ nmp start
      

参考にしたもの

React関連

• React初案件獲得までの流れ(学習・案件探し・面接・契約まで)
• React 公式チュートリアル
• りあクト！ TypeScriptで始めるつらくないReact開発 第4版【① 言語・環境編】

Git関連

• 【GitHub超初心者入門】この前初めてGitHubを使い始めたエンジニア見習いが書くGitHubの使い方と実践～とりあえず一緒に動かしてみようぜ！～
• 【超入門】初心者のためのGitとGitHubの使い方
• 『GitKraken』と『Sourcetree』を比較してみた
• 2021年 Git GUI「GitKraken」の導入と少しの使い方[令和最新版]
• GitKrakenの日本語化（v6.4.1）

環境構築関連

• node.jsとnpmとnvmwをインストールしよう。node.jsの環境を用意する（Windows編）
• nvmを使ってNode.jsをインストールする
• Ubuntuにreactをインストールして動作確認する
• create-react-appコマンドを利用して、reactをインストールする方法