Vue.js製フレームワークNuxt.jsではじめるUniversalアプリケーション開発 花谷拓磨 Vue.jsでUniversalなSPAを開発できるフレームワークであるNuxt.jsのバージョン 1.0のリリースがいよいよ近づいてきました。 本稿では、シングルページアプリケーション（以下 SPA）開発によって生じた問題を解決するために生まれたサーバーサイドレンダリング （以下 SSR）を中心に、Vue.jsでの開発を強力にサポートするNuxtについて、その魅力と基本的な使い方をご紹介いたします。 Nuxt.jsとは？ Nuxt.js（ナクストと読みます）はReact.jsベースのSSR用フレームワークであるNext.jsに触発されて作成された、Vue.jsベースのフレームワークです。 特にUIの描画サポート に主眼をおき、SSRをはじめとした様々なサポートを行ってくれるものとなります

モバイルWebのUIを速くする基本テクニックがわかる──Google I/O 2016 High Performance Web UI 川田寛（ピクシブ株式会社） こんにちは、ふろしきです！ 私はHTML5 Experts.jpで、過去2年ほどGoogle I/Oの情報を発信し、Web技術の変化についてお伝えしてきました。振り返るとGoogleは、2014年にモバイルWebの提唱と技術要素の拡大を図り、2015年からは「RAIL（モバイルWebが目指すべきパフォーマンス指標）」や「Progressive Web Apps（アプリのように振る舞うWeb）」といった、モバイルとの親和性が高いWebを作り出すための”考え方”を推し進めました。今年2016年は、さらにそれを踏み込んでいったという感じがします。 今回のI/Oで取り上げるのもそのひとつ。毎度お馴染みGoogle Developer A

TypeScriptを使ってECMAScript 2015時代のJavaScriptを先取りしよう！ わかめまさひろ（株式会社トップゲート） わかめです。これから、TypeScriptを使ってECMAScript 2015スタイルのコードを書く方法を紹介します。連載の初回となる本稿では、ECMAScript 2015やTypeScriptの魅力について、TypeScript用エディタの案内をしていきます。 TypeScriptとは？ TypeScriptはMicrosoft社が開発しているAltJSの1つです。AltJSとは、ある言語Xから、JavaScriptへと変換（トランスパイル）して使う言語の総称です。Typeという名の通り、JavaScriptの世界に静的な型付けを持込み、JavaやC#のようにコンパイル時に整合性のチェックを行うことができるようにしたものです。 見事チェックにパ

どうも、バンクーバーでぶらぶらしている@t32kです。最近は暇なのでもっぱらOSS活動に勤しんでおります。そんなわけで日々のアプリケーション開発において重要になってくるのがバージョニングです。 今日はセマンティック バージョニングについて解説します。自身が公開しているライブラリやパッケージのコードを何かしら修正したら、それに伴いバージョンを上げるのが一般的だと思うのですが、実はどのようにバージョンを上げるのが適切なのか、昔の私は理解していませんでした。 『いっぱい変更したのでメジャーバージョン上げてみるか』、『今回の修正は軽微なものだし、マイナーバージョンを上げるか』などと、なんとなくにバージョニングをしていました。 If the plugin’s API changes dramatically (for example, when sortOrder option is renamed

我々Web開発者がWeb Componentsという言葉を耳にしてから、もう2年程経ったでしょうか。Web Componentsが変えるWeb開発の未来という記事に、「今のWeb開発がどのような課題を抱えているか、それをWeb Componentsがどう解決するか」を書きました。これを踏まえて、本連載ではWeb Componentsの仕様から実装、PolymerやX-TagといったWeb Componentsを支えるライブラリなどの周辺知識まで解説していきます。 Web Componentsを支える4つの仕様 連載第1回目となる本記事では、Web Componentsを支える4つの仕様について解説します。Web Componentsは以下の4つの独立した仕様から構成されます。 Custom Elements – 独自のカスタム要素をユーザーが定義することを可能にする Shadow DOM

Class、Interface、Module-TypeScriptが提供する目玉機能を一挙紹介！ 谷口慈行（Microsoft Student Pa...） クラス・インターフェース・モジュールは大規模な開発を行う際の強力な味方であり、TypeScriptの重要な機能の一つです。連載第3回目となる今回は、オブジェクト指向に欠かせないクラスについて紹介します。 クラスJavaScriptはプロトタイプベースの言語であり、静的なクラスではありません。しかし、多くのライブラリにて静的なクラスを再現する機能が実装され、利用されています。TypeScriptでは、静的なクラスが使用でき、多くのクラスベースの言語と同様のノウハウや実装方法を利用できます。 クラスを定義するには、 classキーワードを使用します。 class Person { private name: string; constru

Web Starter Kitで用意されている各種の設定ファイルなどは、そのまま使うのではなく、各自が自分のスタイルに合わせてカスタマイズするとよいでしょう。ファビコンやスマートフォンでサイトをホーム画面に追加した際に表示されるアイコンなど、各自で差し替える必要があります。 humans.txtやrobots.txtなども使用する場合には適宜編集する必要があります。 動作環境の構築 Web Starter Kitに用意されたツールを使用するためには、以下の言語の環境が必要となります。 Node.js (v0.10.x以上) Ruby (1.8.7以上) これに加えて、以下のツールのインストールが必要になります。 Nore.js上で動くタスクランナーのgulp (3.5.x以上) Sassのコンパイルを行うRubyのgem (3.3.x以上) それぞれのインストール方法について、簡単に紹介し

前回はTypeScriptの魅力を3つほど紹介し、TypeScriptの開発環境を構築しました。今回はTypeScriptの基本文法とTypeScriptの魅力の一つであり、TypeScriptを最も特徴付ける機能である型注釈について紹介します。 型注釈の説明に入る前に、TypeScriptの関数について説明します。 前回強調したとおり、「JavaScriptのコードそのまま解釈でき、既存コードから開発をスタートできる」ということは、TypeScriptの特徴の一つです。なので、シンタックスはJavaScriptのコードと大差ありませんが、より使いやすく拡張されているものもあります。特に関数は様々な拡張がなされています。 具体的には次の4つの機能が利用できます。 オプショナルパラメータデフォルトパラメータ可変長パラメータラムダ式オプショナルパラメータJavaScriptでは宣言されているパ

初めての方必見！TypeScriptでモダンなWebアプリケーション開発を始めよう 谷口慈行（Microsoft Student Pa...） Webページで補助的に使用する用途で開発されたJavaScriptも、今ではWebになくてはならない重要な技術の一つです。特にSingle-page ApplicationなどのモダンなWebアプリケーションではそのコード量も多くなります。JavaScriptの負担する領域が日々大きくなる中、様々なフレームワークやライブラリが日夜生まれ続けており、また、JavaScript自体を代替する言語、altJSが注目を集めています。 altJSの一つであるTypeScriptが4月2日にめでたくTypeScript 1.0となりリリースされました。今回は、このTypeScriptの特徴を絞って紹介し、実際にTypeScriptで開発できる環境を構築します。

Navigation Timingだからできる、Webアプリを俯瞰したパフォーマンス計測(3/3) 川田寛（ピクシブ株式会社） いよいよHTMLドキュメントのダウンロードと、画面上への表示です。この動作の仕組みから、TATの「終了」がいつなのかを追ってみましょう。「終了」についてはかなり奥が深く、Web標準でもそのプロセスを「The End」として定義はしていますが、それだけでは語りきれない難しさがあります。 4. TCP接続、5. HTTPリクエスト/レスポンス 名前解決で得られたIPアドレスを使って、HTMLドキュメントが置かれたサーバへ「4. TCP接続」します。いわゆる、3ウェイハンドシェークというものです。サーバとの接続交渉が終わると、HTTPリクエストをサーバへ送信し、HTTPレスポンスを受け取ります。 HTTPレスポンスの結果からリダイレクトであることが発覚した場合、「2.

初心者でも絶対わかる、WebGLプログラミング＜three.js最初の一歩＞ 小山田 晃浩（株式会社 ピクセルグリッド） WebGLはとても高度な技術である一方、APIは低レベルであるためそのまま使うにはどうしても冗長な準備を行う必要があります。一方で、JavaScriptライブラリーを通して高レベルなAPIとしてWebGLを利用する方法があります。こうしたJavaScriptライブラリーとしてはthree.js、Away3D.js、Babylon.jsなどが有名です。その中でも特に人気があるthree.jsを通して、WebGLを利用する方法を解説します。(three.jsのリビジョンは執筆現在の最新であるr65を利用します) three.jsを手に入れる three.jsはhttp://threejs.org/から手に入れることができます。downloadから、zipファイルを手に入れま

前二回の記事では、Sass 3.3で追加された「&」の新機能と@at-rootと新しいデータタイプ「マップ」について解説しました。 最後となる今回は、新しく追加された関数やいくつかの変更点を解説します。少し長くなりましたので目次を作りました。気になるところからお読みください。 新しく追加された関数 文字列用の関数 リスト用の関数 call() unique-id() 変数、ミックスイン、関数の存在を調べる関数 inspect() 変更点 リスト関連 @each if() @extend !globalフラグ ※Source Mapについては、丁寧に解説しているブログ記事が既にいくつかありますので、ここでは省略させていただきます。 文字列用の関数 新たに追加された文字列用の関数は6つあります。 str-length($string) str-insert($string, $insert,

「進化を続ける JavaScript ～次世代言語のステキな機能と高速化の行方～」HTML5 Conference 2013 セッションレポート 吉田 啓二 2013年11月30日（土）に開催された「HTML5 Conference 2013」の、Mozilla Japan浅井智也さんによるセッション「進化を続ける JavaScript ～次世代言語のステキな機能と高速化の行方～」のセッション内容をご紹介します。 JavaScriptの課題と改良への動き 現在のJavaScriptには、次のような課題があります。 高速化がなかなかできない クラス、モジュールがない プロトタイプベースであるため、普段Javaなどでクラスを使っている人にとって、メソッド定義や継承がわかりにくい メソッドとして呼び出したときはthisがそのメソッドのオブジェクトになるが、間違って関数として呼び出すとthisがw

Sass 3.3で追加された「&」の新機能と@at-rootまとめ解説 上村 光星 10月12日にSass 3.3.0.rc.1が出ました。まだリリース候補ですが、どのような機能が追加されるのかはChangelogにあります。今回は「&」と@at-rootについて解説します。 HTML+CSSの命名規則にBEM方法論、もしくはHTML+CSS向けに派生したMindBEMdingを取り入れる方が増えてきているようです（筆者は使っていませんが…）。「&」の新機能と@at-rootは、このBEMのためといっても過言ではありません。 Sass 3.2の「&」 「&」は親セレクタを参照する特別なキーワードとして、Sass 3.3よりも前からありましたが、擬似クラスや擬似要素、セレクタの連結など、用途が限られていました。 // Sass 3.3よりも前の「&」の用途の例 .foo { &:hover

マークアップシリーズの第2回は、前回のよくある3つのデザインから考える、マークアップの最適解と同じく、html5jマークアップ部主催のイベント「MarkupCafe」で出題された3つのお題から最適なマークアップを探ります。 イベントではAからDの4つのチームにわかれてマークアップを考えました。それぞれのチームごとに違ったマークアップへの考えが表れていてとても興味深いです。また今回はイベント終了後に「HTML5 Experts.jp」のエキスパート兼マークアップ部の部長でもある村岡正和氏に、氏自身ならこうするといったマークアップを公開してもらいました。 本記事ではWebサイト制作の際にありがちな”ページング”、”フォーム”、”データテーブル”の3つについて要素の使いどころや仕様、アクセシビリティやユーザビリティといった観点からマークアップを考えていきます。 1.ページングの中身と重要度 最初

Google Hosted Library – Webを速くするためにGoogleがやっていること Make the Web Faster 03 – Jxck Googleは、よく使われるJavaScriptのライブラリなどをGoogleのインフラを使って配布しています。 これを Google Hosted Library と呼びます。 この、Hosted Libraryの導入を単純に「自分で配布しない分が楽になるだけ」、くらいな感覚で使っている方も多いと思います。しかし、実はこれはみんなが使えば使うほど、得をする仕組みになっていることを見落としてはいないでしょうか？ 今回はそんな、Google Hosted Libraryについて、その仕組となるCDNやキャッシュの技術などについて解説します。 よくある Web ページ 例えば自分が配信するindex.html内でjquery.2.0.3

Bootstrap3超速レビュー！刷新されたグリッドシステムを理解しよう！ 白石 俊平（HTML5 Experts.jp編集長） 人気のCSSフレームワーク「Bootstrap」のバージョン3が正式にリリースされました。この記事では早速Bootstrap3をレビューし、特にグリッドシステムを掘り下げて解説してみます。 フラットデザイン採用、フルレスポンシブ！ Bootstrap2からの変更点のリストは、公式のリリース文を参照してください。特に大きな変更点は以下のとおりです。 フラットデザインの採用 現在流行のフラットデザインを採用しました。ただこれは「流行りに乗った」のではなく、テーマの一つとして提供されているという位置付けのようです。 例えば以下は、Bootstrap3のボタングループです。 レスポンシブWebデザインの全面採用 以前までのBootstrapは、レスポンシブWebデザイン

進化するWeb ～Progressive Web Appsの実装と応用～(de:code2018より) 物江 修 2018年5月に開催された日本マイクロソフト主催のイベントde:code 2018で「進化するWeb ～Progressive Web Appsの実装と応用～」というセッションを担当しました。 イベントに参加できなかった...