Vue.jsでSPAを作ったものの、検索エンジンのクローラーやSNSのOGP取得といった問題で困ったことはありませんか？ サーバーサイドレンダリングを簡単に構築できるNuxt.jsの活用方法を解説します。 ユニバーサル（Isomorphic）JavaScriptはJavaScriptコミュニティで一般的な用語になりました。ユニバーサルJavaScriptとは、クライアントとサーバーの両方で実行でき…

「脱jQuery」をめぐる議論は何年も前からありますが、jQueryの使い勝手のよさは無視できません。ところが、WHATWGのDOM StandardではjQuery風の使いやすいAPIが考案されています。 jQueryがリリースされた2006年当時、人気になった理由の1つは、jQueryを使えばDOM要素を簡単に選択、移動し、コンテンツを変更できたからでした。当時はIE7に悩まされ、ECMASc…

Webアプリを作るときに便利なグラフ描画ライブラリ「Chart.js」。最近人気のVue.jsでChart.jsを使うための3つのラッパーをデモを交えて紹介します。 現代のWebサイトとWebアプリにおいてチャートは重要な位置を占めています。チャートは、文字だけでは表せない情報を表現して、理解しづらいデータの意味を分かりやすく表現します。 Chart.jsとVue.jsを用いて、さまざまな型のチャ…

WordPressのウィジェットでWeb Compomentsを使うと、既存のコンポーネントを使い回ししたり、簡単にカスタマイズしたりできます。Polymerを使って、GoogmeMapのコーポネントを作ってみましょう。 Web Components（Webコンポーネント）は、再利用が可能なカスタムHTML要素を作成するための仕様です。Polymerは、Webコンポーネントを使ったWebアプリを作…

いま、もっとも人気のあるReactですが、私は検討の結果Cycle.jsを選びました。Cycle.jsの概要や使い方、魅力をお伝えします。 多くの開発者はアプリ開発時になんらかのフレームワークを利用しているでしょう。フレームワークは複雑なアプリ構築の手間をなくし、時間を節約します。利用者が多いからか、最高のフレームワークや、フレームワークの何を学ぶべきかなどの話題があふれています。 Reactは現…

JavaScriptでFlashライクなWebアニメーションを作れる「GreenSock」。タイムラインを使った本格的なアニメーションの作り方、思い通りに動かすコツを解説します。 GreenSockのTimelineMaxを紹介し、以下の項目を説明します。 タイムラインの必要性 タイムラインに複数のトゥイーンを含める方法 複数のタイムラインを関数にまとめ、マスタータイムラインにネストすることで柔軟…

米国版2ちゃんねるとも言われる巨大掲示板Reddit。バックエンドにFirebase、フロントエンドにReactを使うことで、時間をかけずにReddit風掲示板を作る方法を解説します。 Reactはユーザーインターフェイスの構築に使われるJavaScriptのライブラリーです。Create-React-Appを利用すれば、Reactアプリケーションのひな形を簡単に準備できます。 この記事ではCre…

軽量・高速で、シンプルなJavaScriptライブラリー「HyperApp」を紹介。ライブラリーの作者が概要とサンプルを基に使い方を解説します。 複雑なツールを使いこなして優れたWebアプリケーションを構築するのは簡単ではありません。 HyperAppはシンプルさと機能の両立を目的に生まれたJavaScriptライブラリーです。ほかのフレームワークと同水準の機能を維持しながら、理解が必要な概念の数…

もともと単一サーバーでの利用を前提に開発されたDockerをクラスタ環境でも便利に使いたい。そんなときに便利なツールが「Kubernetes」です。基本的な使い方を紹介します。 コンテナ技術が使われるはじめてから何年かたちました。企業や開発者の多くがアプリを配布するのにコンテナを使っています。使いやすいインターフェイスでコンテナ技術を広めたのがDockerです。 1つのコンテナで済むアプリケーショ…

Reactのステート管理といえばReduxですが、React以外でも使えるライブラリーとして注目されているのが、MobXです。少ないコードですばやくアプリケーションを作成しましょう。 Reduxの不満点は、機能を実装するのに必要なボイラープレートのコード量の多さです。解決する方法にMobXがあります。MobXはReduxと同様の機能を持ちますが、記述するコードの量が少なくて済むライブラリーです。 …