javascript

Vue.jsによるデータ絞り込み

Codegridの連載を元にちょっとだけ変えたもの。 複数選択するとandで絞り込むSee the Pen playerSelecter by tamoriinu (@yokoyama) on CodePen.

配列を一定の要素を持つ配列の配列に変換

何処かで使う可能性がありそうなのでメモ lodashでそのもののメソッドがある See the Pen lodash chunk by tamoriinu (@yokoyama) on CodePen. 実装 github.com

Vue.jsの何が嬉しいのか?

前職ではいわゆる静的なWebサイトを主に作成していたので基本jQueryで事足りていたのだが、Webアプリ制作会社に移ってからはプロジェクトにVue.jsが使われており、Vue.jsのレールに乗るような書き方をする必要が出てきた。 最初は完全にjQuery脳だったためVu…

2016年オリックス・バファローズの勝率とポンタの歩み

去年から始まったオリックスとポンタのtwitterコラボ、好評につき本来一年だった契約が更新され、今年も続いている。 勝った時より負けたときの方がリアクションが面白いので有名。特に去年は借金26と、負けが込んだため、愉快なポンタを堪能できた。そこで2…

高校野球の優勝回数を県別にまとめてみた

県別甲子園優勝回数 D3.jsで日本地図を描き、県別の優勝回数データと連携させビジュアライズしてみた。 こうしてみると優勝旗が白河の関を越えていないのがはっきりわかる。 (東北勢の優勝が条件なので北海道の優勝は入れないらしい) また開催地である兵庫…

vue.jsによる絞り込み

See the Pen data filtering by vue.js by tamoriinu (@yokoyama) on CodePen.

Three.js

機能参加したThree.js入門者向けハンズオンでいじったものの残骸。Three.js触りだけだったけれど、もう少し勉強して思う通りのものが作れるようになれば楽しいかと思う。codepen.io

JSON serverとダミーJSONの作成方法

サーバーサイドのAPI実装がまだできていない場合に使用できる。 www.webprofessional.jp

vue.js component

gihyo.jp上記の「フルーツの名前をリストするコンポーネント」を、記載されているコードを 元に作成してもエラーになる。(vueのバージョン1系でも2系でも駄目) どうにもスッキリしないので動くように直した。

ES6におけるthis

ES6を使うに当たって、thisの挙動は注意する必要がある。shirusu-ni-tarazu.hatenablog.jp

Knockout.jsのViewModel間でデータのやりとりを行う方法

www.wrapcode.comKnockout.jsで別々のViewModel間でデータのやりとりを行う方法がわからなかったので 調べた所、上記のサイトに各種方法が書いてあった。"ko.subscribable"というfunctionがnativeであるけれど詳しいドキュメントは ないらしい。 このfunctio…

これJadeでどう書くの?という時に使えるサービス

Jadeで少し複雑な箇所に出くわした時、記法の調べが簡単につかない時は 一度HTMLで書いて以下のWebサービスでJadeに変換すると速い。HTML 2 Jade - a converter for HTML

Array.prototype.includes()

developer.mozilla.org配列の中に該当の要素があるかの判定を行うメソッド。 IEとEdgeでは未サポートのため、今の所Polyfillが必要。

ajaxでコンテンツを読み込んでから要素の高さを揃える

webdrawer.net上記のサイトを参考にして、書き方をちょっとだけ変えたのが以下。 いままでコールバック地獄、という程のものに出会わなかったけれど、今後は非同期処理を気にする必要があるパターンに色々でくわしそうなので予習しておいてます。http://tamo…

crontabでnode.jsを定期実行する

node.jsはcron用のモジュールがあるが、今回はCentOSのcrontabを使用する。node.jsのいろいろなモジュール14 – node-cronでcron的にプログラムを実行する http://dev.classmethod.jp/server-side/cron/さくらVPSでcronを設定する(CentOS) http://okuzawats…

JavaScriptで配列オブジェクトにshuffleメソッドを追加する

1人で作成する簡単なアプリなどではArray自体にshuffleメソッドを追加してしまったほうが 楽かもしれない。See the Pen shuffleArray(prototype) by tamoriinu (@yokoyama) on CodePen.

JavaScriptでマウスの座標を取得

マウスの座標は原点をどことするかで値が変わってくる。 スクリーン(PC画面)の左上(screenX/Y) ブラウザで表示されている領域の左上(clientX/Y) 表示されているページの左上(pageX/Y) イベント発生元要素の左上(offsetX/Y) 参考書籍にはoffsetX/Y…

テトリス

【JavaScript】200行で作るテトリスのレシピ【HTML5】 http://coderecipe.jp/recipe/iHjJBJx9Si/上記のサイトのテトリスのコードを写経しつつちょっと改良した。http://tamoriinu.sakura.ne.jp/tetris/ ※音出ます

パララックスのテスト

パララックス効果のサイトを作るにあたって、動きを検証してみた。 http://tamoriinu.sakura.ne.jp/parallax_test/使ったプラグインは以下のもの□jq.easyParallax https://github.com/rin316/jq.easyParallax/blob/gh-pages/jquery.easyParallax.js20160604…

gulpfile.js設定(browserSync)

var gulp = require('gulp'); var browserSync = require('browser-sync').create(); var reload = browserSync.reload; gulp.task('serve', function(){ browserSync.init({ server: { baseDir: "src" } }); gulp.watch("src/**", reload); }); gulp.task('…

浮動小数点を整数にする方法

enchant.js スマートフォンゲーム開発講座より Math.floor(1.618); //1 ~~(2.414) //2 (3.14159)|0 //3 parseInt(1.4142); //1

jsdo.it貼り付けテスト2

jsdo.itからコード埋め込み