soussune

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

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

2017年06月30日

MP3ファイルをダウンロード

内容紹介

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

出演者

Show Notes

emoji問答

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

  • soussune開発ブログ
  • 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化
  • 再生プレイヤーをフロント的にもっとモダンにしたい
  • 集計
    • 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
  • Podcastサイトを作るためのPodcastになってきた
  • いろんな言語を学ぶためのStatic Site Generator
  • GitBook
    • 本を作るためのものでドキュメントツールじゃない
    • PhenomicでGitBook風レイアウト作成
      • ドキュメントのフォルダ構造をそのまま目次として出す実装
      • 表示順の制御のためにプライオリティのメタ情報をつけたが、BASICの行番号的でこれはダメだと思った
    • 古いBASICでのプログラムの入力

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

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

  • Virtual DOMが出始め
  • CoffeeScript
    • 最近の勉強会で苦笑が起きた
  • Angular 2.0がAngularJS 1.3おじさんを淡々と葬り去っていく小芝居会場
  • MEAN Stack
  • 死の臭いに慣れてきた
    • 普段からいろんなところを見ることで早めに死を悟ろう
    • Backbone.js + React v0.10 + TypeScript v1 →死
  • フロント技術勉強するのにwebpack.configからやっていく問題
  • フロント3大ライブラリ
  • 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では感想や質問などリスナーからのご意見をお待ちしています。 からお気軽にコメントをお寄せください😇