okprlog

[okprlog]

A Way of Splitting Components of React

Qiitaに書いても全くわかりやすくお伝えする自信がないので自分向けメモとしてここに書く。

個人的に作ってるChrome ExtensionでReactを使ってるんだけど、画面として左右2ペインの機能が二つ画面遷移するとして(画面遷移はURLの遷移ではない)、コンポーネントはどういう風にまとめるのがいいのか、というのが案外悩ましかった。

最初は左、右で共通しているのだからレイアウトでコンポーネントをまとめていた。LeftContainer、RightContainerがベースでそれらを保持するContainerがStoreの状態(何の機能を表示するか)に応じて左に出すものと右に出すものを決めるみたいな。

ただ、当然これだと追加で3ペインの機能を加えたい時に破綻する。

なのでやはり機能ごとにコンポーネントを作るべきである。ただ、そのうちの複数の機能でレイアウトがやHTML要素の組み方が似ている場合は冗長になってしまう。

そういう場合はさらにレイアウト用のコンポーネントを作ってしまえばいい、ポイントはベースのコンポーネントとさらに左と右を分ける用のコンポーネントも同じファイルに作る同じファイルに作る。

最初はContent側から子の要素(レイアウトの中に入れる機能のこと。リストとか詳細とか)にleft,rightのpropsをもたせてLayout側で判定させるだけで良いかと思ったけど、ここからさらに左と右の幅とかスタイルを指定したい、みたいな時にその辺直接関係な情報までを子の要素に持たせると、個人的な感覚としてイケてないと思ったのでこの形に落ち着いた。これであれば、レイアウトのスタイルを変えた��ればLeft,Rightコンポーネントにpropsを もたせてやればいいし、意味も通る。

ただ���記の例だと、共通要素が少なすぎて直接divを書いてしまっても別に冗長じゃないんだけど、もう少し共通要素が多かったり、あとCSSModulesを使ってるとcssファイルの整理によっては、各Content側でレイアウト用のcssを読み込んで、CSSModules()しないといけないのでそれを隠蔽できる。全部のコンポーネントで同じ一つのファイルのCSSで整理しているならもうこれのメリットはない。

追記：1日経って冷静に考えてみると、cssもscssとか使って共通要素は外部化してインクルードするし、レイアウトのタグがそんなにかさばるケースは考えにくいので記述量が凄く減るということはことはないかもしれない、その角度から見ると微妙な気がしてきた。ただ、アプローチとしては面白いと思う。htmlタグ(divとか)記述に比べて何をしたいのかが、Content側で一目でわかるので。

僕からは以上です

[okprlog]

A Start of Something New

2017年になりました。

新しいことでも始めようかと思ったけど、挫折してたことを再開するのもいいかなと思い、tumblrを再開してみようと思いました。

技術的なことはQiitaなりGithubなり使えばいいので、ここではなんか日常のとりとめないことを忘れないように記録していきたい。

去年は英語の勉強を本格的に始めたので、このまましっかり継続したい。少し混み入ったことも自然にスルッと説明できるようになりたい。年々冬の寒さが辛くなってるので、冬のないところに移り住みたい。

[okprlog]

Mouse(X|Y)とKeyState

SuperColliderで音を作ってる時、パラメータを変えながら出音を観察するのにMouseX、MouseYが非常にお手軽なわけですが、音は鳴らしたまま、パラメータ変更せずちょっとマウス操作したいみたいな時があったので、実現方法調べてみた。

こんな感じ。

({ SinOsc.ar(200 + Gate.kr(MouseX.kr(80, 2000, 0), KeyState.kr(0, 0, 1, 0)), 0, 0.5) }.play)

キーボードの"a"を押してる間だけMouseXの操作ができる。離したら最後のパラメータをキープする。

単純に"a"を押すとエディタにタイプされてしまうので、Ctrl-aとかで。

[okprlog]

128ch以上のAudio Bus設定

メモ。

わからないとか言ってたらtwitterで教えてもらった。

っていうか華麗にServerOptionsのhelp見過ごしてた。

s = Server.default; s.options.numAudioBusChannels_(256)

変更したら再起動いる気がする。startupのファイルに書いとけば良いのかも。

こんな感じのコード書いてみたらちゃんと音が出てるから設定変わってるんだと思う。

[okprlog]

もう一度テスト

テストテスト

class Test { Test(){ std::cout << "test" << std::endl; } }

[okprlog]

これはテスト

にほんご

これはテストです。