44. モチベがなくてもやるんだよ

trkwとmiyaokaとmasaakikunsanとnakasujiの4人で、Atomic Design、GraphQL、Tailwind CSS、チームビルディング、成長などについて話しました。## Show Notes

中筋さん近況

• 前回同様に中筋さんのオフィスで収録
• ライフスタイルデザインから FABRIC TOKYO へ社名変更
• 技術顧問
• 知人の開発の手伝い
• モラトリアム期間
• 本業はメインサービスのフルリニューアル、開発合宿にいってきた
• 心躍るできごとが少ない
  • まさあきくんがうらやましい
• 気づいたら自分より若い子が増えた
• JAMstack っぽい構成でコーポレートをリニューアル中

まさあきさん自己紹介

• 22 歳
• 大学受験に失敗し、プログラミングを始めた話
• SCOUTER に入社、その後フリーランスからそしてまた SCOUTER へ
• 冴えカノ、氷菓のオタクをやっている
• 技術書典 5 も参加した

デザイナーとうまく協業するにはどうすればいいのか

• DOM 構造だけ作って、あとでスタイルをつける
• 仕様策定段階から全員でプロジェクトに携わる
• フロントエンドとデザイナーの対談回をやりたい

Atomic Design について

• Atomic Design by Brad Frost
• Brad Frost (@brad_frost) | Twitter
• Atomic Design ~堅牢で使いやすい UI を効率良く設計する | 五藤 佑典

GraphQL について

• GraphQL | A query language for your API
• AWS AppSync – GraphQL を基盤として、データに基づいたアプリケーションをオフライン機能でリアルタイムに構築する
• フロントとコンテンツの間に GraphQL data layer を持つフレームワーク
  • GatsbyJS
  • Gridsome - Build blazing fast websites for any CMS or data with Vue.js

Apollo Client がすごい賢いので、これがあれば Redux などのストアがいらなくなるといいたい気持ちは分かるなー。

— katashin (@ktsn) September 18, 2018

完全に不要にはならないですが、賢くキャッシュしてくれるので、単純な、データ取得→整形・描画→変更をPOST みたいなやつは別に store 介さなくても良い感じです。

— katashin (@ktsn) September 18, 2018

Tailwind CSS について

• Tailwind CSS - A Utility-First CSS Framework for Rapid UI Development

そういえば最近のCSSの話なんですが、文書構造のものだったことが起因していて表現力が以前低いHTMLの代わりに、コンポーネントの命名をCSSが担っているのはやはりおかしく、その領域はWCとかJavaScriptのUIライブラリのコンポーネントが担うので、CSSはtailwind的な設計にすると良いという感じです

— potato4d (@potato4d) September 29, 2018

我々は使うときは React コンポーネントとか Vue コンポーネント単