Bye Bye Moore

PoCソルジャーな零細事業主が作業メモを残すブログ

javascript

gulpを入れたionicでserveした際に"WARN: No 'serve:before' gulp task found!"とかでたら

gulpを導入したionic環境でserveをやると、以下のようなエラーが出ることがあります。 WARN: No 'serve:before' gulp task found! If your app requires a build step, you may want to ensure it runs before serve.冷静にエラーを見ればわかりますが、serv…

ionic-datepickerを実装する

Ionicでカレンダー選択式のスゴイUIを提供してくれるionic-datepickerをionic1環境で使うための方法です。 Angular弱者の僕なので非常に苦戦しましたが、ようやく動いたのでメモ。 実際のところ Salesforce提供の雛形を、たたき台にしたプロジェクトでHogeと…

node製アプリに*NIXコマンドをぶっ込むshelljs

shelljsはnode製アプリで*NIXコマンドを利用可能な便利ライブラリです。 FirebugやYaomenといった有名ドコロで使われていると。 個人的にはSalesforce Mobile SDKでわけも分からず入れるものでしたが……調べてみると便利そうです。 実際のところ 現在いるディ…

フロントエンドまわりの導入パッケージyarn

yarmは雨後の筍の如く出て来るフロントエンドパッケージ導入ツールの一種です。 公式では高信頼、高速を謳っています。 実際のところ OS X版では以下のコマンドで導入 $ brew update $ brew install yarn現状では環境変数もぶっ込む必要があるようです。 $ p…

gulp利用アプリのレイアウトが崩れるようなら、プロジェクト中のnpmを再インストールしてみる

gulp利用アプリのレイアウトが崩れるようなら、プロジェクト中のnpmを再インストールしてみると良いです。 実際のところ とある開発中アプリをgit経由で導入し、必要ライブラリのgulp導入も行いました。 $ git clone git@bitbucket.org:foobar/fizzbuzz.git …

VirtualBox上のUbuntu14.04にcordovaとionicフレームワークを導入する

クロスプラットフォームなスマホアプリを開発するApache Corovaというライブラリがあります。 ionicは、このcordvaを拡張し更に格好良く、拡張性を向上させてくれるライブラリです。 本命は10USD~50USDで販売されている有料拡張らしいですが、基礎フレームは…

windowsでnodeを使う場合、nodistがつかえる

windowsでnodeを使う場合、nodistがつかえます。 公式でも配ってますが、nodistはバージョンの移動が楽で便利。 実際のところ chocolatyが導入できているならば $ choco install nodistで一発。 何らかの影響でつかない場合は公式のgithubに飛び、"with the …

HTML5のvideoタグを使ってブラウザからWEBカメラを呼び出す

ブラウザからWEBカメラを呼び出す方法です。 当初、Python + OpenCVの組み合わせを考えてましたが…… 重い画像処理をするわけでもない場合、HTML5から導入された仕組みを使えばイケます。 実際のところ navigator.mediaDevices.getUserMediaメソッドを用いてU…

WEB Storageを使ってみる

WEB Storageを使ってみました。 これは一昔前のCookieみたいなモノですが、容量が桁違いで使い勝手も幾分向上しています。 実際のところ expressで、簡単なデモを作ってみます。 js/webstorage.js function myFunction() { const a = localStorage.setItem("…

関数内の変数名は外とは独立に扱われる

関数内の変数名は外とは独立に扱われます。 グローバル変数や他の関数の変数と同名でも衝突しません。 あまり良い用法ではありませんが、ライブラリ等でブッキングしたとしても関数の外では影響を与えないと認識しておく必要はあります。 実際のところ グロ…

非欲張りな量指定子をつかうと、パターンマッチの範囲を限定できる

非欲張りな量指定子をつかうと、パターンマッチの範囲を最初のものだけに限定することができます。 局面によっては非常に有用です。 実際のところ たとえば、次のようなhtml文章があったとします。 ここから最初のタグ内容を抽出するケースを考えます。 cons…

分割代入では変数を捨てる事もできる

実際のところ mozillaのJavascriptに関するURLをパースするケースを考えます。 var url = "https://developer.mozilla.org/en-US/Web/JavaScript"; var parsedURL = /^(\w+)\:\/\/([^\/]+)\/(.*)$/.exec(url); console.log(parsedURL) /* [ 'https://develop…

分割代入で変数の代入の際、楽をする

分割代入(Destructuring assignment)構文は、配列かオブジェクトからデータを取り出して別個の変数に代入することを可能にする JavaScript の式です。 ……ナンのことだかサッパリ分かりませんね。少なくとも私は分かりませんでした。 私のような木っ端にとっ…

中括弧付きアロー関数を使うなら、ちゃんとreturnする

内部のアロー関数でreturnしないと何も返してくれません。 実際のところ shuzo-kino.hateblo.jp の続きっぽい話です。 function bar() { let f = (i) => {(arguments[1] || 0) + i}; return f(2)} bar(8) //> undefined ちゃんと動かすには、中括弧から出る…

関数定義の際、引数を与えなくてもargumentsが補足している

関数に引数を与えなくてもargumentsが補足しています。 名前付けた方が当然追いやすいですが。 実際のところ 基本的な例がこちら。 function hoge() { return arguments[1]} hoge(2,9) //> 9 ちょっと複雑に 内部のアロー関数でargumentを補足 第二引数がな…

JSでもRubyのEnumerableみたいな事をやる

JSでもRubyのEnumerableみたいな事をやる事ができます。 for ... ofみたいなことをやらなくても良いので、意味合いを追いやすくなります。 実際のところ rubyでいけば、こんな感じですね。 ary = [5, 6, 13, 0, 1, 18, 23] ary.reduce {|i,j| i += j} ary.se…

getterとsetterを使って既存オブジェクトを拡張する

javascriptはgetterとsetterを使うことで既存オブジェクトを拡張する事ができます。 実際のところ 通常、Dateクラスにはyearという名前の関数はありません。 let now = new Date; console.log(now.year); //> undefined Date.prototypeに手を加える事でyear…

sprintf-jsを使ってJSでもSprintf記法を使う

sprintf-jsを使ってJSでもSprintf記法を使う 実際のところ 導入 普通の手順通りnpmでインストール。 $ npm install -g sprintf-jsその後本体で const sprintf = require('sprintf-js').sprintf とやれば、読み込みの準備は完了 Javascriptだと案外面倒な、ゼ…

google formで入力後に確認メールを送る

google formで入力後に確認メールを送る方法です。 受領メールの反応速度は結構商売に直結したりするので重要ですよね。 この例から作りこんで、同時に営業担当にメールが行くようにすると手間が更に減ります。 実際のところ フォーム 以下のような入力フォ…

テンプレートリテラルで文字列に変数を埋め込む

テンプレートリテラルで文字列に変数を埋め込む事ができます。 実際のところ 文字列の埋め込みは"${}"で行います。 bashっぽいですね。 let a = 'gogo' `duck duck ${a}` // =>'duck duck gogo' 公式では、次のような例も紹介されています。 var a = 5; var …

letはブロックに紐付く

letはブロックに紐付くため、varではできなかった事が出来るようになります。 実際のところ var messages = ["Meow!", "I'm a talking cat!", "Callbacks are fun!"]; for (var i = 0; i < messages.length; i++) { setTimeout(function () { cat.say(messag…

Javascriptのsortは破壊的である

タイトルのまんまです。 Javascriptのsortは破壊的なので注意して下さい 実際のところ let d = [ 1, 5, 6, 2, 3, 4 ] d.sort() // [ 1, 2, 3, 4, 5, 6 ] d // [ 1, 2, 3, 4, 5, 6 ] rubyとおなじ感覚でソートしてしまうと意図しない挙動をする恐れがあります…

分割演算子をつかって配列データを楽に取り扱う

分割演算子をつかって配列データを楽に取り扱う方法です。 これはドットが3つ並んだ、最初見ると何だかサッパリわかないものですが配列を使う際にとても重宝します。 実際のところ [..."hello"] // [ 'h', 'e', 'l', 'l', 'o' ] これはString#splitと等価の…

ジェネレータ関数を同期処理に活かす

shuzo-kino.hateblo.jp で扱ったジェネレータ関数ですが、ホントは同期的処理で使う子みたいです 実際のところ bluebirdというライブラリを活用しつつ、ファイルの上書き処理をするものを考えます。 'use strict'; const Promise = require('bluebird'); con…

"break label"構文でループから任意のタイミングで抜ける

"break label"構文はforやwhileといったループから抜ける事ができる書式です。 悪名高きgoto文そのものの記法ですが、ネストしたループから特定条件で離脱したい場合などには かえってシンプルに書くことができたりします。 使いドコロを理解していれば、そ…

for...inとfor...ofの違い

個人的には頻繁に誤爆するfor...inとfor...ofの違いです。 雑にまとめると、 中身を見たい場合はof enumrableなものを読みたい場合はin といったところでしょうか 実際のところ 基本的な挙動 特に拡張をしていない、ただの文字列の場合を考えます。 配列でも…

"yield*"記法は変数をバラして渡す事ができる

"yield*"記法はforeachでぶん回せるような変数をバラして次の関数に渡す事ができます。 実際のところ 具体例として、フィボナッチ数列をジェネレータ関数で実装するケースを考えてみます。 記述する際の利用法は以下の(1)(2)の通り。 'use strict'; function…

ジェネレータ関数を使って、オレオレ・イテレータを作る

ジェネレータ関数を作るfunction*()記法を使って、オレオレ・イテレータを作ることが出来ます。 基本的に同じルールで進行するが時偶変なパラメータが発生する 任意のフラグが立った際、強制終了したい ……といった、有りがちなケースで使うと効果的です 実際…

javascriptで8bit、16bitなどの値を配列経由で使う事ができる。

JavaScriptの変数は日々世界のハッカー軍団によって性能改善が図られてはいます。 が……場合によっては、容量扱いがタイトな場合もありますよね。 WebCacheに入れたい場合とか。*1 そういう場合、ビット数を指定した値の扱いが可能です。 種類としては正負のI…

prototypeを使うと既存オブジェクトを拡張可能

prototypeは既存オブジェクトに手を加えるメソッドです。 実際のところ オブジェクト指向的な書き方をした、以下の様な関数があったとします。 function Person(fist, last) { this.first = fist; this.last = last; } p = new Person('gogo', 'yubari') こ…