おふくろさまより愛をこめて

mmmpa ふとしです。誠実なプログラミングを心がけたい。

JavaScript entries

2018/12/10 00:00:00

簡単な Webpack plugin を作成して Webpack と仲良くなる (ビルド時情報を console.log に表示する)

JavaScript Advent Calendar 2018 - Qiita 5 日目のエントリーです。未投稿だったので差し込みました。 このエントリーは Webpack 4.26.1 を基準に書かれました。このエントリー用に書いたコードは mmmpa/create-webpack-plugin-practice にあります。 序 開発者以外の方々に改修後の JavaScri

2018/12/08 00:00:00

簡単な Webpack loader をいくつか書いて Webpack と仲良くなる

JavaScript2 Advent Calendar 2018 - Qiita 8 日目のエントリーです。 このエントリーは Webpack 4.26.1 を基準に書かれました。このエントリー用に書いたコードは mmmpa/create-webpack-loader-practice にあります。 序 Webpack の設定の複雑さには毎回目が回ります。ある目的があってその目

2018/12/02 09:36:05

loader をつくって学ぶ Webpack

序 このエントリーは Webpack 4.26.1 を基準に書かれました。 Webpack とは Webpack は loader と呼ばれるモジュールを使って、任意のファイルやデータを JavaScript 内で使えるようにすることを主たる目的としたプログラムです。最新の文法を使った JavaScript や CSS などを一般に普及しているウェブブラウザで機能させるために、

2016/12/25 15:27:03

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

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

2016/08/20 13:40:22

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

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

2016/07/28 06:38:08

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

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

2016/07/27 16:26:06

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

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

2016/07/20 22:54:56

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

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

2016/07/17 23:45:04

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

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

2016/05/12 15:52:25

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

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

2016/05/12 13:32:19

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

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

2016/05/11 00:23:32

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

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

2016/05/10 22:49:43

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

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

2016/05/10 15:10:14

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

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

2016/05/09 22:35:28

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

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

2016/05/09 20:26:45

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

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

2016/05/08 22:49:35

Reactで右クリックを扱う

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

2016/05/04 15:24:04

アンドゥリドゥの案メモ

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

2016/05/03 23:42:01

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

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

2016/04/11 01:41:32

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

久しぶりに借金に関して調べてたけど世のリボ払い利息計算機はなんでこんなに使いづらくつくってあるんだ。 — おふくろさま(♂) (@o296sm) 2016年4月9日 銀行が提供しているシミュレーターはやたらと入力項目が多かったり小さかったりでアレだったので、ただサッと手数料額を見てウヒョ〜コエ〜したいだけのわたしみたいな人には不向きだったので、とにかくサッと知れるやつが欲しくてササッ

2016/02/12 21:17:00

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

無職ももう半年になり、体がすっかりなじんできましたが、失業手当も残すところあと30日ほどになりなじんでる場合ではなくなってきました。 内閣府の統計をもとにグラフを描画するサイトをつくった 最近はおもにReactを触りつづけているのですが、チャートを描画するライブラリを使ってみようと作成しました。 自殺を知る、自殺を考える 比較をしたいんだけど数字の表じゃよくわからない

2015/08/07 00:57:08

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

今回のはReactの勉強用につくりました。 http://mine.mmmpa.net/ <a href="http://qiita.com/mmmpa/items/dfdf0f4de70b42ad1138">reactjs - javascript再勉強のためにreact + ardaでマインスイーパーをつくったので気づきを忘れないようにメモ - Qiita&l

2015/02/11 21:57:39

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

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

2014/07/03 15:14:23

vue.js + typescript をためす。

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

2014/03/31 13:31:14

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

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

2013/09/19 03:51:48

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

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

2013/09/17 02:01:44

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

説明書の写経になんの意味があるかというとそれ自体にはあまり意味がなくて、読んでいるだけだとすぐ眠くなるしわりと読み飛ばすしけっこう忘れるからです。 なるべく自分の言葉になおすようにすると、ちゃんと読まなくちゃならないのでよい。動作確認は livereloadx 走らせておくと保存しただけで結果が見れてよい。いまいち何が起こってるかわからない場合は console.log(_.templete)

2013/09/15 22:39:30

$(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('clic

2013/09/15 17:10:45

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

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

2013/09/13 01:34:16

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

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

2013/09/12 16:33:47

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

table の特定の行や列を複製したかったのだが、どうもずれる。 で、色々やってたら JQuery ではなくて Javascript の問題だった。Firefox と IE で起こって、Chrome では起こらない。 <table id="TABLE"> <tr> <td>1</td> <td