これはメモです

それ以上でもそれ以下でもないのです

MAMP環境でMySQLのパスを通す

ほぼ参考サイトと同じですが、メモ。

手順

  1. ルートディレクトリに移動
  2. .bash_profileの作成、パス書き込み
  3. パスの反映
  4. パスが通っているかテスト

1. ルートディレクトリに移動

cdだけ入力するとルートに移動。

cd

2. .bash_profileの作成、パス書き込み

viで.bash_profileファイルを開く。(なければ新規作成される)

vi .bash_profile

MAMPにある、MySQLの実行ファイルにパスを通す。新規作成時はoを入力してテキスト挿入モードに入る。

export PATH=$PATH:/Applications/MAMP/Library/bin

binディレクトリは実行ファイルなどを格納するディレクトリ。パスを通すことで、binディレクトリまで移動せずともMySQLの実行ファイルを実行することができる。

終わったらesc>:wqで保存する。

補足:viのコマンド

viわからないので備忘。慣れると操作性良さそう。

コマンド 意味
o カーソルがある下の行にテキストを挿入
:wq 変更を保存して vi を終了

3. パスの反映

以下のコマンドでパスを反映させる。sourceコマンドは、設定ファイルの更新後直ちにその内容を実行中のシェルに反映させるのに使われる。

source .bash_profile

4. パスが通っているかテスト

パスが通っていれば、以下コマンド入力後パスワードが求められる。

mysql -u root -p

コマンドの意味

  • mysqlMySQLに接続(ログイン)
  • -u root … rootユーザーで
  • -p … パスワードを指定

ちなみに、-Dオプションではデータベース指定が、-hでホスト指定ができる。

参考

MySQLでデータベースを作成する

環境

1. データベース作成

instrumentsという名前のDBがなければ作成する。(ある場合は何もしない) 文字コードutf8mb4、照合順序はutf8mb4_general_ciに設定する。

CREATE DATABASE IF NOT EXISTS instruments
CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci

2. テーブルを作成

instrumentsデータベースにinstrumentというテーブルがなければ作成する。 そのテーブルにはid, nameというカラムを持たせる。 idは主キーであり、かつ自動採番が適用される。

CREATE TABLE IF NOT EXISTS instruments.instrument (
    id INTEGER PRIMARY KEY AUTO_INCREMENT,
    name VARCHAR(50)
)

3. データの追加

instrumentテーブルに 'Stratocaster'というnameを持つデータを追加する。 (idは自動採番なので記載不要)

INSERT INTO instrument
(name) VALUES ('Stratocaster')

4. データの取得

instrumentテーブルのnameカラムを取得する。

SELECT name
FROM instrument

取得条件を追加する場合

nameの値が'Stratocaster'のもののみ検索を行う。

SELECT name
FROM instrument
WHERE name='Stratocaster'

5. データの更新

instrumentテーブルのうち、nameカラムの値がStratocasterのもののみ更新する。

UPDATE instrument
SET name='Telecaster' 
WHERE name='Stratocaster'

npmでモジュールをdevDependenciesからdependenciesに変更する

インストールし直す方法しか知らず面倒だったので調べました。

devDependenciesからdependenciesに

npm i <module_name> -P
npm i <module_name> --save-prod

「productに使用するのでP」と考えると覚えやすい。

dependenciesからdevDependenciesに

npm i <module_name> -D
npm i <module_name> --save-dev

環境構築の際に-Dオプションはよく使用するのですが、この使い方は初めて知りました。

ちなみに

"npm move from devdependencies to dependencies"でググったらヒットしました。

参考

ESLint Parsing error: "parserOptions.project" has been set for @typescript-eslint/parser. エラー

ViteでTypeScript + React + ESlint(airbnb) の環境構築をしている際に遭遇したエラー。

環境

  • M1 mac Monterey 12.4
  • node v16.13.0
  • npm 8.1.0
  • VSCode

エラー内容

.eslintrc.jsおよびvite.config.tsで下記エラーが出る。

Parsing error: "parserOptions.project" has been set for @typescript-eslint/parser.
The file does not match your project config: .eslintrc.js.
The file must be included in at least one of the projects provided.

(日本語訳)
解析エラー: "parserOptions.project" は @typescript-eslint/parser に設定されています。
このファイルはプロジェクト設定と一致しません: eslintrc.js
このファイルは、提供されたプロジェクトの少なくとも1つに含まれている必要があります。

当該ファイルが、他のどのファイルからもimportされないことに関するエラーのよう。

それぞれ設定ファイルであり、importされないのは当然のためlint対象から除外する。

lint対象からの除外

.eslintignoreファイルを作成し、当該ファイル名を記述する。

.eslintignore.js
vite.config.js

参考

ESLint Parsing error: "parserOptions.project" has been set for @typescript-eslint/parser. エラー

ViteでTypeScript + React + ESlint(airbnb) の環境構築をしている際に遭遇したエラー。

環境

  • M1 mac Monterey 12.4
  • node v16.13.0
  • npm 8.1.0
  • VSCode

エラー内容

.eslintrc.jsおよびvite.config.tsで下記エラーが出る。

Parsing error: "parserOptions.project" has been set for @typescript-eslint/parser.
The file does not match your project config: .eslintrc.js.
The file must be included in at least one of the projects provided.

(日本語訳)
解析エラー: "parserOptions.project" は @typescript-eslint/parser に設定されています。
このファイルはプロジェクト設定と一致しません: eslintrc.js
このファイルは、提供されたプロジェクトの少なくとも1つに含まれている必要があります。

当該ファイルが、他のどのファイルからもimportされないことに関するエラーのよう。

それぞれ設定ファイルであり、importされないのは当然のためlint対象から除外する。

lint対象からの除外

.eslintignoreファイルを作成し、当該ファイル名を記述する。

.eslintignore.js
vite.config.js

参考

ESLintの"JSX not allowed in files with extension '.tsx'"エラー

拡張子が'.tsx'のファイルではJSXは許可されないというエラー。

github.com

.eslintrc*ファイル内のrulesに拡張子を追加することで解消できる。

rules: {
+  'react/jsx-filename-extension': [
+    'error',
+    { extensions: ['.js', '.jsx', 'ts', 'tsx'] },
+  ],
},