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による構造化データの記載
独自仕様のマークアップ

2018-05-02

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

Node.js JavaScript

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

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

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

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

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

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

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

ツールなら導入できる

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

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

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

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

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

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

2018-04-20

アスクルエンジニアリングブログを開設しました！

organization

はじまり

はじめまして。アスクルのさとうだいすけです。

アスクルの技術を世の中に発信していこう！
アスクルのエンジニア文化を創っていこう！
ということでアスクルエンジニアリングブログを開設いたしました！！

アスクルがなぜ今更？と思う方もいるかも知れません。
実はアスクルはピボットの時期を迎えているのです。

テックカンパニーを目指す

アスクルは2年ほど前から「テクノロジーファースト」を掲げています。そして、目指すテックカンパニーへの道のりを駆け抜けようとしています。

まず一歩目！
アスクルエンジニアリングブログを開設したという訳です。

アスクルのエンジニアリング組織のスタートについては、ECのミカタさんにも記事を書かせていただきました。

ecnomikata.com

アスクルはWEBだけではなく、倉庫や配送といった物流までもテクノロジーで進化させようとアクションしています。
フルフィルメント ✕ テクノロジーという、他では見られない組み合わせで、おもしろいブログ、エンジニアリング組織を目指していきます！