プログラミング -> 言語 -> JavaScript

Storybook で webpack の output を設定してしまうと正しく表示されない

理由 Storybook の表示に用いられる iframe.html などが output のディレクトリに作られてしまうから*1。 具体例 .storybook/main.js に以下のように書くと output のディレクトリが設定されてしまいます。 module.exports = { (省略) webpackFinal: async…

Storybook で SCSS を使えるようにする

注意 フロントエンドは移り変わりが激しいため、この方法が誤りになる可能性があります 2021/09/06 時点での情報です 結論 1. sass-loader の v10 を入れる 最新版を入れてしまわないように注意する*1。 $ yarn add --dev sass-loader@^10.0.0 2. style-load…

deasync のインストール(ビルド)に失敗するときの対処方法

結論 node-gyp を入れる。 現象例 以下のような感じで npm / yarn で入れるときにエラーが出る場合です。 ➤ YN0007: │ deasync@npm:0.1.21 must be built because it never has been before or the last one failed ➤ YN0009: │ deasync@npm:0.1.21 couldn't…

Vue.js v3 でコンポーネントが表示されずに困ったときに判明した理由

結論 components: { Hoge } と書くべきところを component: { Hoge } と書いていたから(複数形にしていなかった)。 感想 一度通っておけば以後は間違えないタイプのやつです*1。 *1:そういう意味では一度通ったというのは意義があったことなのかもしれない

Yarn v3 (v2) を入れたら "scripts" が実行できなくなった場合

結論 ワイルドカードが含まれている場合はクォートでくくりましょう。 具体例 例えば、以下のような書き方だとエラーになります。 "scripts": { "hoge": "yarn clean && run-s -c hoge:*", ワイルドカードが含まれる場合は以下のようにクォートでくくります…

Cypress で対象セレクタが複数ある中から任意のセレクタを選ぶ方法とその際の注意点

結論 cy.get('.foobar').eq(3) のように、get したあとに eq で取得できる 注意点として、get の戻り値を変数に格納している場合、eq を実行してしまうと格納した変数のオブジェクトは変更される シャローコピーになるということ 具体例 以下のような HTML …

VSCode の Jest 拡張機能での Jest の起動に失敗する場合

環境 Windows (WSL2) Node のバージョン管理には nodenv を使用している 状況 具体的には以下のようなエラーがターミナルに出るときです。 /usr/bin/env: 'node':そのようなファイルやディレクトリはありません Jest process "watch-tests" ended unexpected…

material-table を使う際に検索欄やページングカーソル欄に se や fir などのアルファベットが表示される場合の対処法

material-table とは github.com 現象 こういう感じになる現象です。 gyazo.com 結論 fonts.googleapis.com から Material Icons をインポートしましょう。 <head></head> 内に以下を書き加えます*1。 <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" /> 修正結果 上記のインポートの結果、以下のようになりました。 gyazo.</link>…

husky の代替として simple-git-hooks を使う

simple-git-hooks とは github.com 結論 以下の通りにすれば自動で .git/hooks/pre-commit を作成してくれます。 1. インストールする npm or yarn で simple-git-hooks をインストールします。 2. package.json に hooks のコマンドを記述する 以下のように…

webpack 4 では sass-loader のバージョンは v10 に抑える必要がある

結論 以下のリリースノートに書いてあるとおりです。 github.com gyazo.com 具体的にどうするか インストールの際に v10 に抑えるようにしましょう。 $ yarn install --dev 'sass-loader@^10.0.0' npm を用いる場合も同様です。 Dependabot など Dependabot …

innerHTML や textContent で書き換わらないときの理由の一つ

結論 DOM が構成される前に innerHTML や textContent が実行されてしまっているから。 対処方法 </body> タグの直前に JavaScript を書く。 感想 すごく当たり前のことなんですが、Vanilla JS を久しぶりに(ほんとうに久しぶりに)雑に書いたらハマってしまいまし…

Vue.js で「現在の」コンポーネント名を取得する方法

結論 this.$options._componentTag 例 console.log(this.$options._componentTag) // foo-bar-hoge-fuga 補足 メソッド名からも分かるように、正確には「コンポーネント名」ではなく「コンポーネントのタグ名」です。

Vue.js で You may have an infinite update loop in a component render function. は必ずローカル開発環境のうちに対処しておく

前提 You may have an infinite update loop in a component render function. とは何ぞや、ということはここでは省略します*1。 結論 このメッセージは WARN 扱いですが、本番環境のビルドでは無限ループになることがあります(ありました)。内容からして…

fs.readdir の戻り値を Promise で受け取る

結論 以下のように書いた関数の戻り値は Promise となります。 async function currentDirFileNames(path: string) { const fs = require('fs') const fsPromises = fs.promises return fsPromises.readdir(path) } 例

2020年の段階で私が知らないこと

はじめに 本記事のタイトルは、以下の記事にならっています。 overreacted.io また、以下の記事に触発されています。 blog.unasuke.com zenn.dev 結論 以下のことをほとんど知りません。 Go React TypeScript Prisma GraphQL Cypress 焦り 上記のことに無知…

Vue CLI v4.5.4 で Vue.js 3.x (Preview) で vue create しただけのログ

結論 ログです。

どの Node.js がどの NODE_MODULE_VERSION を用いているかを調べる

結論 以下のページを見ましょう。

VS Code で Vue CLI を使って ESLint と Prettier を使ってたら両方の自動保存がバッティングしたとき

結論 おそらく、環境(設定)依存があると思いますので、あくまで私がうまくいっただけの方法です。 VS Code の設定において、以下の二つを設定します*1。 "editor.formatOnSave": false, "editor.codeActionsOnSave": { "source.fixAll.eslint": true } *1:…

vue-tweet-embed を用いるときには <Tweet></Tweet> の間に <div></div> を入れてローディングアニメーションを作ると良い

vue-tweet-embed とは github.com Quickstart のままだとツイートの読込中にエラーメッセージ表示が出てしまう 公式ドキュメントの Quickstart には、最低限の使い方についての説明があります。 つまり、 vue-tweet-embed をインストールして、 import を行…

Google スプレッドシート を Web API にしたときに GET で渡ってくるパラメータの取得方法

結論 e をイベントのオブジェクトとした場合に、GET で渡ってくるパラメータは e.parameter で取得できます。 取得例 以下のようなコードがあるとします。 function doGet(e) { Logger.log(e.parameter); } そして以下の URL のエンドポイントにパラメータ付…

Vue CLI に stylelint を導入する

stylelint とは 結論 1. stylelint と stylelint-config-standard をインストールします $ yarn add --dev stylelint stylelint-config-standard 2. stylelint.config.js を作成します 内容は最低限度で以下のようになります。 module.exports = { extends: …

Visual Studio Code で.eslintrc.json や .prettier.config.js や .editorconfig をいじってもいじっても波線が消えないとき

ポイント VS Code 上の拡張機能の設定も併せてチェックし、設定し直しましょう 設定し直す場合はプロジェクト単位の変更とし、.vscode/ 配下に settings.json が来るようにします .vscode/ は .gitignore などに入れておいて*1、git の管理外にします いつも…

Vue CLI 3 で .env が反映されないとき

結論 以下の2つをまずチェックします。 .env を書き換えた後にサーバを再起動したかどうか Vue CLI 3 に限った話ではありませんが、環境変数を書き換えたあとにはサーバを再起動します。開発環境でも本番環境(ホスティング先環境)でも同様です。 環境変数…

HTMLベタ書きで、axiosを最小限に使う

HTMLベタ書きでaxiosを使う axiosを最低限度で使ってみるために、axios自体をCDNから呼び出し、HTMLにベタ書きでコードを書いてみます*1。なお、一部のWebブラウザでは動作しない可能性があります。 以下、読みやすくするためにHTMLの一部のコードも省略して…

webpack で bundle したファイルの中で dotenv を使う場合には dotenv-webpack を用いる必要がある

結論 標題のままとなります。dotenv を用いているファイルを webpack で bundle した場合、そのままですと dotenv が用いられません。そのため、dotenv-webpack を用いる必要があります。 やり方 1. dotenv-webpack をインストールします --dev オプションを…

webpack で bundle したファイル内で fs を用いる方法

結論 webpack.config.js に target: 'node' を追加します。例えば以下のようになります。 module.exports = { (省略) target: 'node', (省略) }; 補足 fs はサーバサイド用のライブラリなので、フロントエンド(Webブラウザ)では一般的には用いません。…

webpack で bundle した際に path.resolve(__dirname, ...) でエラーになる(ルートを指すようになってしまう)場合の対処方法

結論 webpack.config.js の node: に、__dirname: false を追加します。 webpack.config.js の例 たとえば、以下のようになります。 module.exports = { (省略) node: { __dirname: false }, (省略) }; 参考 感想 webpack 難しすぎ……。

JavaScript で、「ある値」が「配列」であるかどうかを判別するために typeof では不十分

結論 調べたい値(変数)を fooBar とします。そのとき、fooBar が配列であるかどうかを判別するには Array.isArray(fooBar) を使います。戻り値は true / false です。 他にも方法はあります。 補足 typeof では、配列は object で返ってきます。したがって…

Sequelize で既存の DB を操作する(Rails で作った DB)

Sequelize とは Node.js 用の ORM です。 sequelize.org Sequelize で既存の DB を操作する すでに作成済みの DB を Sequelize で操作します。以下の例では既存の DB は Rails で作られたものを用いますが、Rails で作られたものである必要はありません。 ポ…

コロンを含んだ id や class を CSSセレクタ で指定する書き方

結論 コロンの前に \\ を付与してエスケープします。 例えば <div id="foo:bar"> を指定する場合には #foo\\:bar と指定します*1。 最大のハマりどころ DevTools で Copy selector をした際に、上記の例の場合だと #foo\:bar という値でコピーされます。そう、エスケープの \ </div>…

Powered by はてなブログ