はじめに Atomic Designとはこのリンクに書いてある感じの奴です 最近のコンポーネント指向のフロントエンドでAtomic Designで失敗するチームの話をちらほら聞きます 自分も1度は失敗しました。そりゃプロトタイピングもしたことなかった状態でAtomic Designでこった画面を作ったので当然ですが。(逆に1つ目の画面で失敗に気づけてよかった では、なぜ我々はAtomic Designでフロントの開発が上手くいかないのかを説明しようと思います。(誤字脱字その他各種修正の編集リクエスト待ってます! 指摘1. 世に出回っている多くの日本語資料のAtomic Designスライドは間違っている そもそもオリジナルのAtomic Design読んだことありますか？ 読んでないなら読みましょう。英語を読むのがめんどくさいなら私のざっくりな和訳記事を読んでください。 なぜオリジナルを読

2018年Vue.jsとVuexを使ってる人には必ず知っていてほしい開発やメンテナンスの際に役立つ設計とTipsとサンプルコードFacebookfluxVue.jsVuexvue-router 初めに ※ 全てのコメントに返事しません。 ※ 記事の内容に意見がありましたら直接編集リクエストをください。 ゴール ReduxやVuex、Fluxのパワーワードに負けずになんとなくではなくちゃんとFluxを理解し、実践して恩恵を受ける。 役立つVuexのTipsを身につけコード品質を向上させる。 VuexとVueRouterの落とし穴の把握。 リファクタリングの障害を減らしコードを追いやすくする。 Vuexの穴 1. Vuex提供のmap系の辛み VuexのmapActionsとか、createNamespacedHelpersめっちゃ便利ですよね。 import { createNamespac

はじめに 私はVue.js with Vuexを使った業務で1画面３０APIを叩く必要のある画面から、たったの数APIしか叩かないけれど、代わりにUIがとても機能的で複雑な画面まで設計し、構築しました。 その際に得られたノウハウを言語化し、共有出来たらと思います。また、これらのノウハウよりも良いノウハウがあった場合は共有・議論して頂けるととても嬉しいです。 ※注釈 この記事はサンプルコードが全然ないです。 OSSの様に気軽に編集リクエストでサンプルコード等を提供頂けたら幸いです！ 目次 コンポーネント設計の使い分けの効果 コンポーネントに関わるレンズの種類と重要性 技術者のレンズから覗く、コンポーネントの分類 プレゼンテーションコンポーネントを更に分類 複雑なコンポーネントの設計パターンとパターン名 デザイナーのレンズでコンポーネントの分類と技術者レンズからのプラクティス 技術者レンズでの

前置き フロントエンドを開発する場合、なんとなくでFluxデザインパターンを実装したライブラリを使うことが良くあります。 それらなんとなく使う人の動機は大抵　なんかイケてる感があるのでとりあえず使いたい　でしょう。 そのせいでFluxデザインパターンを正しく理解しないで使った場合には当然のように、データが単方向に流れて幸せになるのではなく、無駄にでかい機構で出来たグローバル変数を使って、著しく生産性を下げ、技術的負債は溜まっていくでしょう。 今回はそれらの悩みを感じ始めた方に対しての Fluxデザインパターン を正しく理解するのを目的とします。 また、その上でVue.jsとVuexの結合パターンの1つを提案出来たらと思います。 ※ 私はVue.jsとVuexでアプリを開発しています。React Reduxで業務をしたことがありません。それを前提とした上での話になります。 ※ 2018年6月

私がWebサービスのバージョンアップでVue.js導入することになり、取り組んでる内容についてWEBエンジニア向けに簡単に解説する記事です。 例えばjQueryのUIプラグインを沢山使ってるサーバーフレームワークで Vue.js、Vuex、Storybook を導入する際にどうすれば良いのか？などのノウハウについて記述します。 はじめに サーバーフレームワークのテンプレートへの組み込みが今回の要件です。 つまりVue.jsでカスタムコンポーネントもどきを作り、テンプレートエンジンで使えるようにするのが今回の要件です。 フロントエンド界隈のノウハウ集は大体がビッグスケールしても耐えられるようにフロントエンドとサーバーを開発チームまで完全に分離し、サーバーは API のみ提供する設計でしょう。最近ではVue.jsがどんどん認知され、実験的にRailsに組み込む軽いサンプルが散見するでしょう。

2018年Vue.jsとVuexを使ってる人には必ず知っていてほしいドキュメントに書かれていないコンポーネントやストア、メンテナンスの際に役立つTipsTypeScriptes6DesignPatternsVue.jsVuex はじめに 私はVue.js with Vuexを使った業務で1画面30APIを叩く必要のある画面から、たったの数APIしか叩かないけれど、代わりにUIがとても機能的で複雑な画面まで設計し、構築しました。 現在は構築したシステムを保守・運用しており、その際に得られたノウハウを言語化し、共有出来たらと思います。 ※ 記事の内容に意見がありましたら直接編集リクエストをください。 ※ パフォーマンスの話はしません。 ゴール 役立つTipsを身につけコード品質を向上させる コンポーネントのバグを減らせるTips ほとんどのバグは変数から来ます。 もし全ての値が定数なら状態から