Andyこの広告は、90日以上更新していないブログに表示しています。2017の23日目の記事です。はじめにアプリケーションの機能を「カプセル化」、「コンポーネント化」しようというのは、フロントエンド/バックエンド問わずに近年のWeb開発におけるトレンドのひとつです。Web業界も5年もの、10年ものと呼ばれるシステムが増える中で「最初から完璧なシステムを作ることなんて無理なんじゃないか」と多くの人が気づきはじめました。その流れを受けて「どうせ改修が必要なら、小さなスコープで新しいものに置き換え可能な仕組みを作ろうぜ!」というのが「カプセル化」、「コンポーネント化」の大きなモチベーションであると、個人的には理解しています。Vue.jsとコンポーネントJavaScriptのフレームワークであるVue.jsも、例に漏れずコンポーネントドリブンな開発に適した仕組みの1つです。CSSの仕組みを用いてスタイリングでさえ1つのコンポーネントに限定して適用できるなど、非常に再利用性の高いコンポーネント設計が行えて重宝しています。Vue.jsの大きな特徴として、既存のHTMLとさほど変わらないシンタックスでコンポーネントが記述できるという点が挙げられます(もちろんJSXで記述することもできます)。Vueは、そんな現場レベルでデザイナーさんとフロントエンドエンジニアの協業を加速させるためのツールです。StorybookとはStorybookとは、iframeを用いたサンドボックス上でコンポーネントの挙動をチェックできるUI開発環境です。ただのテストツールとしてではなく、スタイルガイドとしての利用も想定されているため、エンジニアだけでなくデザイナーさんにも役立つツールとして期待されています。Webにも対応しました。公式ページより様々な企業の導入事例を見ることができます。https://storybook.js.org/examples/各社ユニークなStorybookを用意していて眺めているだけで面白いです。会社の顔にもなるようなスタイルガイドを簡単に作れるなんてワクワクしますね。Storyと呼ばれるStorybook内のページにVueコンポーネントを追加するまで、の流れを追っていきたいと思います。本記事の対象ES6分かるマン/ウーマンVue.jsなんとなく分かるマン/ウーマンStorybookにとりあえず興味あるマン/ウーマン本記事のゴールいつも前置きが長く申し訳ないですが、本記事は以下のことを目的として書かれていますStorybookの概要を知ってもらう「Storybook、意外とカンタンやん!」と思ってもらう社内で投入する前に個人的に試した内容の作業ログを残したいまぁ、ほとんど3つ目がメインです。それでは上記を踏まえた上で早速Storybookを動かしてみましょう。guideというページが用意されているので今回はそちらを参考にします。localhost:9001にアクセスしてStorybookが表示されていることを確認します無事にコンポーネントがiframe上に描画されました。Replacement)が有効になっているので、コンポーネントファイルを編集すると変更が動的に反映されることが確認できます。Actionsはイベントハンドラから渡ってきたデータの確認やロギングができるAddonです。.native修飾子をつけると、root要素のイベントを監視できるんですね。LOGGER」というパネルが表示され、コンポーネントのイベントにフックしたログが表示されるようになりました。}</script>propsでボタンに表示するテキストを受け取るようにしました。Vue"にしています。decoratorをつけたStory内のコンポーネントについての使用例とコンポーネントの持つことができるprops等が体系的に表示されました!お手軽便利系のAddonです。KnobsGUIからコンポーネントの持つプロパティの情報を更新できるAddonです。'@storybook/addon-knobs/register'decolatorとしてStoryに追加します。:clap::clap:LinksStory内から別のStoryを表示する(遷移する)ためのAddon。github.com詳細は割愛その他のAddon基本的にUIをスッキリさせる系のAddonsが多い印象ですが、今回は全て試せませんでした。公式にGalleryが用意されているので、興味のある方は以下のリンクからご確認ください。痒いところに手がとどくAddonが見つかるかもしれませんhttps://storybook.js.org/addons/addon-gallery/実際に使ってみた手元にあったコンポーネントを突っ込んで作成したStorybookがこちらになりますデザイナーはすぐに見た目のレビューができるし、エンジニアはデザインの変更を差分で管理できるしで、なかなか幸せな世界に近づいたのではないでしょうかまとめStorybook本体のVue.js対応が行われたばかりということもありまだVue.jsに対応していないAddonsが多いようですが、スタイルガイドとしては必要十分な仕組みが備わっているように感じました。最初の設定はクセがありますが、一度導入してしまえば機械的にコンポーネントを追加していくだけなので中規模以上のSaasを運用するケース、受託案件を小さく大量に回すケース、どちらでも活用できるのではと思います。社内での本格的な実践投入はこれからですが、再利用可能なコード資産が1つでも多く残せるよう時間をかけて育てていきたいです。明日はohmurakenの記事です。Goで簡単なCRUDこんにちは、Andyです。Technology月別アーカイブ参加グループプログラミングはてなブログをはじめよう!andoshin11さんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。