14. フロントエンド試し場としてのsoussune

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

trkwとmiyaokaの2人で、emoji問答、フロント技術を使ったポッドキャストサイト、Static Site Generator、フロント技術が混沌としていた時代などについて話しました。## Show Notes

emoji 問答

• アウトプットとして Podcast だけでなくブログもやっていきたい

• 日報として業務報告風だとアウトプットしやすい

  • Wikihub 日報
  • WikiHub の開発意外と続いてる - ✘╹◡╹✘

• 👀 絵文字コンセンサス問題

  • これからコードレビューするよって時に一言でもコメントしてあげると、見始めたんだなと安心してもらえるのでオススメです pic.twitter.com/PZ3zTmA8Mn

    — やっていき世代 (@cutmail) 2017年6月23日

  • この絵文字なー。これから見るのか、見てるのか、見終わったのか、意味が曖昧すぎてコンセンサスとるのも維持するのもコスト高すぎて好きじゃないんだよなあ…😥 https://t.co/ZV5RVyAP7Y

    — hagiyat (@hagiyat) 2017年6月23日

• 絵文字リアクション

  • 使える絵文字が少し増えました - WikiHub Meta
  • Add Reactions to Pull Requests, Issues, and Comments

• 好きな絵文字

  • 😇 innocent
  • 👀 eyes
  • 🙏 pray
  • 🍣 sushi
  • 👿 imp
  • 😈 smiling_imp
  • 👽 alien
  • 💩 poo
  • 🤔 thinking_face

• 間違っていても指摘されない。そもそも学ぶ機会が無い問題

  • 指摘されないと分からない。だって分かるだろって思ってたから
  • 伝えるために正しく怒ることの大事さ

• 絵文字コミット

  • イニシャルコミットに 💥 や 🌱
    • phenomic/phenomic: Modular website compiler ⚡️
  • けもフレリポジトリではパークの掟としてコミットに絵文字縛りを要求した
    • miyaoka/japari-pedia: Welcome to youkoso japari-park! 🌴💥🚕🐈😧
  • 絵文字入ってるとtigでコミットメッセージが出ない問題

フロント技術を使ったポッドキャストサイト作り

• soussune 開発ブログ
  • soussune – Medium
• soussune サイトの技術スタック選定
  • GitHub + Phenomic + Netlify(ビルドあり) + CloudFlare
  • GitHub + Nuxt SSR + Heroku(ビルドあり) + CloudFlare
  • GitHub + Nuxt (nuxt generate) + Travis CI(ビルドあり) + GitHub Pages + CloudFlare
  • GitHub + Jekyll(yattecast) + GitHub Pages(ビルドなし) + CloudFlare
• Static Site Generator の CMS 化
• 再生プレイヤーをフロント的にもっとモダンにしたい
  • 例）Podlove Web Player
  • 再生ボタンは重要なんだからでかく
  • シークは画面幅全体使うべき
  • 共有用に再生秒数での URL
  • twitter:player に埋め込みプレイヤー Player Card — Twitter Developers
• 集計
  • Show Notes のリンクに target を指定したい
  • Jekyll GitHub でやるには js が手っ取り早い
  • Rebuild の処理見てたら集計もしてた

$('.post a') .not('.internal') .each(function(i, el) { $(el).attr('target', '_blank') }) $('.post a').on('click', function(e) { _gaq.push(['_trackEvent', 'Link', 'click', $(this).attr('href')]) }) 

• 学び先
  • Rebuild だけでなく、その先の海外ポッドキャスター勢も参考にしたい
  • 脱 Jekyll にすることでフロント技術だけでも Rebuild フォロワーから脱却

Static Site Generator

• いろんな言語で Static Site Generator

  • Top Open-Source Static Site Generators - StaticGen
    • GitBook (JavaScript)
    • Hexo (JavaScript)
    • Hakyll (Haskell)
    • Hugo (Go)
    • Phenomic (JavaScript / React)

• Podcast サイトを作るための Podcast になってきた

• いろんな言語を学ぶための Static Site Generator

  • 言ってみればTodoMVC

• GitBook

  • 本を作るためのものでドキュメントツールじゃない

  • Phenomic で GitBook 風レイアウト作成

    • ドキュメントのフォルダ構造をそのまま目次として出す実装
    • 表示順の制御のためにプライオリティのメタ情報をつけたが、BASIC の行番号的でこれはダメだと思った

  • 古い BASIC でのプログラムの入力

    • BASIC - Wikibooks

    各行の最初についている数字が行番号です。10 からはじめて 10 ずつ増やしていくのが一般的です。こうすれば、後から簡単に行を挿入することができます(ただし 9 行まで)。

フロント技術が混沌としていた 2014 年

• Virtual DOM が出始め
• CoffeeScript
  • 最近の勉強会で苦笑が起きた
• Angular 2.0 が AngularJS 1.3 おじさんを淡々と葬り去っていく小芝居会場
  • 笑いと拍手で controller などにさようなら
  • Angular 2 Core - Google スライド

• MEAN Stack
  • home - Mongo Express Angular Node
  • MongoDB
  • Express
  • AngularJS
  • Node.js
• 死の臭いに慣れてきた
  • 普段からいろんなところを見ることで早めに死を悟ろう
  • Backbone.js + React v0.10 + TypeScript v1 → 死
• フロント技術勉強するのに webpack.config からやっていく問題
• フロント 3 大ライブラリ
  • react vs angular vs vue - npm trends
• Atom、Sublime Text、WebStorm に Visual Studio Code、四大エディター真夏の大決戦！
  • HTML5 Conference 2016 行ってきたよ - やまろぐはてな
  • GUI エディタ論争が流行ってたのは 2015 年までで、もはや差が無いので盛り上がれなかった
  • VSCode が最後発だから一番強い。便利な機能はすぐに移植される
  • Vue も後発だから Angular と React のいいとこどり
    • Isuue が特に少ない

• 今は安定しているがこれから先どうしていくか。対アプリなどの戦場へ
• フロントに求められること
  • UI 表現に凝る人とアプリとしての技術スタックを突き詰める人って同じフロントでも方向性が違う
• フロントエンド試し場としての soussune
  • PWA、AMP 対応
  • genba.fmは AMP 対応してる
• 求められる障害対応力：お名前.com の email 認証きれた問題 1 時間くらいで解決した
  • ドメイン情報認証メールの承認は忘れずに！

---

💬おたより募集中

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

• Twitter
• 感想フォーム

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