<commit_before>---
title: HackerNews クローン
updated: 2017-09-23
type: examples
order: 12
---

> これは Hackernews のオフィシャル Firebase API に基づいた Hackernews クローンで、Vue 2.0 + Vue Router + Vuex 、そしてサーバサイドレンダリングが使用されています。

{% raw %}
<div style="max-width: 600px;">
  <a href="https://github.com/vuejs/vue-hackernews-2.0" target="_blank">
    <img style="width: 100%;" src="/images/hn.png">
  </a>
</div>
{% endraw %}
 

> [ライブデモ](https://vue-hn.now.sh/)
> 注意: 一定期間誰もアクセスしていなかった場合、デモはスピンアップ時間を要するかもしれません。
>
> [[ソース](https://github.com/vuejs/vue-hackernews-2.0)]

## 機能
- サーバサイドレンダリング
  - Vue + Vue Router + Vuex と一緒に使用
  - サーバサイドのデータのプリフェッチ
  - クライアントサイドの状態 & DOM ハイドレーション
- 単一ファイル Vue コンポーネント
  - 開発モードにおけるホットリロード
  - 本番向けの CSS 抽出
- FLIP アニメーションによるリアルタイムリストアップデート

## アーキテクチャ概要

<img width="973" alt="Hackernew clone architecture overview" src="/images/hn-architecture.png"><commit_msg>Images not found. (#1365) (#596)<commit_after>---
title: HackerNews クローン
updated: 2017-09-23
type: examples
order: 12
---

> これは Hackernews のオフィシャル Firebase API に基づいた Hackernews クローンで、Vue 2.0 + Vue Router + Vuex 、そしてサーバサイドレンダリングが使用されています。

{% raw %}
<div style="max-width: 600px;">
  <a href="https://github.com/vuejs/vue-hackernews-2.0" target="_blank">
    <img style="width: 100%;" src="../../images/hn.png">
  </a>
</div>
{% endraw %}
 

> [ライブデモ](https://vue-hn.now.sh/)
> 注意: 一定期間誰もアクセスしていなかった場合、デモはスピンアップ時間を要するかもしれません。
>
> [[ソース](https://github.com/vuejs/vue-hackernews-2.0)]

## 機能
- サーバサイドレンダリング
  - Vue + Vue Router + Vuex と一緒に使用
  - サーバサイドのデータのプリフェッチ
  - クライアントサイドの状態 & DOM ハイドレーション
- 単一ファイル Vue コンポーネント
  - 開発モードにおけるホットリロード
  - 本番向けの CSS 抽出
- FLIP アニメーションによるリアルタイムリストアップデート

## アーキテクチャ概要

<img width="973" alt="Hackernew clone architecture overview" src="../../images/hn-architecture.png">
{'fraction_non_alphanumeric': 0.1652566271855612, 'fraction_numerical': 0.032148900169204735, 'mean_word_length': 4.0397727272727275, 'pattern_counts': {'":': 0, '<': 15, '<?xml version=': 0, '>': 25, 'https://': 6, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3719404', 'n_tokens_mistral': 1094, 'n_tokens_neox': 1006, 'n_words': 141}