GMOペパボ Advent Calendar 2017の11日分のエントリーになります。 皆さんはPWA(Progressive Web Apps)をご存知でしょうか。 分かりやすさを優先して言うならば、新しい技術によってネイティブアプリのような動作が可能になったWebアプリケーションのことで、オフラインで動作したりプッシュ通知が送れるWebアプリケーションを実現することができます。 （詳細はGoogle Developersや私の発表スライドをご参照ください） さて今回はPWA作成にあたってとても便利なライブラリであるworkbox-sw（以下、workbox）の紹介記事となります。 workboxとは簡単な記述で最適なServiceWorkerのコードを生成してくれるライブラリです。 PWA自体どうやらまだ認知度が低く、それを作るためのライブラリ関連もまた情報不足だったため今回の記事を

ServiceWorkerや各種APIの基本的なユースケースは周知されてきたPWAですが、それらを組み合わせて具体的にそんな実装パターンがあるかについては未だに不透明に感じられます。 今回はLaravel/Vue.jsでPWAのサンプルアプリを作った時の知見を元に、どんなことを考え、どんな実装パターンにしたかを語りました。

...（ピリオド３つ） と書きます。 配列ライクなオブジェクト（正確には for of で展開できるオブジェクト）を個々の値に展開することができます。 スプレッド構文 - MDN web docs 個々の値に展開する const data = [15, -3, 78, 1]; console.log(Math.max(...data)); // 78 // もう以下のように書く必要はありません console.log(Math.max.apply(null, data));

※gulp-ejsでのビルドを想定しています。 EJSでできること 数や文字列や配列やオブジェクトの宣言と処理(JavaScriptと同じ) HTMLへの値の展開 ループと条件分岐 外部ファイルの読み込みとパラメータの引き渡し <% %>の種類 <% %> このタグの内側はJavaScriptワールドになる。HTMLとしては出力されない

サーバーサイドのレンダリング（SSR）を使用して、数分の1秒以内にページが高速に表示されるWordPressのフロントエンドを構築するテクニックを紹介します。 バックエンドのキャッシュと組み合わせることで、非常に高速になり、しかも安価にWordPressサイトを構築できます。 Zero-latency WordPress Front-end -GitHub 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様のライセンスを元に翻訳しています。 デモページ サーバーサイドのレンダリング（SSR） バックエンドのサービス 非キャッシュページのアクセス キャッシュページのアクセス キャッシュのパージ 始めてみよう Nginxの設定 バックエンドのJavaScript フロントエンドのJavaScript Cordova 終わりに デモページ サンプルのコードで何ができるのか

ページのスクロールの滑らかさが損なわれると UX の低下に繋がる。 スクロールイベントの最適化スクロールイベントは発生頻度が多いため、実装内容によっては Scroll Jank を引き起こす可能性がある。 イベント内でpreventDefault()が呼ばれている可能性がある（{passive: false}）サイズや位置を取得する処理がある（対象 DOM の位置を取得するため Forced Synchronous Layout が発生する可能性がある） 参考 - What forces layout / reflowこれらの対策には、大量の処理イベントを間引く throttle が一般的である。 また、処理内でpreventDefault() を呼ばないのであれば、Passive Event Listenerを利用することも可能である。 60fps と端末のリフレッシュ レート今日の端末

[レベル: 中〜上級] GoogleのJohn Mueller（ジョン・ミューラー）氏が、各種のリダイレクトに対する検索エンジン（とGoogle）の処理方法について、詳細にまとめた説明をGoogle+に投稿しました。 リダイレクトの違いがいまいちわかっていないひとにとってはもちろんのこと、リダイレクトについて熟知しているひとにとっても、リダイレクトについての理解を深めることができるとても役立つ解説です。 日本語に訳したので参考にしてください（可能な限りこなれた日本語に訳したので、原文にはない言葉を使っている部分もあります）。 リダイレクト全般について、まず、ミューラー氏は次のように簡単に定義します。 一般的に、リダイレクトは2つのページ間で行われる。ここでは、それらのページをRとSと呼ぶことにする。 ものすごく単純化して言うと、「ページRを呼び出したときはページSにコンテンツがある」という

以前にYouTube Player APIの基本的な使い方をまとめたので、今回は実際に使う時に便利そうなtipsをいくつかまとめてみました。 以前の記事はこちらです。 YouTube Player APIを使って色々やってみる ■目次 動画のループ再生 動画の自動再生 タイトルやコントロールバーを出さないようにする 動画再生の開始位置や終了位置を設定する 動画の画質を変更する 初期表示をサムネイルにする 背景動画にする 1. 動画のループ再生 動画のループ再生を設定する方法は2種類あります。 1-1. パラメータで設定する パラメータで設定する場合、loopとplaylistを使用します。 ■HTML <div id="sample"></div> ■JavaScript // IFrame Player API の読み込み var tag = document.createElement

しがないラジオのgamiです。 JavaScript界隈では有名な、オライリーのサイ本こと『JavaScript 第6版』という鈍器、もとい書籍を読みました。 JavaScript 第6版 作者: David Flanagan,村上列出版社/メーカー: オライリージャパン発売日: 2012/08/10メディア: 大型本購入: 12人 クリック: 252回この商品を含むブログ (18件) を見る 2012年に発行された、約800ページもある、かなり内容の多い本です。 僕は本を読むときにesaに要約しながら読み進めるのですが、サイ本のまとめesaは全体で「約1万行」という修行みたいな分量になっていました。 サイ本、3年越しくらいでやっと読み終わったあああああ！！！esaにまとめながら読んでたけど、コードも含めて約23万字、1万行の分量になっててesaが悲鳴あげてたw今度感想ブログ書く。多くの人

この記事は J2complexed Advent Calendar 2016 の14日目の記事です。 みなさんはパグと仲良くできていますか？ パグはかわいいですね。なによりもマークアップの効率が良くなります！ Pugは以前までJadeと名乗っていましたが、Pugの方がいいですね。いいセンスをしてます。 詳しくは公式を見ていただいたほうが、いいと思います！ Getting Started - Pug Pugの簡単な紹介 PugはJST (JavaScript Templates)って言われてるJavaScriptで動くテンプレートエンジンです。 Expressでも動かすことができます。（動かしたことはありませんが） Express でのテンプレート・エンジンの使用 Githubに載っている例を見てみると、書き方がわかると思います。 doctype html html(lang="en") h

最近の Web サービスでよくある「下までスクロールしたら次のコンテンツを読み込む(オートページャライズ)」を実装するためには、当然ですが「下までスクロールしたかどうか」を検出する必要があります。 これが簡単そうに見えて意外と面倒臭く、自分も毎回思い出すのに時間がかかってしまいます。 御託はいいから結論を先に言え これでよさそう function getScrollBottom() { var body = window.document.body; var html = window.document.documentElement; var scrollTop = body.scrollTop || html.scrollTop; return html.scrollHeight - html.clientHeight - scrollTop; } 以下、解説です どんな値が取得できる

共著者として参加していた書籍『React，Angular，Vue.js，React Nativeを使って学ぶ はじめてのフロントエンド開発』が、2018/5/9に技術評論社さまより発売となりました。 React、Angular、Vue.js、React Nativeを使って学ぶ はじめてのフロントエンド開発 作者: 原一浩,taisa,小松大輔,永井孝,池内孝啓,新井正貴,橋本安司,日野洋一郎出版社/メーカー: 技術評論社発売日: 2018/05/09メディア: 単行本（ソフトカバー）この商品を含むブログを見る どんな本か React、Angular、Vue.js、React Nativeそれぞれが、同じサーバのAPIを参照し、同様の機能を持ったアプリケーションとして作成します。React Nativeは、ネイティブアプリを開発するためのフレームワークなため、SPA（Single-page

はじめに VueをつかってWebアプリケーションを実装するとき、Componentをどう切るかって誰でも一度は悩みますよね(悩みますよね？)。とりあえず思いつくままに切ってみたり、繰り返し使いそうなもので切ってみたり、CSSのスコープで切ってみたり…。いろいろな切り口があると思います。 この「いろいろな切り口」でコンポーネントを切ることができる点が、コンポーネント設計を難しくしている所以だと考えています。 そこで今回は、どのような切り口・観点でコンポーネントを切ればよいのか、そのときに気をつけるべきことは何か、といったComponentの設計方法についてまとめてみます。 すべての実用ケースを想定できているわけではないと思いますが、大小いくつかのWebアプリを開発する際に利用してみて今のところいい感じに運用できている方法です(というか自然と収束して出来上がった考え方という感じです)。 はじめ

Nuxt.jsで自己紹介サイトを作りました。 https://nitta.studio/ 見ていただくと分かる通りアニメーションをしまくったのですが、、 https://t.co/CXj31medDj Nuxt.jsで自己紹介サイト作りました。NetlifyホスティングでPWA対応してます。 いろいろ自分のイカれた略歴など晒しました。宜しくお願いします。 — 新田聡一郎 (@soichiro_nitta) 2018年4月26日 VuexとVue.jsのウォッチャをつかって、 イベントハンドリング ステート変更 ウォッチャで検知 複数のコンポーネントでアニメーション発火🔥 のような書き方をしたら最高だったので、ご紹介です。 アニメーションって、どこにどの処理書けばいいのか困りませんか？ 凝ったものを実装するとめちゃめちゃなコードになりがちですよね... しかーし！Vue.jsのデータ駆動と

Gulp も Webpack も疲れたよ…。 そんな感じなので現在、npm-scriptでフロントエンドの環境構築を進めています。 全体の目次 PostCSS編 HTML編 Javascript編 こんな感じでどんどん書いていければいいと思います。 PostCSSの環境構築 まずは、postcss-cliをインストール 公式ドキュメントは以下 npm - PostCSS CLI github - postcss/postcss-cli

webpack（ウェブパック）とはJSファイルをまとめる高機能なモジュールバンドラー。まとめることでウェブページのHTTPリクエストの数を減らしたり、高度なウェブアプリケーションの開発に役立ちます。 連載ではTypeScriptやBabelなどのES2015+の環境構築、ReactなどのJSライブラリの設定方法を網羅。サンプルファイルで詳しく解説します。 webpackの入門記事は他のサイトにもありますが、対象バージョンが古くて使えなかったりします。検索結果の上位の野良記事を参照にしたら古いバージョンの内容ばかり。解説記事通りにやったのにうまく動かない･･･なんて困った方も多いのではないでしょうか。本記事は常に最新版に対応させているので、安心して読み進めてください。 ※本記事では2023年3月現在のwebpack 5（2020年10月リリース）以上で解説しています。 本記事で解説しているこ

初めに 正直JS界隈のエコシステムは難しいです。わからないことが目白押しです。 今までVue.jsをブラウザ上でなんのエコシステムも使わずに使ってきましたが、 規模が大きくなるとしんどくなるのは明らかなので Vue.jsガイド：大規模アプリケーションの構築を参考にwebpackを使ったりnpmを使って、 それっぽい環境を作って一からコードを書いてみました。 （編注：上記リンクはv1.0当時のものです。v2.0のガイドは単一ファイルコンポーネント、プロダクション環境への配信のヒント、ルーティング、状態管理、単体テスト、サーバサイドレンダリングなどをご覧ください。） 前提 Vue.jsガイド：大規模アプリケーションの構築の指示に従い構築するだけですが、この時点で以下の様な選択肢がある模様です。 プリプロセッサ？の違い Webpack(こっちだけ触ります) Browserify ルーティング オ

はじめに Vue.js でテンプレートを使うのに「単一ファイルコンポーネント」という便利なものがあります。しかし公式ドキュメントを読んでも導入がよくわからなかったので、備忘録としてまとめました。 誤字・脱字・勘違いなどありましたらご指摘ください。 前提条件 Webpack がインストールしてある Babel がインストールしてあり、ES2015設定がしてある ①一番基本的な Vue.js の使い方 Vue.js を CDN から持ってきます。Vue はグローバルなオブジェクトになっているので前置きも不要で呼び出せます。 <script src="https://unpkg.com/vue"></script> <script> new Vue = ({ el: '#hoge', data: { list: [ { name: '山田' }, { name: '田中' }, { name: