SEO、OGP……Vue.js製SPAの「困った」を解決できる「Nuxt.js」が便利だ! 2017/09/08 Olayinka Omole 208 Vue.jsでSPAを作ったものの、検索エンジンのクローラーやSNSのOGP取得といった問題で困ったことはありませんか? サーバーサイドレンダリングを簡単に構築できるNuxt.jsの活用方法を解説します。 ユニバーサル(Isomorphic)JavaScriptはJavaScriptコミュニティで一般的な用語になりました。ユニバーサルJavaScriptとは、クライアントとサーバーの両方で実行でき… Loading...
まるでjQueryみたい!ネイティブなDOM操作メソッドもこんなに進化していた! 2017/09/05 Giulio Mainardi 120 「脱jQuery」をめぐる議論は何年も前からありますが、jQueryの使い勝手のよさは無視できません。ところが、WHATWGのDOM StandardではjQuery風の使いやすいAPIが考案されています。 jQueryがリリースされた2006年当時、人気になった理由の1つは、jQueryを使えばDOM要素を簡単に選択、移動し、コンテンツを変更できたからでした。当時はIE7に悩まされ、ECMASc… Loading...
Vue.jsでカッコいいグラフを手軽に作るChart.jsのラッパー3つ 2017/09/04 Yomi Eluwande 119 Webアプリを作るときに便利なグラフ描画ライブラリ「Chart.js」。最近人気のVue.jsでChart.jsを使うための3つのラッパーをデモを交えて紹介します。 現代のWebサイトとWebアプリにおいてチャートは重要な位置を占めています。チャートは、文字だけでは表せない情報を表現して、理解しづらいデータの意味を分かりやすく表現します。 Chart.jsとVue.jsを用いて、さまざまな型のチャ… Loading...
WordPressのウィジェットでPolymerとWeb Componentsを使いこなす方法 2017/08/31 Almir Bijedic 64 WordPressのウィジェットでWeb Compomentsを使うと、既存のコンポーネントを使い回ししたり、簡単にカスタマイズしたりできます。Polymerを使って、GoogmeMapのコーポネントを作ってみましょう。 Web Components(Webコンポーネント)は、再利用が可能なカスタムHTML要素を作成するための仕様です。Polymerは、Webコンポーネントを使ったWebアプリを作… Loading...
Cycle.jsがReactよりも優れていると私が思うこれだけの理由 2017/08/30 Ivan Jovanovic 140 いま、もっとも人気のあるReactですが、私は検討の結果Cycle.jsを選びました。Cycle.jsの概要や使い方、魅力をお伝えします。 多くの開発者はアプリ開発時になんらかのフレームワークを利用しているでしょう。フレームワークは複雑なアプリ構築の手間をなくし、時間を節約します。利用者が多いからか、最高のフレームワークや、フレームワークの何を学ぶべきかなどの話題があふれています。 Reactは現… Loading...
本格的なタイムラインアニメが作れる最強ライブラリーTimelineMaxの使い方 2017/08/29 Maria Antonietta Perna 62 JavaScriptでFlashライクなWebアニメーションを作れる「GreenSock」。タイムラインを使った本格的なアニメーションの作り方、思い通りに動かすコツを解説します。 GreenSockのTimelineMaxを紹介し、以下の項目を説明します。 タイムラインの必要性 タイムラインに複数のトゥイーンを含める方法 複数のタイムラインを関数にまとめ、マスタータイムラインにネストすることで柔軟… Loading...
Reddit風掲示板をFirebaseとReactを組み合わせてモダンに作る方法 2017/08/23 Nirmalya Ghosh 93 米国版2ちゃんねるとも言われる巨大掲示板Reddit。バックエンドにFirebase、フロントエンドにReactを使うことで、時間をかけずにReddit風掲示板を作る方法を解説します。 Reactはユーザーインターフェイスの構築に使われるJavaScriptのライブラリーです。Create-React-Appを利用すれば、Reactアプリケーションのひな形を簡単に準備できます。 この記事ではCre… Loading...
超軽量で学習コストが低い最新JSライブラリー「HyperApp」とは何か 2017/08/22 Jorge Bucaran 92 軽量・高速で、シンプルなJavaScriptライブラリー「HyperApp」を紹介。ライブラリーの作者が概要とサンプルを基に使い方を解説します。 複雑なツールを使いこなして優れたWebアプリケーションを構築するのは簡単ではありません。 HyperAppはシンプルさと機能の両立を目的に生まれたJavaScriptライブラリーです。ほかのフレームワークと同水準の機能を維持しながら、理解が必要な概念の数… Loading...
コンテナクラスタ管理ツール「kubernetes」でDockerをもっと便利に使う方法 2017/08/21 Jatin Shridhar 72 もともと単一サーバーでの利用を前提に開発されたDockerをクラスタ環境でも便利に使いたい。そんなときに便利なツールが「Kubernetes」です。基本的な使い方を紹介します。 コンテナ技術が使われるはじめてから何年かたちました。企業や開発者の多くがアプリを配布するのにコンテナを使っています。使いやすいインターフェイスでコンテナ技術を広めたのがDockerです。 1つのコンテナで済むアプリケーショ… Loading...
Reactのステート管理にはReduxとMobXのどちらを使うべきか 2017/08/18 Michael Wanyoike 107 Reactのステート管理といえばReduxですが、React以外でも使えるライブラリーとして注目されているのが、MobXです。少ないコードですばやくアプリケーションを作成しましょう。 Reduxの不満点は、機能を実装するのに必要なボイラープレートのコード量の多さです。解決する方法にMobXがあります。MobXはReduxと同様の機能を持ちますが、記述するコードの量が少なくて済むライブラリーです。 … Loading...