javascript
業務でrailsのコードレビューをしているときに、rubyにtransposeメソッドがあるのを初めて知った。 pythonだとnumpyなどで利用できるが、rubyは組み込みライブラリで定義されている。 docs.ruby-lang.org typescriptはnpmライブラリがあった。 www.npmjs.com…
Reactの勉強にこちらのチュートリアルをやってみた。 zenn.dev 以下の技術をざっくり学べる。 Express と Sequelize による API サーバー開発 React と API サーバーの連携 Cross-Origin Resourcer Sharing React によるルーティング Auth0 によるユーザー認…
8/25(日)にElmのMeetupに行ってきました。 elm-jp.connpass.com 2019年にわざわざ学ばなくてもよい言語で一位になったElmですが、qiitaではちょくちょく ランキング内に記事が上がっていて、最近お気に入りの無職やめ太郎氏も記事にしていたり したのでちょ…
HTML5のinputタグ、range属性を触る機会があったのでメモ 素の状態 See the Pen input range type by tamoriinu (@yokoyama) on CodePen. CSSデザインを当てたもの See the Pen input range type by tamoriinu (@yokoyama) on CodePen. 参考: How To Create …
UdemyのVue.js講座を見ていたら以下のライブラリが便利そうだったのでメモ。 medialize.github.io thebaker.hatenablog.com
See the Pen 山手線 by tamoriinu (@yokoyama) on CodePen. この間見つけた以下のsass mixinが便利なので、山手線の沿線図を描いてみた。 Placing Items on a Circle | CSS-Tricks 吹き出しの位置とか結構適当。 色々他にも応用できそうな気がする。
github.com jp.vuejs.org タイトル通りでケバブケースかすべて小文字にする必要がある。 HTML attributes are case-insensitive だから。 なのでカスタムイベント以外のpropsに渡す値なども、ケバブケースにする。（ちょっと面倒臭い） 【動かない例】 jsfid…
JSでの数値の昇順・降順、アルファベット順のsortをまとめておいた。 ひらがなや漢字のsortはJSでやらないほうがよい気がする。 See the Pen javascript sort by tamoriinu (@yokoyama) on CodePen. 参考サイト goma.pw
これの中にあるフィルタリング機能の所を抽出したのが以下 備忘録としてやっていることをコメントしておいた。 lodashのincludesを使えばもっとシンプルに書ける。Nativeのincludesは、そのままだと配列にしか使えないよう（後できちんと調べる）
javascriptである関数の処理にかかる時間を計測するのに以下のサイトを参考にさせてもらった。 sbfl.net こちらの本にあったdivのappend計測を実装。 しかし、上記の本は2013年出版だが、jQuery中心の内容で改めてjs界隈の移り変わりの速さを実感した。
v-model を使うとStoreを通さずにdataが変わってしまう。 Storeパターンの制約を守るために以下のように:valueを更新する必要がある。 See the Pen Storeパターンにおけるv-modelへの対処 by tamoriinu (@yokoyama) on CodePen.
Codegridの連載を元にちょっとだけ変えたもの。 複数選択するとandで絞り込むSee the Pen playerSelecter by tamoriinu (@yokoyama) on CodePen.
何処かで使う可能性がありそうなのでメモ lodashでそのもののメソッドがある See the Pen lodash chunk by tamoriinu (@yokoyama) on CodePen. 実装 github.com
前職ではいわゆる静的なWebサイトを主に作成していたので基本jQueryで事足りていたのだが、Webアプリ制作会社に移ってからはプロジェクトにVue.jsが使われており、Vue.jsのレールに乗るような書き方をする必要が出てきた。 最初は完全にjQuery脳だったためVu…
去年から始まったオリックスとポンタのtwitterコラボ、好評につき本来一年だった契約が更新され、今年も続いている。 勝った時より負けたときの方がリアクションが面白いので有名。特に去年は借金26と、負けが込んだため、愉快なポンタを堪能できた。そこで2…
県別甲子園優勝回数 D3.jsで日本地図を描き、県別の優勝回数データと連携させビジュアライズしてみた。 こうしてみると優勝旗が白河の関を越えていないのがはっきりわかる。 （東北勢の優勝が条件なので北海道の優勝は入れないらしい） また開催地である兵庫…
See the Pen data filtering by vue.js by tamoriinu (@yokoyama) on CodePen.
機能参加したThree.js入門者向けハンズオンでいじったものの残骸。Three.js触りだけだったけれど、もう少し勉強して思う通りのものが作れるようになれば楽しいかと思う。codepen.io
サーバーサイドのAPI実装がまだできていない場合に使用できる。 www.webprofessional.jp
gihyo.jp上記の「フルーツの名前をリストするコンポーネント」を、記載されているコードを 元に作成してもエラーになる。（vueのバージョン1系でも2系でも駄目） どうにもスッキリしないので動くように直した。
ES6を使うに当たって、thisの挙動は注意する必要がある。shirusu-ni-tarazu.hatenablog.jp
www.wrapcode.comKnockout.jsで別々のViewModel間でデータのやりとりを行う方法がわからなかったので 調べた所、上記のサイトに各種方法が書いてあった。"ko.subscribable"というfunctionがnativeであるけれど詳しいドキュメントは ないらしい。 このfunctio…
Jadeで少し複雑な箇所に出くわした時、記法の調べが簡単につかない時は 一度HTMLで書いて以下のWebサービスでJadeに変換すると速い。HTML 2 Jade - a converter for HTML
developer.mozilla.org配列の中に該当の要素があるかの判定を行うメソッド。 IEとEdgeでは未サポートのため、今の所Polyfillが必要。
webdrawer.net上記のサイトを参考にして、書き方をちょっとだけ変えたのが以下。 いままでコールバック地獄、という程のものに出会わなかったけれど、今後は非同期処理を気にする必要があるパターンに色々でくわしそうなので予習しておいてます。http://tamo…
node.jsはcron用のモジュールがあるが、今回はCentOSのcrontabを使用する。node.jsのいろいろなモジュール14 – node-cronでcron的にプログラムを実行する http://dev.classmethod.jp/server-side/cron/さくらVPSでcronを設定する（CentOS） http://okuzawats…
1人で作成する簡単なアプリなどではArray自体にshuffleメソッドを追加してしまったほうが 楽かもしれない。See the Pen shuffleArray(prototype) by tamoriinu (@yokoyama) on CodePen.
マウスの座標は原点をどことするかで値が変わってくる。 スクリーン（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…
