JavaScript
日々生活している中で、とっさに原子番号から元素の名前を引きたいというときがよくあると思います。 例えばこういった場面です。 腹が原子番号 2 になったので何か食べよう— バトルプログラマー柴田智也@少女終末旅行 (@tomoya_shibata) October 4, 2017 理…
MobX なるものに興味を持ったので、動きを掴むために。 MobX は、曰く「簡潔でスケーラブルな状態管理イブラリ」。 少し調べてみたところ、まだまだ国内での情報は少ない様子。 github.com MobX による状態管理が一体どういう具合なのか知りたかったので、実…
結論あるいは動くコード const setThemeName = (themeName) => ({ type: 'SET_THEME', themeName: themeName }) ↑ が出来上がるまで Object を返却するメソッドを書くとき、例えば次のようなコードを書きます。 const setThemeName = (themeName) => { retur…
という雑な感想。 gist.github.com developer.mozilla.org ↑ を定義したら、JSX で input なり select の onChange 属性 で指定してあげるといい感じだねって寸法です。見て分かるとおり、name 属性 を定義しておくって一手間が必要だけど。 はてなブログは …
ここらへん斜め読みしてるとかなーーーり混乱してきて時代に置いていかれてたので、自分用にいくつかの記事まとめをしてみました。先日「頃合いの良い」出来事もありましたので。 ES6 とか ES2015 ってなんやねん、同じちゃうの 昨年サイボウズの中の人が書…
Electron を知る from Tomoya Shibata www.slideshare.net きっかけ ぐらばくさん「BPS 氏なにか話さない？」 僕「Electron なら」 ぐらばくさん「ええやん」 きっかけおしまい。 なんで Electron Windows（限定ではないけれど）向けのデスクトップアプリを…
本記事は1分で実現できる有用な技術 Advent Calendar 2015の4日目の記事です。 WEB アプリケーションを開発していると「ユーザのブラウザで起きたエラーをサーバに送って DB に収集したい」という要望が出てきたり、外部からお願いされたりすることがありま…
React 公式ドキュメントからもリンクされていました。 github.com すてきなドヤ顔。 Usage はかなりシンプルなのでそれ読めばすぐ使えるよ！ …では味気ないので本日更新した MarkdownPreview の v.0.1.0 からコードを抜粋して利用例を紹介したいと思います。…
最低限の機能の実装が完了しましたので、github.io にて開発版を公開しました。 今回、私がReact.js と ES6 を学ぶためのテーマにしています。 MarkdownPreview In development version http://tomoyashibata.github.io/MarkdownPreview/ 今実装されているの…
1つのイベントハンドラで出来ないかなと思ったんだけれど、どうも「フォーカスが当たった = onFocus」、「フォーカスが外れた = onBlur」 とそれぞれのイベントハンドラで拾ってあげなきゃいけなさそう。 React で定義できるイベントハンドラはドキュメント…
eslint.org 目下のところ JSHint と JSLint 戦争は ESLint という第三勢力の登場によって僕の中でめでたく終結したので最近の JS 開発の際には ESLint を使っている。で、以下の .eslintrc （プロジェクト単位に作れる ESLint の設定ファイル）が僕の場合の…
非常に軽いアプリケーションとはいえ、Electron.js という舞台で自分がこれあったらいーなーと思うアプリを作ることが出来ているので、雰囲気は掴めてきている。 先人達のアプリのコードを参考にしたいところがあるのだが、そもそも React.js や Flux の概念…
その日のトレチケタイムテーブルの ID 取れた pic.twitter.com/y73A8IxhiW— バトルプログラマー柴田智也 (@tomoya_shibata) 2015, 10月 2 cheerio-httpcli を利用した WEB スクレイピングが上手く進んでいるので、順調に解析が進んでいる。 ベタで設定した任…
「デレステのトレチケタイムテーブルの確認と通知」とかいうちょっとした俺得アプリを作ってみるかと仕事中に思ったので作り始めた。せっかくなので Windows でも MacOS でも動かせる*1、Electron.js で作ってみることにした。 electron.atom.io Electron.js…
Electron.js でどこまでできるかなと思ったので。 なんか色おかしい。 まだできてないこと 最小化、最大化、閉じるボタン、リサイズボタンの表示 実装そのものはいたって簡単。ただし OS に合わせたボタンがやりたいなら自作するしかなさそう。OS のリソース…
jQuery の $.ajax を用いた Ajax 通信処理を実装していると、「リクエストした Ajax 通信を中断したい」というストーリーに遭遇することがある。 こういうときは $.ajax が返却する jqXHR オブジェクト を変数に取得しておき、その中にある abort メソッドを…
2015年6月現在における JavaScript テスト環境はこの組み合わせが鉄板みたいなので。 前提条件 node.js npm （node.js が入っていれば npm も入っているはず） karma インストール https://www.npmjs.com/package/karma > npm i -g karma jasmine インストー…
GoogleChrome でも Firefox でも動くのに、 IE11 だけで上手く JavaScript が動かない問題に遭遇した。いずれもサーバとの通信に絡んだ部分である。 IE 独特の動かない JavaScript かなーと思い F12 キーを叩き開発者ツールを立ち上げて動きを確かめてみると…
めでたいことです。 http://backbonejs.org/ 以下が 1.2.0 における変更内容の粗訳 Gist になります。 恐縮ではありますが、翻訳の修正にご協力頂ければ幸いです。 Backbone.js 1.2.0 変更履歴 スーパー粗訳
いわゆる今更案件。 document.querySelector('#hoge-id').innerText; この記述は Firefox では動かない。 innerText プロパティ がサポート対象外だからだ。 一方で Firefox 以外のほとんどのブラウザで動いてしまうのがトラップだろうか。 代替プロパティと…
大規模 JavaScript 開発とかしてると、こんな風に名前空間を切ったりする。 とりあえず Backbone with Marionette を例に。 //namespace.js var App = { View = {}, Model = {} }; // model/hoge.js App.Model.Hoge = new Backbone.Model.extend({ // anythi…
