Storybookとは、一言で表すならばコンポーネント見本市。コンポーネント志向が絶賛推し進められているフロントエンド界隈にて注目度が上がり続けている(のではないかと予想)される期待の開発ツールなのである。 どんな機能を持っているのかというと、作ったコンポーネントを単体で整列表示することができる。まさに見本市。 大雑把に言ってしまえばそれだけである。しかしフロントエンド開発を一度でも経験したことがある壮年層ならもうすでにピンと来ているに違いない。 そう、画面全体を表示することなく、目的の箇所まで画面操作をすることなく、作ったコンポーネントを、好きなプロパティを代入して、単体で表示することができるのである。 公式サイトに利用イメージがあるのでそちらも参考に。 ただいくつか問題があり、一番大きなものはReactを想定して作られていること。Reactを使っているなら何も問題はないが、俺はVueを使いたいんだという青少年にとっては乗り越えるべき壁はまだまだ多い。 だが安心して欲しい、Storybookは(先々月くらいから)正式にVueに対応している。資料の少なさという壁さえ乗り越えられたらStorybookはVueで使える。 前書きが長くなりすぎので本題に入ると、今回はvue-cliで作ったプロジェクトにStorybookを導入するまでの手順を紹介。 vue-cliセットアップ Storybookに興味を持つくらいならvue-cliでサクッとプロジェクトを作れるに違いないということで省略。あとyarnも。 Storybookインストール 導入ガイドを参考に手動でも良いが、getstorybookコマンドを使うと起動スクリプトや設定ファイルも作ってくれるので簡単。 まずはグローバルにツールをインストール。…

言わずもがなの公式ドキュメントにあるこの機能の破壊力が素晴らしいという雑記。 ルーティングでコンポーネントを切り替える機能は近頃のフロントエンドフレームワークなら当たり前のように実装されているけれど、その機能自体の破壊力に毎回感動してしまってあまり詳細な使い方までマニュアルを読み込んでいなかった。 そのせいで切り替えるコンポーネントはネストできるものの、1つのパスでは1つのコンポーネント切り替えしかできないものと思い込んでいた。 学習用にシンプルなものを作るならそれだけでも感動してしまう機能だが、webサイトとしての体裁が整ったものを作ろうとするとどうしても手の届かない箇所が出てくる。 メインコンテンツと、離れた場所(サイドバーとか)に表示するけどメインコンテンツと連動して表示を切り替えるツール系メニューなんかはまさしくその一例だろう。ツールバーに表示するタイトル部分をページによって切り替えたい時だってあるかもしれない。 切り替え対象全てを包含するような広い範囲をルーティングによる切り替え対象とすれば一応対応できるが、結局ページをほぼ丸ごと切り替えるような形になりエコではないしSPAとしてもどうなのという疑問が湧いてきてしまう。 こことこことここ、ついでにここもルーティングで切り替えられればいいのになぁと思っていたら普通に公式ドキュメントでやり方が紹介されていた。 あるじゃん、これだよこれ。1パス1コンポーネントなんて面倒な制約を考慮した画面設計なんてする必要なかった。これを使えばメインコンテンツ・ツール問題なんて直感通りのシンプルな方法で解決できてしまう。 公式でもサンプルはあったがちょっと味気なかったからもう少し切り替え感が分かるサンプルを用意してみた。 公式のサンプルを元にしてて素のecma2015が混じってるから対応ブラウザでないと動かないかも。chromeでは動いた。 http://www.miyanokomiya.tokyo/test/etc/vue-router.html#/ リンクをぽちぽち押してみると複数コンポーネントの切り替えイメージが分かるはず。ネストした中での複数コンポーネントももちろん対応してくれる。…

HTML内でSVGが使いたくなった htmlだけでは実現しにくいグラフィカルな表現が欲しくなったけれど、canvasでガチガチな描画処理を実装するほど大げさでもないという時の微妙なニーズを満たすためにSVGを採用することがあるかもしれない。 特にフローチャートやシーケンス図などUMLなドキュメントを表現したい時はSVGが活躍することが多いのではないだろうか。 TEXTを図形で囲みたくなった もしフローチャートを表現したいのであれば、当然のことながら図形内にテキストを配置する必要がある。 SVGにはテキスト表示用のtextタグ、図形表示用のpolygonタグ、divのようにグループを作れるgタグが揃っているのでこれらを組み合わせるだけで必要なものは揃う。矩形や円などは専用のタグを利用した方が簡単。今回は座標で表現する必要がある図形を想定。 <g style="font-family : 'sans-serif';"> <polygon fill="green" points="0,0 0,0 0,0 0,0" /> <text x=…

技術勉強には何か作るのが一番ということで何かを作ったというお話。 とりあえず作ったものはこちらから。 IE・Edgeで挙動が微妙なのはご愛嬌。 iframeでも貼ってみる。 Your browser does not support iframes. 掲げたテーマは流行りの技術を全面的に採用してとにかくwebサービスの体をした何かを素早く完成させること。 なぜ突然こんなテーマかと言うと、フロントエンド界隈で転職活動するのに最近のフレームワーク使ったことありませんだと心もとないから。あ、今の職場はもう辞めます。 採用したフレームワークはタイトルの通りreact+redux。ecma2015もsassも惜しみなく使ったいけてる開発環境を構築しようと意気込んだものの、待ち受けるwebpackとの格闘を思うと早くも挫折しそうであった。 webpackいじりも色々な発見があって楽しいが、今回の主題はそこではないのだ。僕が考えた最強の開発環境を構築して何も開発しないまま満足して終わることが今回の目的ではないのだ。 react+reduxが登場してからそこそこの時間が経っているし、ましてやwebpackいじりの煩わしさなんて万人に知れ渡っているはずだろう。きっとみんな考えることは同じはずと探してみたら見事に発見。 React Redux Starter Kit 日本語訳してくださっている記事 これだ、これを探していた、react+…

突然の簿記の話題 簿記1級の原価計算ではあまり出題頻度は高くないらしいが、いまいち理解度が低いのでまとめてみる。自分で解説を作ると分かった気になれるもの。 手持ちのTAC簿記の教科書には月初仕掛品のないシンプルなケースしか掲載されていなかったので、 こちらのページ にて取り上げられているような状況を考えてみる。数値を微妙に変更しているけど大枠はほぼそのまま引用。 [資料] 1.生産データ(単位:kg) 月初343(20%) 当月3150 月末480(40%) 完成2700 ※原料は全て始点投入で、工程を通じ10%の一定率で失われる。 原価計算問題で生産データが与えられた場合とりあえずボックス図を作るのだが、その時点で何かがおかしいことに気づく。理由は作ればわかる、ボックス図の左右で個数が合わないのである。 そこで資料を読み直すと、減損が発生していることがわかる。この減損個数をボックス図に入れ忘れているから数が合わないのも当然か。 減損個数の求め方は教科書通りの手法となる。月末部分に注目すると、工程の40%が終了していて、減損は工程を通じて10%なのだから、…