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) の環境構築をしている際に遭遇したエラー。
環境
エラー内容
.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) の環境構築をしている際に遭遇したエラー。
環境
エラー内容
.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は許可されないというエラー。
.eslintrc*ファイル内のrulesに拡張子を追加することで解消できる。
rules: {
+ 'react/jsx-filename-extension': [
+ 'error',
+ { extensions: ['.js', '.jsx', 'ts', 'tsx'] },
+ ],
},
フロントエンドツールの公式サイトリンク集
公式を見ながらひとつひとつ設定していくのが最も理解が深まると思うのでメモ。
Vite
ESLint
React フック用プラグイン
https://ja.reactjs.org/docs/hooks-rules.html#eslint-plugin
'React' must be in scope when using JSX エラーの対処法
React v17 create-react-app で作ったアプリで ESLint に怒られまくった - かもメモ https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/react-in-jsx-scope.md
ESlint module.exports が no-undef エラー
ESlint module.exports が no-undef なエラーになるとき - かもメモ
stylelint
プロパティ順序整列用
https://github.com/cahamilton/stylelint-config-property-sort-order-smacss
Prettier
aria-expandedの紐付けについて
最近ハンバーガーメニューを実装する時などにaria-*属性を使用することがあり、下記のように記述していた。
<div class="hamburger"> <button type="button" aria-expanded="false" aria-controls="js_menu">ボタン</button> <div id="js_menu" aria-hidden="true"> <!-- ここにメニューが入る --> </div> </div>
気を付ける部分として、
aria-expanded属性は開閉を制御する要素（つまりbutton）につけるaria-contorls属性で制御する要素とされる要素の紐付けを行う
このように考えていたのだが、1.に関してはそうとも限らないらしい。
上記コードのような、ボタンとメニューが共通の祖先要素を持つなら、その要素にaria-expandedを付与することもできる。
<div class="hamburger" aria-expanded="false"> <button type="button" aria-controls="js_menu">ボタン</button> <div id="js_menu" aria-hidden="true"> <!-- ここにメニューが入る --> </div> </div>
新しい発見があって奥深いという気持ち。
