Vue.jsほぼ初心者だけのチームで既存サービスのリニューアルをやってみて得られた知見 - エムスリーテックブログ
こんにちは、エンジニアリンググループの福林 (@fukubaya) です。 2019年3月に僕たちのチームが担当するスマートフォンサイトをリニューアルしました。 リニューアルに際して、せっかくなので新しい技術やフレームワークを採用したいということで、詳しいメンバーはいませんでしたがVue.jsでリニューアルすることにしました*1。 本記事では、Vue.jsがほぼ初心者だけのチームでVue.js製プロジェクトをリリースするまでに得られた知見をまとめます。 すでにバリバリ使いこなしている方には物足りないと思いますが、これからVue.jsを始める方の参考になれば幸いです。 黒部宇奈月温泉駅は富山県黒部市にある北陸新幹線の駅。本文には特に関係ありません。 サービスの概要 開発環境 プロジェクトの管理はVue CLIで Chromeの機能拡張 Vue.js devtoolsは必須 バンドルサイズの確
Atomic Designの実装例 〜Atomic Designを使ったコンポーネント指向のUI開発：Q〜 - UGAP Engineer's Blog
本稿は（序）（破）（Q）のシリーズの3番目の記事になります。 本稿では前回（破）で説明したAtomic Designを導入する際に工夫した点をふまえた実装例をJSフレームワークを使用する場合と使用しない場合の２つの場合について紹介します。 シリーズ（序）ではAtomic Designの概要 シリーズ（破）ではAtomic Designの導入に際して工夫した点 について説明していますので、そちらをご覧ください。 実装例題材 下のサイトテンプレートを題材に実装していきます。 https://html5up.net/prologue シチュエーションとしては、デザイナーからもらったデザインカンプをエンジニアが実装する想定で説明します。 コンポーネントの分割 エンジニアはデザインカンプをAtomic Designのコンポーネント単位に分割していきます。 コンポーネントの分割フロー図は（破）で以下の
Nuxt.jsの新規プロジェクトでいい感じのテスト環境をつくる@2018 - Qiita
最新版=>フロントエンドのテストについて考える 現在、新規プロジェクトで、Nuxt.js+TypeScriptを使ったSPAの開発を行っています。この記事では、そういったケースにおいての、Nuxt.jsアプリケーションでのテストに対する考え方と、その方法を紹介します。 TL;DR ユニットテスト/結合テスト=>Jest UIテスト=>Storybookをベースに、Jestで足りない部分を補う プロジェクトの技術スタック Nuxt.js Vue.js Vuex TypeScript Docker テスト種別の整理 簡単に、今回登場するテスト種別の整理をしておきます。より詳しくは、ググったり書籍を読んだりするのをおすすめします。 ユニットテスト - 個別の関数やクラス、コンポーネントをテストする。 結合テスト - 複数の関数やコンポーネントをつなぎこんでテストする。 UIテスト - ブラウザを
Storybookをまず動かす！ReactとVueの最小環境を作った - zuckey blog
最近Storybookを会社で導入していて、環境設定についてまとめました。 基本的には、公式サイトのとおりですが、コンポーネントの例の記載がなかったり、ReactとVueでできるものが異なったりして、困った部分が合ったので、すぐに動く環境を作りました。 github.com 本エントリのコードはNode v8.9.4の環境で動作を確認しています。 Storybook？ https://storybook.js.org/ The UI Development Environment ReactやVueなどのUIライブラリで作成したコンポーネントの動作やデザインをエンジニア、デザイナ間で共有、閲覧できるツールです。 Storybookという名前の通り、あるコンポーネントやコンポーネントの集合に対して、storyを複数用意し、storyごとの振る舞いを閲覧することができます。 環境構築 Stor
Pull RequestごとにStorybookがビルドされたら最高じゃね？ - Studio Andy
merpayでは積極的にStorybookを活用してコードと見た目の両方の観点でレビューを行なっていますが、Pull Requestが飛んでくるたびに該当ブランチをpullしてローカルでStorybookを起動するのが大変という運用上の問題を抱えていました。 そこでソリューションチームの協力のもと、PRが作成されるたびにCIからGAE上にユニークなpathをもったStorybookを配信する仕組みが導入されたのが先週のこと。とてもめでたい👏👏 これによってPRのデザインをチェックする時もURLをクリックするだけでよくなりました。 UI開発の概念がひっくり返るほど便利だったので、この仕組みをプライベートの開発でも導入したいと思います。 やりたいこと Storybookをホスティングする環境(URLの共有だけで完結するもの)を作りたい Pull Requestが作成されるごとに自動で新しい
Storybook for Vueでエンジニアとデザイナーの協業を加速させる - Studio Andy
この記事はCAMPHOR- Advent Calendar 2017の23日目の記事です。 はじめに アプリケーションの機能を「カプセル化」、「コンポーネント化」しようというのは、フロントエンド/バックエンド問わずに近年のWeb開発におけるトレンドのひとつです。 Web業界も5年もの、10年ものと呼ばれるシステムが増える中で「最初から完璧なシステムを作ることなんて無理なんじゃないか」と多くの人が気づきはじめました。 その流れを受けて「どうせ改修が必要なら、小さなスコープで新しいものに置き換え可能な仕組みを作ろうぜ！」というのが「カプセル化」、「コンポーネント化」の大きなモチベーションであると、個人的には理解しています。 Vue.jsとコンポーネント JavaScriptのフレームワークであるVue.jsも、例に漏れずコンポーネントドリブンな開発に適した仕組みの1つです。 SFC(Singl
Docs | Storybook
Welcome to Storybook's documentation ✦ Learn how to get started with Storybook in your project. Then, explore Storybook's main concepts and discover additional resources to help you grow and maintain your Storybook. What is Storybook? Storybook is a frontend workshop for building UI components and pages in isolation. It helps you develop and share hard-to-reach states and edge cases without needin
Nuxt.jsにStorybookを導入してみる
Storybookのバージョンについて追記 2018年10月29日にStorybook4系がリリースされたみたいです。 Webpack4に対応してるので、Nuxt2系使っててStorybook追加したい人はそちらを使うことをおすすめします（いつかそっちも書きたい）。 この記事ではStorybook3系で書いてます。 Storybookとは？ コンポーネントのカタログ UIコンポーネントを単独で開発でき、コンポーネントの再利用、テストの容易性、開発スピードを向上させることができる なぜ必要？ プロダクトとは切り離して開発する →依存関係が全くない状態を保てるため、再利用性が高いコンポーネントを作ることにつながる エンジニアとデザイナーの認識のズレをなくすため →ここデザインと違うよねーとか 使い方 ※ 2018年10月3日時点で、Nuxt v2にはStorybook v4のアルファ版しか対応
Nuxt2.0で、Storybookを使う
概要 Nuxt2.0でstorybook使おうと思ってたら、結構つまづいてしまったのでメモ。 修正の内容 Nuxt2系で、storybook3系使おうとしたら、Module parse failed: Unexpected token. You may need an appropriate loader to handle this file type.とかなって、VueLoaderPluginとかいろいろしてみたけど、挫折した。 そこで、webpack4系 + storybook4系を入れてる記事があったので、それを見て4系を入れた。 2018/10/23 修正 tic40さんありがとうございます！ 結果動いたが、storybookでassetsを呼ぶ時に、「Can't resolve 'assets/**'」 とエラーが起きるようになった。 そのため、両方のconfig.jsのali
Storybook for Vue 入門 - Qiita
はじめに 筆者が今携わっているプロジェクトでは Vue.js（以後は Vue）が使われています。 そのプロジェクトで一度 「Storybook」 というツールを導入しようとしたことがありました。結局導入は見送ることになりましたが、その時に Storybook に良い手応えを感じたため、あらためて簡単なプロジェクトを作り Storybook を試してみました。 下記がデモです。 デモ 1（プロジェクト） デモ 2（プロジェクトの Storybook） Storybook 自体まだまだ新しいプロジェクトのため、ネット上にも情報は多くありません。この記事を読み Storybook に興味を持ってくれる人が増え、ネット上に Storybook の情報が増えていけばいいな、と思います。 この記事の対象読者 Vue を使って開発をしている人 / する予定のある人 / 興味のある人 Vue のプロジェク
Storybookがなぜ必要か？(Vue.js編) - Qiita
まさあき(@masaaakikunsan)です。 最近よく、「Storybookを導入しよう」「Storybookがいい」と言う話は聞きますが、意外となぜ必要なのか、どう使うのか、という記事がみつからなかったので、基本的な使い方をサンプルと共に紹介します。 TL;DR StorybookでUIコンポーネントのカタログを作ることができる カタログのおかげでデザイナーと認識の齟齬が生まれなくなる アドオンを追加するとStorybookがかなり便利アイテムになる Storybookとは ざっくり言うとコンポーネントのカタログです。 コンポーネントライブラリの参照ができ、各コンポーネントの様々な状態の表示などができるものとなります。 また、アプリ外で実行されるため、UIコンポーネントを単独で開発でき、コンポネの再利用、テストの容易性、開発スピードを向上させることができるのが魅力です。 Storyb
Nuxt.jsのstorybookを見やすくカスタマイズする
module.exports = (baseConfig, env, defaultConfig) => { //nuxt.jsの'@'や'~'の読み込み defaultConfig.resolve.alias['@'] = rootPath; defaultConfig.resolve.alias['~'] = rootPath; // addon-storysourceの設定はここから defaultConfig.module.rules.push({ test: /\.stories\.jsx?$/, loaders: [require.resolve('@storybook/addon-storysource/loader')], enforce: 'pre', }) return defaultConfig; }
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Storybook (Vue) で Vuetifyを使う - Qiita
Nuxt, ElementUI, Storybook 構成のVueプロジェクトの始め方 - Qiita
DMM動画サービスの問題を解決しようとしている話（コンポーネント編） - DMM inside
storybook nuxt - Google 検索
Storybook: Frontend workshop for UI development
GitHub - storybookjs/storybook: Storybook is the industry standard workshop for building, documenting, and testing UI components in isolation