ンンンパ

ふとしです

JavaScript

Ruby on Rails + webpack-dev-server で Development.

Rails で JavaScript が必要なプライベートプロジェクトでは、ながらく Npm + Watchify + Gulp + Rails を手動起動などしながらすすめていましたが、最近、意を決して Yarn + Webpack + Rails に変更しました。そこで、Rails と JavaScript の接合点も Rails…

npm run scripts で current directory を参照したい。

環境変数を使います。 $PWD ではダメ npm run foo は常に基準となるディレクトリで実行されるので、たとえば以下の npm run here は、配下のディレクトリに潜っても同じ結果を返します。 "scripts": { "here": "echo $PWD" } これは current directory を考…

Access-Control-Allow-Originが設定されてないWeb APIを叩くために中継サーバー書いた。

大げさなタイトルみがありますがただのRailsです。 github.com うすうす実装なのでさがせばあるんでしょうけど、人が書いたもの使いたくない場合ってあるじゃないですか。 起動 $ TARGET=http://you-want-to-ajax.server.com ALLOW=http://your-local-js.ser…

vue-routerのroutesを全部出すやつ

だいたい見れる。 log(dig(router)) function digState (state, path = []) { state.nextStates.forEach((nextState) => { if (nextState.handlers) { nextState.handlers.forEach((handler) => path.push(handler)) } if (nextState.charSpec.validChars) {…

AWS Lambdaで使う関数をローカルでテストするサーバーを建てる。

AWS Lambda + AWS Api Gateway + AWS DynamoDBでなにかをつくることにはまっています。 AWS Lambdaで使う関数自体はmochaなどでテストできますが、実際にブラウザから叩くテストをローカルでしたいと思いました。 そこでNode.jsで簡単なサーバーを建てます。…

AWS Lambdaを使って、ブラウザ側とサーバー側で同じバリデーションをするということをやった。

日記です。今日の日記コードはこれ。 github.com qiitaにはさすがにもうAWS Lambdaでフォームなんていう記事は山盛りあったのでこっちで。 日記 Node.jsはサーバーとして動かせるので、ブラウザ側とサーバー側で同じスクリプトを用いることが可能です。(アイ…

2016年なのでgulpfile.coffeeをgulpfile.jsに書きなおした。

1ファイルとかだとdecaf onlineでやり直してチョロチョロ書きなおすだけでよくて楽でした。 ところで最初に用意したのは1年前ぐらいだったのですが、バージョンが進んでいたりdeprecatedが発生していたりで、ライブラリの刷新が必要になりました。 Node.js 6…

ブラウザの拡大率を取得できたことにより生まれそうな邪悪さ

ブラウザの拡大率、ズームレベルを取得した。 - Qiitaという半分冗談みたいなエントリーを投稿しました。 zoomer.mmmpa.netで試せますが、Firefox+Flashが動く環境でしか動作せず、被弾環境が少なすぎるので「冗談」です。 ところでなつかしの文字サイズ固定…

自分じゃないReact.Componentから上がってくるドラッグイベントを処理する。

のはつらい。 同一Component内で処理するのは楽 Marker Workbookではそのようにやりました。簡便に書くと以下。 startDrag(e){ e.preventDefault(); let div = e.currentTarget; let store = []; let startPosition = {x: e.pageX, y: e.pageY}; store.push(…

WatchifyとBabelifyでES2015とReactをする。(no Gulp)

BabelがわりにTypeScriptを使うという雑なことを続けていましたが、Babelでも作業できるようにします。 ├ public/ │ ├ js/ │ │ └ build.js # 書きだされたjs │ └ index.html │ └ src/ ├ js/ │ └ index.js # ES2015のjs ├ out # ../public/jsへのシンボリッ…

TypeScriptでmixinした時に型情報が見れないのをある程度なんとかする。

わたしが使っているのはこういうやつで、"Real" Mixins with JavaScript Classes由来のやつです。 gist.github.com このようにインします。 export default class Mixed extends (mix(BaseClass).mix( Mix1, Mix2, Mix3 ) as typeof BaseClass) { // class }…

ES6のDestructuring assignment(分割代入)でさらに便利記法

分割代入 - JavaScript | MDN 分割代入というのは let {a, b} = {a: 'a', b: 'b'}; console.log(a, b); // a b というオブジェクトのキーをもとに変数に展開できる、これだけでも十分便利なものですが、さらに便利にする記法もあります。 変数に別名をつけら…

TypeScriptのコード規約をIntelliJのデフォルト設定任せにしていたので、TSLintでちゃんとやる。

*lintは自分で、あるいは社で作成された一定の規約に従ったコードを書かないと怒られシステムです。 人の目とか感覚ではなく、機械が機械的に怒ってくれるので感情が沸かないのが良いですね。 TypeScriptにはTSLintがある 現在JavaScriptを書くにあたっては…

Reactで右クリックを扱う

ReactにはonContextMenuが用意されているので楽です。 render() { let onClick = (e, isRight?)=> { e.preventDefault(); if(isRight){ // 右クリック }else{ // 左クリック } }; return <div onClick={(e)=> onClick(e)} onContextMenu={(e)=> onClick(e, true)}> 何か </div> } ただ…

アンドゥリドゥの案メモ

実装 gist.github.com テストも書いてまぁ動いたのでこれで。 gist.github.com 最初のメモ gist.github.com こんな感じかな。未実装。 運動後にやってみる。

JavaScriptで確実にmouseupをつかんでblur()する。

Marker Workbook PDF.jsとReactでブラウザ上で完結する暗記帳的なものをつくった。 - Qiita ではキーボード・ショートカットでスペースを使うのですが、ボタン押下後にスペースを押すと、そのボタンにフォーカスが残っていて再度押下されてつらいということ…

リボルビング払いのコワさを知るために簡単な計算機つくった

久しぶりに借金に関して調べてたけど世のリボ払い利息計算機はなんでこんなに使いづらくつくってあるんだ。— おふくろさま(♂) (@o296sm) 2016年4月9日 銀行が提供しているシミュレーターはやたらと入力項目が多かったり小さかったりでアレだったので、ただ…

今日は週末だから自殺者は少ないと思ったんだけど。

無職ももう半年になり、体がすっかりなじんできましたが、失業手当も残すところあと30日ほどになりなじんでる場合ではなくなってきました。 内閣府の統計をもとにグラフを描画するサイトをつくった 最近はおもにReactを触りつづけているのですが、チャートを…

ことあるごとにマインスイーパーつくってるっぽい

今回のはReactの勉強用につくりました。 http://mine.mmmpa.net/ reactjs - javascript再勉強のためにreact + ardaでマインスイーパーをつくったので気づきを忘れないようにメモ - Qiitaqiita.com 前回は2-3年前で、Flashで右クリックが取れるというのでつく…

clientside-haml-js を試そうとしたら undefined がどうのと言われて困った。

結論だけいうと underscore.string のバージョンが 3.0.x だと 640 行目の contents = (_.str || _).rtrim(line[0]); で死ぬ。 underscore.string を 2.4.0 に換えれば健康な生活に戻れます。 で clientside-haml-js 動かしてみましょう + Haml をとりあえず…

vue.js + typescript をためす。

ここ丸一ヶ月ほど完全に rails おじさん化していたのでこれではいかんと vue.js をさわりなおすことに。とりあえず簡単なものをつくって雰囲気をつかんだりしたい。 vue.js + typescript 神経衰弱 データバインディングやはり最高だろうという感じで早く ie8…

AngularJS + Jasmine でテストに入門する準備。

とりあえず動かしたいなと思って AngularJS を動かしている HTML に describe などをコピペすると Uncaught ReferenceError: describe is not defined などと言われる。先生方におたずねすると angular-mocks.js を読み込みなさいと言われるが、それでもだめ…

backbone.js の説明書の写経をした。

その前に、まず「Backbone.js入門 (全22回) - プログラミングならドットインストール」をひととおりみてさわりを学んだ。動画を見ながら聞きながらいっしょにコードを書いていった。授業と違って待ってくれないのでせわしなかったけど、逆にだらだらしなくて…

underscore.js の説明書写経などした。

説明書の写経になんの意味があるかというとそれ自体にはあまり意味がなくて、読んでいるだけだとすぐ眠くなるしわりと読み飛ばすしけっこう忘れるからです。なるべく自分の言葉になおすようにすると、ちゃんと読まなくちゃならないのでよい。動作確認は live…

$(selector).on(eventType, handler) ではなく $(document).on(eventType, selector, handler) でイベント登録する。

たとえば bootstrap-button.js の初期化は以下のように行われている。 $(document).on('click.button.data-api', '[data-toggle^=button]', function (e) { //略 }) 自分が知っているやりかたは以下のようだった。 $('[data-toggle^=button]').on('click.but…

.on で namespace つきの eventType を登録する

JQuery を HTMLElement セレクターとしてしか使えてなかったので、勉強になるだろうと bootstrap.js を読んでいる(そのまえにドキュメント全部読めばって話ではある)。知らなかった使い方があればメモ。 .on で namespace つきの eventType を登録する 同…

もどるボタンを無効にしたい

もどるボタンを無効にしたいと思ってぐぐると、「もどり先のページに history.forward() を埋めこめば、『もどる』されても強制的に元のページに帰ってきてハッピーだよ」という記事がたくさん出てきて「そうじゃない、そうじゃないんだ」という気分になった…

JQuery で td のただしい幅がとれずに往生したのでメモ。

table の特定の行や列を複製したかったのだが、どうもずれる。で、色々やってたら JQuery ではなくて Javascript の問題だった。Firefox と IE で起こって、Chrome では起こらない。 <table id="TABLE"> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> </tr> </table>td を 100% / 5 の width:20% にして等幅に設定したあと、ta…