次世代の管理画面を作るフロントエンドの取り組み - BASEプロダクトチームブログ
フロントエンドエンジニアの松原(@simezi9)です。BASEでは現在ショップ向けの管理画面をリニューアルするプロジェクトが進んでいて、UI/UXの更新と同時に創業当時から継ぎ足して作ってきたフロントエンドの技術スタックを一新しようとしています。この記事では、具体的にそのフロントエンドの更新でどのようなことに取り組んでいるのかをいくつかご紹介したいと思います。 Vue + TypeScriptを利用したMPA(multi page application)化 HTMLの構築をPHP(サーバーサイド)からJS(クライアントサイド)へ移行する 従来の「BASE」の画面ではPHPでHTMLの構築を行っていましたが、HTMLの構築をすべてPHPのコードから分離させて、Vueによるクライアントサイドでのレンダリングにしています。また管理画面の特性上（1ページあたりの閲覧時間が長く相対的にローディン
Storybookがなぜ必要か？(Vue.js編) - Qiita
まさあき(@masaaakikunsan)です。 最近よく、「Storybookを導入しよう」「Storybookがいい」と言う話は聞きますが、意外となぜ必要なのか、どう使うのか、という記事がみつからなかったので、基本的な使い方をサンプルと共に紹介します。 TL;DR StorybookでUIコンポーネントのカタログを作ることができる カタログのおかげでデザイナーと認識の齟齬が生まれなくなる アドオンを追加するとStorybookがかなり便利アイテムになる Storybookとは ざっくり言うとコンポーネントのカタログです。 コンポーネントライブラリの参照ができ、各コンポーネントの様々な状態の表示などができるものとなります。 また、アプリ外で実行されるため、UIコンポーネントを単独で開発でき、コンポネの再利用、テストの容易性、開発スピードを向上させることができるのが魅力です。
Nuxt.jsにStorybookを導入する - Qiita
まさあき( @masaakikunsan )です。 最近、Nuxtを使う機会が増えて来てSPA開発のスピードが以前より上がりNuxtありがとうと感じています。 今の案件で、既存のサービスをNuxtで作り直しているのですが、Storybookを導入しようと思ったところそれに関する記事が一つぐらいしかなかったので、今回はNuxtにStorybookを導入する方法を紹介します。 まぁ普通に導入すればいいので記事がないだけだとは思うのですが... はじめに この記事ではStorybookについてとNuxtについては取り扱いません。 参考資料にてStorybookとNuxtについてのオススメの記事を載せるのでそちらを読んでください。 Nuxtのプロジェクトを作成する まずはじめに、Nuxtのプロジェクトを作成しましょう。 今回はvue-cliを利用していきます。
Storybook駆動開発はいいぞ - Qiita
はじめに ＊こちらはオプトテクノロジーズの社内勉強会LT資料になります LT資料ってあえて書いたのは資料が短いので許してねという前置きです Storybookとは Storybook is a development environment for UI components. It allows you to browse a component library, view the different states of each component, and interactively develop and test components. 公式doc より引用 結局なによ ReactなどのViewライブラリで作成したコンポーネントを単独で描画して、見た目をカタログちっくに見れる画面作成のためのライブラリ。 コンポーネントにわたす状態を固定値で入れたりして見た目のコントロールを自由に
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
