# アプリケーションを作ってみる

ここまで学んだことだけで簡単なアプリケーションを作ります。

# マークダウンエディタを作ってみる

markedという外部プラグインを使ってマークダウンエディタを作ってみましょう。

# markedownについて

markdownは軽量のマークアップ言語です。

markdownパーサーで変換することでHTMLへ変換できます。

変換前

# h1の見出し
## h2の見出し
### h3の見出し
#### h4の見出し

- 順序なしのリストアイテム
- 順序なしのリストアイテム
- 順序なしのリストアイテム

変換後

<h1>h1の見出し</h1>
<h2>h2の見出し</h2>
<h3>h3の見出し</h3>
<h4>h4の見出し</h4>

<ul>
  <li>順序なしのリストアイテム</li>
  <li>順序なしのリストアイテム</li>
</ul>

# marked.js を使う

marked.jsというブラウザで使うことができるmarkdownパーサーがあるのでそちらを使用します。 以下を読み込むことで marked() という関数を利用できるようになります。

<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.6.0/marked.js"></script>

リファレンス

• Marked.js Documentation

# v-html

2重カッコ内のデータはHTMLではなく、プレーンなテキストとして扱います。

生のhtmlをそのまま描画するには v-html ディレクティブを使用する必要があります。

v-html ディレクティブ属性を付与した要素は、v-html で指定した値に置き換わります。

<div id="app">
  <span v-html="rawHtml"></span>
</div>

var app = new Vue({
  el: '#app',
  data: {
    rawHtml: '<div>置きかわる要素です</div>'
  },
})

# 完成形

markdown editor

# FetchAPIを使って非同期な通信をしてみる

JavaScript標準の非同期通信APIである、FetchAPIを使ってGitHubAPIと非同期な通信をしてみましょう。

# Promise

Fetch APIを説明する前にpromiseオブジェクトについて触れておきます。

promiseは非同期処理の完了もしくは失敗を表すオブジェクト、またはそれらを操作する仕組みのことをいいます。

function promiseReturnFunction() {
  // promiseがreturnされる関数
  // 非同期な処理 e.g. setTimeoutとか
}

promiseReturnFunction().then(function(result) {
  // 成功時の処理
}).catch(function(error) {
  // 失敗時の処理
})

promiseオブジェクトの then / catch メソッドそれぞれに成功 / 失敗時のfunctionを登録しておくことで、非同期関数実行の成否にかかわらず、

• 実行順を保証する
• 見通しのよいコードになる

のようなメリットがあります。

また、昨今においては、外部プラグインで非同期処理を行う関数のほとんどが Promise を使って書かれています。

# Fetch API

Fetch APIはJavaScriptの標準モジュールで、Ajaxのようにブラウザから非同期通信を実行する関数です。

• Fetch 概説 | MDN

fetch('http://example.com/movies.json') // URLへhttpリクエストを送信
  .then(function(response) {
    console.log(response.status) // 200
    return response.json(); // jsonを返す
  })
  .then(function(myJson) {
    console.log(JSON.stringify(myJson)); // console.logはjson型を受け取れないのでstringにキャストしている
  });

基本的な使い方は 第1引数にfetchしたいリソースのURL、（必要であれば）第2引数にオプションを指定したオブジェクトを指定します。

戻り値は前述したPromiseオブジェクトとなります。

fetch(input: URL, option: オプション): Promise<Response>;

# Vueインスタンスのライフサイクルフック

Fetch APIのようにリソースを非同期で取得し、画面に表示するとき、どのタイミングでリソースを取得するのが望ましいでしょうか。

多くの場合、ボタン押下のようなユーザからのアクションなしで、JavaScriptが読み込まれたタイミングでリソースを取得することになると思います。

Vue.jsでは、Vueインスタンス初期化時の特定の段階で実行する処理を追加することができます。

いくつかの ライフサイクルフック と呼ばれる関数を実行することでそれを実現できます。

new Vue({
  data: {
    a: 1
  },
  created: function () {
    console.log('a is: ' + this.a)
  }
})
// => "a is: 1"

• API | ライフサイクルフック — Vue.js

# VueインスタンスからGitHubAPIをFetchしてみる

GitHubでは公開されているリポジトリの情報をAPIから取得することができます。

Vue.jsのcommit記録をAPIから取得して、リストで表示してみましょう。

# 仕様

• Fetch APIを使ってmasterブランチのコミットログを一覧表示する
  • <ul> <li> を使って一覧表示する
• 画面に表示する情報
  • コミットハッシュ
    • <a> で表示し、commitのURLをリンクする
  • コミットメッセージ
  • コミッター
  • コミットの日時

# 完成形

fetch api sample

ここで作成した例は、いずれも公式リファレンスのExampleに載っています。

Example — Vue.js

時間があれば他の例も参考にしてみてください。