javascript

コードフォーマット系のプラグインは以前の記事で入れたので、コマンドを実行すれば、コードが統一化される。 だがしかし、コマンドを実行することを忘れることがあるだろう。人間だもの。 ということでhuskyを導入し、コミット時にコマンドを走らせるようにする。 huskyとは 公式サイトのGoogle翻訳によると、 Husky はコミットなどを改善します 🐶 ワン! コミットまたはプッシュするときに、コミット メッセージのリント、テストの実行、コードのリントなどに使用できます。Husky はすべての Git フックをサポートしています。 とのこと、ワン！ つまりgitに対する処理をフックとして何らかの処理を行うことができる。 今回はコード整形の処理を行っていく。 huskyをインストールする 基本的に公式を見れば問題ない。 てかそもそも公式を見れば大抵のことは問題ない。 npx husky-init && npm install で、公式によると↑を実行すれば基本的にOKとのこと。 上記を実行するとrootに下記ファイルが作成される。 .husky\pre-commit 中身を見てみると #!/usr/bin/env sh . “$(dirname -, “$0”)/_/husky.sh” npm test と書かれているのでnpm testの箇所を自身の実行したいコマンドに変更する。 で、コミット時に実行したいコマンドが実行されていればそれで問題なく完了。

ESLintを導入する npm i -D eslint eslint-plugin-vue @vue/eslint-config-typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin touch .eslintrc.yml で設定ファイルを作成する。 作成した設定ファイルに、 env: browser: true es2021: true extends: - 'plugin:vue/vue3-recommended' - 'eslint:recommended' - '@vue/typescript/recommended' parserOptions: ecmaVersion: 12 plugins: - vue - '@typescript-eslint' rules: {} を記入する。 package.jsonに "scripts": { ... "lint": "eslint --fix src/*.{ts,vue} && eslint --fix src/**/*.{ts,vue}", }, 上記Scriptを追加する。 npm run lint 上記コマンドで無事にScriptが実行されるかを確認する。 環境構築時に作成されるvite-env.d.tsがESLintで引っかかるので、 touch .eslintignore でESLlint除外設定ファイルを作成し、 vite-env.d.ts と記入する。 Prettierを導入 npm i -D prettier @vue/eslint-config-prettier で必要パッケージのインストールをする。 touch .prettierrc.yml で、設定ファイルを作成し、設定を記入する。...

まずはAPIで色々配列を取得しました。 そのuuidを使って取得したいAPIがあるので、foreachで回してデータを加工しようと思ったがうまくいきませんでした。 という事象にひどく悩まされた。 例えば、こんなコードを実行してみた。 const array = [1, 2, 3, 4, 5] array.forEach(el => { window.setTimeout(() => { console.log(el) }, 1000) }); console.log('forEach完了') // forEach完了 // 1 // 2 // 3 // 4 // 5 上記のコードを実行すると、コメントアウトのようになる。 いや、違う違う、4が出た後に「forEach完了」が欲しい。 じゃあ、どうするか？ のように実行することでコメントアウトのように、つまり臨んだ結果になった。 const array_2 = [1, 2, 3, 4, 5] var Promises = [] array_2.forEach(el => { Promises.push( new Promise((resolve) => { window.setTimeout(() => { console.log(el) resolve() }, 1000) }) ) }); console.log('forEach完了！') Promise....

いや、本当に今更なんだけれど、JavaScriptの復習をしていて、「即時関数」の便利さ、スマートさに気が付いた。 即時関数を使ってみた 今まで初回実行 & 使い回す場合は const consoleHello = () => { console.log("hello") } consoleHello() のように、書いていた。 が、即時関数を使えば、 const consoleHello = (() => { console.log("hello") })() のように書くことができる。 つまりこれで初回実行 & 関数としての使い回しが可能なのである。 なんで、いままで使ってこなかったのか。 使い回せない と思ったけど、使い回せなかった。 まあ、即時って言ってるし… つまりこういう使い方じゃない。 使い回すことはできなかったけど、中に関数を書くことはできた。 const consoleHello = (() => { console.log("hello") return { consoleGoodbye: () => { console.log('goodbye') } } })() こんな感じで関数を書いて、 <button onclick="consoleHello.consoleGoodbye()">JavaScriptを実行する</button> で、実行できる。 うーん、なるほど。 つまりタイトルでスマートとか書いたけど、思っていたスマート差はなかった…気がする。

Layout header や footer 等 全てのページで使われるパーツ ng g component layouts/componentName Pages ページごとのコンテンツを表示するページ ng g component pages/componentName Parts layout や page で使われるカードなどの UI パーツ ng g component parts/componentName テストをするためには必要だが、無駄なファイルを増やさないために ng generate component componentName --skip-tests でspecファイルを作らずに済む。 コンポーネントを呼び出したい <app-componentName></app-componentName> で、コンポーネントを呼び込む。