FRONTEND CONFERENCE 2018に参加してみた!

進化を続けるフロントエンドの「今」をテーマに

11/24(土)に開催されたFRONTEND CONFERENCE 2018に参加してきました!

2018.kfug.jp

 

フロントエンドって?と言われたら

HTML,CSS,JavaScriptなどを使ったWebサイトの表に出てくる側...(?)程度のことしか答えられない程度の初学者ですが

お名前を存じ上げる方が登壇されるのであったり、まぁ分からんのは当たり前やしとりあえず参加してみようという気持ちでした。

 

参加してみての感想を3つ挙げると、

1.Webの世界は知らないことだらけ。さらに新しいことが出続けるので色んなことを学びつづける必要がある。

2.アプリを1から自作するという点に拘りすぎず、他で代替できるものがあればそれをベースに行った方が良い(車輪の再発明を防ぐ? この単語が直接出てきた訳では無いですが...)

3.実際の開発現場、業務について何も知らなかった。これから飛び込んで行こうとする世界だからこそしっかりと学んでおく必要がある。

 

この3点に集約されます。あまり感想としてのまとまりはありませんが...

どうしてこれらを感じたか?は最後にまとめるとして、

ひとまずは何のセッションを聴講してどういうことをお話されていたかを記載します。

 

Webアプリを作らない選択肢 初心者向けGAS講座

Web Music では何ができるのか

Chrome Dev Summit Recap

10名越えのスクラムでフロントエンド開発する現場の声

業務システムでこそ使えるPWA

タイポグラフィ ベーシック

フロントエンドで作る理由

 

以上の計7つを聴講しました。

それでは順に。

 

Webアプリを作らない選択肢 初心者向けGAS講座

by 株式会社ハマヤ Wakai Shinichiroさん

www.slideshare.net

正確にはWEBアプリを一から作る必要が無いのでは?という話でした。

 

話す内容を5つに分けられており、順に

1.1からのWebアプリは時間がかかる

2.GASができること

3.事例紹介

4.使う上での注意点

5.まとめ

という感じでした。

 

1.1からのWebアプリは時間がかかる

一から作成するのを想像すると

エディタ、実行環境、サーバー、

スプレッドシートや言語知識、バックエンド、技術選定、基礎知識

色々なものが必要。

 

それを全てGASは解決。

GASは誰でも簡単に扱える。

ちなみにGASにはContainer BoundとStandaloneの2種類が存在するとのこと。

 

2.GASができること

4点ほどある

 

Googleスプレッドシートとの連携

・シート情報の取得

・セルからデータを取得、貼り付け

・独自関数の定義

 

データ操作

Create,Read,Update,Deleteができる

スクレイピング、画像のバイナリ

 

トリガー

バッチ処理のようなことがGUIで可能

 

Webアプリ開発

HTML,CSSを用いて作成することもできる。

また、Gsuite Developer Hubでトリガーの設定が可能

 

3.事例紹介

楽天ランキング調査システム

楽天商品管理システム 楽天に商品を出したりしているからこういう機能が必要だった

 

ランキング調査システム

1日1回楽天 APIを叩きスプレッドシートに書き込み、CSV出力

 

WEBアプリを公開

画像をアップロードして、商品マスタを更新

それを楽天に商品情報を追加・更新

 

4.使う上での注意点

GASには処理時間とトリガーの制限があるので注意。

 

5.まとめ

環境構築の工数や保守工数が削減できる

 

このようなお話でした。

GASは利用したいな、と思いながらも実際に利用できていなかったので実際に触ってみたいと思いました。

 

次に

Web Music では何ができるのか

 by Crescware okunokentaroさん

speakerdeck.com

 

Angularユーザコミュニティ ng-kyotoのオーガナイザなどをされていらっしゃる方。

こちらは詳細についてはスライドを参照して頂くとして、

自分の感想は「えっ、ブラウザ上で鍵盤弾けるの!?」でした。

Web Music Developers JOという開発者コミュニティ、

Web Audio API,Web MIDI API,MIDI... まっっっっっったく知らない単語ばかりでしたが、こういうこともできるのか...とただただ驚いていました。

Webでは自分の知らない出来ること、まだまだたくさんありそうです。

 

Chrome Dev Summit Recap

by Google 宇都宮さん

 

サンフランシスコで行われたChrome Dev Summit のおさらいということでお話いただきました。こちらは発表資料の公開が無いとのことで他の方のセッション紹介に比べると長文になります。

 

今年はPerformanceというテーマが活発だったとのことです。

全てのセッション共通のメッセージは"Performance Budget"

Webサイトにおけるパフォーマンス指標のこと。それをチェックするためにhttp archiveというサイトをオススメされていました。

HTTP Archive

 

ImagesとJavascriptは特に改善すべきポイントとのことです。

そのため各環境に応じたBudgetを用意することを推奨されていました。

 

パフォーマンス診断を行ってくれるツール(?)

chrome.google.com

 

Learnするとパフォーマンスを上げるためにはどうやったら良いか教えてくれる  wev.dev

web.dev

 

こちらは日毎に改善内容を教えてくれるそうです。

また、ベータ版なので何かあればフィードバックが欲しいとのことでした。

 

ChromeでNative Lazy Loading出来るようにしているとのこと。

Lazy Loadも例によって詳しく無いのですが次のサイトがわかりやすかったです。

syncer.jp

パフォーマンスを上げるために、画像を遅らせて読み込む技術(?)のことみたいですね。ちなみに、サイトをスムーズに動かすためにレスポンスは100ms以内、アニメーションは60FPS以内が良いとのこと。

 

developers.google.com

文字の周りをキラキラさせるようなものはDOMを直接操作するよりも効率的に実装できるPaint Workletを勧められていました。JavaScriptで記述できるみたいです。

 

 

squoosh.app

画像を最適化(軽く)した際にどう見えるのか実際に比較しながら見ることができるサイト。トップページ左下のLarge Photoを実際にデモで圧縮していましたが、結構軽くしてもそこまで大きな違いが無いことを確認できました。

Webサイトに掲載する画像はそこまで高品質出なくても十分だと感じ、自分もWebに掲載するときは必要以上に綺麗なものにしなくても良いのかなと思いました。

 

Google、Webコンテンツ表示を高速化する「Web Packaging」「Portals」を推進 - Computerworldニュース:Computerworld

Webの画面遷移の体験をシームレスにできるPortal

となりのヤングジャンプを例に挙げて説明されていました。リンク(別漫画)をタップして読み込む時に読み込む画面が表示されると思うのですが、読み込み画面を表示せずにすぐ移動できるような技術みたいです。

 

かなり濃いお話でした。メモしきれていないのでYouTubeでサミットの情報を入手された方が良いかもしれません。。。

youtu.be

設定をいじれば日本語に自動翻訳してくれるので私でも理解できそうです。

 

 

10名越えのスクラムでフロントエンド開発する現場の声

by 株式会社ゆめみ 上原さん

 

speakerdeck.com

タイトルの通りなのですが、10名越えのスクラムでフロントエンドを開発されている実際のお話を語っていただきました。スクラムとは?という点から余り知らなかったのでこの機会に学ぼうと聴講しました。

 

スクラムアジャイル開発手法の1つだそうです。ただし、10名を超えた場合チームを分割するものだとか... そこで、実際にどうやっていらっしゃるのかとお話いただきました。私自身開発の流れだとか、プロジェクトの流れだとかを知らなかったので「自分が入りたい、興味があるものを知らないのダメじゃん!!!」と一人こっそりと思っていました。

 

それ以外にも色々と株式会社ゆめみさんの事などお話されていらっしゃり、

新しいものが出てきたらとりあえず試して見る空気など素敵だなーと思いました。

スライドには掲載されていませんが、10%ルールという業務時間の10%以内であればどんなことでも時間を使っても良いというルールがあるらしいです。

www.yumemi.co.jp

 

業務システムでこそ使えるPWA

by 株式会社MOONGIFT 中津川さん

 

speakerdeck.com

 

PWAとは?

Progressive Web App の略。

Googleが絶賛推奨中のWebアプリケーションをよりネイティブアプリ風、高機能にするための技術、テクニックの総称のこと。

一定の位置技術を指し示すキーワードではありません。

 

いかにユーザーのことを考えるか?といった点が大事なのかなと。〇〇しなければならないと考えることが多いですが、そのしなくてはならないことは本当にユーザーのことを考えているのか?踏まえた上で取り組むべきだと感じました。

 

タイポグラフィ ベーシック

by 株式会社キテレツ カイトさん

speakerdeck.com

 

タイポグラフィ とは? 文字を読みやすくするため、あるいは魅せるための技術。

文字を読みやすくするためには?という話を中心にお話いただきました。

 

私は普段チラシを作ったりしているので、文字を詰めるコツなどあるのなら一度プロの話を聞いてみたいなと思って聴講しました。ある程度まとめて調整できる機能があるとは知りませんでした。

 

フロントエンドで作る理由

by 株式会社chatbox 後藤さん

speakerdeck.com

 

フロントエンドで作っていこう、とお話いただきました。

Vue.jsやNuxt.jsなどの技術を色々とご紹介してもらって、なるほど、こういうメリットがあるのかと感じました。個人的にはLaravel + Vue.jsの組み合わせを後々試してみたいなと思っています。

Vue.jsのとっつきやすさ、学びやすさは最高レベルという説明で心がグッと惹かれました。chatboxさんで勉強会などされていらっしゃる(Lec Cafeというイベントを開催されている)ので色々参加しようと思いました。

実はすでに一つイベントに参加予定なので今後も色々と参加しようと思っています。

 

以上でFRONTEND CONFERENCE 2018の勉強会メモを終わります。

公開するまでに一週間時間を要した上に大したことは書けていませんが、なんとか書けて良かったです。

間違いなど多々あるかと思いますので、その時は教えていただければ幸いです。