コンパイラかく語りき

import { Fun } from 'programming'

2019-01-01から1年間の記事一覧

【Python】pip install --upgrade pip が成功しない場合の対処法

小ネタです。 古い pip を使っていました pip を使ってパッケージをインストールしたところ、以下のようなワーニングが。 You are using pip version 10.0.0, however version 19.3.1 is available. You should consider upgrading via the 'pip install --u…

【TypeScript】The left -hand and right hand side of an arithmetic operation must be of type 'any', 'number' or an enum type の対処法

タイトルのようなエラーが出た時の対応方法。 自分の場合は、Date 型同士を比較しようとして、このエラーに遭遇しました。 指示通りに number 化することで解決。 const a = "1970/01/01" const b = "1970/01/02" // 誤) const result = new Date(a) - new …

【Mongoose】空配列を持ったドキュメントを取得する

Mongoose のドキュメント取得に関して。空配列を持ったドキュメントを取得する方法。 例えば、以下のようなデータから id: 2 のデータのみ取得する。 { id: 1, items: ['foo'] } { id: 2, items: [] } これらのデータを Data スキーマとすると、以下のように…

【Mongoose】ネストされた ref を populate する

概要 Mongoose には ref という機能がありまして、他のコレクションのドキュメントへの参照 ID を持つことができます。 ref は populate を使って解決します。 この記事では、ネストされた ref を解決する方法について書きます。 参考: Populate - mongoosej…

【Vue.js】メソッドを子コンポーネントから呼ぶ

親コンポーネントで定義したメソッドを、子コンポーネントから呼ぶ方法について。 Props として渡す まず、 props として渡す方法。React エンジニアにとっては馴染みのあるやり方。 <template> <Child :function="someFunction" /> </template> export default { methods: { someFunction() { ... } } } Events を経…

【Vue.js】Nuxt.js の AsyncData 関数にて、リダイレクト等のエラーハンドルを行う

概要 Nuxt.js アプリケーションにおいてサーバサイドでデータフェッチをする場合、 AsyncData 関数を使う方は多いと思います。 この記事では、「もしデータフェッチに失敗したら XX する」のような処理を書く方法について。 Nuxt.js v2.9.0 時点での情報にな…

【Mongo】配列要素を populate/lookup した後に sort する

概要 Mongo/Mongoose で配列要素を populate した後に、要素のフィールドでソートする方法について。 コードサンプルは JavaScript で書いています。 サンプル 以下のようなデータを想定します。 // user { id: "foo" comments: ["1", "2"] // comment コレ…

Next.js v9 での TypeScript プロジェクト作成

概要 Next.js v9 で TypeScript プロジェクトを作成する方法について。 環境 このブログ記事の内容は、以下の環境をベースにしています。 OS: MacOS Mojave 10.14.6 Node.js: v10.15.0 next.js: v9.0.5 方法 Next.js アプリケーションの作成 まずは普通に Ne…

VSCode で Prettier の設定が無視されて効かない問題

tl;dr ./.prettierrc.json を作成する。 Prettier の設定が無視される VSCode の formatOnSave 機能で Prettier の設定が効きませんでした。 Prettier 設定を workspace で行ったり、.prettierrc に書いたりしましたが、どちらも VSCode から無視される状態…

【JavaScript, VSCode, Prettier】import 文を自動改行

td;dr VSCode で Prettier の設定を行い、 import 文を自動改行する。 概要 ESLint/TSLint によって1行のコードの長さを制限することができます。 ESLint: max-len TSLin: max-line-length import 文もこの対象になりますが、auto fix が効かないので手動で…

VSCode で行番号カラムの幅を狭める

VSCode の行番号カラムの幅が広いと感じるのは自分だけでしょうか? 特にエディタ画面をスプリットすると、なおさらカラムの幅が気になります。 実はこのカラム、3つの要素から成り立っています。 左から順に、グリフマージン、行番号、折りたたみアイコン…

【JavaScript】Vue.js で retweet / link リンク【Twitter】

概要 ツイートを埋め込むような web サービスを作る場合、リツイートとイイネのリンクを実装することがあるかもしれません。 そのリンク(正式名称はインテント)を Vue.js で作成する方法です。 実装 リンクの定義です。 // ツイート ID (いわゆる id_str…

【Node.js】Mongoose の upsert で、 ドキュメント作成時のみ追加するフィールド

Mongoose の upsert 便利ですよね。正しくは、upsert: true オプションですね。ドキュメントが存在しなければ作成、存在すれば更新をしてくれます。 参考: How do I update/upsert a document in Mongoose? - stackoverflow.com さてそんな upsert を行う時…

【MacOS】Hyperterm でログをクリアする

超小ネタ。 HyperTerm でログをクリアする方法について。 hyper.is コマンドなら $ clear、ショートカットなら ⌘+K でログがクリアされます。 以上ですw

【JavaScript】Google Optimize を React アプリケーションで使う

Google Optimize を React アプリケーションで使う 概要 AB テストツールである Google Optimize を React.js で作るアプリケーションで使う。 React アプリケーション作成 簡単に React アプリケーション を作成できる create-react-app を使う。 $ npx cre…

【JavaScript】forEach と for文 における配列イテレーション差異

forEach と for文 における配列イテレーション差異 解説 JavaScript において、 forEach と for 文の違いはいくつかあると思うのですが、今回は配列イテレーションの差異について書きます。 new Array(n) のような形で配列を作成すると、empty item が初期値…