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

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

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

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

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

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

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

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

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

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

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…

発端 以下の記事に従っていた所、エラーが。 【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…

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

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

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

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

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

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

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

問題 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`…

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

無かったのでメモ。 以下の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…

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

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

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

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

RethinkDB（ReQL）でのgeojsonメソッドについて。 insertならば以下のように問題なく動く。 r.table("hoge").insert({ "location": r.geojson({ type: "Point", coordinates: [-71.063611, 42.358056] }) }) updateで同じことをすると、エラーが出る。 r.tab…

メモ。データをprepend, appendする方法。 r.table('shop').get("hoge_hoge_id").update({ drinks : r.row('drinks').append('White wine') }) append, prepend自体はDBのデータを変更しないことに注意。 参考: stackoverflow: How to append an element to …

環境 Mac(OSX 10.11.6) Homebrew インストール済み インストール Homebrewから入れます。 brew install hadoop バージョン Apache Hadoop Releases 公式によると、2017/05/22時点では2.8.0が最新版らしいです。 インストール先 入りました。 /usr/local/Cell…