Kotlin Reified Type Parametersで汎用的なJsonTransformerを実装する

こんにちは。ASKULのほかほかごはんです。 今回はKotlinのユニークな機能、Reified Type Parametersの話とLOHACOでの活用事例の紹介をします。

JVM のジェネリクスについて

Javaではおなじみですが、JVMにおけるジェネリクスは型消去 (type erasure) で実装されており ジェネリッククラスの型引数は実行時には消滅してしまいます。これはKotlinでも同様です。

そのため、ジェネリック関数を呼び出すときにその関数の呼び出しについていた型引数を特定することはできません。

lazyだけどlazyじゃない！速いページで快適なお買い物体験を

こんにちは。ASKULの はんだ と申します。

普段はLOHACOというECサービスのフロントエンドの開発をしています。

先日、LOHACOのスマホサイトトップ画面（以下、SPトップと呼びます）をリニューアルしました！！

お気づきになられた方いらっしゃいますでしょうか？ 具体的に何が変わったのか、どう良くなったのかをご紹介していきます。

D3.js を使ってお客様の声を可視化する

はじめまして。UX デザインの山崎と申します。

先日、UX デザインチームの勉強会を新宿にある TSUTAYA BOOK APARTMENT さんで実施してきました。

勉強会のテーマは、「メンバー各自業務関係有無に関わらず興味のあることについて勉強」という内容。

会場の様子を少しご紹介しようと思います。

↓ 本がたくさんあるおしゃれ空間です。気に入った本は購入できるそうです。

↓ オプションですが女性専用エリアもあります。（ありがたく使用させていただきました）
ドリンクも飲み放題！

↓ WEB デザイン関連の書籍もありました。CO WORKING スペースは集中できそうですね。
（男女共用エリアは夕方以降、カップルで賑わうそうです）

本を読みながらのんびりしたい気持ちを抑えつつ、各自勉強に取り掛かります。

せっかくなので業務ではふれる機会のないことを勉強したいと思い、D3.js を使って何かを作ってみよう！と思いました。

IntelliJ IDEAでインテリジェントなアイディアを

こんにちは。アスクルの こたにん (@Kotanin0) と申します。

LOHACO のフロントエンド開発・エンジニア採用・社内環境整備などを担当しております。

今回は、弊社エンジニアが利用している統合開発環境 IntelliJ IDEA のご紹介とともに

先日 6/29(金) に、株式会社サムライズム 代表の 山本ユースケ様（@yusuke）を講師にお招きし開催した

IntelliJ IDEA ハンズオンセミナーのレポートをお送りいたします。

Google I/O 2018に参加してきました

こんにちは。 こんにちは。

アプリエンジニアの元と登場2回目のなかむらです。

普段はASKULでLOHACOというECサービスを開発しています。

私たちは先日マウンテンビューで開催されたGoogle I/O 2018に参加してきました。

今回はその会場での様子をレポートしたいと思います。

季節のAMPテンプレート

こんにちは。UXデザインの土橋です。

すっかり暖かくなり行楽シーズンになってきました。
お子様のいらっしゃる方は特に外出する機会も増えていると思います。

そんな中旅行やピクニックの計画を立てながらお弁当箱や水筒、レジャーシートなど買い揃える際
ついついAMP対応したHTMLテンプレートを用意し忘れてしまう..という方も多いのではないでしょうか。

そんな方のために今回はAMP規格に準拠したHTMLテンプレートの生成タスクをgulpで構築してみようと思います。

AMPとは

AMP（Accelerated Mobile Pages）はモバイルサイトのUX向上を目的にGoogleが主導で開発・推進しているオープンソースのプロジェクトでありフレームワークの名称でもあります。
2016年2月にGoogle、2017年11月にYahoo!のモバイル検索アルゴリズムに組み込まれたことで浸透・注目され始めたのですが、ASKULでも表示速度の鈍重さが課題として挙がる事も多くなりUX改善の打開案として無視できなくなってきています。

AMP対応ページは、サーバーリクエスト数の削減や検索結果画面におけるファインダビリティ向上などwebコンテンツのボトルネックを解消するため独自のルールに準拠した実装が求められますが、厳密なルールが存在するということはフローを順序立てれば実装手順も明瞭に整理できるということです。
そこで、実装手順を整理・フロー化しAMPテンプレートを生成するタスクをつくってみます。

実装の流れ

Node.js、gulpと併せ各モジュールとファイルを用意（インストール）し順にタスクを回します。
流れとしてはjsonから基本構成、scssからスタイル情報を吸上げejsに流し込んで生成するというものになります。

取り入れるルール

• スタイルは特定箇所にインラインで挿入
• AMP js（独自コンポーネント）の利用
• 検索結果スニペット用JSON-LDによる構造化データの記載
• 独自仕様のマークアップ

ES5なJavaScriptをESLintとPrettierで改善する

こんにちは。ASKULの なかむら と申します。

普段はLOHACOのフロントエンド寄りな開発を担当しています。

突然ですがJavaScriptをES201xで書いてますか？

最近のJavaScriptの技術記事ではES201x＆BabelかTypeScript/Flow等のAltJSを使うのが当然になっている印象を受けます。

・・・ですが、古くからあるサービスではなかなか移行に踏み切れなかったりもする訳です。

最新フロントエンド技術を導入したいなぁと思いつつ、後回しにしてES5で開発を続けている現場もまだまだ世の中多いのではないかと思います。

私の担当するLOHACOでもES5とjQueryで書かれた古いJavaScriptのコードが至るところに存在しており、ES201x化/AltJSの導入には至っていません。

ツールなら導入できる

とはいえ近年進化し続けるJavaScript開発ツールの恩恵にあやからないのは勿体ないものです。

コード本体に手をいれるのは難しくても、ツールの導入で開発を便利にしていくことは可能です。

特にLintツールやコードフォーマッタの導入は

• 余計なレビューの工数を減らせる
• コードの品質を即向上させることができる

ので現場への導入も周りの賛同を得やすいのではないでしょうか。

以下、LOHACOでどんな取り組みをしてきたのかご紹介します。