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

soussune - エンジニアわいわいポッドキャスト「そうっすね」

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 コンポーネント単位で扱うのに、わざわざ同じ名前を BEM なりに変換したものを CSS で持ってそこに書いていくのは完全におかしくて、CSS側でAtomicな機能を無限に提供してそれを意味づけするのはJavaScriptお前がやれみたいなやつが正しいという気持ち

— potato4d (@potato4d) September 29, 2018

• PostCSS - a tool for transforming CSS with JavaScript
• Phenomic, a modular website compiler (static site generator)

STUDIO をどうやって作っているのか

• STUDIO | コードを書かずに、 Web サイト作成を完結。
• Vue.js 製の GUI エディタ
• Keima Kai(@keimakai1993) | Twitter が CPO
• Vue でデザインツールを作った話
  • 関西から Vue.js Tokyo v-meetup #4 に参加する為だけに東京に来ました！ | NPO 法人のための IT 支援事務所 ht
  • Vue.js Tokyo v-meetup #4 が開催されました - laiso
• 現状少人数で開発してるので、実装しながらちょくちょく設計について話し合ってる（めちゃ激論になる…）
• フロントエンドの責務が環境構築や状態管理、メンテナンスというところが重要になってきていて、相対的に UI/UX を追求できるのはエンジニアリングとビジネスと営業ができる上流デザイナーの仕事という感
• でもフロント技術を使って UI/UX を作り込みたい。ただしビジネスプロダクトとしてそこを理解して追求してくれる現場は多くは無さそう。

プロダクトを作れるエンジニアにはどうやったらなれるのか

• エンジニアの市場価値
• プロダクトを作るためにはなんでもトータルにできることが求められる
• 11. フロントエンドエンジニアのキャリアパス - bkkcast
  • フロントエンドエンジニアは CTO になれない

なぜCTOをキャリアのロードマップに置いているのか合意取らずに話しはじめてしまったけどこのポッドキャストのいつものノリだと金を稼ぐには――という意味だよね。
フロントエンドのキャリアで超絶稼いでる人インタビューさせてくれ！

— laiso🇹🇭 (@laiso) 2018年10月11日

Firebaseで年収1000万・・‼️ 都市伝説じゃなかったのか。恐れ入りました https://t.co/AREB2lP67u

— laiso🇹🇭 (@laiso) October 17, 2018

• 経営視点でロードマップが見えていれば足りないものが分かる
• たとえばハッカソンに出ると一通り経験が学べるのでは
• エンジニア以外のプロダクトに関わる人たちの視点も得られる

チームビルディングについて

• スキルのばらつきを無くしたい
• 知見の共有が必要 → ドキュメント書け → ドキュメントを書く仕事はつらい
• 多少のスキル差よりは、共通の目標と目的
• ルールや目的をシンプルに単純化
• 単一責任原則 | プログラマが知るべき 97 のこと
• サービスに対する期待と他のメンバーに対する期待を発表して認識の齟齬を作らない
• The Agile Inception Deck | The Agile Warrior
• プログラミング以外のビジネス系などについてどうキャッチアップするか
• Creative X #1 今あるデザイナの危機に立ち向かう知識　に行ってきたので軽くまとめ｜ Thingo TKSK ｜ note
• コトノハ - "("はカッコで")"はコッカ

エンジニア社会でうまく生きていくコツは

• SNS でちやほやしてたり治安が悪かったりするのを見るとつらくなる
• ツイッターだけが世の中じゃないよ？
• NuxtMeetup#5 開催しました - SCOUTER 開発者ブログ
  • Vue or Nuxt
  • vue-cli で作るか、nuxt-create-app で作るかの違い
• 嫌われる勇気: 岸見 一郎, 古賀 史健
• 関係が合わなくなったら、より広いコミュニティに目を向ける。人生に疲れたら宇宙 or 大地
• 別に死ぬわけじゃないからいいかの心理
• 年齢を重ねると自然とどうでも良くなってしまい、きらめきも失ってしまう

効率よく成長するためにはどうすれば良いか

• JSLounge - connpass

うちの父が鉄道好きで昭和オリンピックによる再開発が始まる前の日本全国の鉄道を撮っていたんですが、今その写真展を新宿で開いていて新聞に載るほど好評なようです😲https://t.co/MpjtUHUF3C pic.twitter.com/a7QUWNkpHN

— みやおか (@miyaoka) October 12, 2018

• 半世紀でいろいろ変わってしまう。記録することが大事
• soussune - 38. わかばちゃんの楽しい学び方
• 初心者のつまずき体験を記録しているので、入門者の共感度が高い
• モチベーションが高い状態であることが一番成長できる
• 座学だとつまづきでモチベ減、OJT だと詰められてモチベ減
• Introduction · Tig - Text-mode interface for Git
• Sourcetree | Free Git GUI for Mac and Windows
• スパルタに鍛えられた人は教えるときもスパルタ
• 自衛隊に入るとモチベに関係なく働く。娑婆っ気を抜かれる
• 命かかってる現場だから生物としての危機感
• モチベ高い／低いと言っていられる現場は幸せ

宣伝、告知

• 一人暮らしを始めるのでウィッシュリストに暖かい励ましを

• PM をやっているback checkというサービスの紹介

  • 日本初の月額制リファレンスチェックサービス

---

💬おたより募集中

soussuneでは感想や質問などリスナーからのご意見をお待ちしています。

• Twitter
• 感想フォーム

からお気軽にコメントをお寄せください