hariport

haripo.com

Grand Frontend Osaka 2016 行ってきた

kfug.jp

ひさしぶりにイベントに行ってきた。

概要

2日間開催のイベントで、1日目はハッカソン企画 "Try Tech Kansai"、2日目はセミナーとLT大会の構成。 ハッカソン企画 Try Tech Kansai はテーマが「あなたにとってはじめての技術体験」ということで、 いくつかの技術でブース出展されている中から新しいものに触れてみようというハッカソン。 Angular 2 や Vue 2.0 など新しいフレームワークもあって魅力的でしたが、 今回は D3.js に取り組むことにしました。 ビジュアライゼーションは研究と相性いいですし、いつかやろうと思っていたのでちょうどいい機会でした。

ハッカソン

エンジニアのスキル可視化っぽいことができないかと思って、 プログラミング言語地図というのをつくりました。 GitHub から言語利用データを持ってきて、 似た言語が近い位置に、似てない言語が遠い位置にくるように平面上にマッピングします。 マッピングした平面上を指差して「このへんのスキルがあります」みたいなことが言えたら面白いなあと。 技術的には、GitHub からレポジトリの言語別 bytes 数を取ってきて user-language 行列に落とし込み、 PCA 前処理からの t-SNE で 2次元マッピングです。

で、できたのがこれ。

f:id:harip0:20160829134130p:plain

なんとなく「地方感」がでていませんでしょうか。

もちろん解釈不可能な部分も多いですが......

この地図上に私の GitHub アカウントを可視化したのがこれ。

f:id:harip0:20160829134504p:plain

JavaScript, C++, C# と Julia が濃い白(GitHub 上のコード量が多い)になってますね。 全体的にフロントエンド周りと C#, あと Lisp と Julia をよく書いていることがわかります。

と言いたいところですが、 Lisp はほぼ Emacs の設定ファイルで Julia も本家 Julia のレポジトリを Fork しているに過ぎず、 精度についてはなかなか難しいものがあります。 FortranMatlab も多分 Julia レポジトリに入ってるんでしょう(書いたことない)。 さらには、(node_modulesのような)依存パッケージなどを無視することが GitHub API の仕様上できないので、 フロントエンド慣れてない人が node_modules をレポジトリに含めたまま GitHub に置くと、 地図上ではフロントエンドスキルのある人に見えてしまいます。

言語の特性を可視化するという点ではうまく行ったのではないかと思いますが、 エンジニアスキルの可視化という点では厳しい結果です。

もっとインタラクティブにしたりデザインにこだわったりしたかったですが、 いかんせんデータ解析的な処理に時間がかかったり、 D3.js の世界観に馴染めず苦労したりでうまくいきませんでした。

セミナー

2 日目のセミナーについて。 午前に外せない予定ができてしまい途中参加になりましたが、面白かった。

フロントエンジニアの未来像について、 「データフローの適切な扱い」ができることが重要になってくる、 ただ JavaScript をコーディングするだけがフロントエンドではなくなったんだ、というプレゼンがありました。 本イベントのなかでもサーバレスや WP-API など、フロントエンドの構成要素として選択肢が増えていることを感じましたし、 JavaScript ですら TypeScript や Babel、さらには WebAssembly で置き換えられる時代が近づいています。 いかに要素を選択するか、いかにデータフローを構築するか、は難しさを増しそうです。

一方で、変態的 CSS テクニックや HTML メールなど技術を問われる場面もあることがわかりました :innocent:

おわりに

開催日前後で忙しくなってしまいキャンセルしようかと悩みましたが、行ってよかったです。 ありがとうございました。