ゆずめも

メモ的なブログです。主に勉強した事について書いてます。

HTML5 Conference 2017に参加してきた

FreeTalk

実は去年も参加して今年で2回目の参加でした

events.html5j.org

聞いたもの

  • 基調講演
  • Nintendo SwitchとWeb
  • これからはじめるAngular
  • 詳解 WebRTC
  • Web 技術とブラウザ ーいま知っておくべき Web 最新動向ー
  • まあまあ最近のCSSと、これからつらくなくなるために（仮）
  • LT

撮影禁止とかのものを中心に見てた感じですね

資料

youtubeに上がってました。html5jのスタッフさんめっちゃ仕事早いですね
（次の日には上がり始めてた気がする）

基調講演 -HTML5 Conference 2017- - YouTube

（リンク先は再生リストになってます）

発表の感想

見たやつ（資料だけ、公開動画）とか含めると切りないのでいくつか

基調講演

改めて思ったけど基調講演聞くとモチベーションがとても上がる
ここ半年以上Azure Functionsでバッチ処理を書くのが仕事になっていてブラウザとは縁遠い生活を送っているんだけど、やっぱ自分はフロントエンドとかに興味があってもっとやって行きたいと思う
まぁ職場に求められているのはたぶんC#の技術なんだろうけど。。

任天堂さんの発表

Nintendoさんの発表はSNS等で拡散禁止とのことなのであんまり触れませんが
任天堂さんってそういうことしてて、そこらへんweb技術なのかーとかわかったし
とても聞き取りやすくてよかったです

詳解 WebRTC

あとはWebRTCの話を聞きに行った
WebRTCを使ったお仕事したことあって、その時から思ってたんだけど
自分たちでWebRTCの進化を追い続けるのはとても辛いといった印象だったので
時雨堂さんとかにお金払った方がやっぱ安いんじゃないですかねって改めて思った

JavascriptのAPIだけ触ってる分には簡単なんだけど
裏でどんなことが行われているかとかを知ろうと思うと本当にWebRTCはRFCの数が半端ない
それにNat超えやっぱ難しい

あとDTLSのRFCがTLSのRFC全部読んでから来いって内容らしいのも、めっちゃ印象に残ってて面白かった

Web 技術とブラウザ いま知っておくべき Web 最新動向

webブラウザの動向の話は最近追えてなかったブラウザの動向とか知れてよかった

発表者の浅井さんがとても面白くて時間あっという間だった（実際オーバーしてたし）

ちょっと入るのが遅くて、席探してたらレッサーパンダの話とかが始まった所で会場の電気消されて、時間になってないのにしれっと始まった！？と思ってたら始まってなかったり
position stickyを「うざい広告簡単につくれます」って言ってて概ね同意だった（個人的にはspaceでスクロールした時に広告等のせいで見えない範囲が出るのがうざいです）

まとめ

今回は前泊して参加したので、去年と違って比較的体力があって全時間に何かしらのセッション見れました

去年も思ったけどHTML5 Conferenceは見たいものが多すぎて、どれをチョイスするかめっちゃ悩みますね

今年は抽選会ならぬじゃんけん大会には参加できなかったけど 自分がこの業界に入ったきっかけになった人とお話できたり、とてもいいイベントだった 来年こそはスタッフとか何かしらコミュニティに関われるといいな

あと人見知り爆発して、ほとんど誰とも話さなかったのでコミュ障克服したい

vscodeのお引っ越し

Editor・IDE

vscodeをinsiderにしてみようと思い
vscodeからvscode insiderにお引っ越しした

code.visualstudio.com

プラグインの引っ越し

一つずつ探して、インストールしていくの面倒だと思ってたら楽に移行できる方法を見つけた

前提

以下の記事を参考にvscodeとvscode insiderのコマンドをpathに通しておく

qiita.com

方法

code --list-extensionsを実行するとインストール済みのプラグイン一覧が表示される

それをファイルに書き込んでおいてxargsを利用してプラグインを順番にインストールする

code --list-extensions > vscode_plugins
cat vscode_plugins | xargs -n 1 code-insiders --install-extension

key-bind & setting

vscodeの設定はJSONで定義されているので

コピペが一番早いのでは

ってなってしまって特に調べてない…

require('./module').defaultについて

javascript

GWから乃木坂にハマりました、お久しぶりです。

後輩氏がjsやってて、なんだこれってツイート見たので書いとこうってモチベ

jsのモジュール

JSのモジュールはけっこういっぱいある（nodeのcommonjsがcommonjsじゃない問題はめんどくさいので置いとく）
よく見るのは下の2種類

  • ES Modules: ECMA Scriptの仕様
  • CommonJS: Node.jsが採用してるモジュールシステム

ES Modulesの実装状況

chromeとかedgeみたいな一部だと実装されてるけど
ES Modulesで書かれたものは基本動かない

なのでNode.jsで動かす時なんかはcommonjsに変換する

commonjsへの変換

esmodules => commonjsの変換はBabelやTypescript使う気がする

www.typescriptlang.org

babeljs.io

今回はbabel使って試してみる

変換

とりあえずesmodulesで書かれたものを用意する

export default class Nogizaka {
  constructor() {}
}

これをbabelで変換(babel-preset-es2015とか)すると

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

var Nogizaka = function Nogizaka() {
  _classCallCheck(this, Nogizaka);
};

exports.default = Nogizaka;

重要なのはexports.defaultの部分で、export defaultになってるのでrequire('./module').defaultと書く必要が出て来る

これをNode.jsとかのコードでよく見るmodule.exports = Nogizakaにしたい

module.exports = Nogizakaしたい

babelにはbabel-plugin-add-module-exportsってプラグインがある
それを使用するとmodule.exportsの行が追加される

npm i -D babel-plugin-add-module-exports
babel --presets=es2015 --plugins=add-module-exports index.js
"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

var Nogizaka = function Nogizaka() {
  _classCallCheck(this, Nogizaka);
};

exports.default = Nogizaka;
module.exports = exports["default"];

これで一応.defaultしなくてもrequire('./module')でいけるようになる

まとめ

乃木坂はいいぞー