gocha124の日記

ごちゃごちゃ書きます

TypeScript開発環境をつくる

Web開発、TypeScript開発の環境づくりの一般的、標準的なものがなんなのか
よくわからないままに、ツギハギで会社やWebで情報収集していました。
フューチャーアーキテクトさんのサイトがわかりやすくて勉強になったので
試した時のコマンドメモを残します。

future-architect.github.io

TypeScript、prettier、ESLint、Jestをセットアップ。


複数バージョンのNode.js切り替えれるようにnodenvを使う。
16.2.0を使うように指定する。

nodenv local 16.2.0

npm initする。package.jsonファイルができる。
src, __tests__フォルダを作る。

npm init
mkdir src
mkdir __tests__

変換先のdistはGitに登録しない。

vi .gitignore
dist
.DS_Store
Thumbds.db

TypeScriptをインストールする。

npm install typescript
npm uninstall typescript
npm install --save-dev typescript
npm install --save-dev ts-node

フォーマッタはprettierをインストールする。

npm install --save-dev prettier

.editorconfigに設定。

vi .editorconfig
root = true

[*]
indent_style = space
indent_size = 4
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

npm run lint:prettier

ESLintをインストールする。

npx eslint --init
✔ How would you like to use ESLint? · problems
✔ What type of modules does your project use? · esm
✔ Which framework does your project use? · react
✔ Does your project use TypeScript? · No / Yes
✔ Where does your code run? · browser
✔ What format do you want your config file to be in? · JavaScript
✔ Would you like to install them now with npm? · No / Yes

npm install --save-dev eslint-config-prettier

eslint-config-prettierも。

package.jsonの設定。

  "scripts": {
    "test": "jest",
    "fix": "run-s fix:prettier fix:eslint", ★
    "fix:prettier": "prettier --write src",
    "fix:eslint": "eslint src --ext .ts --fix",
    "lint": "run-p lint:prettier lint:eslint", ★
    "lint:prettier": "prettier --check src",
    "lint:eslint": "eslint src --ext .ts",
  },

修正は直列、チェックは並列実行するようにしています。
複数のタスクを並列や並行で実行するには次のコマンドをインストール。

npm install --save-dev npm-run-all

テストにはJestをインストール。
scripts/testディレクトリを作成する。

npm install --save-dev jest ts-jest @types/jest eslint-plugin-jest
mkdir -p scripts/test

VSCodeの拡張機能、Prettier、ESLintをインストールする。
esbenp.prettier-vscode
streetsidesoftware.code-spell-checker
dbaeumer.vscode-eslint


ここまで。

入手したリポジトリを自分のGitHubにpush

shallow でcloneする。

git clone --depth 1 https://github.com/tokyo-metropolitan-gov/covid19.git
git config -l

自分のGitHubリポジトリにpushする。
GitHub上で「New repository」をクリックしてconvidを作成した。
cloneしたリポジトリのリポジトリurlを変更する。

git remote set-url origin https://github.com/txcdb738/convid19.git
git remote -v
origin	https://github.com/txcdb738/covnid19.git (fetch)
origin	https://github.com/txcdb738/covnid19.git (push)
git branch
* development

pushする。

git branch -M main
git push -u origin main

shallow update not allowedのエラーになった。

To https://github.com/txcdb738/convid19.git
 ! [remote rejected] main -> main (shallow update not allowed)
error: failed to push some refs to 'https://github.com/txcdb738/convid19.git'


checkoutに--orphanをつけると、履歴が空のブランチ（orphan branch）が作成できる。
tmpという空のブランチを作ってコミットしてから、masterブランチをそれで置き換え、
別のRepositoryにpushすればよいみたい。

git checkout --orphan tmp
git commit
git checkout -B master
git branch -d tmp
git push origin master


これを参考にしました。
www.greptips.com

東京都 新型コロナウイルス感染症対策サイト動かすまで（Vagrant）

Webアプリの勉強。東京都 新型コロナウイルス感染症対策サイト を動かしてみる。
https://github.com/tokyo-metropolitan-gov/covid19


git clone使用としたが時間がかかって中断してしまった。
zipでダウンロードで進める。
( gitのunshallowでダウンロードすればよい？ )

VSCodeをインストール

https://code.visualstudio.com

FOR_DEVELOPERS.mdに従って環境を準備。

Node.jsをインストール

Docker for Macをインストール。

VSCodeに拡張機能をインストール。

Vagrantをセットアップ

Vagrantをインストール。
https://www.vagrantup.com

ダウンロードページにしたがってbrewでインストール。
https://www.vagrantup.com/downloads

brew tap hashicorp/tap
brew install hashicorp/tap/vagrant

バージョンはVagrant 2.2.16。

VirtualBoxをインストール

VirtualBoxをインストール
https://www.virtualbox.org/wiki/Downloads


Vagrant VMWare Utilityをインストール。
vagrant plugin install vagrant-vmware-desktop
バージョンは1.0.20。

Vagrantを起動。

vagrant upしたがエラーになった。Macの権限設定が原因のようで
次のサイトを参考に設定を変更したら起動できた。
【macOSアップデート】vagrant upできない時に一通り試すと良いかもしれない方法 - Qiita

sudo kmutil load -b org.virtualbox.kext.VBoxDrv



vagrant up
vagrant reload
vagrant provision
vagrant halt

ローカルアクセス。表示できた。
http://localhost:3000


Webサイト開発の色々なライブラリが使われているので
勉強していきたいと思います。