牌語備忘録 -pygo

あくまでもメモです。なるべくオフィシャルの情報を参照してください。

牌語備忘録 -pygo

Javascript

Webpack の bable の設定で `const { value, ...inputProps } = input` みたいな Rest Properties を使えるようにするメモ

よびかたがよくわからないんだけどこんなやつ let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 }; 設定を追加しないとビルドで失敗する やり方 webpack まわりは省く(動いている前提) ライブラリインストール $ npm install -D babel-preset-stage-2 webpa…

Javascript のオブジェクトで特定のkey以外ほしい場合のメモ

いつも悩むのでメモ const data = { last_name: '夏目', first_name: '漱石', created_at: "2017-03-21T12:00:00.000000", updated_at: "2017-03-21T12:00:00.000000", }; const IGNORE_KEYS = [ 'created_at', 'updated_at', ]; const filterIgnoreObject =…

Javascript でカタカナ->ひらがな変換とか全角英数->半角英数に変換とかのメモ

カタカナ->ひらがな変換 const katakanaToHiragana = (katakana) => { return katakana.replace(/[\u30a1-\u30f6]/g, (match) => { const chr = match.charCodeAt(0) - 0x60; return String.fromCharCode(chr); }); }; console.info(katakanaToHiragana('カ…

Javascript のソースコードを prettier で git commit 時に自動で整形してみるメモ

prettier Golang の gofmt みたいなやつの Javascript 版。 インストール $ npm init -y $ npm install -D prettier lint-staged husky package.json precommit と lint-staged を追加 { "scripts": { "precommit": "lint-staged" }, "lint-staged": { "*.js…

郵便番号を入力してボタンを押すと住所を補完するやつのメモ

<html lang="ja"> <head> <meta charset="utf-8"> <title>sample</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://ajaxzip3.github.io/ajaxzip3.js" charset="UTF-8"></script> <script> $(function() { $('.js-button').click(f…</meta></head></html>

Javascript で url のパラメータを取るメモ

(es5) こういうURL で next とかの値を取りたい https://www.google.co.jp/?prev=next=http://foo.com&next=http://bar.com source code function parseParameter(key) { var val = null; var params = []; var items = location.search.substr(1).split('&'…

eslintでES2016の可変長引数が引っかからないようにするメモ

例 const { hoge, ...props } = this.props; ...props のとこで Parsing error: Unexpected token ... になる .esrintrc "parserOptions": { "ecmaVersion": 6, "ecmaFeatures": { "experimentalObjectRestSpread": true } }, これで error 消える 参考 java…

javascript の for...of と for..in のメモ

'use strict'; const any = (arr) => { for (let value of arr) { if (value) { return true; } } return false; }; console.log(any([false, false, false])); console.log(any([false, true, false])); //=> false //=> true const object = {foo: [false,…

es2015 のクラスで継承しつつ静的メソッドの中でインスタンス作成したりのメモ

(node v4.4.7) 'use strict'; class Hoge { constructor() { this.price = 50; } static getInstance(object) { const instanse = new this(); Object.keys(object).map(key => { instanse[key] = object[key]; }); return instanse; } } class Fuga extends…

ESLint v3.x で React 使う場合の設定メモ

2016-08-04 Thu: 追記・修正 (eslint v3.1.1) Install $ node install -g eslint eslint-plugin-react .eslintrc { "plugins": ["react"], "extends": ["eslint:recommended", "plugin:react/recommended"], "env": { "es6": true, "browser": true, "node":…

ES6のデフォルト引数の使い方を勘違いしていたメモ

ES6 function hoge(a='hoge', b='fuga') { console.log(a + b); } hoge(); //-> hogefuga hoge('foo', 'bar'); //-> foobar hoge('foo', b='bar'); //-> SyntaxError 実行時に b= とか書くとエラーになる ちなみに Python def hoge(a='hoge', b='fuga'): pri…

Javascript で配列や連想配列を何で回すのがいいのか混乱するので for, for...in, forEach, for...of などいじってみるメモ

(node v4.2.4) その1 'use strict'; let arr = [{id: 1}, {id: 2}, {id: 3}]; for (let x in arr) { console.log(x); } console.log('----'); arr.foo = "hello"; console.log(arr); console.log('----'); for (let x in arr) { console.log(x); } console.…

Emacs で Javascript の賢い補完するメモ

(emacs24.4) 使うパッケージ M-x package-install などで下記をインストール js2-mode auto-complete tern tern-auto-complete npm 下記もインストール $ npm install -g tern 設定 tern サーバーを利用すると .term-port ファイルが作られてしまうので、作…

Javascript の連想配列で key に数値を入れると文字列になるメモ

$ node > var a = {1: 'a', 2: 'b', 3: 'c'} undefined > a { '1': 'a', '2': 'b', '3': 'c' } > Object.keys(a)[0] '1' > typeof Object.keys(a)[0] 'string' ちなみに Python だと数値のまま $ ipython In [1]: a = {1: 'a', 2: 'b', 3: 'c'} In [2]: a Ou…

Javascript で filter の書き方のメモ

ES6 'use strict'; var family = [ {'name':'Namihei', 'age': 54}, {'name':'Masuo', 'age': 28}, {'name':'Katsuo', 'age': 11}, {'name':'Tarao', 'age': 3} ]; var family1 = family.filter(function(person) { return person.age < 30; }); var family2…

Javascript で配列を逆順にするメモ

> var a = [1, 2, 3] undefined > a [1, 2, 3] > a.reverse(); [3, 2, 1] > a [3, 2, 1] > a.slice().reverse(); [1, 2, 3] > a [3, 2, 1] a.reverse() で破壊的 a.slice().reverse() で非破壊的 参考 Reverse array in Javascript without altering the ori…

関数呼び出しタイミングのメモ

いちおう想定通りの結果になるか確認してみた javascript (es2015) 'use strict'; function foo(func) { console.log('foo!'); func(); console.log('end foo!'); } foo(() => {console.log('bar!');}); //=> foo! //=> bar! //=> end foo! python 2.7.x #!/…

Emacs と ctags のタグジャンプを ES2015 syntax に対応させるメモ

設定 参考リンクから必要そうなとこを抜き出してコピペ ~/.ctags --exclude=.git --exclude=.hg --exclude=log --exclude=tmp --languages=-javascript --langdef=js --langmap=js:.js --langmap=js:+.jsx --regex-js=/[ \t.]([A-Z][A-Z0-9._$]+)[ \t]*[=:][…

Javascript で sleep する関数メモ

ReactJS のサンプル書いてて ajax の get で遅延で値を取るような擬似的な処理で setTimeout() 使うとうまくいかなかったけど while 使うやつで値取れた。(と思ったけど関係なかったっぽい) function sleep(msec){ let now = new Date().getTime(); while(…

Javascript で配列の重複を除去する

var array = [1,2,2,3,3,3]; // ES5.1? var unique = function(arr) { return arr.filter(function (x, i, self) { return self.indexOf(x) === i; }); }; console.log(unique(array)); //-> [ 1, 2, 3 ] // ES6 console.log(Array.from(new Set(array))); …

Javascript で配列かどうか調べるメモ

instanceof を使えばよいの? > var friend = JSON.parse('{ "id": 1, "name": "のび太" }') > var friends = JSON.parse('[ { "id": 2, "name": "ジャイアン" }, { "id": 3, "name": "スネオ" }]') > friend instanceof Array false > friends instanceof A…

Google Chrome の Console で外部ライブラリの KeyMirror を試してみるメモ

> var ele = document.createElement("script"); ele.type = "text/javascript"; ele.src = "http://cdn.rawgit.com/STRML/keyMirror/master/index.js"; document.body.appendChild(ele); > var COLORS = keyMirror({blue: null, red: null}); undefined > C…

ReactJS と Browserify と babelify のメモ

前回『ReactJS と Browserify と reactify のメモ』 の続き。 なにやら reactify から babelify に乗り替えた方が良さげ みたいなので変更する。 あと watch もできるようにする。 変更するコード gulpfile.js var babelify = require('babelify'); var brow…

ReactJS と Browserify と reactify のメモ

簡単にできると思ってたら Browserify で ./jsx/**/*.jsx みたいなディレクトリ以下のファイルを指定するのに悩んだんのでメモ ソースコード # ファイル構成 . ├── gulpfile.js ├── index.html ├── jsx │ └── yo.jsx └── package.json gulpfile.js var brows…

Javascript の連想配列で key に変数を使うと展開されない件のメモ

連想記憶のkeyは変数が展開されない { foo: 'bar' } が取れると期待したら{ select: 'bar' }になってぎょぎょぎょってなった(´・ω・`) var select = 'foo'; var fanc = function(obj) { console.log(obj); }; fanc({select: 'bar'}); //-> { select: 'bar' } …

Javascript で配列を結合するメモ

var a1; var a2; var a3; var b1; var b2; var b3; var i; a1 = [1,2,3]; b1 = [4,5,6]; for (i = 0; i < b1.length; i++) { a1.push(b1[i]); } console.log(a1); //-> [ 1, 2, 3, 4, 5, 6 ] a2 = [1,2,3]; b2 = [4,5,6]; console.log(a2.concat(b2)); //-> …

Javascript で Python の文字列フォーマットみたいなやつメモ

Python print("I'm {name}. {age} old.".format(name="Hogeo", age=3)) #-> I'm Hogeo. 3 old. Javascript console.log( "I'm {name}. {age} old.".replace( /\{(\w+)\}/g, function(m, k) { return { "name":"Hogeo", "age":3 }[k]; } ) ); //-> I'm Hogeo.…

Javascript で簡単に数値を3桁区切りの文字列にするメモ

Google Chrome Developer Tools のコンソールで実行 > var n = 1234567890; undefined > n.toLocaleString('ja-JP'); "1,234,567,890" 参考リンク Javascriptで数値の3桁区切りを実装 - Qiita JavaScript - JSで数値の3桁区切りを実装する簡単な方法 - Qiita

Javascript で Python の sum() みたいな関数のメモ

var sum = function(arr) { return arr.reduce(function(a, b) { return a + b; }); }; console.log(sum([1, 2, 3, 4, 5])); //-> 15 組み込み関数 — Python 2.7ja1 documentation - sum() Array.prototype.reduce - JavaScript | MDN

タスク自動化ツールの Grunt のメモ

Quick start 的なやーつ package.json を作る とりあえず全てリターンすればデフォルト値が入る $ npm init package.json に grunt を追加する $ npm install grunt --save-dev package.json に書かれた依存モジュールをカレントディレクトリにインストール…

Javascript のファイル読むのに TAGS を npm でグローバルにインストールしたライブラリ全部ぶっ込んで作成するメモ

$ ctags -Re `npm root -g` .

Javascript でオブジェクトの列挙可能なプロパティおよびメソッドの名前を返すメモ

Javasciprt var foo = {'bar': 1, 'buzz': 2}; console.log(Object.keys(foo)); // [ 'bar', 'buzz' ] Python ちなみにこんなの foo = {'bar': 1, 'buzz': 2} print(foo.keys()) # ['bar', 'buzz'] はてな記法書くの面倒臭くなってきたなぁ 参考 https://dev…

CasperJS のメモ

CasperJS, a navigation scripting and testing utility for PhantomJS and SlimerJS CasperJS documentation — CasperJS 1.1.0-DEV documentation Casper.JSのススメ - After Coding 続・Casper.JSのススメ - After Coding PhantomJS入門 CasperJSを使う - …

Javascript と Python でクロージャー使ったカウンタのメモ

Javascript Javascript01 (n++) function counter() { var n = 1; return function() { return n++; }; }; var count = counter(); console.log(count()); console.log(count()); console.log(count()); console.log(count()); // 1 // 2 // 3 // 4 Javascri…

D3.js メモ

D3.js - Data-Driven Documents D3.js - 日本語ドキュメント データビジュアライゼーション「d3.js」 | GUNMA GIS GEEK D3.jsはなぜ人気があるのか? そして、なぜ難しいのか? | GUNMA GIS GEEK ゴールデンウィーク中にD3.jsを学びたい方にお勧めな厳選まと…

Underscore.js のテンプレートで if や else の条件分を使ってみるメモ

追記:jsdo.it に書いて貼ってみた 元のコード <html> <head> <meta charset="UTF-8" /> <title>Underscore.js - template sample</title> <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.0.js"></script> </meta></head></html>

Javascript の for文のメモ

//01 var i, max, arr = ['a', 'b', 'c']; for (i = 0; i < arr.length; i++) { console.log(arr[i]); } //-> a //-> b //-> c //02 for (i = 0, max = arr.length; i < max; i++) { console.log(arr[i]); } //-> a //-> b //-> c //03 for (i = arr.length;…

Javascript で Loto6 の数字をランダムに取得してみるメモ

Python での例 from random import sample print(sorted(sample(range(1, 44), 6))) # ex -> [14, 15, 31, 33, 40, 41] Javascript で書いてみる function range(start, end) { var numbers = []; if (!end) { end = start; start = 0; } for (var i = start…

jQuery と ajax と Underscore.JS のテンプレートで json ファイルを取ってデータを表示してみるメモ

表示確認はFirefox26。 chrome 使う場合は下記のように -allow-file-access-from-files オプション付けて起動する 【小ネタ】Chromeのローカルセキュリティポリシーの回避 | Developers.IO open -a Google\ Chrome --args -allow-file-access-from-files in…

Javascript で python の range() みたいのを書いてみるメモ

function range(start, end) { var numbers = []; if (!end) { end = start; start = 0; } for (var i = start; i < end; i++) { numbers.push(i); } return numbers; } console.log(range(5, 18)); //-> [ 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17 ]…

Javascript の sort() のメモ

sort() はアルファベット順でソートされるので数値の場合は気をつける。 var n, s; n = [ 25, 37, 6, 42, 8, 21 ]; console.log(n.sort()); //-> [ 21, 25, 37, 42, 6, 8 ] s = [ 'b', 'c', 'a' ]; console.log(s.sort()); //-> [ 'a', 'b', 'c' ] n = [ 25,…

Javascript で Python の random.sample みたいなのを書いてみるメモ

var numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43]; var result_numbers; // function random_sample(population, k)…

backbone.js & underscore.js CDN メモ

<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min.js"></script> <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script> backbone.js & underscore.js CDN recommendation? - Stack Ov…

Backbone.js メモ

Backbone Backbone.js jashkenas/backbone · GitHub Backbone.js Todosを読み解く - console.lealog(); 第一回 jQueryから始めるBackbone.js(1/2) - 実践!Backbone - Mobile Touch - モバイル/タブレット開発者およびデザイナー向け情報ポータル BACKBONE.J…

Javascript で関数定義を確認して使わないと予想外の結果になる例のメモ

JavaScript.Next Returns 37ページ var array = ["1","2","3","2","1"]; var a = array.map(parseInt); console.log(a); //-> [ 1, NaN, NaN, 2, 1 ] console.log(parseInt(1, 0)); //-> 1 console.log(parseInt(2, 1)); //-> NaN console.log(parseInt(3, 2…

Yeoman で作ったプロジェクトを Grunt server 起動して vmreare やiphone の外部の webブラウザなどで確認する場合のメモ

(MacOSX10.8, yeoman1.0.4, grunt v0.4.1) IP 調べる システム環境設定 > ネットワーク もしくは $ ifconfig yeoman のスケルトン作成 $ yo webapp Gruntfile.js hostname に iP いれる : connect: { options: { port: 9000, livereload: 35729, // change t…

Ruby と Javascript の変数のデフォルト値のメモ

修正・追加 Ruby irb(main):002:0> hoge ||= 'fuga' => "fuga" irb(main):003:0> hoge => "fuga" Javascript 1 > var hoge; undefined > hoge = hoge || 'fuga'; "fuga" > hoge "fuga" 2 > var hoge; undefined > hoge || (hoge = 'fuga'); "fuga" > hoge "f…

さらっと AngularJS1.2.0 でクライアントサイド、Python3 と Django1.6 で api サーバ を試してみるメモ

(Python==3.3, Django==1.6, djangorestframework==2.3.8, angular1.2.0, generator-angular0.6.0-rc.1) Django で apiサーバ作成 virtualenv mkvirtualenv booklist_sample --python /opt/local/bin/python3.3 インストール $ pip install django $ pip ins…

AngularJS で $.getJSON で json 取って for で回して配列に入れたら空になった場合のメモ

(AngularJS1.2.0) 問題 'use strict'; angular.module('sampleApp') .controller('MainCtrl', function ($scope) { $scope.books = []; $.getJSON('api/books/', function(json) { var _data = json.results; var _datum; for (var i = 0; i < _data.length;…

『Yeomanでフロントエンドとバックエンドサーバを一緒に開発する』 を yo angular でやってみたら『Cannot GET /』とかなった場合のメモ

問題 前回やった方法だとapiサーバ、フロントエンドサーバ、プロキシサーバを立ち上げてとかちょっと面倒。 『YeomanでフロントエンドとREST APIサーバーを同時に開発する方法』 を yo angular でやってみたメモ - 牌語備忘録 - pygo 前回の参考サイトの追記…