コンパイラかく語りき

import { Fun } from 'programming'

【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 が初期値…

自分用 CSS Grid チートシート

CSS

CSS グリッドレイアウトに関するチートシートです。自分用なので結構雑です。 developer.mozilla.org 用語 Grid container Grid item Grid column Grid row Grid track Grid area Grid cell プロパティ コンテナ系 display grid-template-columns, grid-temp…

React v16.6.0で追加された lazy, memo そして contextType を試してみる

React.js v16.6.0 にて追加された新機能を試してみました。 reactjs.org 環境づくり React.memo React.Suspense と React.lazy static contextType static getDerivedStateFromError() 環境づくり サクッと、create-react-app を利用しました。 create-react…

【MacOS】 Hyper TermでとにかくNotificationを消す

MacOSでHyperTermを使っている場合のみ有効。 Notificationを確実に消す方法は以下の通り。 System Preferences -> Notifications -> Hyper -> Play sound for notifications 参考URL: zeit/hyper issues#1613 issuecomment-328251028

cloudfoundry/nodejs-buildpack v1.6.19にて、yarnによるpackage installがこける問題と対処

nodejs-buildpack v1.6.19 2018/02/26、cloudfoundyのnodejs-buildpackがv1.6.19へとバージョンアップデートされました。 変更: nodejs-buildpack/manifest.yml - Add yarn 1.3.2, remove yarn 1.2.1 [#155490241] この変更によって、buildpackが依存するYar…

【Cocoapods】 pod setupにて error: RPC failed; curl 56 SSLRead() return error -36| 2.27 MiB/s

発端 以下の記事に従っていた所、エラーが。 【Swift】CocoaPods導入手順 - Qiita $ pod setup Setting up CocoaPods master repo $ /usr/bin/git clone https://github.com/CocoaPods/Specs.git master --progress Cloning into 'master'... remote: Counti…

jQuery脱却の第一歩 doc-readyをつかってみる

クライアントのJSを書くとき、DOMのロードを待つ必要がある時があります。そんなとき、jQueryなら、以下のように書きますね。 $(document).ready(function() { // your code comes here... }) ただ、JSの小さなモジュールを作るためにいちいちjQueryを使うの…

rethinkdbdashを試してみる

RethinkDBのNodeドライバと言えば、公式のドライバがあります。もちろんこれは不満なく使うことができるのですが、どうやらrethinkdbdashという別のドライバもあるようです。 この記事ではrethinkdbdashの特徴や機能について、READMEを訳す形でメモしていき…

ExpressとRethinkDBで作るRESTfulなWebAPI

ExpressとRethinkDBで作るRESTfulなWebAPIです。 RethinkDB公式のこちらを参考にしました。 ひとまず、Expressでルーティングを定義して、RethinkDB上のデータへのCRUD処理ができるところまで。 前提条件 RethinkDBをインストールしておく。 Express起動前に…

Promiseチェーンの中で条件を満たすまで同じ処理を繰り返す(リトライ処理)

Promiseチェーンの中で、特定の条件を満たすまで同じ処理を繰り返したい場合があります。 例: データロード処理 そんな場合のコードサンプルです。 コード こちら。 const retryPromise = (func, delay) => { const retry = (resolve, reject) => func() .th…

table-layout: fixed; せずに text-overflow: ellipsis; する

長過ぎる文字列に対して、文末に「…」をつけて省略して表示したい時があります。 これをHTMLのtable要素で実現する方法について書きます。 固定幅テーブル まず、行が固定幅で良いのなら以下のように書けます。 table { table-layout: fixed; } td { white-s…

curlに対して、Express上のGraphQLサーバが Must provide query string. を返す

問題 Express上のGraphQLサーバへと、curlでqueryを発行した。 $ curl -XPOST -H "Content-Type:application/graphql" \ 'http://localhost:5000/api/graphql' \ -d 'query Query { user(_id: 3) { name, mail } }' すると、以下のようなレスポンスが。 { "e…

webpacker2.0に上げたら、Herokuへのデプロイが失敗する対処(Configuration config/webpacker.yml file not found. Make sure webpacker:install is run successfully before running dependent tasks)

問題 Herokuへのデプロイが失敗した。 webpacker gemを2.0に上げたのが原因っぽい(元々は1.2でした)。 こちらがエラーログ。 Configuration config/webpacker.yml file not found. Make sure webpacker:install is run successfully before running depend…

The git source `hoge` uses the `git` protocol, which transmits data without encryption...の対処法

問題 Gemfile内でgemに対して、:github プロパティを使っていた所、以下のようなエラーが。 The git source `hoge` uses the `git` protocol, which transmits data without encryption. Disable this warning with `bundle config git.allow_insecure true`…

ReqlDriverError: Could not connect to localhost:28015. → RethinkDB自体が起動していませんでした

RethinkDBとRethinkDBのnodeドライバに関して、ちょっとハマったのでメモ。 問題 ローカルのコンソールからRethinkDBのドライバを起動しようとする。 // server.js r = require('rethinkdb') r.connect({host: 'localhost', port: 28015}... $ node server.j…

RethinkDBでDB名の変更

無かったのでメモ。 以下のReQLクエリでDB名が変更できる。 r.db("old_name").config().update({name: "new_name"}) configについて。 https://www.rethinkdb.com/api/javascript/config/ 参考: https://github.com/rethinkdb/rethinkdb/issues/151#issueco…

RethinkDBで「DBが存在して無ければ作る」「テーブルが存在して無ければ作る」

※ Nodeで書いてますが、ReQL自体は言語フリーなので他言語の方にも参考にはなると思います。 初期化時にありがちな、DBとテーブルを有無をチェックしながら作成するという処理。 DB作成 // 無ければDBを作成 r.dbList().contains('messages').do((containsDb…

node.jsでRethinkDBを扱うためのORM "Thinky" を試してみた

Thinkyというnode.jsでRethinkDBを扱うためのORMを試してみました。 RethiknDB: https://www.rethinkdb.com/ Thinky: https://thinky.io/ 参考ページ 公式のドキュメントのクイックスタートというページを参考にしてみました。 https://thinky.io/documentat…

Thinkyを使ったRethinkDB REST API

メモ。 参考にした動画:A Simple REST API with Express, RethinkDB, and Thinky 下準備 セットアップ thinkyをrequireする時に、セットアップ情報をオブジェクトで渡して実行する。 const thinky = require('thinky')({ host: 'localhost', port: 28015, d…

RethinkDBでGeoJSON操作

RethinkDBでGeoJSONをゴニョゴニョする方法について。 サンプルコードはJavaScriptで書いてありますが、Ruby, Python, JavaでもOKです。 GeoJSONとは JSONをベースとした、位置情報データフォーマットです。 GEOJSON (英語) GeoJSON フォーマット仕様 ReQL -…