コンパイラかく語りき

import { Fun } from 'programming'

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

RethinkDBでgeojsonをupdateする際の注意点

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

Rethinkdbでデータをprepend, appendする方法

メモ。データを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にHadoopをインストールして、起動・実行する

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

slimでGoogleAdsenseモジュールを作成する

まずは、GoogleAdsenseの管理画面からコードを取得する。 取得したコードを以下ように修正すればOK。(サンプルコードのディレクトリ・ファイル名はRails上での作成を想定) gistd9a9fadb77798bca43fc29c5d8ec2e88 これを別のviewファイルから呼べばOK。Rail…

npmインストールしたパッケージコマンドの格納先

npm

超小ネタ。 npmでインストールパッケージについて、絶対パスで呼ばなくてはいけない局面があると思う。 webpack // webpack: command not found node_modules/.bin/webpack // OK 結論から言うと、↑のとおり、node_modules/.bin/にある。 以下、おまけ。 コ…

Express, MongoDBアプリケーションにRedisを導入する

やること ExpressとMongoDBで作成するアプリケーションにRedisを導入します。 作るもの 図書館を模したアプリケーションを作成します。 データ -> 書籍 データへのリクエスト -> 書籍が作成されたり、取り出されたり データストレージ(MongoDB)-> 書棚 キ…

Expressでルーティングをネストする際に、{mergeParams: true}でパラメータをマージする

まあ、タイトルの通りなんですが。小ネタです。 参照:Rest with Express.js nested router - stackoverflow.com やりたいこと ルーティングをネストしたい。 かつ、URL内にある:idをネストしたルーティングのどこからでも参照できるようにしたい。 例 user…

Dockerインストール後にさっそくCannot connect to the Docker daemonと怒られちゃった君へ

はい、僕です。 下記のDockerCLIインストール手順に従っていたところ、 https://new-console.ng.bluemix.net/docs/containers/container_cli_cfic_install.html 手順3でさっそくつまづきました。 $ docker run hello-world docker: Cannot connect to the D…

今さら始めるJavaScript Promiseの基礎の基礎

最近ようやくPromiseを触り始めました。わりと雰囲気で使ってしまっているので、ここらで自分のために整理を…。 ただ、基本的な例がすでに複雑というか、初心者にとってはムズい気がするので、超噛み砕いてみました。 Promise - MDN 最小構成 Promiseオブジ…

最小構成で始めるRollup.js

最小構成で始めるRollup.js Rollup.jsについては、既に素晴らしい記事があります。 Rollupがちょうどいい感じ しかし、初心者がRollupを使い、なおかつJSのモジュールシステムに馴染みがないとすると、もっとシンプルな構成が望ましいかなと思い、この記事を…

React, Express, Webpack, Relay, GraphQLでつくるSPA

アプリケーションと呼ぶには程遠いですが、ひとまず最低限の形になったのでメモ。 From REST to GraphQLを読んだのが、直接のきっかけっちゃあきっかけ。 JSだけで、一通り作ってみようと。 注意書き 筆者は、ReactもRelayもGraphQLも初心者です。このポスト…

最小構成ではじめるElm Architecture

Elm

いわゆるリハビリ。自分用に書いたのですが、公開します。Elmのバージョンは0.17です。 なぜ書いたのか。 ググッて出てくるコードが複雑なものが多く、初心者にとって本当に必要なものを明示したかったから。 なので、0.17から盛り込まれたSubscribeについて…

CSSだけで画像を完全に黒(白)色にする

小ネタ。 pngのアイコンを、白と黒の2通りで出したかったので調べました。 黒くするには↓ .make-this-black { filter: brightness(0) invert(1); } 白くするには↓ .make-this-white { filter: brightness(1) invert(0); } を指定すればOK。 filterプロパテ…

nodemailerでconnect ECONNREFUSED 127.0.0.1 が出てしまう場合の対応(Gmail対応)

ローカル開発中にnodemailerのエラーに遭遇。 connect ECONNREFUSED 127.0.0.1 調べてみたら、設定が足りていなかった。 SMTP設定 SMTPのconfigを設定する。 gistbe104f76b8a98f462f30be21c99745f1 これでひとまず、自分から自分へのgmail送信はできた。自分…

node-cronはTimeZone指定ができるよ

node.jsアプリケーションでcronを実行する場合、node-cronを使うことが多いです。 github.com cronの実行時間を指定する際、TimeZoneを指定できると気づいたのでメモ。 Asia/Tokyoタイムゾーン Asia/Tokyoタイムゾーンの例は以下の通り。 gistfbbc9d099cbbc8…

【JavaScript】Array.prototype.sliceとArray.prototype.spliceの違い

Arrayの標準メソッドにはsliceとspliceがあります。紛らわしいですよね。しかも挙動まで似ています。 ちょっと自分の中で違いを忘れてきてしまっていたのでメモ。 Array.prototype.slice 配列の一部をコピーします。 gist1ab3b38c61b8413eae2b4981cfc614c7 d…

【JavaScript】配列の中からペアではない単一要素を見つけるにはXOR(排他演算子)が便利

プログラミングの問題を解いていて、ベストプラクティスを発見したのでメモ。 問題 奇数個の要素を持ったInt型の配列Aが与えられる。その中からペアにはならない単一の要素を見つける。 例 A[0] = 9, A[1] = 3, A[2] = 9, A[3] = 3, A[4] = 9, A[5] = 7, A[6…

Elmをインストーラ経由のものから、npm管理へと移行

Elm

半年ぶりくらいにElmを触りましたが、0.17から0.18へとアップグレードしました。0.17は公式のインストーラ経由でインストールしたのですが、これを機にnpm管理に移行しました。 インストーラ経由のElmを削除 Elmそのものを削除。 $ sudo rm /usr/local/bin/e…

cpp 日本語文字列についてメモ

C++

言語100本ノックに挑んだら、いきなりつまづいてしまった www.cl.ecei.tohoku.ac.jp "パトカー"の出力ができていないさそう。なにやら文字化けが表示される。ひょっとしたら文字コード周りの問題か…? マルチバイト文字列とワイド文字列 そもそも、cppの文字…

Python3で標準入出力(競技プログラミング用)

最近Pythonデビューをした者です。 手始めに競技プログラミングで素振りをしようかなと。まずは入出力のお勉強。 単純な入出力 gistd81cb35385f34d5b0e127a5b4dfc85ff 入力の型 gistca87e0960b731deba07e1ff0c7d5782e 1行データの分割 gistafc68ac34d7db66f…

C++ 文字列が全て同じ文字で構成されているかどうか調べる

C++

std::string::find_first_not_of を使う。 string::find_first_not_of - C++ Reference find_first_not_ofは指定した文字以外が最初に見つかった位置を返す。 指定の文字が見つからなかった場合はstring::nposを返すので、nposと比較(==)することで「文字…

WebStormのターミナルで、rvmのPATHが通っていなかった

すみません、ひょっとしたらWebStorm関係ないかもしれません。少なくとも、自分のWebStorm環境で発生したので便宜的に「WebStormのターミナルで、rvmのPATHが通っていなかった」となりました。 発端 いつものようにrails開発を始めようとしたところ、 $ rail…

nodebrew install でsyntax errorが出たら、nodebrew install-binaryを試す

nodebrew install したら、syntax errorが出てインストールに失敗した。 hasen.hatenablog.com Pythonのバージョンが違うのかなと思って調べてみたら、確かに3系を使っていた。 ところがpyenvで2系に戻してみても、install時にsyntax error。結果は変わらず…

Qiitaの"俺たちはJavaScriptの非同期処理とどう付き合っていけば良いのだろうか"をやってみる

非同期周りにまだ慣れてない感じがあったので、素振りです。 こちらの記事をただただ写経しました。 qiita.com 書いたコードはこちらに。 github.com Promiseにまだまだ慣れていないなと感じたので、改めて噛み砕いてQiitaに投稿しました。 qiita.com

Qiitaの"Node.jsのOAuthを使ってGoogleDriveAPIを叩いてみた"をやってみる

ちょっと仕事で必要になったので、練習。 参考: qiita.com

【JSer向け】ローカルで生のRethinkDBを触る

RethinkDBについて。

webpackはどのように動いているのか(3)

webpackの仕組みについて、見ていきます。 前回↓ chuckwebtips.hatenablog.com 前回は、webpackがexportやmodule.exportsをどのように変換するかについて見てみました。 今回は、モジュールのimportやrequireがどのように処理されるかを見てみます。 まず、…

webpackはどのように動いているのか(2)

引き続き、webpackの仕組みについて見ていきます。 chuckwebtips.hatenablog.com 前回書いたコードはこちらでした。 // gist.github.com 本当に単純な定数定義ですね。 実際の開発では、JavaScriptはモジュール単位で書くのが基本だと思います。なので、まず…

webpackはどのように動いているのか(1)

ずっとWebpackのソースコードを読んだり、仕組みを知りたかったのですが、時間がなくてやれずにいました。 今日からはWebpackの仕組みについて、ちょっとずつ探っていこうと思います。何度かに分けて書きますが、記事が溜まってきたらQiitaにでもまとめます…

001 UIKit - 014 UIImageViewの画像の回転/拡縮/反転

iOS開発のお勉強。今回は画像周りについて。 教材:014 UIImageViewの画像の回転/拡縮/反転 - Swift Docs できたもの 画像がいろんな形式で表示されています。 書いたコード // gist.github.com 学び UIViewImageのtransformに対して、CGAffineTransformMake…

001 UIKit - 013 UITabBarControllerでタブの表示

iOSのお勉強。今日はタブです。 教材:013 UITabBarControllerでタブの表示 - Swift Docs できたもの 画面下の方にタブが2つあります。デフォルトでは、Featuredが選択されている状態です。 ここでHistroyをタップすると、 画面が切り替わります。 書いたコ…

001 UIKit - 012 UINavigationControllerの表示

iOS開発のお勉強。 教材:012 UINavigationControllerの表示 - Swift Docs UINavigationControllerについて。 今回、はじめて、複数ページを実装しました。こんなに簡単にできるとは。。 UINavigationは複数ページのナビゲーションであって、複数のページは…

Relayアプリケーションに、routerを導入する

RelayでSPAを作っています。前回までで、ひとまず形には為りました。 chuckwebtips.hatenablog.com ただ、現在の状態だと1つのページしかありません。 (求人一覧が表示されている状態) 求人をクリックしたら、求人の詳細画面にうつる。みたいな処理をReac…

001 UIKit - 011 UIPickerViewで値の選択

iOS開発のお勉強。今日はUIPickerViewについて。 教材→011 UIPickerViewで値の選択 - Swift Docs こんなやつができました。↓ 学び いつぞやのUITableと同じく、データソースメソッド、デリゲートメソッドが必要だった。 書いたコード // gist.github.com

JS開発環境の構築(5)Relayのインテグレーション

引き続き、JSでつくるアプリケーション。 前回までで、開発環境の構築と、GraphQLの導入が済みました。 chuckwebtips.hatenablog.com chuckwebtips.hatenablog.com 今回は、ReactとGraphQLを上手いことつなぐための、Relayを導入していきます。今回は量が多…

001 UIKit - 010 UIAlertControllerでアラートを表示

iOS開発のお勉強。今日はアラートについて。 教材→010 UIAlertControllerでアラートを表示 - Swift Docs 学んだこと まず、UIAlertControllerのインスタンスを作成する。そのインスタンスに対して、UIAlertActionのインスタンスを追加していく。 UIAlertCont…