JavaScript

原子番号から元素情報を参照する CUI ツール「chemi」を作った

日々生活している中で、とっさに原子番号から元素の名前を引きたいというときがよくあると思います。 例えばこういった場面です。 腹が原子番号 2 になったので何か食べよう— バトルプログラマー柴田智也@少女終末旅行 (@tomoya_shibata) October 4, 2017 理…

状態管理ライブラリ MobX の具合を知りたかったので TypeScript で React と組み合わせてシンプルな Timer を書いた

MobX なるものに興味を持ったので、動きを掴むために。 MobX は、曰く「簡潔でスケーラブルな状態管理イブラリ」。 少し調べてみたところ、まだまだ国内での情報は少ない様子。 github.com MobX による状態管理が一体どういう具合なのか知りたかったので、実…

ES2015 Arrow functions で Object を返却するとき return の記述を省略する #JavaScript

結論あるいは動くコード const setThemeName = (themeName) => ({ type: 'SET_THEME', themeName: themeName }) ↑ が出来上がるまで Object を返却するメソッドを書くとき、例えば次のようなコードを書きます。 const setThemeName = (themeName) => { retur…

ES2015 以降で React 書くなら form 部品での onChange で setState するのもう全部これでいいんじゃないかなあ

という雑な感想。 gist.github.com developer.mozilla.org ↑ を定義したら、JSX で input なり select の onChange 属性 で指定してあげるといい感じだねって寸法です。見て分かるとおり、name 属性 を定義しておくって一手間が必要だけど。 はてなブログは …

ES6 だとか ES7 だとか ES2015 だとか ES2016 ってつまり何という自分用記事まとめ

ここらへん斜め読みしてるとかなーーーり混乱してきて時代に置いていかれてたので、自分用にいくつかの記事まとめをしてみました。先日「頃合いの良い」出来事もありましたので。 ES6 とか ES2015 ってなんやねん、同じちゃうの 昨年サイボウズの中の人が書…

めとべや東京 #10 にて Electron を知ってもらう話をしてきました

Electron を知る from Tomoya Shibata www.slideshare.net きっかけ ぐらばくさん「BPS 氏なにか話さない?」 僕「Electron なら」 ぐらばくさん「ええやん」 きっかけおしまい。 なんで Electron Windows(限定ではないけれど)向けのデスクトップアプリを…

WEB ブラウザで起きた JavaScript のエラーをサーバに送りたい

本記事は1分で実現できる有用な技術 Advent Calendar 2015の4日目の記事です。 WEB アプリケーションを開発していると「ユーザのブラウザで起きたエラーをサーバに送って DB に収集したい」という要望が出てきたり、外部からお願いされたりすることがありま…

React で要素のクラスを動的に付け外しするなら JedWatson さんちの classnames が便利

React 公式ドキュメントからもリンクされていました。 github.com すてきなドヤ顔。 Usage はかなりシンプルなのでそれ読めばすぐ使えるよ! …では味気ないので本日更新した MarkdownPreview の v.0.1.0 からコードを抜粋して利用例を紹介したいと思います。…

Markdown をリアルタイムプレビューできる MarkdownEditor (開発中)を公開しました

最低限の機能の実装が完了しましたので、github.io にて開発版を公開しました。 今回、私がReact.js と ES6 を学ぶためのテーマにしています。 MarkdownPreview In development version http://tomoyashibata.github.io/MarkdownPreview/ 今実装されているの…

React.js with ES6 で要素のフォーカスが当たった・外れたでクラス着脱させる

1つのイベントハンドラで出来ないかなと思ったんだけれど、どうも「フォーカスが当たった = onFocus」、「フォーカスが外れた = onBlur」 とそれぞれのイベントハンドラで拾ってあげなきゃいけなさそう。 React で定義できるイベントハンドラはドキュメント…

僕が JavaScript 開発をするときの ESLint の設定ファイルの基本形

eslint.org 目下のところ JSHint と JSLint 戦争は ESLint という第三勢力の登場によって僕の中でめでたく終結したので最近の JS 開発の際には ESLint を使っている。で、以下の .eslintrc (プロジェクト単位に作れる ESLint の設定ファイル)が僕の場合の…

React.js と Flux について少し考え始めないといけない

非常に軽いアプリケーションとはいえ、Electron.js という舞台で自分がこれあったらいーなーと思うアプリを作ることが出来ているので、雰囲気は掴めてきている。 先人達のアプリのコードを参考にしたいところがあるのだが、そもそも React.js や Flux の概念…

トレチケタイム Notifer on Electron.js 進捗

その日のトレチケタイムテーブルの ID 取れた pic.twitter.com/y73A8IxhiW— バトルプログラマー柴田智也 (@tomoya_shibata) 2015, 10月 2 cheerio-httpcli を利用した WEB スクレイピングが上手く進んでいるので、順調に解析が進んでいる。 ベタで設定した任…

Electron.js でデレステのトレチケタイムテーブル確認・通知するアプリを作っている

「デレステのトレチケタイムテーブルの確認と通知」とかいうちょっとした俺得アプリを作ってみるかと仕事中に思ったので作り始めた。せっかくなので Windows でも MacOS でも動かせる*1、Electron.js で作ってみることにした。 electron.atom.io Electron.js…

Electron.js で VisualStudio っぽい見た目

Electron.js でどこまでできるかなと思ったので。 なんか色おかしい。 まだできてないこと 最小化、最大化、閉じるボタン、リサイズボタンの表示 実装そのものはいたって簡単。ただし OS に合わせたボタンがやりたいなら自作するしかなさそう。OS のリソース…

Ajax 通信を任意のタイミングで中断する方法と、そのとき注意することの話

jQuery の $.ajax を用いた Ajax 通信処理を実装していると、「リクエストした Ajax 通信を中断したい」というストーリーに遭遇することがある。 こういうときは $.ajax が返却する jqXHR オブジェクト を変数に取得しておき、その中にある abort メソッドを…

テストランナー karma + テストフレームワーク jasmine の環境構築

2015年6月現在における JavaScript テスト環境はこの組み合わせが鉄板みたいなので。 前提条件 node.js npm (node.js が入っていれば npm も入っているはず) karma インストール https://www.npmjs.com/package/karma > npm i -g karma jasmine インストー…

IE11 で開発者ツールを立ち上げていないと ConsoleAPI や Ajax キャッシュ問題で稀によくしぬ話

GoogleChrome でも Firefox でも動くのに、 IE11 だけで上手く JavaScript が動かない問題に遭遇した。いずれもサーバとの通信に絡んだ部分である。 IE 独特の動かない JavaScript かなーと思い F12 キーを叩き開発者ツールを立ち上げて動きを確かめてみると…

Backbone.js 1.2.0 がリリースされたのでその内容を超粗訳した

めでたいことです。 http://backbonejs.org/ 以下が 1.2.0 における変更内容の粗訳 Gist になります。 恐縮ではありますが、翻訳の修正にご協力頂ければ幸いです。 Backbone.js 1.2.0 変更履歴 スーパー粗訳

innerText を使うと Firefox でしぬ

いわゆる今更案件。 document.querySelector('#hoge-id').innerText; この記述は Firefox では動かない。 innerText プロパティ がサポート対象外だからだ。 一方で Firefox 以外のほとんどのブラウザで動いてしまうのがトラップだろうか。 代替プロパティと…

TypeScript の module を勉強していたら名前空間という前提に素朴な疑問を抱いた話。

大規模 JavaScript 開発とかしてると、こんな風に名前空間を切ったりする。 とりあえず Backbone with Marionette を例に。 //namespace.js var App = { View = {}, Model = {} }; // model/hoge.js App.Model.Hoge = new Backbone.Model.extend({ // anythi…