デスクワーカーにありがちな雑然とした配線 元々はイケアで購入したケーブルボックスに収納していたのだけれど、デスクをスタンディングデスクとしたことによって、コード類が引っ張られ雑然とした状況になった。 デスクが壁際への配置なら仕切りなどで隠せるのだけれど、僕のデスクは窓に密着する形で配置しているため、デスク裏と壁に配線を隠す裏技が使えないのが難点だ。これらの悩みを解決しつつ、なんとかしてきれいに収納しようというのが今回の記事の目的。 理想のデスク像と必要なモノを洗い出す 理想像は「スタンディングデスクのように上下に昇降するデスクでも整然とした配線にする」「窓際のデスクでもある程度配線が目立たないようにする」という感じ。掃除機をかける際の邪魔にならないように、地面にはコード類がない状態にしておきたい。 悩みと理想像が理解できたところで、実際に雑然としたデスク周りの配線を整えていく。まずは「自分

Web Audio APIを使えばブラウザでも簡単に音楽アプリケーションが作れる！のですが、APIがあれば万事OKというわけでもなく、どのような方法でWebアプリケーションに組み込むのかという問題もあります。ということで、この記事ではReactとReduxを使ったWebアプリケーションにどういうアプローチでWeb Audio APIを組み込むのかを考えます。 この記事では簡単なシーケンサーをインクリメンタルに実装します。各項目の冒頭にその時点でのデモとソースコードのリンクを用意しています。デモのリンクは次の絵文字で示しています。 音の出ないデモ 音の出るデモ 依存モジュールは次の通りです。BabelとBrowserifyでビルドするというシンプルな構成です。 $ npm install -D babel-preset-es2015 babel-preset-react babelify b

React+Reduxアプリのチュートリアルを終えて本格的な開発に入るぐらいのタイミングで、ディレクトリ構成について悩み、他のプロジェクトを参考にしようと思って色々調べてみたのですが、これといってベストプラクティスは定まっていないように思えました。 当然プロジェクトの内容次第で変わってくる部分ではあるのですが、一般的なケースにおける知見として、開発が進んでいくにつれ、なんとなくこうした方が良いのではないか、というポイントが段々と見えてきたので共有します。 component component群については、componentとcontainerの2種類に大きく分け、reduxのconnectをしたcomponentをcontainerと定義するのが主流と思われます。 containerと呼ぶのにcomponentの大小や複雑さは関係なく、小さいパーツであってもconnectが必要なケースで