参考にさせていただいたページ
コマンドパレットを開く
以下のキーでコマンドパレットを開きます。
再読み込みする
restart とかをコマンドパレットに入力すると
- Restart TS server
- Restart ESLint Server
みたいなのが候補に出てくるので、実行します。
sshキーペア(公開鍵と秘密鍵)を作成する 2022年2月版
参考にさせていただいたページ
- お前らのSSH Keysの作り方は間違っている - Qiita
- SSH keyを4096bitで作成する - Qiita
- encryption - SSH key strength factor besides key length (say ed25519 vs rsa-4096) - Information Security Stack Exchange
- https://sig9.hatenablog.com/entry/2020/01/11/000000
はじめに
単なる個人的な覚書です。
ED25519というタイプもあるようですが、とりあえず今回2022年2月ですが、RSAで作ろうと思います。
ED25519は短い鍵長でも複雑な暗号化が可能らしいです。
コマンド
オプションについて
- -tはType（RSA暗号方式とか）
- -bは何bitの鍵か
- -Cはコメント（どの端末で使う鍵かとか）
- -fはファイル名の指定をしたい場合
鍵のファイル名を特に指定しない場合
ファイル名は特に指定しないので、以下のコマンドで作成しました。
ssh-keygen -t rsa -b 4096 -C "どの端末で使う鍵か"
鍵のファイル名を指定したい場合
ファイル名を指定したい場合は以下のような感じだと思います。
ssh-keygen -t rsa -C "どの端末で使う鍵か" -f id_rsa_hoge
GitHubのfingerprintsについて
Macにhomebrewでnodenvをインストールして使う
参考にさせていただいたページ
- GitHub - nodenv/nodenv: Manage multiple NodeJS versions.
- GitHub - nodenv/nodenv: Manage multiple NodeJS versions.
今回の環境
- macOS Monterey バージョン12.2
- MacBook Air (M1, 2020)
homebrewを使ってインストールと設定をする
「GitHub - nodenv/nodenv: Manage multiple NodeJS versions.」に従って行います。
nodenvをインストール
以下のコマンドでインストールしました。
% brew install nodenv
.zshrcに一行追記する
次に.zshrcに以下の行を追記しました。
eval "$(nodenv init -)"
ターミナルを再起動する
.zshrcの設定を適用するために、ターミナルを再起動します。
nodenvが正しく設定されていることを確認する
nodenv-doctorスクリプトを使用して、nodenvが正しく設定されていることを確認します。
curl -fsSL https://github.com/nodenv/nodenv-installer/raw/master/bin/nodenv-doctor | bash
nodenvコマンドを試しに使ってみる
以下のコマンドでヘルプを表示してみました。
% nodenv help
nodenvのバージョンを確認する
以下のコマンドで確認できました。
% nodenv -v
M1のMacにHomebrewをインストールしてPATHを通す
参考にさせていただいたページ
インストールする
公式ページ「 macOS（またはLinux）用パッケージマネージャー — Homebrew 」の通りにコマンドを実行します。
以下のコマンドでしたが、最新のコマンドを確認してください。
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
インストール完了時のメッセージ
以下のようなメッセージが表示されました。
==> Next steps:
- Run these two commands in your terminal to add Homebrew to your PATH:
echo 'eval "$(/opt/homebrew/bin/brew shellenv)"' >> /Users/motomichishigeru/.zprofile
eval "$(/opt/homebrew/bin/brew shellenv)"
- Run brew help to get started
- Further documentation:
https://docs.brew.sh
このままではbrewコマンドが使えないので、PATHを通してください。ということですね。
パスを通す
.zprofileに書いても良いのですが、.zshrcに書くことにしました。
% echo 'eval "$(/opt/homebrew/bin/brew shellenv)"' >> /Users/motomichishigeru/.zshrc
設定を反映させます。
source ~/.zshrc
.zshrcの記述内容を確認する
以下の行が追記されたことが確認できると思います。
eval "$(/opt/homebrew/bin/brew shellenv)"
brewコマンドが使えるか試してみる
以下のコマンドで試してみます。
% brew help
以下の通り表示されて、PATHが通ったことが確認できました。
Example usage: brew search TEXT|/REGEX/ brew info [FORMULA|CASK...] brew install FORMULA|CASK... brew update brew upgrade [FORMULA|CASK...] brew uninstall FORMULA|CASK... brew list [FORMULA|CASK...] Troubleshooting: brew config brew doctor brew install --verbose --debug FORMULA|CASK Contributing: brew create URL [--no-fetch] brew edit [FORMULA|CASK...] Further help: brew commands brew help [COMMAND] man brew https://docs.brew.sh
ReactとかVueで開発するときのディレクトリ構造について考えてみた
はじめに
どこかにメモしておこうと思って一旦ここに書いてみました。
ディレクトリ構造
src
├── assets
│ ├── css
│ │ └── reset.css
│ ├── img
│ │ ├── example1.png
│ │ └── example2.png
│ └── scss
│ └── base
│ ├── default.scss
│ └── global-variables
│ └── media-queries
│ └── _media-queries.scss
├── components
│ ├── common
│ │ ├── Badge
│ │ │ ├── index.tsx
│ │ │ └── index.module.scss
│ │ └── TextLikeField
│ │ ├── index.tsx
│ │ └── index.module.scss
│ ├── ExamplePage1
│ │ ├── index.tsx
│ │ ├── organisms
│ │ │ ├── Org001
│ │ │ │ ├── index.tsx
│ │ │ │ └── index.module.scss
│ │ │ └── Org002
│ │ │ ├── index.tsx
│ │ │ └── index.module.scss
│ │ └── molecules
│ │ ├── Mol001
│ │ │ ├── index.tsx
│ │ │ └── index.module.scss
│ │ └── Mol002
│ │ ├── index.tsx
│ │ └── index.module.scss
│ └── ExamplePage2
│ ├── index.tsx
│ ├── organisms
│ │ ├── Org001
│ │ │ ├── index.tsx
│ │ │ └── index.module.scss
│ │ └── Org002
│ │ ├── index.tsx
│ │ └── index.module.scss
│ └── molecules
│ ├── Mol001
│ │ ├── index.tsx
│ │ └── index.module.scss
│ └── Mol002
│ ├── index.tsx
│ └── index.module.scss
├── containers
│ ├── ExamplePage1
│ │ ├── index.tsx（/src/pagesディレクトリが無い場合）
│ │ └── organisms
│ │ ├── Org001
│ │ │ └── index.tsx
│ │ └── Org002
│ │ └── index.tsx
│ └── ExamplePage2
│ ├── index.tsx（/src/pagesディレクトリが無い場合）
│ └── organisms
│ ├── Org001
│ │ └── index.tsx
│ └── Org002
│ └── index.tsx
├── layouts
│ └── default.vue NuxtまたはNextの場合
├── middleware
│ └── README.md Nuxtの場合
├── pages
│ └── README.md Nuxtの場合
├── plugins
│ └── README.md Nuxtの場合
├── types
│ └── example-type1.d.ts
└── utils
└── example-function1.ts
Vue CLIを使ってみる
参考にさせていただいたページ
Vue CLIのインストールまたは最新化
Creating a Project
今日の環境
グローバルにインストールする
npm install -g @vue/cli
または
yarn global add @vue/cli
プロジェクトを作成する
vue create vue_cli_sample
とりあえず今回は自分で選択してみます。
❯ Manually select features
以下の通り選択しました。
Vue CLI v4.5.15 ? Please pick a preset: Manually select features ? Check the features needed for your project: Choose Vue version, TS, CSS Pre-processors, Linter, Unit ? Choose a version of Vue.js that you want to start the project with 3.x ? Use class-style component syntax? No ? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? No ? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart-sass) ? Pick a linter / formatter config: Prettier ? Pick additional lint features: Lint on save ? Pick a unit testing solution: Jest ? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files ? Save this as a preset for future projects? No
インストールが完了して、以下のように表示されました。
🎉 Successfully created project vue_cli_sample. 👉 Get started with the following commands: $ cd vue_cli_sample $ yarn serve
ディレクトリの作成と移動
vue_cli_sampleディレクトリができたので、ガイドにしたがって移動します。
cd vue_cli_sample
yarn serveする
ガイドにしたがってserveします。
yarn serve
「http://localhost:8080/」で以下のようなページが確認できるようになりました。
yarn buildしてみる
yarn build
以下のようにjsとcssのファイルが書き出されました。
File Size Gzipped
dist/js/chunk-vendors.22a50e02.js 60.25 KiB 22.76 KiB
dist/js/app.19ee42b0.js 4.67 KiB 1.63 KiB
dist/css/app.f7432183.css 0.33 KiB 0.23 KiB
Images and other types of assets omitted.
DONE Build complete. The dist directory is ready to be deployed.
INFO Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html
✨ Done in 13.93s.
package.jsonの記述内容を確認してみる
2022年1月8日にやってみたのですが、さきほどの選択内容だと以下の通りでした。
{
"name": "vue_cli_sample",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"test:unit": "vue-cli-service test:unit",
"lint": "vue-cli-service lint"
},
"dependencies": {
"vue": "^3.0.0"
},
"devDependencies": {
"@types/jest": "^24.0.19",
"@typescript-eslint/eslint-plugin": "^4.18.0",
"@typescript-eslint/parser": "^4.18.0",
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-plugin-typescript": "~4.5.0",
"@vue/cli-plugin-unit-jest": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"@vue/compiler-sfc": "^3.0.0",
"@vue/eslint-config-prettier": "^6.0.0",
"@vue/eslint-config-typescript": "^7.0.0",
"@vue/test-utils": "^2.0.0-0",
"eslint": "^6.7.2",
"eslint-plugin-prettier": "^3.3.1",
"eslint-plugin-vue": "^7.0.0",
"prettier": "^2.2.1",
"sass": "^1.26.5",
"sass-loader": "^8.0.2",
"typescript": "~4.1.5",
"vue-jest": "^5.0.0-0"
}
}
Vue CLIの場合はwebpack.config.jsは無いの？
「Working with Webpack | Vue CLI」によると、webpack.config.jsに記述していた設定は、vue.config.jsを作成してそこに書くようです。
所感
vue.config.jsの書き方を調べるのはちょっと面倒くさい気がしますが、環境構築がすごく簡単にできました。
これは楽ちんですねー。
