javascript

ネットで見つけた方法は どうやら下記コードで目的は達成できるらしい。 new Array(10).fill(0).map(() => 0) // => [0, 0, 0, 0, 0, 0, 0, 0, 0, 0] いったい、どうしてこうなるのか。 何が行われているのか？ new Array() かっこの中に入れたLength分の配列を作成する。 つまりnew Array(10)であれば10個の値を含む配列を作成してくれる。 ちなみに値はundefinedになる [undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined] fill() fill() メソッドは、開始位置（既定値は 0）から終了位置（既定値は array.length）までのすべての要素を、静的な値に変更した配列を返します。 つまり先ほど作った10個のundefinedを持つ配列のundefinedを0に変更してくれるということ？ console.log(new Array(10).fill(0)) // [0, 0, 0, 0, 0, 0, 0, 0, 0, 0] ということらしい。 この時点でタイトル（n個の任意の値を持つ配列を作成する）という目的は達成されている。 いったいmap()は何をしているのか？ map() このコードでいえばmap()は配列の個数分取り出して0を入れるという、まったく生産性のない動きをしている。 つまり本タイトルという目的を達成するためであれば、不要以外の何物でもない。 n個の任意の値を持つ配列を作成する方法 ということで結論は、 console.log(new Array(10).fill(0)) // [0, 0, 0, 0, 0, 0, 0, 0, 0, 0] に落ち着いた。...

コードフォーマット系のプラグインは以前の記事で入れたので、コマンドを実行すれば、コードが統一化される。 だがしかし、コマンドを実行することを忘れることがあるだろう。人間だもの。 ということで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> で、実行できる。 うーん、なるほど。 つまりタイトルでスマートとか書いたけど、思っていたスマート差はなかった…気がする。