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


現状少人数で開発してるので、実装しながらちょくちょく設計について話し合ってる（めちゃ激論になる…）
フロントエンドの責務が環境構築や状態管理、メンテ

trkwとmiyaokaの2人で、技術書典5、Netlify、originless、STUDIOなどについて話しました。## Show Notes

YouTube で収録しました。動画でご覧になる方は →こちら

技術書典５振り返り

技術書典５ | 技術書典
News Up 文系も知りたい「技術書典」 | NHK ニュース


「技術書典にロケットランチャー撃ち込んだら日本のＩＴ業界終わりそう」



JAMstack 完全入門 ハイパフォーマンス Web サイト構築 - soussune - BOOTH（同人誌通販・ダウンロード）
技術書典 5 に参加してみて振り返り (miyaoka) – soussune – Medium
技術書典５に参加してみて振り返り (trkw) – soussune – Medium
イヌでもわかる Hyperapp - 犬テトラ+ - BOOTH（同人誌通販・ダウンロード）
技術書典 5 で、『完全 SIer 脱出マニュアル』という本を出します - #がみぶろ
#完全 SIer 脱出マニュアル が #技術書典 5 から 1 週間で 800 部も売れて心底驚いている - #がみぶろ

シリーズ B で$30M の資金調達を果たした Netlify

Funding update: our next steps for a better web | Netlify
Netlify | Crunchbase
Instagram | Crunchbase
GitHub | Crunchbase

Instagram も GitHub もシリーズ B からの Exit

Netlify の Application Delivery Network(ADN) 構想

Netlify Application Delivery Network | Netlify

JAMstackは単にサイトを静的化する技法の話ではなく、NetlifyがこれからのwebというものをCDNからADN、コンテンツからアプリ配信と捉えているところから論ずるべきだったんだなあと、いう視点が見えてきた
— みやおか (@miyaoka) October 11, 2018
オリジンサーバーを不要とし、Git で管理されたソースを Netlify がビルドしてエッジに配信する。JAMstack はそのための構成要素の 1 つ


Netlify raises $30M to replace webservers with a global 'Application Delivery Network' | Netlify


“Netlify is the clear future of the web platform. In less than five years, you'll build your next complex web application on Netlify's Application Delivery Network.”



“Our goal is to remove the requirement for those servers completely. We’re not trying to make managing infrastructure easy. We want to make it totally unnecessary.”



JAMstack_conf

Web は Document か Application か
PSA: @gatsbyjs is not just for "sites". It produces static HTML and then rehydrates into a React app.Think of it as an opinionated CRA with built-in SSR and nice integrations w/ CMSs.Please use Gatsby to build apps.Thanks for listening. Happy Friday and happy developing.
— Kyle Mathews (@kylemathews) September 21, 2018

Pre-building and distributing apps ahead of time is the core concept behind the JAMstack, a modern approach to web applications. It’s an idea borrowed from mobile development that’s catching on with the web developer community. “Running any web property without origin servers is an arresting concept, but the clear future of the web platform,


ネットワークの最適化を意識したアプリケーション開発

JavaScript のコードと Service Worker をユーザーに近い CDN のエッジで実行可能。Cloudflare が「Cloudflare Workers」を提供開始 － Publickey
ServiceWorker 内で Babel を駆使して、JavaScript をビルドする - ログミー Tech（テック）
JAMstack Radio | Ep. #31, Originless code with Cloudflare's Kenton Varda | Heavybit


You write code and it just runs everywhere. That's what we call "originless," and that's what Cloudflare does.





開発中の STUDIO エディタをプレビュー

STUDIO | コードを書かずに、 Web サイト作成を完結。
Vue.js で作られている Web サイト制作用 GUI エディタ
現行版をコアから作り直していて、いろいろ新機能を盛り込んだりだいぶパフォーマンスが出るようになってきた（下記ビ

trkwとmiyaokaの2人で、技術書典5、JAMstackなどについて話しました。## Show Notes

技術書典５

技術書典５ | 技術書典
JAMstack 完全入門 ハイパフォーマンス Web サイト構築 - soussune | 技術書典
完全 SIer 脱出マニュアル - しがないラジオ | 技術書典
kmuto/review: Re:VIEW is flexible document format/conversion system

おしながきを作りました。Docker風味。 #技術書典#マンガでわかるDocker#告白に学ぶHTTPステータスコード#わかばちゃんと学ぶサークルチェック→ https://t.co/MLn5avUxtI pic.twitter.com/aMzdvCk1qu
— 湊川🌱マンガでわかるDocker② 10/8技術書典5【あ20】 (@llminatoll) 2018年10月2日
JAMstack

JAMstack | JavaScript, APIs, and Markup
静的化、動的化の違い
SSG(Static Site Generator)
なぜ dev.to がこんなにも速く、こんなにも自分にとって感動的なのか - DEV Community
TypeScript 入門以前ガイド - mizchi's blog
The JAM Stack - Speaker Deck
この本のターゲットは、広めに設定している
JAMstack という用語は日本ではあまり広まっていない
エコシステムの話
JAMstack はアーキテクチャ
技術書典４ | 技術書典
First Load と、遷移時の速さを解決できるのが JAMstack

技術書典のサークルチェック

サークルチェックは予約ではないため購入できるかは当日次第です。売り切れを防ぐためにはサークルさんが強気に、少し多めに！刷る必要があります。販売予測はすごく難しいので、どの程度興味があるかを事前に伝えることは判断の一助となります。各参加サークルに判断の材料を渡すために、はやめにサークルチェックをお願いします。
技術書典ブログ



soussune の宣伝が遅すぎた問題
壁サークルとは - 日本語表現辞典 Weblio 辞書
技術書典サークル初参加しました。使った物と使わなかったものをまとめます。 - kaggle 全力でやります
AWS をはじめよう　～ AWS による環境構築を 1 から 10 まで～ - mochikoAsTech | 技術書典

同人誌と商業誌

Vue.js 入門 基礎から実践アプリケーション開発まで：書籍案内｜技術評論社
同人なのに、商業に近いクオリティになってしまう
もっとブログくらいのノリで書ける本を出していくのも大事かもしれない話

読んでみたい本

10/8 　技術書典５に参加します｜齋藤｜ note

先人の知見を吸収すべきだった


展示ホール D - 株式会社サンシャインシティ 展示ホールご案内｜施設概要



soussune は 80 部で、弱気


知り合いに配ったり、家族に見せたり、自分で見たり、勉強会で配ったり、カンファレンスで景品にしたりと活用方法がいっぱいあるので、最低でも 10 冊は残しておかないと後悔する可能性があります。 技術書典で爆死しないために｜ erukiti ｜ note




今日からはじめる技術 Podcast 完全入門 - YATTEIKI Project | 技術書典



入稿終わって気が抜けて、技術書典楽しみでしかないのだ
— trkw@技術書典5 け53 (@trkw_) 2018年10月5日


技術書典 - connpass

図やイラストについて


miyaoka さんは、Flash を使って図とイラストを書いてる



Amazon | WACOM FAVO ペン&マウス・タブレット A6 サイズ CTE-440/S0 シルバー (ソフト 5 種類付属) | ワコム | ペンタブレット 通販



‎「CLIP STUDIO PAINT 漫画・イラスト制作」を App Store で



おうちハック


ルーティンの設定と管理 - Android - Google Home ヘルプ



Nature



ルーティン（元ショートカット）は、Nature の「Direct Actions」（Google Home のみ対応）であれば、アプリとの接続は不要だが、「ねぇ Google（OK G

trkwとmiyaokaとzuckeyとgamiの4人で、しがないラジオについて話しました。## Show Notes

しがないラジオとコラボ回

しがないラジオ
sp.37【ゲスト: trkw_&miyaoka】楽しい『エンジニアわいわいポッドキャスト soussune』 | しがないラジオ
ポッドキャストのホストをやっている同士で、ゲスト参加は今回がお互いに初めて
パーソナリティ、自己紹介するタイミングがない問題

収録環境
今日はsoussuneとしがないラジオのコラボ回をPLAIDオフィスで収録します！ #soussune #しがないラジオ pic.twitter.com/WxqAbB1KoE
— soussune (@soussunefm) 2018年8月18日

gami さんの自己紹介

株式会社プレイド | データによって人の価値を最大化する
インタビュー上手い人

zuckey さんの自己紹介

場の発明を通じて欲しい未来をつくる｜ tsukuruba inc.（ツクルバ）
編集する人

Podcast の話

10 日出してないとそわそわする
習慣化
収録しても編集までなかなかできてない
ライブでやりたい
今どきの YouTube に比べたら Podcast って大変

習慣化

自己肯定感を爆上げする、MRM(Morning Routine Management)を始めてみた - #がみぶろ
効率厨
カレー生活
COMP 完全食
つくおき | 作り置き・常備菜レシピサイト
早朝に会議室借りて収録

結婚式話

富士山頂挙式
Node.js
Tabs versus Spaces - YouTube
『しがないラジオ meetup#1』に参加してきた - dskst's diary

しがないラジオコンセプト

SIer で苦しんでる人に手を差し伸べる的な
聞き上手
客観的な質問をする gami さんと、勢いで質問する zuckey さん

#PLAID_party に #しがないラジオ パーソナリティが揃った！ pic.twitter.com/tHloji5cCA
— gami お27『完全SIer脱出マニュアル』@技術書典5 (@jumpei_ikegami) 2018年7月18日

技術話

Rails 力上がったけど、新しい技術に触れてない
技術書典 | 技術書典
kmuto/review: Re:VIEW is flexible document format/conversion system

しがないラジオパーソナリティ2人に、技術書典5で書いてほしい同人誌のテーマは？#しがないラジオ #技術書典
— gami お27『完全SIer脱出マニュアル』@技術書典5 (@jumpei_ikegami) 2018年8月2日

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

Twitter
感想フォーム

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

trkwとmiyaokaとkotamatsの3人で、SCOUTER、Vue.js、Nuxt.js、Laravel、Android、JetBrainsなどについて話しました。## Show Notes

kotamats さんの自己紹介

松本 宏太さん (@kotamats) の自己紹介
株式会社 SCOUTER の CTO

人材紹介を誰でも簡単にできるサービスを運営
会員数 3000 名を超えた


趣味は自転車
NuxtMeetup#1 を開催しました! | SCOUTER 開発ブログ

SCOUTER さんが行っている技術選定

技術選定のコンセプト
ゆるふわでできる物を選んでいる


Laravel - The PHP Framework For Web Artisans


最近の開発では Nuxt も利用している
Laravel は Rails 出身者でも開発に携わりやすい
2 年前は CakePHP で運用していてリニューアル、現在は Laravel と Vue で運用
Nuxt は、 2017 年 10 月から実際に導入している
デメリットと感じる点は、ゆるく書けるのが良くも、悪くも
Vue.js だとあまり、Component を許容しない
タグが invalid でも通してしまう

vue これvalidなの… pic.twitter.com/JctNnlLAuJ
— azu (@azu_re) 2018年4月4日
別リポジトリで、ソースを共有する方法

企業側、スカウターさん、転職者さん、Admin 用でリポジトリが別れているという課題
扱っているデータは一緒なので、別リポジトリでも plugin 的に同じソースを利用したい
Storybook 上で Button など、共用パーツをまとめてる


storybook/addons/storyshots at master · storybooks/storybook



PHP 側にはテストをいれているが、なかなか回帰テストまでには至ってない。コンポーネント集として ElementUI などを見て参考にしている



Element - A Desktop UI Toolkit for Web


Table Component | Element




rlidwka/sinopia: Private npm repository server


verdaccio/verdaccio: 📦🔐A lightweight private npm proxy registry


Pricing - npm

分岐が複雑なコンポーネント

v-if とかで分岐、Admin でこういうステータスだと表示しない
Logic に落とし込むと v-if が多くなり複雑になる
jsx の返す関数を用意して、render に渡す
愚直に JavaScript を書く
v-if のネストや v-else まで入るとつらい感
後置 if 構文： If, Else, Unless, and Conditional Assignment - CoffeeScript

うーん、個人的には Vue も大規模なもので十分使えると思ってるのだけど、この認識の違いはどこからきてるんだろう。
— katashin (@ktsn) 2018年4月2日

フロントエンドの Vue.js は、サーバーサイドの PHP に似ているのかも
初級者から中級者にとっつきやすいイメージがあるが、強い PHPer のような人も居る

API の IO が複雑な時の開発フロー

ネストが深いデータフローをどうすべきか
World's Most Popular API Framework | Swagger
Browser Tests (Laravel Dusk) - Laravel - The PHP Framework For Web Artisans

よい API ドキュメントがあるだけで、開発意欲がわく

Stripe API Reference
Annict

Introduction · Annict Docs
Annict の GraphQL API を使ってアニメデータを取得しよう - Qiita
annict/annict: The platform for anime addicts built with Rails 5.1 and Vue.js 2.5.


Animetick / アニメティック - アニメ視聴管理サービス

ソースコードの抽象化、責務範囲

ドメイン駆動設計（Domain-driven design, DDD）
YAGNI "You ain't gonna need it"
ピザを分け合うことができる人数 = チームとして成り立つ規模感： 米 Amazon の CEO ジェフ・ベゾスが提唱する｢2 枚のピザ理論｣ | ライフハッカー［日本版］
Twitter Lite の不具合報告からわずか 2 時間ほどで修正デプロイ可能な体制に感動した話

This is fixed now -- I wasn't expecting such a quick turnaround around on Friday afternoon!
— Tatsuhiko Miyagawa (@miyagawa) 2018年3月24日

ReactiveX

RxJS API

trkwとmiyaokaとllminatollの3人で、わかばちゃん、Docker、原稿管理、Google アナリティクス、ビジネス、趣味などについて話しました。## Show Notes

わかばちゃんが出る ISUCON

学習や体験のハードル下げることができる漫画
わかばちゃんの成長を感じる
わかばちゃんは需要があるところに出没して、解決していく

マンガで分かる Docker
#マンガでわかるDocker BOOTHにてインターネットダウンロード販売はじめました🎉✨こちらからご購入いただけますhttps://t.co/GXn20eSFjk#技術書典 #技術書典4 #BOOTH
— マンガでわかるDocker DL販売中！ (@webdesignManga) 2018年4月23日


Docker を使う人は自学自習していくタイプが多いと思い、「マンガで分かる Docker」は書くべきか悩んだ

フロントエンドエンジニアでも開発環境を揃える為に Docker を使っているという話を聞いたため書いてみようと思った


DX（Developer Experience）
soussune/soussune.com: エンジニアわいわいポッドキャスト「そうっすね」
Introducing Deploy Previews in Netlify | Netlify
Review Apps | Heroku Dev Center
技術に乗り気じゃない人にも読んで欲しい
IFTTT/dash: A simple Docker Compose wrapper command used in developing applications at IFTTT.
ansible/ansible: Ansible is a radically simple IT automation platform that makes your applications and systems easier to deploy. Avoid writing scripts or custom code to deploy and update your applications — automate in a language that approaches plain English, using SSH, with no agents to install on remote systems. https://docs.ansible.com/ansible/

GitHub で原稿を管理している

textlint/textlint: The pluggable natural language linter for text and markdown.
kmuto/review: Re:VIEW is flexible document format/conversion system
Viewing contribution activity in a repository - User Documentation
Is the punchcard graph gone now?

わかばちゃんと学ぶ Google アナリティクス

soussune は、Google アナリティクス を見て朝の通勤時間に聞いている方が多かった為、リリースを朝の 9:00 にしている
収益や PV をあげる為にはどうしたらいいかが書かれている


3C 分析とは・意味｜ MBA のグロービス経営大学院
4P とは・意味｜ MBA のグロービス経営大学院
Google アナリティクス は、非技術者と、技術者を戦略レベルで誘導させられるツールである
第 1 章は、いいエモい話になっている
Google アナリティクス個人認定資格（GAIQ）理解度テストについて - Google Partners ヘルプ
マンガでわかる Google アナリティクス 序章 「インターンシップ先は問題だらけ！？」 – KOBIT
これだけ知っておけば大丈夫！校正にまつわる 7 つの専門用語 - 社内報担当者のための情報サイト SHAHOO!（シャホー！）
イラスト マンガ制作ソフト・アプリ CLIP STUDIO PAINT（クリップスタジオペイント）
株式会社 C&R 研究所

Vuexの図をかいてたら途中からナナチを書いていた pic.twitter.com/p3kRHSMShD
— mio (@mio3io) 2018年1月12日


技術書典 - 技術書典

人生のイベントを抑えるビジネス
プログラマーのための新千歳空港入門 #love_swift from Tomohiro Kumagai


ターミナル (字幕版) - 動画 - Amazon ビデオ

空港に居住した人物の一覧 - Wikipedia
マーハン・カリミ・ナセリ - Wikipedia


[公式]イオンのお葬式 - 葬儀・家族葬 全国の葬儀場から検索
【公式】スタディサプリ - 神授業、見放題。
【就活ならリクナビ】新卒・既卒の就職活動・採用情報サイト


ウエディング、ブライダルなら結婚準備の総合サイト ゼクシィ

継続する趣味

自己肯定感を爆上げす