update.TL;DRこれからVue.jsを利用してES2015の記法、Webpackなどを利用したモダンな開発を目指す方が対象です。Vue.jsは非常に学習コストが低く手軽にSPAが開発できるため初心者にはおすすめです。0.サンプルソースのインストール以下のURLからソースをローカルに設置してください。https://github.com/vuejs/vue-hackernews設置後は対象ディレクトリで以下のコマンドを実施しパッケージをインストールしてください。devビルドは以下のコマンドを実施することで各ビルドファイルが作成されます。id="app"></div>をイベントによって書き換えていく形となります。初期表示ではsrc/main.jsが処理されNewsページを表示します。>"は再読込されません。実際にはページ起動時にすべてのファイルが読み込まれます。上記はコンポーネントの作成順序となります。※vue-routerのkeep-aliveオプションがあるため一度レンダリングしたページは再読込されません。(後述を参照)※インスタンス化の確認はexport内にcreatedプロパティ(コンストラクタ)を用意することで可能です。HackerNewsのデータはstore/index.js経由でfirebaseから取得しておりNewsView.vue、ItemView.vueコンポーネント内から利用しています。以降で各ファイルの説明を記載します。}}package.jsonはプロジェクトのタイトルや説明、利用するパッケージなどを記述します。installを行うことで各パッケージのインストールなどが行なわれプロジェクトが作成されます。(こちらを参考にしました)特化した部分を以下に記載します。scriptsdevはwebpackを利用して開発コマンドを実施した場合、webpack-dev-serverを起動します。--no-info"オプションはプログラムを変更した際にリアルタイムでページがリロードされ、その際に余計な情報を出力しない設定となります。オプションの詳細はこちらbuildは環境変数NODE_ENVにproductionをセットしてwebpackを実行します。--hide-modules"オプションはビルド中の進捗を表示して、作成したモジュール名を表示しない設定となります。割愛3.webpack(webpack.config.js)babelや各種loaderはwebpackを利用して実行します。説明はこちらを参考にさせていただきました。'#source-map'となり、source-mapを作成します。'#app')importでは利用するモジュールを読み込みます。外部モジュールや他のスクリプトなどからエクスポートされた関数、オブジェクト、プリミティブをインポートするために使用します。グローバルメソッドでvue-routerプラグインを使用します。Vue.filter()でカスタムフィルタを登録します。(後述の12.Filterで説明)以降はルーティングの設定で詳しくはこちらを参照してください。強力な機能の1つです。要素を拡張して再利用可能なコードのカプセル化を助けます。コンパイラが指定された振舞いをアタッチするカスタム要素です。要素の姿をとることもあります。id="app"></div>にApp.vueの<template>内のHTMLが追加されます。アクセスするURLまたは操作イベントにより<router-view>タグ内が該当するコンポーネントに置き換えられます。class="view"は置き換わるラッパータグに付加されます。<router-view>ではVue.jsコンポーネントのオプションが一部利用可能となっています。パラメータ属性は、2つの動的コンポーネント間でのトランジションがどう実行されるかを指定できます。デフォルトでは、入ってくるコンポーネントと出て行くコンポーネントのトランジションが同時に起こります。新しいコンポーネントのトランジションが初めに起こり、そのトランジションが完了した後に現在のコンポーネントの出て行くトランジションが開始します。現在のコンポーネントが出て行くトランジションが初めに起こり、そのトランジションが完了した後に新しいコンポーネントのトランジションが開始します。<router-view>とオプションの説明はこちらやこちらtemplate、script、styleタグにlang属性を設定することでそれぞれメタ言語を利用することができます。(jade,coffeeなどなど)CSS部分ではlang="stylus"とすることでstylus形式で記述することを宣言しています。underline</style>初期表示でも利用しているニュース一覧コンポーネントです。storeのニュースデータ件数分のItemコンポーネントを作成し<Item>内に表示します。}"でstoreからdataのitemにデータがセットされるまでローディングを表示します。(ローディングはCSSで表現)Vue.jsでは親コンポーネントのデータを子コンポーネントが利用する場合、Propsという機能を利用します。ここではItemコンポーネントにitem,indexを渡しています。#Props-によるデータ伝達v-forディレクティブはこちらを参照してください。track-byディレクティブは利用することでDOM要素を再利用することができます。そのためデータ内の一意となるIDをセットします。#track-by<script>タグ内はES2015で記述しています。データ取得用のstoreモジュールとItemコンポーネントを読み込みます。default内はImportコマンドにて読みこまれた際にレスポンスとなる値で、Vue.jsのコンポーネント形式で記述します。利用している各属性の説明は以下となります。コンポーネントの名称です。テンプレートで自分自身を再帰的に呼びだす際は必須です。子コンポーネントを指定します。ここに指定することで当コンポーネントのみ利用可能なコンポーネントが作成可能です。コンポーネントが利用するデータオブジェクトを指定します。vue-routerで利用します。dataはURL(route)の変更やコンポーネントが再利用で呼び出されコンポーネントのdataを更新します。ここではstore.js経由でfirebaseからpageに応じたデータを取得しdataオブジェクトを更新しています。コンポーネント作成時にコールされます。ここではstore.jsのイベントを監視します。詳細はstore.jsに記述。コンポーネントが破棄された後にコールされます。ここではcreated時に登録したイベント監視を削除します。インスタンスに組み込まれるメソッドで、メソッド内から直接アクセス可能となり、ディレクティブの式で使用することもできます。ここではURL(route)で受け取ったpageを元にItemsコンポーネントに渡す値を算出しています。カスタムフィルタの詳細はこちら各記法についてはNewsView.vueを変換したbuild.js(以下)と比較すると分かりやすいかと思います。})}前述のとおりHackerNewsのデータはfirebaseから取得しています。APIfirebaseの基本的な利用方法はこちらを参照してください。※旧ドキュメントImportにより利用するモジュールの概要は以下となります。ES6でpromiseオブジェクト(非同期処理を簡単にするもの)を扱うためのパッケージpromiseについてはこちらが分かりやすいかと次のconst、letは各値の宣言、初期化を行っています。Firebaseクラスは利用するオブジェクトのURL(RDBでいうところのデータベース)を指定します。Object.createではitemsCacheをオブジェクト型として初期化しています。storiesPerPageは1ページに表示するニュース件数を定義しています。storeはstoreモジュールをImportした際に利用可能となるオブジェクトを指定しています。defaultではクラス、オブジェクト、文字列など任意の値が指定可能です。ここではEventEmitter型のオブジェクトを戻しています。api.child('topstories').on('value',〜はtopstoriesオブジェクトから1回だけデータを取得する操作となります。firebaseはソケット通信を利用してデータの追加・変更時などのアクション登録も可能ですが、本プロジェクトでは利用毎に基本的に1回だけ取得する形となります。第2引数にはcallback関数を指定しており、レスポンスとなるニュースのID配列(コメントには100件とあるが500件入ってる)を保持して、'topstories-updated'イベントを発行します。前後しますがNewsView.vueではこのイベントを監視しており、NewsView内のupdateメソッド経由でstoreのデータ取得を呼び出します。{〜は引数のidから対象のNewsデータをPromiseオブジェクトの形式で戻します。取得済みの場合はキャッシュから、データがない場合はfirebaseから取得します。rejectとなり成功時はresolve、失敗時はrejectにレスポンスしたい値を渡します。{〜は上述のラッパーとなり、複数のidを受け取り紐づくデータをレスポンスします。{〜はページに紐づくidを最初に保持したID配列から抽出し紐づくデータをレスポンスします。{〜はユーザに関する情報をfirebaseのuserデータから取得しレスポンスします。underline</style>ニュース一覧の明細行となるコンポーネントです。firebaseから取得するitemsはこちらを参照してください。明示的に宣言する必要があります。computedではテンプレート内で利用する算出プロパティを記述することができます。基本的にはitemsのデータが外部サイトかHackerNews内のコンテンツか識別して出力内容を制御しています。underline</style>ニュース一覧のユーザ名クリックまたは直接URLをアクセスした際にユーザ情報を表示します。userオブジェクトについてはこちらを参照してください。submissionsおよびcommentsのリンク先はcloneプロジェクトに用意はなく本家サイトとなっています。存在しないユーザ情報の場合はv-show="user"の制御でユーザ情報部分が非表示となります。0</style>HackerNews内のコンテンツ、ニュース一覧のコメントクリックまたは直接URLをアクセスした際にニュース情報を表示します。typeのjobはhiring用のページでpollはアンケートページとなります。URLパラメータのItemのidからItemの情報を取得して、コメント、アンケートの項目など紐づく情報を取得しdataにセットします。22px</style>ニュースに紐づくコメントを表示します。コメントに対するコメントを再帰処理にて取得・表示を行っています。's';}カスタムフィルタはテンプレート内でdataの値を整形して表示をする時などに利用します。(詳細はこちら)このパッケージはmain.jsでImportされfilterに登録されており、表示用にURLからドメインを抽出して戻すdomainと、unixタイムを表示用の文字列に変換する2つを用意しています。ドメイン抽出ではaタグのhostnameを利用しており、時間表示では単位にsを付加する識別を行っています。おわりに雑に記載してしまったので不適切な表記、同じ意味で異なるワードの統一などは順次更新していきます。間違い等があれば、ご指摘ください。upLoginユーザーは見つかりませんでした。