We Are JavaScripters! @22nd
2018/7/23
趣旨
聞くだけじゃなく登壇することで知識を増やしたり広げていこう
マサカリ禁止
全員登壇していこう
飲酒できる
🍺🍺🍺🍺🍺🍺🍺🍺🍺🍺
01.ピピピのPWA @mqtsuo02
自己紹介
まつおちゃん
フリーランスWeb
LTのテーマ
とりあえずPWAっぽいことがしたいので
「ホーム画面に追加を実装」してみた
やったこと
ページをつくる
manifest ファイルを作るindex.htmlに読み込む
manifest ファイルとは？json形式
おもな設定
ホームアイコン
スプラッシュ
起動後のブラウザとかの設定
設定項目
short_name ... アイコンの下に表示するアプリ名
icons ... 複数サイズのアイコン指定
theme_color ... ツールバーの色
display ... standaloneにするとブラウザ感なくなる
orientation ... 縦横指定
Web App Manifest Generator
非公開プロジェクトはやらないほうがよさそう
指定方法
<link rel="manifest" href="./manifest.json"> Android Chromeはちゃんと動く
iOS Safariの対応まだ微妙…
apple-touch-icon でアイコン指定できるまとめ
manifest ができれば入り口はできる ServiceWorker はこれからがんばる02.Node.jsではじめるオレオレツールの世界 @h_reader
自己紹介
堀内大史
C# でPOSアプリ開発オレオレツールとは？
俺が作って俺のために使うローカル環境で実行するツール
WindowsやMacでもJSを実行するコマンドがある
Windows
wscript cscript Mac
jsc ただ、
console.log() がサポートされてない print() WScript.echo() そこでNode.jsを使う
node index.js でconsole出せるファイル操作モジュール
const fs = require('fs') npmで簡単に既存のモジュールを使える
npm init いろいろ聞かれても適当に答える
yarn init -y のが爆速かな モジュール一例
Excel操作ライブラリ
excelデータをjsonで取得できる
sheet_to_json PromiseベースのHTTPクライアント
↑でできるようになったこと
特定のディレクトリからExecelデータを取得
必要なデータを取得
webサーバにデータを送信
人に使ってもらう時 => webpack
webpack-config.jsmodule.exports() => {
mode: 'production'
target: 'node'
} npx webpack index.js で動く03. Firebase+Nuxt+buefyで悩んでいる話 @Skmt3P
大変だったこと
deployすると503
Buefy本体がpackage.jsonになかったから
public フォルダが見た目 functions に関数関連CloudFunctionsのコードの書き方がわからん
Expressを使う？
JSのみで書きたい
Real Time Database OR Cloud Fire Store？
どっちがいいのかわからん
感動したこと
Nuxt + Buefy + Storybookのコンポーネント開発が最高
Buefyからコピペ
JSファイルにペースト
Export書く
Stories.jsファイルを更新
ロジックや見た目を修正できる
04. closureについて再確認した @ariaki
function 第一級オブジェクト
宣言文
関数リテラル
アロー関数
コンストラクタ
即時関数
関数を代入できる
無名関数・即時関数はどう使われていたか？
ブロックスコープの代替手段（グローバル汚染の回避）
letの試用
モジュール化
SymbolやWrakMap
プライベートフィールド
closure 関数オブジェクトの一種
スコープが静的に閉じられている（閉包）
Scope（static / lexical scope）
JSは静的スコープ言語
浅いアクセス
scope chain
inner > outer > global
shadowing masking 関数のコール時に
activation object が生成されるprotorype chain
メモリ的にはスッキリ
外側の関数で宣言された変数を内側で操作できる
返ってきた即時関数をそのまま返すことができる
即時関数の中に変数をつくって関数を通して使うことができる
Function.prototype Object Class 構文 memory leak Time / EventListner
Variables
Circular reference
まとめ
第一級オブジェクトでいろいろ書ける
宣言時参照なので外部変数のGCを阻害する
05. ドリンクスポンサー枠 @Forkwell
Forkwell
非エンジニア学生
500万円
12月からの広告・スポンサー
正直赤字
リニューアルした
オンラインプロフィール
メアドとプロフィール名だけで使える
アウトプットを自動更新
自己紹介
他人との競争
上司にこれからの成長する姿を見せる
06. Practical Typed React App @kdnk
Wantedly Inc. 新卒1年
会社ページリニューアル
TypeScript導入（初）
Componentの型定義
ページごとに必要なフィールドは違う
ページごとに必要なフィールドのみを返すAPIがある
Container, Componentは使いまわしたい
Ruby on RailsのModelに対応する方をWtdModelsとして定義
必要なものだけを定義したいため
Models
ドメイン内で共通の型を定義
ContainerごとにState, Actionの方を定義
Interfaceの定義はState, Actionと同じで毎回やるのはダルい
型定義を楽にしたい
Infer
TS2.8
Conditional Type で推論された型をパラメタとして利用できるUnion
基本的には
& と同じ(ComponentName)Modelsを
書くComponentsで定義
親ComponentsでimportしてUnion
07. 会場スポンサー枠 @sakkuru
さっくる
SE @ Microsoft
VS Codeラブ
Visula Studio Live Share 
ライブデモ
Visual Studio Code と Visual Studioでペアプロプログラミング
コードのシェア
カーソル、選択位置のシェア
デバッガのシェア
ターミナルの共有 =>
Share Terminal サーバーの共有 =>
Share Server 08. vim.wasmがすごい（WebAssemblyを勉強し始めた） @yukpiz
redish Inc
WebAssemblyでVimを表現
WebAssembly？
2015/06に発表
ブラウザ上で実行可能なバイナリフォーマット
C/C++ => emcc/em++ => wasm/js/html 2017/11に主要ブラウザが対応
Golang for WebAssembly
hello World が打てた！今後に期待
まだまだこれから
JSに置き換えるか? == No
何を目指しているかはドキュメントに書いてる
パフォーマンス面でJSで大変だったのをサポート
新しい技術なのでいろんな言語やライブラリのサポートがでてきそう
Go言語のサポートを期待しています
09. OSSはじめのいっぽ @isoppp
OSSやりたい人向けの話
気になること
英語力
英語全然できないのが不安…
Google翻訳でなんとかなる
コードの中身はコードで語ってくる
気持ちの問題
技術力
OSSとか変態しかおらんでしょ…
レビューが結構親切
わからなければ素直に聞いて良い
気持ちの問題
気をつけること
Contributuing Guide
Issue / PRの立て方はちゃんと読む
Nuxt.jsはちゃんと形式がある
パッケージをインストールしてから修正する
指示通りテストを実行する
気になるその後
コードの抵抗が軽減
解決パターンなどがわかる
海外行っちゃおう計画
まとめ
英語・技術力はなんとかなる
Contributuing GUIDEはちゃんと読む
OSSをやると人生が変わる（可能性がある）
10. Parser combinatorのはなし @chikoski
Array.prototype.slice のはなし eshost すべてのJSエンジンでの実行結果が分かる
Array / 配列
モノのコピーというのは重い処理操作
Array.prototype.slice ... 1部分から新しい配列を作る Slice の使い所：長いリストの1初分に対して処理したいときある範囲だけを表示しているだけ？
本当にそんな動きしているのか？
MDNを見る
だいたい嘘＝厳密な定義はしてくれていない
MDN => http://tc39.github.io/ecma262/ => 各JSエンジンソースコード
まとめ
JSは謎の部分が多い
文法的に謎なものがあればドキュメントを読もう
もっと気になった人はソースコードを読む
OSSコントリビューターになれる？
余るって言ってたんで4杯くらい呑んできました 