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

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>…

tsconfig.json はコメントも入れられるしシングルクォートも使えるが、特例なので、可能な限り設定ファイルは .js で書きたい

JSON ある程度慣れた方ですと .json ファイルを編集するときに身構えて緊張感を持って編集することが多いのではないでしょうか*1。というのも、JSONファイル はガッチリと書式が決められているからです*2。ECMA のドキュメントに記載されています。 www.ecma…

webpack (webpack-cli) を最小限で使ってみる

前提条件 npm や yarn のコマンドが使える必要があります ターミナルの操作が行える必要があります HTML や JavaScript の基礎を知っている必要があります 結論 以下のようにしましょう。

dotenv を webpack で bundle しようとしたら「Can't resolve 'fs'」と怒られた場合の対処方法

結論 webpack.config.js の node に以下のように追記します。 module.exports = { (省略) node: { fs: 'empty' }, (省略) }; 具体的な現象 $ webpack Hash: 3ae0e874e02f95680a0d Version: webpack 4.41.5 Time: 545ms Built at: 2020/01/05 20:25:10 (…

webpack-dev-server で ライブリロード(ホットリロード)がされないときには webpack.config.js の devServer.contentBase と output.publicPath の設定を見直してみる

状況 Web でも散見されますが、webpack-dev-server のライブリロード(ホットリロード)が効かない状況を想定します。似たような状況においてそうなのですが、これに気づかずに開発を続けると、コード上は正しくても動作に反映されないので無駄な時間を費や…

puppeteer を webpack で bundle しようとしたら「Can't resolve 'ws'」と怒られた場合の対処方法

結論 webpack.config.js の externals に以下のように追記します。 module.exports = { (省略) externals: { puppeteer: 'require("puppeteer")' }, (省略) }; 具体的な現象 $ webpack Hash: 89a5cffe5c5fd346c8e6 Version: webpack 4.41.5 Time: 609ms …

Ruby で クロージャ を実装する(Proc オブジェクト を用いる)

クロージャ とは Wikipedia で「クロージャ」を見てみます。 ja.wikipedia.org クロージャ(クロージャー、英語: closure)、関数閉包はプログラミング言語における関数オブジェクトの一種。いくつかの言語ではラムダ式や無名関数にて利用可能な機能・概念で…

Jest + TypeScript + Puppeteer で Coverage が出ないとき

前提条件 Puppeteer は関係ないかもしれないです 各種バージョンは以下のとおりです*1 *1:package.json より

Puppeteer で Basic認証 を通過する方法

結論 アドレスの前に username:password で Basic認証 の認証情報を書き、@ を用いてアドレスにつなげるという原始的な方法を採ります。 page.goto('https://username:password@example.com/foobar'); ダメだったこと ドキュメントに書いてある page.authent…

sequelize-auto を PostgreSQL に対して実行したら TypeError: connection.query(...).on is not a function と怒られるとき

sequelize-auto とは sequelize-auto とは、既存のデータベースのスキーマを読み取ってファイルに吐き出してくれる CLI アプリケーションです。Ruby ならば Ridgepole が近いでしょうか。 PostgreSQL に対して実行するとエラーが出ることがある PostgreSQL …

開発中の Node.js のパッケージを インストール / アンインストール する方法

目的 パブリックに公開 をせずにインストールする方法です。プライベートリポジトリからインストールする方法とはちょっと違いますのでご注意下さい。 結論 インストールする方法 1. 開発ディレクトリに移動する package.json やら index.js やらがあるディ…

WordPress の REST API の Users エンドポイントにアクセスするためのブックマークレット

結論 WordPress Users API 中身のコード(Minify) 特に難しいことや技巧的なことはしていないです。 javascript:(function(){location.href = location.protocol + "//" + location.host + "/wp-json/wp/v2/users"})() 参考

JavaScriptの正規表現マッチングの際に引っかかったこと

おそらく、常識的な内容だとは思います。 1. 正規表現の「パターン」を変数に代入するときの方法 だめな方法*1 let pattern = '/foobar/'; OKな方法 let pattern = /foobar/; 2. 「先頭」と「末尾」にマッチングするメタ文字 だめな方法 let pattern = /\Afo…

フロントエンドの基礎について情報をまとめた

そういえば 以前に似たようなのを書いた覚えがありますが、まあ書くことで記憶を定着させるという意味合いもあるので重複覚悟で書きます。

JavaScript の テンプレート文字列 において バッククォート だけの行も一行とみなされる

言いたいこと 以下のようなコードがあるとします。 let my_template_string = ` Hello! World! `; console.log(my_template_string); 結果はこうなります。 $ node my_template_string.js Hello! World!! $ Hello! の上の行、および、World!! の下の行に空行…

JavaScript のコールバック関数にて引数はどのように定義されるのか

コールバック関数の引数 JavaScript のコールバック関数の引数について、これまで得体のしれない気持ち悪さのようなものがありました。率直に言うと「なぜこれで動くんだろう*1」という気持ち悪さです。 あらためてコールバック関数の仕組みについて復習しま…

Powered by はてなブログ