大晦日だよWeb系エンジニア〜2017年技術トピックスふりかえりスペシャル
2017年もいよいよ大詰めとなりました。今年触れた技術について各分野ごとに来年に向けてまとめておきたいと思います。
注意点としては各技術の動向を考察するというよりは、Web系エンジニアの視点で各技術をどう扱うかに視点を置いてみた。その観点はあくまで以下のような私個人の2017年の活動がネタ元であることはご容赦ください。
- radiocatさんのプロフィール（申し込みイベント一覧） - connpass
- radiocat - Qiita
- radiocat (radiocat) / Repositories · GitHub
- Presentations by radiocat // Speaker Deck
AI
まずはここから書き始めるしかないというくらい、猫も杓子もAIの状況が続いているが、今年1年でずいぶんライブラリやAPIが整備されてきた印象がある。これまでは専門家がデータを分析し試行錯誤してゼロベースでAIの仕組みを構築することが多かったが、今後は専門家以外でもこれらのライブラリやAPIを駆使してAI系機能を実現するケースが増えてくると思われる。エンタープライズ系に強いJavaのDeep LearningライブラリであるDL4Jも2018年中にv1.0がリリースされると思われる。Deep Learingの専門ではない従来のエンジニアがこのようなライブラリを手軽に扱えるようになれば、技術は今以上に浸透していくと思われる
もちろん肝となるのはデータの収集・整備であったり、ゼロベースではないにしてもライブラリやAPIから適切なアルゴリズムを選定して仕組みを構築する部分にもあるため知識ゼロでAIが扱えるということは無いだろう。しかし、これまでも我々は例えばソートアルゴリズムをゼロベースで実装しなくてもソートを扱ってサービスを構築してきた。ときには内部アルゴリズムに目を向けることもあるが多くの場合は深く意識せずソートアルゴリズムを扱えるように、そろそろDeep Learningを深く学習せずとも扱うようになるステージを迎えるのではないかと感じている。もちろん、専門領域では引き続き様々な研究が続くと思われるため、ある程度の知識を持って専門分野を追いかけつつ、構築済みのライブラリやAPIの仕組みの中でアルゴリズムを活用してサービスに応用するようになるのではないだろうか。
モバイルアプリ
AndroidではKotloinが正式にサポートされることになり、Swiftも4にバージョンアップするなど着実に進歩を続けている分野ではあるが今後に向けての一番大きな動向はPWAではないかと感じている。Google I/OやChrome Dev Summitでもその力の入れようが感じられる。
年末にはSafariとEdgeの開発版にもServiceWorkerがサポートされ、いよいよ2018年はPWAの導入が本格化するかもしれない。
フロントエンドの各ライブラリもPWAに追従するためのサンプルコードを公開しており、モバイルアプリエンジニアだけでなくフロントエンドエンジニアからの注目度も高い。
フロントエンド
PWA以外にもWeb Compornents、AMP、WASMなど話題には事欠かないのがこの領域だ。
カウボーイ状態はまだしばらく続きそうで、乗りこなすのは大変だと感じる。
AMPについてはGoogleの検索アルゴリズムが関係してくるため技術云々ではなく追従せざるを得ない面はある。
GoogleがAMPの規格をアップデートしてSEOねらいの‘釣りページ’を退治する | TechCrunch Japan
スマートスピーカー
2017年は間違いなく日本におけるスマートスピーカー元年と言えるだろう。個人的には運良くAmazon Echoの招待メールがもらえて、Google Homeと両方を比較して試すことができた。
肝となる音声認識の部分は各プラットフォームで提供されるため、これを扱うエンジニアとしてはそれほど新しい技術を使うわけではない。ただ、Web系エンジニア的にはプラットフォームとしてはスマホに次ぐ新たなサービスの入り口として無視できない状況になる可能性はある。音声を受けた後のバックエンドは既存のWebサービスに繋げて扱うこともできるため、音声応答を意識したサービスの構築やアプリ設計の観点が必要になってくるかもしれない。
一方でAmazon AlexaにしろGoogle Assisntantにしろ、まだまだこれらのプラットフォームは発展途上で技術情報も整備されておらず扱いにくい面もあった。
Dialogflowに至ってはGoogle Homeが日本で発売開始された直後にAPI.AIから名称変更するほどの途上っぷりだった。
ただ、前述の通り技術的には新しく習得する要素がそれほど多くないため手軽さはあり、未成熟なプラットフォームにおいてアイデア次第で色々試せる面白さはモバイルアプリの黎明期に似ている状況でもある。そういう意味では2018年はまだまだ盛り上がっていく期待がある。
セキュリティ
Web系エンジニアにとっての最大の話題といえばStrutsの脆弱性と言って良いだろう。ニュースでも取り上げられて大きな話題となった。Web系に限らずソフトウェアエンジニアがここ十年ほどで当たり前のように使うようになったOSSとの関わり方について、今一度考え直す良い機会になったのではないだろうか。
個人的にも時々セキュリティ系の勉強会に参加しているが、参加者多数で定員オーバーになっていることも多く、この1年でその関心が非常に高くなってきていると感じている。
近年ではIoT関連のセキュリティリスクが高まってきており、前述のスマートスピーカーの普及もあって今後もスマートホームなどでIoT関連の製品の普及が加速するとも考えられるため、引き続きこの傾向は続くと思われる。
スマートスピーカーのプラットフォームのようにWeb系エンジニアがそこに関わるケースも増えそうなので対岸の火事では済まされない可能性もある。
インフラ
KubernetesやRancherなどが今年最も強い印象を残してオーケストレーションという言葉がバズワード的に浸透し始めた。
この界隈は2018年も引き続き注目の技術となるのではないだろうか。個人的にはこれらの技術にあまり触れられていないため2018年はもう少し注目して追いかけたいと感じている。
また、少し論点がずれるがインフラを管理しないという点で、サーバレスアーキテクチャも盛り上がりを感じた1年だった。元々その定義が分かりにくい領域ではあるが、Webサービスだけではなくモバイルアプリやスマートスピーカー、IoTもカバーする分野なので今後も注目されていくと思われる。ただ、個人的にはサーバレスというのはプログラマがコンパイラやアセンブリを意識しなくても開発できるのと同じようにインフラを意識しなくても開発できる手段の1つでしかないとも感じており、最終的にはサーバレスという枠組み自体が次第に無くなっていくのではないかとも思っている。
アジャイル
キーワード自体は2016年からあったものだが、Agile Japan 2017の基調講演で発信されたModern Agileが注目を集めた。
言葉自体はややバズワード的ではあるが、この1年のアジャイル界隈から発信された、Manegement 3.0、心理的安全性、モブプロなどの要素を見る限りその概念は本質を捉えているようにも思える。個人的にはモチベーションの可視化手段としてムービングモチベーターズがチーム内に定着できた点でも収穫があった。
おわりに
以上、独断と偏見で2017年をまとめてみた。最後に2018年に向けて何か書こうかと考えていたけど長くなったので来年のことは来年書くことにして今年は終わりたいと思います。それではみなさま良いお年を。
【読書メモ】自分の小さな「箱」から脱出する方法
- 作者: アービンジャーインスティチュート,金森重樹,冨永星
- 出版社/メーカー: 大和書房
- 発売日: 2006/10/19
- メディア: 単行本（ソフトカバー）
- 購入: 156人 クリック: 3,495回
- この商品を含むブログ (418件) を見る
この本の実践編については以前まとめているが、今回は改めて本編をおさらいしてまとめてみた。大筋は前回まとめているので今回はいくつかの重要なキーワードとビジネス面への影響についての解説箇所をピックアップしたい。
自己欺瞞
本書で表現している「箱」に入るとは、自己欺瞞のことである。自己欺瞞の意味は以下の通り。
自分で自分の心をあざむくこと。 自分の良心や本心に反しているのを知りながら、それを自分に対して無理に正当化すること。 自欺(じき)。
自己欺瞞に陥るとそれ以前に持っていた目的に集中できなくなり、やがて自己正当化のために他人を攻撃したり当初の目的とは違う行動を起こしてしまう。
自己正当化
- 他人の欠点を大ゲサにあげつらう。
- 自分の長所を過大に評価する。
- 自己欺瞞を正当化する。ものの価値を過大に評価する
- 相手に非があると考える。
自己欺瞞に陥ると相手に非があると考え始める。相手を非難するためには相手に非がなければならないため、相手の欠点ばかりに目を向けるようになる。また、自分を正当化するためには自分には非がないことを示さなければならないため、自分の長所を過大評価してしまう。
自分への裏切り
- 自分が他の人のためにすべきだと感じたことに背く行動を自分への裏切りと呼ぶ。
- いったん自分の感情に背くと、周りの世界を、自分への裏切りを正当化する視点から見るようになる。
- 周りの世界を自分を正当化する視点から見るようになると、現実を見る目がゆがめられる。
- したがって、人は自分の感情に背いたときに、箱に入る。
- ときが経つにつれ、いくつかの箱を自分の性格と見なすようになり、それを持ち歩くようになる。
- 自分が箱の中にいることによって、他の人たちをも箱の中に入れてしまう。
- 箱の中にいると、互いに相手を手ひどく扱い、互いに自分を正当化する。共謀して、互いに箱の中にいる口実を与えあう。
本心に反して自己正当化する時、自分への裏切りが起こり、自己欺瞞に陥る。自分への裏切りが起きた時から人は箱に入るのである。他人のためにすべきと考えながら、自分への裏切りによってそれをしなくなる。
ビジネスリーダーが箱に入るとどうなるか
- 業績に集中できなくなる
- 周りの人を箱に入れてしまう
- 業績を上げるために最善を尽くそうと考えながらその反対の行動をしてしまう
p. 244 より引用
多くの人は最初に仕事に取り組もうとしていた時には会社の業績を上げるために最善を尽くそうと考えている。しかし、例えば仕事で自分は一生懸命やったのに上司や周りに認められなかったと思って自己欺瞞に陥ってしまうと、自己正当化のために同僚に対して攻撃的になったり怠け者だと卑下してしまう。一方で自分に対しては充分よくやっている勤勉な人間なので間違っている事など無いと考えてさらに深い箱に閉じこもってしまう。このような本来の目的に反する結果は全て自分への裏切りによって自己欺瞞に陥った時に始まるのである。
会社において影響力のあるリーダーが箱に入ってしまうと、その影響は周囲の社員にも及び、会社の業績に致命的な原因になりかねないのである。では箱に入らないためにはどうしたら良いのか？それについての明確な答えはない。いくつかのヒントは実践編のほうに書いてあるので参考にすると良さそう。
【勉強会メモ】CA.kt #5 @大阪
- 日時：2017/12/18(月) 19:15 〜 21:45
- 場所：㈱サイバーエージェント大阪支社
CA.ktはCyberAgentさんが主催するKotlinの勉強会で、今回が初の大阪開催でした。テーマは11月にサンフランシスコで開催された Kotlin Conf の内容を実際に現地で参加してきた方々にフィードバックしていただくという内容でした。当日の様子は動画やブログに公開されていて把握することができますが、実際に参加してきた方々から直接話を聞くことで現地の盛り上がりを感じることができました。個人的にはSpring BootでのサーバサイドKotlinはそろそろ手を出してみても良いかもと（何の根拠もないですが）思い始めました。
Kotlin ConfではJetBrainの人が最後に "Have a Nice Kotlin!" と言ってプレゼンを終えていたそうだ。今回の登壇者の方々もこれを合言葉のように使ってたところにKotlin愛を感じた。その雰囲気を感じていただければと思います。
Have a Nice Kotlin!
Kotlin Conf Overview + Keynote + and more
藤原 聖さん
Kotlin Conf
- 主催：JetBrains
- 場所：サンフランシスコ沿岸部
Kotlin Conf Session
Keynote
- Kotlin for Multiplatform
- Androidだけでなく、iOS、Browser、サーバもKotlinで書ける
- Kotlin 1.2RC（マルチプラットフォーム対応）
- Kotlin/Native iOS Support
- Android Kotlin Guides
詳細はブログ参照
Sessions
- 44 sessions
- 3 tracks
- TBA sessions:kotlin/Nativeの話
- セッション用アプリあり
主なセッションの内容
- 言語について
- Tool
- マルチプラットフォーム
- Spring Boot（Kotlinのサーバサイド）
- コルーチン
Kotlin Conf Apps
Top 5 Rated Talks
- Kotlin Puzzlers by Anton Keks
- Kotlin 言語仕様を使ったクイズ⇒詳細は3番目のプレゼンで紹介
- The Road to Kotlintown by Huyen Tue Dao and Christina Lee
- Tow Stones, One Bird: Implementation Tradeoffs by Christina Lee
- 二石一鳥（二律背反なものは議論して使おう）
- @RunChristinaRun
- PintarestのAndroidエンジニア
- Google I/O 17にも呼ばれていた
- Party Keynote by Michael Carducci
- マジック…
- How to Kontribute by Yoshinori Isogai
Pickup Sessions
- Kotlin Types
- Bootiful Kotlin
- React app in Kotlin
- Testing Kotlin at Scale
Kotlin Types
- Kotlin In Action の6章の内容からの抜粋 ※詳細は2番めのプレゼン
- 著者の1人 @sveta_isakova
- 作者: Dmitry Jemerov,Svetlana Isakova,長澤太郎,藤原聖,山本純平,yy_yank
- 出版社/メーカー: マイナビ出版
- 発売日: 2017/10/31
- メディア: 単行本（ソフトカバー）
- この商品を含むブログを見る
Kotlin Conf 報告会 - Kotlin Types
荒谷 光さん
@sveta_isakova のセッションの紹介
Kotlin types, Java types
kotlin.String ⇒ java.lang.String
- Javaの場合
"one.tow.".replaceAll(".", "*")⇒ "*******"
- Kotlinの場合
- "one.tow.".replace(".", "") ⇒ "onetow*"
Any, Unit, Nothing, void
- Anyは全てのクラスのスーパークラス
- Nothing ≠Unit void
- Unit ＝ void ：意味のない型を返す
- Nothing：インスタンスがなくて存在しない, 値は返さない
- Nthing?⇒ある
Collections
kotlin.MutableList→kotlin.List- Read-only ≠ immutable
- JavaのArrayListの親クラスが kotlin.MutableList
,kotlin.List`
Kotlin Puzzlers
仙波 拓さん
- Programing Puzzlers
- 小さいコードで奇妙な動きをするプログラム集
紹介されたコードを見たほうが分かりやすいと思うので転載。実行結果がa)〜d)のどれになるか考えて見て下さい。答えはリンク先。
Q1: https://github.com/angryziber/kotlin-puzzlers/tree/master/src/bugs/inclusiveRange
package bugs.inclusiveRange // inspired by AndroidPub val i = 10.5 when (i) { in 1..10 -> println("in") !in 1..10 -> println("!in") else -> println("else") } // What will it print? // a) in // b) !in // c) else // d) will not compile
⇒when の中がIntのためIntで比較される
Q2: https://github.com/angryziber/kotlin-puzzlers/tree/master/src/properties/override
package properties.override open class Named { open var name: String? = null get() = field ?: "<unnamed>" } class Person: Named() { override var name: String? = null get() = super.name set(value) { field = "Mr $value" } } val person = Person() person.name = "Anton" println(person.name) // What will it print? // a) Anton // b) Mr Anton // c) <unnamed> // d) null
⇒field は別モノ
Q3: https://github.com/angryziber/kotlin-puzzlers/tree/master/src/syntax/weirdChaining
package syntax.weirdChaining // by Kevin Most @kevinmost fun printNumberSign(num: Int) { if (num < 0) { "negative" } else if (num > 0) { "positive" } else { "zero" }.let { println(it) } } printNumberSign(-2) printNumberSign(0) printNumberSign(2) // What will it print? // a) negative; zero; positive // b) negative; zero // c) negative; positive // d) zero; positive
⇒ ifは式であり else if は else と if式
Q4: https://github.com/angryziber/kotlin-puzzlers/tree/master/src/nullability/theOrder
package nullability.theOrder // inspired by Adam Arold @addamsson class Order { private val c: String init { the() c = "" } private fun the() { println(c.length) } } Order() // What will it print? // a) 0 // b) null // c) will not compile // d) none of the above
⇒ c はイニシャライズ前に呼ばれるためNPE
LT
懇親会中のLTでメモを取っていなかったのでうろ覚えです。
Koreferenceの話
AndroidのSharedPreference用のライブラリの話
Reified の話
たぶんこのへんの話だったように思うけどうろ覚え。
Inline Functions and Reified Type Parameters - Kotlin Programming Language
KtorでサーバサイドKotlinの話
RancherとOpenFaaSでサーバレスKotlinの話
【勉強会メモ】第7回 関西DB勉強会
- 日時：2017/12/16(土) 13:00 〜 19:00
- 場所：Insight Technology 大阪支店
今回もDBにまつわる様々なテーマが偏り無く扱われて密度の濃い勉強会だった。SSDの話は正直なところ専門的すぎて難しかったがDBの勉強会でもこのようなテーマが扱われるのは面白いと感じた。トレンドとしては各社とも分散データベースと列指向型データベースの技術の浸透が進んできている印象。GraphデータベースはNeo4jのような専用のソフトウェアがある中で既存のDBMSがどう扱うかはまだ試行錯誤中と感じた。いずれにしてもデータベースと言いつつカバーする範囲はどんどん広くなるなぁという印象。
- 新規ユーザ獲得のためのPostgreSQLエンジニアが知るべきMySQLのこと
- SQL Server2017 ワンポイント紹介
- DB2->Db2、バージョンも11と黙々と進化するDb2のテクノロジーアップデートと事例
- MariaDBカラムナーベンチマークしちゃいましょ
- 今すぐ、触れて理解するSAP HANA
- SSDの虚実
- MySQLの公式GUIツール MySQL Workbench
新規ユーザ獲得のためのPostgreSQLエンジニアが知るべきMySQLのこと
Ionic Japan User Group 代表 榊原 昌彦さん
遅れて参加したため途中からのメモになります。
NoSQLの弱点
Webデザイン
- ペルソナ・UX⇒仮説⇒UIデザイン⇒検証⇒戻る
- 検証を繰り返すUIデザインが重要
PostreSQLを広げる
アプリレイヤーからフロントエンドまでデータベースエンジニアもアプリレイヤーに興味を持とう
- TwitterやLINEですらアプリレイヤーはどんどん変化している
- DB側からもアプリレイヤーを知っていて提案できる方がよい
SQL Server2017 ワンポイント紹介
SQLWorld おださん（@shinsukeoda)
www.slideshare.net
Graph DB
- ノード
- エッジ
- 2つのノードをつなぐ
- プロパティ
- ノードとエッジの属性
Node Table
create tableにas Nodeを付ける
Edge Tabe
create tableにas Edgeを付ける
データの追加
- Node Tableのデータの追加は普通に
insert文 - Edge Tableのデータの追加はNodeとNodeをつなぐ特殊な方法で
insert
データの検索は match
where文にmatchを書く- 例）
where match (誰が - (好き) -> 誰を)
参考
Graph Database in SQL Server – Microsoft Japan Data Platform Tech Sales Team Blog
- 通常のSQLで書くと複雑でバグる
- Graphで書くほうがシンプルになる
制限事項
- テンポラリテーブルで使えない
- テーブル変数でも使えない
- メモリ最適化テーブルにできない
- EdgeテーブルのUPDATEで
$from_id,$to_idを更新できない - クロスデータベースクエリは未サポート
まとめ
- 複雑なつながりをシンプルなクエリで表現できる
- Neo4jの代わりになるレベルではない
- Graphでできることは通常のクエリでもできる
参考
DB2->Db2、バージョンも11と黙々と進化するDb2のテクノロジーアップデートと事例
野間愛一郎さん
DB2の3K
- 聞いたことが無い
- 聞きたくても人がいない
- きつい（中のひと）
Db2ファミリー
Hybrid Data Management
Db2の特徴
シェアードナッシングアーキテクチャ
- データが増えてくるとパーティションの考え方がまた必要になってくるのではないか
BLUアクセラレーション
- 列指向型の実装
- Db2 BLUって何？
1TB未満でどっちもやりたい人向け
- コストがかからずリソースが限られた中で使い勝手が良いかも
圧縮機能
- デフォルトは辞書ベース
- 辞書ベースに加えてページ単位で圧縮するなどのダブルで圧縮する方法もある
- 圧縮すると遅くなる？⇒I/Oが減って早くなることもある
Db2 pureScale
フェデレーション
- DBLink
- いろんなデータソースに繋がる
Common SQL Engine
Db2 11.1
Db2を試す
Docker Storeにもある
MariaDBカラムナーベンチマークしちゃいましょ
japan mariadb user group代表 カワノさん
www.slideshare.net
CloumnStoreとは
- チューニングレスで高い検索パフォーマンスを実現するDWH特化型データベース
- 分析/集計処理に最適なカラムストアエンジン
- MySQLとの互換性
- 専用HW不要
- リニアにスケールアウト
対称型マルチプロセッシング（SMP）
- 分散処理…マルチコア対応
Extent Map
Transaction
InnoDB vs ColumnStore検証
www.slideshare.net
Scale Factor 10ぐらいで作る（1だとExtent Mapが作られない）
データサイズ
- InnoDBと比較して51%減
- 大幅なDisk I/O削減が期待できる
ベンチマーク結果
- 最大レスポンス
- InnoDB⇒234.23sec
- ColummnStore⇒12.48sec
ColumnStoreのようが遅くなっているものもそれなりにある
実行計画の調査
- PBE=0
- エクステントマップのパフォーマンスが発揮できていない
まとめ
- ColumnStoreはInnnoDBと比較して7倍高速
- 並列処理の恩恵のみ
- TPC-Hだとエクステントマップの恩恵は受けられない
SF100~大きなデータサイズでの検証
- 設定書き換えが必要
Flight Data Analysis : MariaDB InnoDB vs ColumnStore
今すぐ、触れて理解するSAP HANA
SAPジャパン 新久保 浩二さん
SAP HANA express edition
SAP HANA インメモリープラットフォーム
特徴
- コンテナ型、クラウド型
hdbsql…SQLコマンド実行- Eclipse Plugin
デフォルトはカラム型
create cloumn_table…column Storecreate table…row store
参考情報
[図解]インメモリーコンピューティングSAP HANAのテクノロジー解説
- トランザクションの最小単位は行レベルロック
- データ圧縮…ディクショナリー圧縮（デフォルト）
- トランザクション分離レベル…
READ COMMITED,REPEATABLE READ,SERIALIZABLE - スマートデータアクセス…DBリンク、ODBCでアクセス
SSDの虚実
インサイトテクノロジー 浅野さん
SSD vs HDD
Flash Memory Summit
今年の話題
- 3D-Xpoint
- NVMe/PCIe Storage
- NVMe Over Fabrics
- 3D NAND
SSDに関する素朴な質問
◎Enterprise向けSSDのほうが良いか？
2013年ごろコンシューマ用のベンチマークでエンタープライズ向けを評価していた
- 2017年やめようと訴える
◎バックアップに使うのはどうか
◎TLCはどうか
- TLC or QLCで充分
製品寿命
エンタープライズSSDの場合、最小データ保持期間（40℃, 電源Off, 3ヶ月）は同じ
◎製品寿命を気にしたほうがいいか
◎NVMe試用のSSDはどうか
◎NVDIMM
容量の問題
- 2018年にはDAXモード対応
NVDIMMはBig dealを生むか？
NVDIMM-NはNo⇒128GDRAM⇒32G?
- NVDIMM-FもNo⇒
- NVDIMM-P⇒本命？
- 本命はIntel persistant Memorry？
両者ともDRAMとの共存が前提
SSDの問題
Intel Ruler⇒2.5インチのまま長くする
MySQLの公式GUIツール MySQL Workbench
日本オラクル株式会社 MySQL GBU 山﨑 由章さん／ @yyamasaki1
www.slideshare.net
MySQL Workbenchでできること
- MySQL Serverの管理
- 開発支援
- DB設計支援
- データ移行
商用版とOSS版がある
MySQLサーバ管理
- MySQLサーバーのリソース状態がリアルタイムで見れる
- コネクション一覧
- 実行中のSQLの確認
- ユーザーと権限の管理
- システム変数の管理
- データエクスポート（mysqldump）
- サーバログの管理
- 設定ファイルの管理（SSHでサーバへの接続必須）
- パフォーマンス状況の確認（Dashboard、レポート）
- Performance Schemaの設定（5.5以前はスキーマを作る必要あり）
- 監査ログの管理（商用版のみ）
- Firewallルール設定と状態確認（商用版のみ）
- バックアップ・リストア（商用版のみ）
- スキーマ内の各オブジェクトの確認
- SQL実行と結果の確認
- クエリのStatistics, Explain確認
- スニペットの管理・実行
- ER図モデリング
- DBDoc…ドキュメント化（商用版のみ）
- マイグレーション（Oracleは非サポート）
- 5.5時代からSSDを意識した設定が可能
MySQL8.0
- オプティマイザ・コストモデル
- データがディスクにあるのかメモリにあるのかに応じて判断する機能
【勉強会メモ】フロントエンジニア♡最前線Night
- 日時：017/12/15(金) 19:00 〜 21:30
- 場所：さくらインターネット大阪本社
フロントエンドに関する、UI設計、AMPとPWA、自社プロダクトの改善の話の3本立てだった。
せっかく遅刻せず参加したのに1本目のメモの途中でVimが異常終了してしまったので1本目は思い出してまとめた内容になります。あと、RoRはあまり詳しくないので若干省略気味。詳細は資料をご参照ください。
オブジェクト指向UIで立ち向かう
株式会社Goodpatch DesignDiv フロントエンドエンジニア 大角 将輝氏
2種類のUI
オブジェクトベースのUI設計
- オブジェクト⇒ユーザーの関心事
- オブジェクトは変わりにくい（アクションは変わりやすい）
- オブジェクトが持つ属性を定義する
- 属性に対する共通のアクションを定義する
- データと表示要素が自然に対応する⇒フロントエンドとバックエンドの関係がシンプルになる
- オブジェクトベースで設計すると機能の重複が少ない
あとで色々ググってみると以下の情報が参考になりそう。プレゼン資料の中でもこのサイトの内容が一部紹介されていた。
AMPとPWAについて
クックビズ株式会社 フロントエンドエンジニア 高田 洋祐氏
AMPの特徴
※会場アンケート：APMを自社で導入⇒1/4ぐらい
AMPの導入状況
- ページ数：60億
- ドメイン数2500万
3つのコアとなる早くなる要素
- AMP HTML…独自記法
- AMP Component…豊富なコンポーネント
- AMPはJSが使えない
- AMP Example
<amp-list><amp-bind><amp-google-vrview-image>など
- カスタマイズ機能と柔軟性
AMPを使えばGoogleが持っているサーバにキャッシュしてくれる
クックビズのAMPへの取り組み
- LPのAMP版を作成してコンテストで優勝
- 通常のサイトと全く同じ
- ページ表示：60%
- CVR：40%
釣り目的のAMPページを駆逐
- ページの冒頭だけAMPで
続きを見るで通常サイト- 2018年2月からはAMPページとして扱われない
フロントエンドエンジニアは忙しい
PWA
初回アクセスはAMP、2回目以降のアクセスはPWAという設計⇒PWAMP
このあたりは個人的に以前Qiitaにまとめた内容と同じ。
音声検索
※会場アンケート
- 音声検索を使っている…少ない
- スマートスピーカー…たくさん
音声検索
- 2020年までに50%
- 音声検索により検索のクエリ数は増える
強調スニペット
コンテンツの中身・意味を明確にする
- 適切なタグを使用
- きれいなアウトライン
- 構造化
成長中のプロダクトでフロントエンド環境改善を進める話
スピーカー：freee株式会社 アプリケーションエンジニア 加藤 慧氏
2015年ごろからのSprocketsまわりの改善について
Sprockets
課題
- concat≠依存性の定義
- requireディレクティブをつかったconcat⇒読み込む順番を人間の努力でカバーしないといけない
- Gemライブラリのロード⇒Gem化されたものしか読み込めない
⇒Sprocektsディレクティブの排除
成果
- Sprocketsディレクトリを部分的にCommonJSに書き換えてBabelでトランスパイル
- Gemではなくnpmを利用
- ESLint利用
- flowによる型チェック導入
残る課題
- Sprocketsディレクトリの糖衣構文としてのCommonJS導入にとどまり
- gulpによるビルドタスクの複雑性
総括
- 課題は解決できたが新たに課題が生じた
- ツールは刷新できたが依存管理アーキテクチャのリファクタが伴わなかった
革命の火ふたたび
- Sprocketsやめてwebpackに⇒変更が膨大すぎて失敗
- 暴力革命から平和革命へ
- レビュー可能な変更
- 小さなコンテキストで大きな横断的変更を作る
- 物量が多いのは避けられない
正しそうな変更
- 静的解析を仕掛ける
- 機械的・法則的に変更
- 人為ミスが入らないようにする
再現可能な変更
- そうこうしている間にもプロダクトは成長を続ける
- conflictする前提でもう一度すぐに変更を再現できるようにする
残る課題
- Sprocketsのディレクティブだけ残る
GemのCommonJS化
- 枯れているライブラリなら自プロダクトに取り込んで改変する割り切りが可能
残る課題
- gulpの複雑さ
ビルドタスク分解
Webpacker
- Sprocketsディレクティブのようなロックインリスクが少ない
- フロントエンドとサーバの歩み寄りのラインが重要
次なる課題
