がみぶろ

#がみぶろ

@jumpei_ikegami

創業から4年の「メイカー」が中国スマホ市場トップシェアになる、「メイカーズ」の驚異のスピード感の源泉とは？

Book

しがないラジオパーソナリティのgamiです.

今度、中国の深圳に旅行に行くことになったので、『メイカーズのエコシステム 新しいモノづくりがとまらない。』という書籍を読みました.

メイカーズのエコシステム　新しいモノづくりがとまらない。 (OnDeck Books（NextPublishing）)

メイカーズのエコシステム　新しいモノづくりがとまらない。 (OnDeck Books（NextPublishing）)

私はWeb系エンジニアの端くれで、ハードウェア産業で世界的に今なにが起こっているのかは、今まであまり知りませんでした. この本を読んで、かつてソフトウェアで起こったようなイノベーションやオープン化が、ハードウェア分野でもものすごいスピードで発生しているということが、様々な事例とともに理解できました.

もっとも大事なことは、そのイノベーションというのは、学会や論文と仲がいいようなものばかりではなく、「同人的」なお遊びのエコシステムから生まれてきたということです.

『メイカーズのエコシステム』

この本は、「メイカー」と呼ばれる同人的なハードウェア製作者が、なぜ世界規模で増えていて、なぜその中でXiaomiやGoProなどの世界的メーカーが登場したのかを説明する本です.

著者は高須正和さんで、ニコニコ技術部深圳観察会を主催したり、日本と世界のメイカームーブメントをつなげる活動をされている方です.

学術的な本というより、メイカーズの熱狂の現場を見てきた著者やメイカーたちの言葉を集めた、実際的な本でした.

何が書いてあったか？

3行でいうと

  • 「メイカーコミュニティ」、「ハードウェアのオープンソース文化」、「小ロット製造に対応した工場」、「クラウドファンディング」、「アクセラレータ」などの登場によって、同人的なメイカーが世界的メーカーになるためのパスができた
  • 深圳のハードウェア製造エコシステムは驚異的に発展しており、複雑な部品も安価に小ロットから製造できる
  • オバマ政権、深圳政府、シンガポールなど、STEM教育の導入や金銭的補助によって、政府主導でメイカーのエコシステムを構築しようとしているケースが増えてきた

メイカームーブメントとは何か

ソフトウェア産業については、初期投資が少ないこともあって、近年スタートアップが大企業のビジネスを脅かす例が多くあります. 一方、ハードウェア分野では、まだ大企業の方が強い時代が続いていました.

しかしここ最近、アメリカや中国を中心に、創業してから短期間で、歴史あるメーカーと並ぶシェアを獲得するスタートアップが登場するようになりました.

この本では、以下のような企業が例に挙げられています.

  • GoPro
  • Xiaomi
  • DJI

実際、私もXiaomiが買収したHuamiというメーカーが作っている"Xiaomi Huami AMAZFIT Bip"というスマートウォッチを夢の中で使っています. 一度の充電で45日間使えるなど、これまでのスマートウォッチの常識を覆す性能をもっていて、品質もよく、動作も安定しています.

調べてみると、Xiaomiは創業から4年で、中国スマホ市場トップシェアを獲得したらしいです. これは、従来のハードウェア産業から考えると、明らかに異常な事態です.

こうしたハードウェアスタートアップの隆盛は、趣味的なハードウェア愛好家を支援するエコシステムが育ってきたことから、実現しています. この生態系の盛り上がりを指して、「メイカームーブメント」と呼ばれているようです.

個人的には、生産性の低い大企業は新興企業にどんどんと脅かされて人材流出した方が社会的に望ましいと思うので、もっと趣味的なMakeが流行るといいと思います.

なお、メイカームーブメントを象徴するお祭りとして、Maker Faireと呼ばれるイベントが世界中で開催されています.

www.youtube.com

東京でも、毎年メイカーフェア東京が開催されており、2018年は8/4(土)〜8/5(日)の予定です. 私も遊びに行きたいと思います.

メイカームーブメントと深圳

香港と隣接する中国の都市である深圳市は、メイカームーブメントの中心地の1つとして語られることが多いです.

深圳は中国最初の経済特区で、大都市・香港の下請け工場が成熟して、大抵のハードウェアならゼロから作れるくらいの技術を蓄積するようになったそうです.

現在は大量のハードウェア工場、テンセントやファーウェイなどの企業本社、世界最大の電気街「華強北」などを擁しています.

特質すべきは、Seeedという会社が、雑多で複雑な深圳の工場群を、仮想的なWebサービスのように扱えるようにしている点です.

シリコンバレーを含む世界中のメイカーが、Seeedを通じて試作品や小ロットの製品量産を低コストで発注し、スピード感を持ってハードウェアスタートアップとして羽ばたいていきます.

世界のメイカームーブメントを支えるエコシステムの重要な一翼を、深圳が担っているわけです.

メイカームーブメントと政府

メイカームーブメントで興味深いのは、地域的なコミュニティはもちろん、政府によって強く支援されている例が多いことです. この本では、深圳、アメリカ、シンガポールが例に挙げられています.

特にオバマ政権の例が面白く、彼は2014年からなんとホワイトハウスでメイカーフェアを開催しています.

https://makezine.com/2015/05/06/a-practical-roadmap-mayors-maker-challenge-part-2-of-3/

2014年のWhite House Maker Faireでの大統領の挨拶は、以下のサイトから全文日本語で読むことができます.

makezine.jp

とりわけ印象的なのは、以下の一文です.

本日、みなさんをお招きしたのは、今日がD.I.Y.だからです。D.I.Y.は明日のMade in Americaです。みなさんのプロジェクトは、アメリカの製造業に起こりつつある革命の実例です。新しい雇用を生み、今後数十年続く産業を生み出す革命です。

「ハードウェアを作ることが、明日のアメリカを作る」という明確なメッセージを発して、大統領自らメイカームーブメントを支援していることがわかります. その背景には、ハードウェア製造業がその他の産業に比べて多くの雇用を生み出すという事実があります.

また、シンガポールの例では、メイカーへの支援がさらに社会制度や公教育に現れています.

例えば、シンガポールではオートメーションへの投資が盛んで、レストランが新しい自動化レジを入れると、70%までは政府の補助が出るそうです. ルールのトライ&エラーも積極的に行なっており、日本ではまだ実現できなそうな先進的な試みがされています.

  • 全ての車にERPというシステムが搭載され、混雑時に公道を走っていると自動で課金される

www.youtube.com

  • レストランで給仕するドローンのテスト飛行が許可される

www.youtube.com

以前シンガポールに旅行に行ったとき、Uberを使って非常に便利だった記憶があります. ぜひ日本にも、大企業や既得権益の延命に注力するのではなく、未来の日本社会や世界にとっての一番いい選択が何かを議論して欲しいです.

やってみた

せっかくこの本を読んだので、メイカーズムーブメントの裾くらいは掴みたいと思いました.

クラウドファンディングの出資先を探してみた

日本のハードウェアメイカーを、クラウドファンディングで支援してみようと思いました.

ただ、Makuakeなどを見ると、海外のクラウドファンディングサイトで成功した製品を日本に輸入して販売するケースが多く、日本のハードウェアメイカーが直接出資を募っているプロジェクトはかなり少ない印象でした。

また、クラウドファンディングブームはすでに落ち着いているようで、例えば、1/8タチコマで有名なCerevoがやっているハードウェアクラウドファンディングサイト・Cerevo DASHは、2012年前後で時が止まっているようでした...

その中でも一番盛り上がっているのは、やはりCAMPFIREのテクノロジー・ガジェットカテゴリのようです. ちょうどいいプロジェクトがなかったので、インターステラテクノロジズのロケット事業に5,000円投資しました.

camp-fire.jp

そもそも日本は寄付文化がそこまで無いので、クラウドファンディング自体が文化的に合っていないのかもしれません.

ラズパイで電子工作してみた

実際に自分で電子工作をしてみることも試しました. よく言われる話ですが、ラズパイと秋月電子通商があれば、初歩的なことは簡単にできました.

参考にした本は、これです.

やさしくはじめるラズベリー・パイ ~電子工作で簡易ロボット&ガジェットを作ってみよう~

やさしくはじめるラズベリー・パイ ~電子工作で簡易ロボット&ガジェットを作ってみよう~

必要な電子部品が型番指定で書いてあり、それらを使って最低限やれることを実践で学べるので、すごく良い本でした.

そして、治安の悪いライトができました.

会社の宣伝をしたりしました.

今のところ、光の色で進捗がわかるタイマーを作るところまでできました.

WebIOPiというやつを使うとブラウザ経由でラズパイを操作できるらしいので、今後はそれを使ってWebエンジニアならではのプロダクトを自作したいと思っています.

まとめ

  • メイカー・ムーブメントが世界的に加速している
  • 日本のメイカーはどこにいるんだろう？
  • 電子工作楽しい！

「OK, Google. 12面サイコロ3個投げて」Google Homeに何ができるのか？何に使っているか？？

LifeHack

しがないラジオパーソナリティのgamiです.

Google Home miniを買ったので、何に使っているかを書きます.

開封の儀をしているときに、珍しく地震警報が鳴ったのでそういう機能かと思ったというtweetをしたらしいです.

Google Home感想

Google Home miniを買ってみた感想を3行で言うとこんな感じです.

  • 部屋の隅で小さな声で話しても反応するので、その技術にめっちゃ驚いた
  • まだ音楽再生とアラームくらいしかまともに使ってない
  • 誰が使うかわからない機能がたまにあるし、たぶん日々増えてるのでワクワク感はある

買った理由

2018年は早起きしてランニングするぞ！という目標を立てたのですが、寒すぎてつらいのを何とかしたいという需要がありました.

起きる30分前くらいから自動でエアコンが暖房してくれればいいので、Google Homeを買えばできる気がして買いました.

RM miniとかを買えばできると思いますが、まだ買ってないので朝は寒いままです.

Broadlink Wifi 赤外線 学習 リモコン RM mini3 [並行輸入品]

Broadlink Wifi 赤外線 学習 リモコン RM mini3 [並行輸入品]

使っている機能

当初の目的は達成できていないですが、Google Home miniを使ってやっていることを述べます.

「7時間後に起こして」

『6:03にアラームをセットしました』

普通に目覚まし時計もスマホも持っているので、アラーム設定するだけならそっちでも全く問題ないです. ただ、私は「7時間寝たい」と決めているので、何時に寝始めるかによって、何時に起きたいかが変動します. そんな需要があるときに、声だけで「7時間後」などの相対時間で目覚ましをセットできるのは、地味に便利です.

「ポルカドットスティングレイかけて」

『プレイミュージックでポルカドットスティングレイを再生します』

ふと思いついて「○○かけて」とか言うと、ちゃんと流してくれます.

なお、自由に音楽を聞くには、Google Play Musicに980円のGoogle税を払う必要があります.

また、一部のアーティストは曲が無いので、見つからなかったりオルゴールアレンジがかかって、悲しい気持ちになったりします.

まだリピート再生ができないし、指定したアーティストの曲が無くなったら別の人の似たような曲が勝手にかかるので、「色んな曲を自由にかけるから、いい曲と出会ってね」という圧力を感じます.

でも、プレイリスト管理などをせずに、そのときの気分で気軽に再生できる体験は素晴らしいです. よく聞くのは、「ポルカドットスティングレイ」、「チャットモンチー」、「東京事変」、「フレデリック」、「Creepy Nuts」、「きゃりーぱみゅぱみゅ」、「相対性理論」、「宇多田ヒカル」です.

www.youtube.com

本当はミスチルとかも聞きたい.

「おやすみ」

『寒くなってきたので、暖かくして寝てください。良い夢が見られますように』

地味ですが、「おやすみ」とか「行ってきます」とか言うと、優しい言葉をかけてくれます.

布団の中でAIスピーカーに「おやすみ」と声をかける体験は、すごく未来感があってとてもいいです. すぐに飽きそうですが！

できるけど使っていない機能

「アフォーダンスって何？」

『Wikipediaによれば...』

わからない言葉を調べられます. 言葉の意味を知りたいタイミングは、だいたいPCの前か外出中なので、そんなに使わないです.

「今日の天気は？」

『今日は、予想最高気温11度...』

天気を気にしなくてもいいように生活を設計しているので、使っていないです. 具体的には、毎日折り畳み傘を持つとか、乾燥機能のあるドラム式洗濯機を使うとか.

「ニッポン放送かけて」

『radikoでニッポン放送をストリーミングします』

ストリーミング再生に対応しているラジオであれば、チャンネルを指定して聞けます.

radiko.jp

自分で配信するほどポッドキャストが好きなので、常に積みポッドキャストがたくさんあり、ラジオを聞いている場合ではないです.

「今日のニュースは？」

『NHKラジオニュースから、今日8時のニュースをお伝えします』

NHKラジオニュースなどを流してくれます. ニュースソースの優先度などは、アプリから選べます.

Twitterでニュースを仕入れているので、聞かないです()

「スマホ探して」

『(機種名)のボリュームを最大にして鳴らせます. 鳴らしましょうか？』

Androidだと、ボリューム最大で電話を鳴らしてくれます. スマホを無くすような軟弱な家には住んでいないので、使わないです.

「12面サイコロ3個投げて」

『9 8 4と出ました. 合計は21です』

任意の面数のサイコロを任意の個数だけ投げて、それぞれの出目と合計値を教えてくれます.

「1000万面サイコロ投げて」とかも、律儀に対応してくれます.

ボードゲームで使うかもと思いましたが、「サイコロの出目がみんなに見える状態で残ること」が重要だったりするので、音声サイコロは使いづらい気がします.

「ピカチュウと話したい」

「わかりました、ピカチュウです」

ピカチュウと話したいタイミングがない.

「ぬるぽ」

「ガッ、と言えばいいのでしょうか？」

わかっておる...

ちなみに、元々の意味である"NullPointerException"の意味を拾って、

「それは私にとって一番恐ろしいことです」

と言ってくることもあります.

「生命、宇宙、そして万物についての究極の疑問の答え」

「42です」

正解.

できそうだけどできない

「1億面サイコロ投げて」

『9が出ました』

9999万面サイコロまではいけますが、1億面サイコロにするとなぜか小さい数しか出なくなりました.

日本人全員に番号を振って抽選したりするときには使えないです.

「りんなにLINE送って」

「すみません、よくわかりません」

Cloverじゃないのでできません.

LINE NL-S100JP Clova Friends Brown [スマートスピーカー]

LINE NL-S100JP Clova Friends Brown [スマートスピーカー]

「Gmailを新規作成」

「すみません、まだ対応していません」

対応しても怖くて使えない.

「バンコクの正式名称は？」

『thaiembassy.jpのサイトにはこう書かれています. 外国人はタイの首都を「バンコク」と呼びますが、正式名称はバンコクではなく以下のように大変長い名称です.普段、タイ人は正式名称の初めの部分「クルンテープ」（“天使の都”の意）を首都名として呼んでいます』

ラーメンズが好きな人は誰でもバンコクの正式名称を覚えたくなるはずですが、そのトレーニングには使えないようです.

www.youtube.com

まとめ

上に挙げた機能に限れば、Google Homeにしかできないことは1つもありません.

それでもGoogle Homeを買って良かったと思いました. それは、「音声インタフェースを使うことが日常化される」という体験ができるからです.

全く手を動かさなくても、好きな情報にアクセスできるという体験は、まだ一般的ではありません. しかし、きっとすぐ先に待ち受けている未来のはずなので、それに予め慣れておくことができます.

それだけといえばそれだけですが、新しいUXに慣れることで生み出せるものもある気がします. なので、今日も「OK, Google」と話しかけていきます.

Web系に転職したいエンジニアが「N予備校」の「Webアプリ入門」をやるべき5つの理由

お仕事/キャリア

しがないラジオパーソナリティのgamiです.

N予備校のプログラミングコースを始めて、 「Webアプリ入門」コースがすごく良かったので、紹介します.

N予備校ってなあに？

www.nnn.ed.nico

ドワンゴが提供するeラーニングサービスです.

主にN高等学校向けに作られているようですが、一般向けにも提供されています.

無料体験もできますが、基本的には月額1,000円を払うと全てのサービスが使えるようになります.

上記URLにアクセスすると、「ネットで志望校へ一直線！」とか出てくるので不安になりますが、高校生の親から主に収益を得ているサービスだと思うので、そこに最適化されているだけです.

N予備校のプログラミングコース

www.nnn.ed.nico

N予備校は主に高校生向けなので、英語とか社会とかの受験科目のコースも当然あります.

ただし、プログラミングコースの力の入れ方がすごいです.

2017年の9月にはてな匿名ダイアリーの記事がバズったので、知っている人も多いかもしれません.

anond.hatelabo.jp

ドワンゴがやっているので、Webアプリケーション開発の講義がメインです.

受講生の中から、普通に「未踏Jr.採択者」とかも輩出しているらしいので、実績も出てきています.

詳しくは、N高等学校 Advent Calendar 2017の1日目の記事で、担当責任者の@sifueさんが説明しています.

qiita.com

「プログラミングしたいけどそもそもつくりたいものが無い生徒に必要なのは、対話でした」など、プログラミング教育論としても非常に良い記事です.

Web系に転職したいエンジニアが「N予備校」の「Webアプリ入門」をやるべき5つの理由

前述のように、一般にはN予備校のコースは高校生向けに作られています.

ただし、実際に「プログラミング入門 Webアプリ」コースを受講してみて、これからWebエンジニアとしてのキャリアを始めようとしている人にとってもすごく良いと思いました.

その理由を5つ捻り出したので、以下に書いていきます.

なお、N予備校の授業は基本的に「動画」と「Web教材(テキスト)」のセットで提供されていますが、私はほぼ後者の「Web教材(テキスト)」しか使ってないので、その点はご了承ください.

1. 前提知識が要らない

世の中の初心者向け技術書の多くは、ある一定の前提知識を要求してきます.

これは、技術書出版業界のセオリーとして、「『入門』という言葉を付けると売上が上がる」という話があるのが1つの原因です.

一方で、N予備校の授業はPCを使ったことがないレベルまで想定して作られています.

例えば、Chromeのインストール方法や、( の入力方法から丁寧に説明されています.

2. Webの知識が網羅的に身につく

「Webエンジニアになるぞ！」となったときに、身につけるべき知識の範囲というのは、結構広いです.

ざっと考えても、以下のようなトピックについて薄っすらとでも知っておく必要があります.

  • Linuxと環境構築
  • シェルプログラミング
  • 通信とネットワーク
  • GitとGitHub
  • サーバーサイド言語1つ
  • HTML/CSS/JavaScript
  • DBとSQL
  • 認証
  • アプリケーション設計
  • Webフレームワーク
  • テスト
  • セキュリティ
  • Hostingサービス
  • CI

それぞれ別個の入門書が出ているようなトピックばかりです.

「Webアプリ入門」コースは、これらを全て網羅した内容になっています. 20冊近い本を積み上げて勉強するよりは、モチベーションが保ちやすいと思います.

3. 手を動かしながら実践的に学べる

N予備校のプログラミング授業では、ほとんど全ての章で実際に手を動かしながら学べるようになっています.

VagrantでUbuntuを立てて、エディタでコードを修正して結果を見ながら、問題なければgit commitしていきます.

「概念は知っている」よりも、「実際に手を動かして実装したことがある」の方が、仕事で触るときの心理的なハードルがグッと下がります.

例えば、OAuth2.0の存在は知っていましたが、実際にnpmライブラリを使って実装してみると、もっと身近に感じられました.

4. 比較的モダンな開発環境に慣れることができる

私がSIerのF社でSEをやっていたときは、開発環境がかなりレガシーでした.

そのため、転職後にWebエンジニアになったとき、使っている言語やツールがすべてガラッと変わって、慣れるまで辛かった覚えがあります.

N予備校のプログラミングコースは、以下のような比較的モダンな環境を使うので、実作業の中でそれらに慣れることができて良いと思います.

ちなみに私の前職は、COBOL + サクラエディタ + VSS + その他F社製品でした. エディタとかは宗教戦争ありそうですが、サクラエディタよりはVSCodeの方が圧倒的にWeb開発には向いているしWebエンジニアの間での普及率も高いでしょう.

なお、これらの「モダン」な開発環境も日々廃れていきますが、コース名に「2017年」と書いてあったので、毎年教材の改訂を行なっていくみたいです.

5. GitHubアカウントの見栄えをよくできる

Web系の企業で中途採用選考を受ける場合、GitHubアカウントを見られることが多いです.

もしWeb系への転職を考えていてGitHubアカウントも持っていないような状態であれば、GitHubの見栄えを良くすることは、テクニックの一つとしてはありかなと思います.

N予備校のプログラミング入門コースでは、すべての演習のソースコードがISCライセンスで公開されています.

github.com

教材に沿ってこれらのソースコードを写経して、自分のGitHubリポジトリのmasterにpushしていけば、GitHubに学習の成果が反映されます.

もちろん最初から自分のプロダクトを作れれば一番いいですが、何もしていない人とは差別化できるでしょう.

なお、GitHubのContributionsに草を生やしたい場合、以下の記事とかを参考にするといいかと思います.

qiita.com

教材の通りにやると、多分master-2017ブランチ等にpushすることになるので、草が生えない恐れがあります.

また、ISCライセンスに従って、『「無保証」であることの明記と著作権およびライセンス条文自身の表示』が必要になるので、たぶんREADME.mdとかに書いておけば大丈夫だと思います.

(ライセンス周りは詳しくないので、問題だ！という指摘があれば教えてください)

まとめ

  • これからWebエンジニアになる、なったけど自信がない、という人は、「N予備校」の「Webアプリ入門」をやると最低限の知識と経験が身に付く
  • 特に、SIerなどの文化が違うところからの転職だと、慣れるためにも、「これやりました！」と面接で言うにも、良さそう

プログラミングに限らず、こういったサービスがたくさん出てきて、学習コストがどんどん下がっていくといいですね.

「白と黒のとびら オートマトンと形式言語をめぐる冒険」を読んでオートマトン学習モチベがMAXになった話

Book

こんにちは、 しがないラジオ パーソナリティのgamiです.

友人から借りて、オートマトンと形式言語をファンタジー調で解説した本を読みました.

内容は物語ですが、研究者である著者が、東京大学出版会というガチガチなところから出しているので、技術的な裏付けのある書籍です.

白と黒のとびら: オートマトンと形式言語をめぐる冒険

白と黒のとびら: オートマトンと形式言語をめぐる冒険

3行で感想

  • めちゃくちゃ読みやすい
  • オートマトンや形式言語を学び始めたい人が最初に読むとよさそう
  • 実用の話まではされていないので、もやもやしてちゃんとオートマトンとか勉強したくなる

あらすじ

主人公は魔術師アルドゥインの弟子のガレットです.

ただし、師匠からはいっこうに魔法を教えてもらえず、毎日よくわからない言語の勉強をさせられます.

古代ルル語や古代クフ語という古代の言語で、文字は○と●の2文字しかありません.

しかし、各地で不思議な遺跡と出会い、それらを探索する中で、古代語を学ぶ意味に気付いていきます.

遺跡は白と黒のとびらのついた部屋の集まりから構成されていて、とびらを開ける順番を誤ると、二度と出てこられないものもあります.

ガレットは古代語の文法と遺跡の関係についての謎を紐解いていき...

オートマトンと形式言語

各古代語には、それぞれ固有の文法があります. 例えば、第三十三古代クフ語は、「偶数個の○と●の文字からなる回文」のみを、正しい文とみなします.

そして、各遺跡にも、どの状態で、どの行動をしたら、どの部屋に飛ばされるか、といったルールがあります.

古代語や遺跡などのよくわからないけどものから、こうした固有のルールを、読者もガレットと一緒に見つけ出していくような作りになっています.

巻末には、物語の解説がまとめられています.

物語の中の要素との対応としては、実は

を表していることがわかります.

また、オートマトンと形式言語の「現実世界」での発展に沿って、物語のストーリーが組まれています.

その対応関係も、解説を読んだときに後から知らされるので、「そうだったのか！」という感覚が味わえます.

オートマトンや形式言語を学ぶ意味

この本を読む前は、「オートマトンとかよく聞くけど、ライフゲームみたいなやつでしょ」くらいの知識でした(雑).

読んだ後は、かなりオートマトン学習モチベが上がりました.

こちらも解説に書いてある内容ですが、オートマトンと形式言語は、とってもとっても大事な基礎理論らしいです.

オートマトン理論および形式言語理論は、情報科学、数学、また言語学その他の認知科学の分野における、重要な基礎理論です。

情報科学も数学も、漠然と「学び足りてないなあ」と思っているので、その基礎を知れるというのは良いなあ.

また、オートマトンと形式言語を深く学ぶことによって、以下のような問いに対して答えることができるとのこと.

  1. 「計算」とはそもそも何なのか？
  2. 計算機械にできることと、できないことの境目はどこにあるのか？
  3. 人間の脳を一種の「計算機械」と見なした場合、私たちの持つ言語能力をどのように説明することができるか？

個人的には、特に「2. 計算機械にできることと、できないことの境目はどこにあるのか？」という問いにはすごく興味があります.

この本の終盤のテーマも、「何でもできそうな計算機械でも、実はできないことがある」という点にあります. こうした「直感に反する事実を論証する」というところに、理論の強さがある気がします.

最近の機械学習/ディープラーニング熱の高まりを見ていると、「もうAIが全部決めてくれればいいのに」と思うことがあります.

しかし、実際には、その「全部」という領域の範囲は、理論上は「全部」ではないかもしれない？ということなんですかね.

こんな感じでもやもやしてくるので、この本はオートマトンと形式言語の入門書として、最適な本だと思いました.

自己肯定感を爆上げする、MRM(Morning Routine Management)を始めてみた

LifeHack

f:id:jumpei_ikegami:20180104090945p:plain

あけましておめでとうございます.

しがないラジオ パーソナリティのgamiです.

2018年になるにあたって、今年の目標を何にしようかなーと考えました. やっぱり「普段やりたくてもできていないこと」を、まずはちゃんとできるようにしたいなあと.

例えば、Webエンジニアなので趣味でコード書きたいですし、昨年で15kg太ったので運動したいです. 家の掃除とかも、ついサボって埃だらけになります.

MRMってなあに？

唐突ですが、MRM(Morning Routine Management)という概念があります.

特に仕事以外で日々やるべきことを、毎日のルーチンに分割して、朝の時間ですべてやるための習慣マネジメント手法です.

さっき私が考えました.

ネーミング自体は先ほど5分くらいで考えたのですが、構想は3年前くらいから持っていた気がします. ただし、ちゃんと実践できていなかったので、今年はこれをちゃんとやっていきたいなと思うわけです.

なぜ朝なのか？

朝活と夜活のどっちがいいのかという論争は、ググるとたくさん出てきます.

私は朝活派です.

毎日決まったことをやろうとするとき、夜だとどうしても予定が入ってしまう日が多く、まとまった時間が取りにくいです. 一方、朝であれば、起きる時間と出社時間は(頑張れば)固定できるので、毎日2時間とか3時間とか確保できます.

なので、決まったルーチンをやるなら、朝の方がいいと思いました.

これまでのMRM実践

これまでもMRMっぽいことを実践しては、うまくいったり挫折したりしてきました.

私はむかし公務員試験を受けて失敗したりしているのですが、そのときは自己肯定感が大変なことになったので、リカバリのために数ヶ月間、毎朝ランニングをしました. 特に複数のルーチンを管理するには至りませんでしたが、毎朝同じことをすることの良さを実感しました.

また、2016年には、Google SpreadSheetに朝やるべき習慣をすべて書き出して、それをスマホで見ながら毎日こなしていくということをしました. そのときは、掃除、洗濯などの家事から、爪切りなどの週一タスクも曜日限定ルーチンみたいにして管理していた気がします.

これも、何も考えずにSpreadSheetに書いてあることを上から順番にやるだけで、自然と運動できるし、部屋は毎日きれいだし、最高でした.

ただし、SpreadSheetをスマホで見るという運用が地味にめんどくさくて、やめてしまいました.

MRMのプロセス

というわけで、これまでの実践から、 「日々の生活でやるべきことを毎朝のルーチンとして細かい粒度ですべて定義し、その通りにやっていく行為」 はすごくいいという結論に至りました.

ただし、その行為を何と呼べばいいかわからなかったので、今回、MRMという呼称を付けました.

私の中のMRMプロセスをざっくり定義すると、以下のようになります.

1. 日々の生活の中で、やるべきこと、やりたいことを洗い出す

感覚値では、以下のように分けると出しやすいです

すでに毎朝やっている当たり前のこと

  • 例
    • 「朝起きて立ち上がる」
    • 「トイレに行く」
    • 「シャワーを浴びる」
    • 「歯を磨く」
    • 「服を着る」

やるべきだけどできていない家事など

  • 例
    • 「洗濯をする」
    • 「掃除機をかける」
    • 「皿を洗う」
    • 「爪を切る」

自己成長のためにやりたいこと

  • 例
    • 「読書する」
    • 「ブログを1記事書く」
    • 「趣味の開発でcommitする」

2. 毎朝やるルーチンとして正規化する

毎朝何も考えずに同じルーチンを回すために、以下の3要素を適切な度合いに調整します.

  • ルーチンの「頻度」
  • ルーチンの「粒度」
  • ルーチンの「程度」

「頻度」の調整

例えば、「爪を切る」は毎日やると深爪になってしまいます.

そこで、曜日別ルーチンを作成し、例えば「爪を切る」をその月曜日に割り当てます. イメージとしては、ある1つのルーチンの中身が曜日によって変わる感じです.

「粒度」の調整

例えば、「シャワーを浴びる」というルーチンは、私の場合、以下の子ルーチンを含んだ複雑なものです.

  • 「下着とタオルを持って浴室に行く」
  • 「服を脱ぐ」
  • 「シャワーを浴びる」
  • 「身体を拭く」
  • 「服を着る」
  • 「浴槽を掃除する」

こうした大きな粒度のルーチンを、適切な粒度まで分割します. 「どの粒度だと、『何も考えずに』実行できるか」を考えると、いい感じになります.

「程度」の調整

例えば、「ブログを1記事書く」というルーチンは、毎朝やるには重いです. 仮に実行しても、薄めの記事が量産されてしまうことになりそうです.

「どのくらいやるのか？」が不明確なルーチンについては、毎朝やれる/やるべき量を設定します.

ブログの例で言えば、「30分間以上書く」など時間の長さで定義したり、「50行以上書く」などアウトプットの量で定義したりします.

3. 朝起きる時間を決める

朝起きる時間を決めることで、毎朝のルーチンにどのくらいの時間を割けるか決まります.

私は毎朝6時に起きます(宣言).

4. どのルーチンをどの順番でやるかを決める

効率性やモチベーションの観点から、ルーチンをどの順番でやるかを決めます. 時間内に終わらないルーチンは、程度を下げたり消したりします.

最初は仮置きで決めて、やりながら調整すればいいです.

5. 毎朝決まった時間に起きることを決心し、実行する

一番大事です. これができると、勝ちます.

6. 毎朝PDCAを回す

毎朝決めたルーチンを淡々とこなしつつ、順番や内容をチューニングしていきます.

うまくできない、そもそも朝起きられない、というときは、自分が悪いのではなくルーチン設定が悪いと考えて、ひたすら改善します.

私のルーチンリスト

ということで、2018年1月現在の私のルーチンは以下です. 再開してすぐなので、ちょこちょこ変わると思います.

  1. 立ち上がる
  2. ポッドキャストを聴き始める
  3. 1日の予定を確認する
  4. トイレに行く
  5. 20分以上ランニングする
  6. 体重計にのる
  7. 布団をしまう
  8. commitする(=プログラミングする)
  9. 筋トレする(毎日部位を変える)
  10. Slackに筋トレ報告
  11. COMPとプロテインとサプリを飲む
  12. 皿を洗う
  13. タオルと着替えをもつ
  14. イヤホンを外す
  15. シャワーを浴びる
  16. イヤホンをつける
  17. 浴室をシャワーで掃除する
  18. スクイージーをかける
  19. 髭を剃る
  20. 歯を磨く
  21. 髪を乾かす
  22. 歯をジェットウォッシュする(ドルツEW-DJ61-W)
  23. 掃除機をかける
  24. 1 tweetする
  25. ブログ20分以上書く
  26. 服を着る
  27. 家を出る

30個弱あります. すごいですね.

数日続けた感じ、最初のランニングさえできれば、他は結構いける気がします. ランニングモチベを上げるために、3万円のスニーカーを買いました.

あと、起きた瞬間に出発できるように、夜は靴下とウィンドブレーカーを身に付けて寝ています.

筋トレは、ダンベルとフラットベンチが家にあるので自宅でやります.

ダンベル ラバータイプ (40kgセット)

ダンベル ラバータイプ (40kgセット)

ファイティングロード (FIGHTINGROAD) フラットベンチPRO

ファイティングロード (FIGHTINGROAD) フラットベンチPRO

トレーニング内容は、石井直方先生を信奉しているので、この本をやっています.

最短時間で最大効果！ 筋力トレーニングの時間短縮プログラム

最短時間で最大効果！ 筋力トレーニングの時間短縮プログラム

まだ洗濯とかゴミ出しとかがルーチンに入ってないので、今後どっかに混ぜ込みます.

MRMの効用

MRMを少し実践してみた感じ、すごくいいです. もうちょっと言語化します.

QOLが上がる

掃除や皿洗いなどを毎日ちゃんとやるので、部屋がきれいな状態で保たれてQOLが上がります.

「やるべきだけどやれてない」感が減る

QOLと似てますが、より精神的なメリットです.

仕事から帰ってきて、家が埃まみれだったり、洗っていない皿が大量にあったりすると、「やってねえ...でも疲れた...」という気持ちになって意志力とかが削られます. そういう「やるべきだけどやれてない」感からくる精神ダメージを軽減できます.

自己肯定感が上がる

自分で決めたことをその通りにこなすと、「自分をコントロールできている」という感覚から自己肯定感が上がります. また、単純に学習やアウトプットに時間を割けるので、スキルや周囲からの評価も上がります.

良いこと尽くめですね！

MRM実践のために諦めること

とはいえ、毎朝MRMをちゃんと実践して上記のメリットを得るには、何かを捨てなければいけません. ここは、選択と意志の問題です.

夜更かしする

確保したい睡眠時間にも依りますが、家で夜更かしできなくなります. 私は23時には寝ます(予言).

夜の飲み会でお酒をたくさん飲む

上と同じですが、飲んで終電で帰るとかができなくなります. 「飲んだ翌朝は休む！」と決めてもいいですが、飲み会が続くとグダグダになります.

「ちょっと朝のランニングがあるので...」とか言って颯爽と飲み会を抜け出しましょう. 飲み過ぎると寝坊するので、お酒も控え目にします(自戒).

朝、布団の中でゴロゴロする

微睡みの中で布団と蜜月の時間を過ごすことができなくなります.

特に冬はまだ日の出前に目覚ましに叩き起こされて、運動を強いられたりして辛いです.

MRMを実現するための強い味方

MRMを実現するときに私が使っているものです.

ルーチンを記録するアプリケーション

ルーチンを脳内に記録し続けるのは辛いので、外部化します.

むかしはGoogle SpreadSheetを使っていましたが、辛いので今は自分でアプリケーションを作っています. 自分がエンジニアで良かった、良かった.

kesamoというスマホ向けWebアプリです.

app.kesamo.tech

ルーチンを1つずつ表示させることができたり.

f:id:jumpei_ikegami:20180104082942p:plain

一覧から編集や並び替えができたりします. f:id:jumpei_ikegami:20180104082950p:plain

使いたい方は、どうぞ！ まだ開発中で大きな仕様変更がありうるので、ご了承ください！

ポッドキャスト

ランニングや家事の最中は耳が暇なので、ずっとポッドキャストを聞いています. 好きなポッドキャストが見つかると、「ポッドキャストを聴くために運動する」みたいに主従が逆転するので、ハードなルーチンでも心理的ハードルが下がるという効用もあります.

私はエンジニアなので、Tech系のポッドキャストをガシガシ消費してます.

同じくエンジニアの方なら、まずはこのポッドキャストが軽くておすすめです(PR).

shiganai.org

自分がポッドキャスターで良かった、良かった.

マジレスすると、エンジニアならまずはRebuildを全部聞けばいいと思います.

非エンジニアなら、バイリンガルニュースとかを聞けば英語の勉強になっていいんじゃないでしょうか(適当).

まとめ

  • 日々やれてないことにモヤモヤしてるなら、MRMおすすめ！

2018年の目標

ということで、2018年はMRMのプロセスの中で、以下をやっていきます.

  • 毎日運動する(そして10kg痩せる)
  • 毎日コード書く
  • 毎日ブログ書く(週1回くらいでshipする)

(なんかラジオで言ったやつから変わった気がする)

今年もしがないラジオとがみぶろと @jumpei_ikegami をよろしくお願いします.

We Are JavaScripters!@14th まとめ

勉強会 お仕事/キャリア

We Are JavaScripters!@14thに参加したので、その内容についてまとめました！ プレゼント企画などもあって楽しかった！

イベント自体の詳細は、こちら！

wajs.connpass.com

LT1: node.jsでプレゼンツールつくったお話 @ykyk1218

資料

speakerdeck.com

自己紹介

twitter.com

  • ニワトリのアイコン

qiita.com

悩み

  • 勉強会で質問しにくい
  • 勉強会に登壇しても、反応がわかりにくい

SlideChat

http://slide-chat.com/

  • 作った
  • pdfをアップロードし、スライド形式に変換
  • プレゼン中にコメントできる
  • なるほどボタンで、なるほど数を表示できる

スタック

  • Meteor(node.js)
    • Mongoとの相性がいい
    • フロントエンド周りの環境を整えるのが楽
      • webpackなどを別途用意する必要がない
  • React.js
  • PDF.js
  • MongoDB

Qiitaスライドで使いたい！

  • QiitaスライドをpdfにするChrome拡張作った

chrome.google.com

LT2: Nuxt.jsで始めるPWA @takanorip

資料

speakerdeck.com

自己紹介

twitter.com

  • 株式会社スマートドライブ
  • Polymer-Japan翻訳チーム

Service Worker

  • networkとcacheからいい感じにデータ取ってきてくれる

Nuxt.js

  • ユニバーサルVue.jsアプリ
  • SSR
  • ルーティング便利

導入は簡単！

  • pwa-moduleを使う
    • ライブラリをNuxt用にモジュール化したもの
  • nuxt.config.js
    • 設定ファイル
  • gitignoreにsw.*を追加

プッシュ通知

  • One Signalを使う
    • モバイルAppもWebPushも
    • Uberも使っている
  • nuxt.config.jsにonesignalモジュールを登録し、設定を追記
  • デフォルトの通知設定ダイアログを出す前に、確認をはさまないとユーザービリティ的にだめ！
    • OneSignalで、確認用の独自UIを出せる

まとめ

  • Nuxt.jsでPWAの導入が簡単！

LT3: (スポンサー)アライドアーキテクツのサービスで使わているJavaScriptの話 @oremega

資料

speakerdeck.com

自己紹介

twitter.com

  • デザイナー
  • 社内で1人なので、UI,UX,HTML,CSS,JSなんでもやる

アライドアーキテクツ

monipla

cp.monipla.com

  • 企業と人をつなぐ

Brand Touch Manager

www.aainc.co.jp

  • 企業が、自社とつながっている人を可視化

技術スタック

告知

  • フロントエンドエンジニアとデザイナーを募集しています！

www.wantedly.com

LT4: jquery? state管理? どっち使えばいいの？ @fukaminmin

資料

www.slideshare.net

自己紹介

twitter.com

  • 運営メンバーの1人
  • Taskey.inc
  • よつばと、漫画、テニス
  • 国際SEO
  • WeJS, CLEM
  • peepというアプリをリリース

peep（ピープ）- チャット風ストーリーテラーアプリ

peep（ピープ）- チャット風ストーリーテラーアプリ

  • Taskey Inc.
  • ブック
  • 無料

画面から友達を削除する

jQuery

  • セレクタ指定で、友達かどうかを判定
  • ajaxでデータ更新
  • 画面もセレクタ指定で更新
  • つまり
    • DOMに依存しすぎる

state管理

  • state側のデータを判別して、そっちをいじればいい

使用基準

  • jquery
    • LP
    • 動きがないページ
    • animation
  • vue, knockout
    • ポップアップやコメント一覧
  • react, angular
    • 1ページで色々したい
    • フルSPA

デメリット

おすすめ

  • 最初に始めるなら、Vue！

スポンサーセッション

twitter.com

forkwell.com

LT5: facebookのフロントエンド開発 @boiyaaaaaa

資料

speakerdeck.com

自己紹介

twitter.com

  • Persol P&T
  • フロントエンドエンジニア
  • ITスペシャリストに昇格

Facebookでのフロントエンド開発

  • StackShareによるスタック
    • React, Flux, Relay
    • Jest
    • Phabricator
    • Jenkins
    • Nuclide(内製エディタ)
  • Mercurialの単一リポジトリにぶち込んでいる

弟に訊いてみた

パッケージ管理

  • 全社でYarnを使っている
  • 必要なモジュールを全て内製している

Facebook製のものしか使えない？

  • 強制ではない
  • Nuclideが自社構成だと使いやすい

nuclide.io

品質管理

  • Flowで型チェック
  • Jest

facebook.github.io

YarnやJestは書き換えた？

  • 1週間でソースがほとんど変わることがある

バンドラは？

  • 内製

Facebookの開発者になるためには？

LT6: SlackはどうやってBrowserViewに乗り換えたか @tipo159

twitter.com

資料

speakerdeck.com

内容

  • 以下の内容に沿って、Slackの実装上の変化を紹介

slack.engineering

WebViewからBrowserViewへの乗り換え

  • まだβ版
  • webViewよりもChromeのタブに近い動作
  • Electronで維持管理できる

electronjs.org

複数Redux Storeの同期

  • 前は必要だったが、不要になった

非同期Actionによる副作用

  • redux-observableを使い、非同期Actionとユーザー操作に伴うActionを一元化

リファクタリング

LT7: 関数の話 @chikoski

twitter.com

資料

speakerdeck.com

function宣言とアロー関数式

  • 書き方が色々

関数適用

  • 関数を呼ぶ方法
  • add(1,2)

パイプライン演算子

  • 最近議論されている仕様
  • value = 7 |> double |> addOne

関数適用は遅い

  • 普通に演算子で書いた方が早い
    • 関数呼び出し時にローカル変数を使ったりするので、メモリ操作が多い
  • でも、関数で書いた方が読みやすい

末尾呼び出し

  • ES6の仕様で、内部的に演算子で展開してくれる
  • なかなか実装されなかった

関数

  • 手続きの列に名前をつけたもの

関数はオブジェクト

  • つまり、関数 = モノ

クロージャ

  • 外の変数を使って定義できる

部分適用

  • クロージャがあると、関数の一部分だけを固定した別の関数ができる
  • utilityが簡単に作れる

ロジックのパラメータ化

  • map, reduceなど、ロジックを引数で渡せる
  • 部分適用と組み合わせるといい

シューティングゲームに使ってみる

  • 当たり判定の計算をしてみる
  • Enemyクラスに、ColliderとRendererのプロパティを設ける例

LT8: アウトプットしよう！ @brn0227

自己紹介

twitter.com

  • V8のコントリビュータになった！

新卒時代

  • JS書けるだけで即戦力に

転職

  • CAへ
  • 上司に勉強会を勧められるが、嫌いだった
    • 発表内容も大したことないし...
    • 懇親会が苦手...

インプット

  • ひたすらインプット
  • babelよりも前にトランスパイラを作ったが、公表せずに殺した

世間から消える

  • 社員数が多いと、知られていないことも多い
  • フロントエンドテックリードになったが、自分を知っている人があまりいなかった

行き詰まり

  • インプットだけを続けても、成長が見えなくなってきた
  • OSSはPR送っていたが、遠い存在に感じていた

2017年

  • 月に2〜4登壇を目標
  • 23登壇した
  • speaker deckが2ページになった

感じたこと

  • 世界が広がった
  • 勉強会駆動勉強
  • 自分はまだまだ
  • 執筆や登壇の縁ができた
  • OSSの作者やコミッターと話す機会が増えた
  • OSSコントリビュートする意識が増えた

伝えたいこと

  • 明日からでもアウトプットすべき
  • 自分の価値を高めるのは、自分の責務
  • 社会から受けた恩を返していこう
  • 立ち止まっている間に、ベテラン達はさらに先に行ってしまう

伝えたいこと2

  • インプットとアウトプットのバランスをとる
  • アウトプットがあるから新鮮な情報に触れられる
  • 自分の情報の鮮度を確認できる
  • 「十分な目玉があれば、全てのバグは深刻ではない」

知見

  • ありとあらゆる知見は、価値がある
  • 自分にとって取るに足らない内容でも、他の人にとってはとても価値がある

方法

  • 片っ端からLT枠に申し込む
  • 申し込んでから内容を考える
  • 喋る練習をする
  • 懇親会で人と話す
  • ブログ頑張る

まとめ

  • 迷う必要はない！

Vue.js Tokyo v-meetup #6まとめ

勉強会 お仕事/キャリア

Vue.js Tokyo v-meetup #6に参加したので、その内容についてまとめました！

イベント自体の詳細は、こちら！ vuejs-meetup.connpass.com

セッション枠1: Future of Vue.js

@kazu_pon

資料

speakerdeck.com

自己紹介

  • Vue.jsコアチームメンバー

爆発した2017年

  • Google Trendで2016/10にReactを抜いた
  • GitHub Starsも、reactに近づく
  • VueConf2017が開催@ポーランド
  • v2.2〜2.5の4つのリリース
  • エコシステム
    • NUXT, onsenUIなど
  • コアチームメンバーの増加
  • AWA with Vue.js Teamの開催(9月)
    • 「コアチームメンバーだけでなんか聞きたいことある？」

Vue Project Roadmap

公式スタイルガイド提供

  • 公式ドキュメントに公開済み

Cookbook

  • よくある落とし穴への対処をドキュメント化
  • 着手はこれから

eslint-plugin-vue

  • Vue.js向けのコードをLint
  • v4.0.0-beta.2
  • 公式スタイルガイド対応中

vue-test-utils

  • Vueの単体テストツールを公式でサポート
  • v1.0.0-beta.7
  • 日本語ドキュメントもほぼ揃っている

vue-component-compiler

  • バンドラにとらわれないAPIの提供
  • ツール毎に実装されたSFCコンパイルロジックの重複除去
  • WIP
  • parcelも対応するかも？

vue-cli

  • 楽に環境構築できるツール
  • v2.9.2
  • 課題
    • テンプレートのメンテが大変
    • CLIから問われる質問が難しい
  • 3.0アーキテクチャ
    • プリセットモデルの採用
    • オンデマンドでプリセット追加
    • プリセット毎にnpmで管理
    • browserifyを廃止し、webpackテンプレートへ
    • configファイルによる集中管理
    • vue-cliの分離(vue buildコマンドが分離される)

Core

  • v3.0？
  • 2.x系と並行してメンテされる
  • ネイティブにES2015をサポートするブラウザのみサポート
  • リアクティブシステムの改善

WebComponents対応

  • SFCから変換するCLIを提供？

クラスベースのAPI提供？

WebAssemly対応？

  • DOMアクセスできるようになったらあるかも

2018カンファレンス

  • Vue.js Conference Amsterdm
  • UI
  • London
  • EU
  • 日本でも！

セッション枠2: eslint-plugin-vue

@mysticatea

資料

docs.google.com

自己紹介

  • 長島徹
  • ESLintのメンテナの1人
  • Vue.jsのESLintチームメンバー

目次

  1. 開発動機
  2. 今まで
  3. 使い方
  4. templateタグを検証するルールの書き方

1. 開発動機

  • polumerで開発していたときのtypoを見つけて欲しかった
  • React/JSXでは、静的検証が優れていた
  • Vueでも欲しい

2. 今まで

課題

  • .vueファイルはHTML形式だが、ESLintはHTMLを扱えない
  • カスタムパーサーを作った

検証

  • 試しに25個の検証ルールを作成

開発

3. 使い方

  • 以下のサイトで試用できる

Vue.js ESLint Demo

  • configファイルに設定を記載

4. templateタグを検証するルールの書き方

  • みんなで新しいルールを書こう！

qiita.com

  • 基本的にはESLintのルール作成と同じ

    • 既存ルールに悪影響を与えないためにtemplateタグ部分の AST は分離されているため、特別な関数を使ってアクセスする必要あり

  • ここで、試しに1つのルールを作ってみる(ライブコーディング)

  • ローカルのルールを利用する場合は、--rulesdir指定が必要

$ eslit src/*.vue --rulesdir eslint-rules
  • プロジェクト独自のルールを作成すると、生産性が上がるかも？
  • 自動修正もする場合は、ルールを定義するjsファイル内で、fix関数を定義

質問

  • プリプロセッサへの対応についてどう考えているのか？
    • pugはサポートしようとしているが、他のものは検討していない

LT1枠: vue-test-utils

lmiller1990

資料

スライド

github.com

デモ

lt-demo

自己紹介

  • Lachlan Miller

コンポーネントのテスト

  • データを正しく表示するか？
  • ユーザーのアクションに合わせて正しく動作するか？

API

  • レンダーとマークアップ
  • 状態・関数を設定
  • モック、スタブ、インタラクトの登録

DEMO

  • コンポーネントをレンダリングする
  • 状態を設定したり、clickなどのアクションをシミュレートする
    • テキストボックスの入力シミュレーションもできる
  • 想定する状態かどうかテストする

LT2枠: Vue.jsとともにいきる

@lovalottaplus

資料

docs.google.com

自己紹介

  • エンジニアかつデザイナー

エンジニアとデザイナー

  • お互いに話す言葉が違う
  • ハイブリッドタイプ
  • jQuery帝国を捨てて、Vue.js王国に来てください！！！

デザイン現場では意外と使われてないもの

  • Vue
  • Gulp
  • Webpack
  • SASS
  • ループや分岐 -関数構造家 -エディタ
  • 外部データ通信
  • git

デザイナーにVue.jsを広める辛さ

  • 「世間のデザイナーから見れば、下北沢のインディーズバンドと同じレベルの知名度」

jQuery帝国とVue.js王国の考え方の違い

デザイナーがVue.jsを使うまでの3つのハードル

  • データをかくない
  • Vue.js難しい
  • DOMを見てくれない
    • F12を知らない

5つの工夫

  • Vue.jsのドキュメントは読まなくてもいい
  • コンポーネント定義をHTML側に寄せる
  • ディレクティブという概念を隠蔽
  • 非同期データ通信を無くす

良かったこと

  • 変更に強くなった
  • 将来の見通しがよくなった
    • Vueのdataを考えるようになった

デザイナーが覚えたVue.jsの機能

  • 3%

私以外のメンバーがウェブサイトを作った分量

  • 92%

開発効率

  • 2,000%

質問

なぜVue.jsか？

  • Angularを使ったら疲弊した

ソースコード管理はどのようにやっているか？

  • プルリクベースはやめて、masterのみ
    • gitのログがあるだけですごい！という世界

LT3枠: 10年前のレガシーシステムをVue.js TypeScript Elementでフルリニューアルしている話

@maeharin

資料

speakerdeck.com

自己紹介

リニューアル前

  • RAILS
  • 管理画面: Java10年もの
  • サテライトサイト: Java 7年もの
  • 約100テーブル重複

リニューアル後

  • フロントをVue.js + Element + TypeScript + Rails
  • APIサーバーをKotlin

Element

  • Vue.jsのデスクトップUIフレームワーク
  • 2.0.0でTypeScript型定義がバンドルされた
  • フォーム部品周りが豊富
  • Vue.js系のUIフレームワークで一番人気
  • i18n対応
  • Vetur(VSCodeプラグイン)もサポート
    • 補完が効く
  • rulesにバリデーションルールを記載できる
  • パーツが豊富で、少ない手数でリッチなUIを構築できる

TypeScript

  • Vue.js2.5でサポート
  • オブジェクト構文でも、thisの型が推論されるようになった！
  • APIの1エンドポイントのプロパティが50個あったりするので、型定義が欲しい
  • Kotlin側の型定義から、TSの型定義を自動生成

開発の流れ

  1. APIサーバーのエンドポイントを書く
  2. swagger-codegenを実行
  3. RubyとTSのコードが自動生成
  4. Ruby側のコードを書く
  5. Vue.jsのコードを書く(TypeScript)

まとめ

  • 管理画面開発にElementはおすすめ
  • Vue.jsのTypeScriptサポート強化は嬉しい
  • swagger-codegenでTypeScriptの型定義自動生成をするのは、あり

LT4枠: VS Code&TypeScript&Vue.js

日本マイクロソフト 井上章様 @chack411

自己紹介

VSCode

TypeScript

ライブデモ

github.com