こまぶろ

技術のこととか仕事のこととか。

トップ > Vue.js > フロントエンド初心者が学ぶ「リンクが展開されるあれ」とVue.js

フロントエンド初心者が学ぶ「リンクが展開されるあれ」とVue.js

Vue.js JavaScript 書籍 プログラミング フロントエンド

前回の記事の続きです。
ky-yk-d.hatenablog.com

前回、簡単なwebサイトを作成し、GitHub Pagesで公開するというところまで行いました。今回は、Vue.jsをもう少しちゃんと学んでみようと思います。また、「リンクが展開されるあれ」について学んだことも書いておきます。 今回主に編集したのはこちらのページです。 ky-yk-d.github.io

og:imageとTwitterカードを設定する

前回のブログを公開してTwitterにリンクを貼った際に、カカカカックさん（@kakakakakku）さんから、

ノンデザイナーズ本が og:image になってるのですが，今回の記事の本題ではないので，実際に作った GitHub Page のキャプチャにするか，1番関連する本にするべきかもしれませんねー

というご指摘をいただきました。

「og:image？なにそれ美味しいの？」という第一印象でしたが、調べてみるとあれですね。リンクが展開されるあれ。あれって選択できるんですね。勝手に選ばれるもんだと思ってました

ブログの方は、記事をHTML編集モードで開いて記載しましたが、せっかくなのでGitHub Pagesで公開している方のページにもmetaタグを仕込んでみることにしました。そこで関連情報を調べていると、Twitterカードというものがあるという記事を見つけました。

saruwakakun.com

Twitterカードというのは、Twitterでのリンク付きツイートに画像やその他の情報が添付されるあれですね。URLが貼られているのに画像が展開されたりされなかったりしているのは、Twitterカードの設定の有無に起因していたということを知りました。

実際に作成したサイトの記載は以下の通りです。画像については、ブログでも用いているはてなのアップロード機能を利用しました。

<!DOCTYPE html>
<html>
<head>
〜〜中略〜〜
    <meta name="twitter:card" content="summary_large_image"/>
    <meta name="twitter:site" content="@ky_yk_d"/>
    <meta property="og:url" content="https://ky-yk-d.github.io/github-pages-practice/vue/practice.html"/>
    <meta property="og:title" content="こまどのVue.js練習場"/>
    <meta property="og:description" content="Vue.jsになれるための練習場です。" />
    <meta property="og:image" content="https://cdn-ak.f.st-hatena.com/images/fotolife/k/ky_yk_d/20180504/20180504185225.png"/>
〜〜中略〜〜
</head>

以上の設定をしたページのURLを貼り付けたツイートは、以下のようになります。

ちゃんと画像や説明等が表示されていますね。ベタがきでURLが書かれているだけのツイートとは見栄えが全く違います。せっかく書いた記事や作ったページを多くの人に見てもらうには、こういう工夫は不可欠ですね。勉強になりました！

（補足）og:imageが反映されない場合の対処法

ブログの方で設定を変えたときに、「変わったかなー」と改めてリンクを貼ったツイートをしてみたところ、変更が反映されていませんでした。しばらくしないと反映されないのかなーと思っていましたが、即時反映させる方法がありました。下記のページでURLを入力して「検証」することで、Twitter側から情報を収集しなおされ、即座に反映されるようです。

Twitter Card validator

※今回はTwitterでしたが、facebookにも同等のページがあります。

デバッガー - 開発者向けFacebook

Vue.jsの勉強の続き：基本文法

前回、ネット上の記事を写経してタスク管理画面を作成しました。使い方もわからずただ写経しただけだったので、今回は、体型的に初歩から学んでみます。

公式のチュートリアルなど、教材は複数の選択肢があったのですが、今回は山田祥寛さんの『速習Vue.js』を写経して見た感想を書き留めておきます。

速習Vue.js 速習シリーズ

速習Vue.js 速習シリーズ

Part 1〜7では、Vue.jsの基本文法が丁寧に解説されていますし、写経もしやすかったです。脆弱性対策を考慮した仕様についての説明など、何も言われなければ通り過ぎてしまうところにも説明があったのがよかったと思います（他を知らないのであくまで感想ですが・・・）。

具体的な内容については、内容を用いて作成したページ（あるいはGitHubのリポジトリ）を参照いただくとして、印象に残っている箇所をご紹介します。下記の例は、算出プロパティとメソッドの違いについてです。

<div>
    <p>↓クリックを押すとメソッドの方だけ更新されて算出プロパティは更新されない</p>
    <form>
        <input type="button" v-on:click="onclick" value="クリック"/>
    </form>
    <p>算出プロパティ：{{randomc}}</p>
    <p>メソッド：{{randomm()}}</p>
    <p>現在日時：{{current}}</p>
    <p>メソッドは再描画時に常に評価されるが、算出プロパティはそれが依存するプロパティが変更されたときのみ評価される。</p>
</div>

var app = new Vue({
    // このVueを有効にする要素の指定
    el: '#app',
    // 上記で指定した範囲で利用するデータ
    data: {
        current: new Date().toLocaleString()
    },
    computed: {
        // 算出プロパティ経由で乱数を取得
        randomc: function(){
            return Math.random();
        }
    },
    methods: {
        // クリック時に処理を実行する
        onclick: function(){
            this.current = new Date().toLocaleString();
        },
        // メソッド経由で乱数を取得
        randomm: function(){
            return Math.random();
        }
    }
});

この箇所の手前で、同じ機能を算出プロパティとメソッドの両方で実装してみるという箇所があったのですが、そこで当然浮かぶ「じゃあこの二つは何が違うの？」という疑問に答える説明がなされています。違いをただ文章で説明するだけではなく、サンプルコードで実際の動きによって納得させてくれるのも「こまど的にポイント高い（cv:悠木碧）」ですね。

Vue.jsの勉強の続き：コンポーネント、ディレクティブ、フィルター、プラグイン

Part 7 ではコンポーネントを、Part 8 ではディレクティブ以下の部品化技術を説明しています。たくさんの機能を単一のVueインスタンスで作成するのではなく、再利用可能な部品として切り出して利用するという発想ですね。これをうまく使うことが、Vue.js（に限らないのでしょうが）の真骨頂ということになりそうです。フロントエンド初心者にはハードルが高い部分でもあります。

詳しい内容については再度実際のページないしGitHubの参照を乞うことにして、ここでも印象に残った箇所を挙げて一言コメントを。パラメータ付きコンポーネントを利用する方法についての箇所です（サンプルコードそのままではありません。念のため）。

<p>パラメータ付きコンポーネント</p>
<!-- 属性名はケバブケース-->
<my-param-hello your-name="瀧くん"></my-param-hello>
<!-- v-bindを使う場合はシングルクオートでも囲む（数値として渡すなら不要）-->
<my-param-hello v-bind:your-name="'三葉'"></my-param-hello>

Vue.component('my-param-hello', {
    props: ['yourName'], // プロパティはキャメルケース
    template: '<div>{{yourName}}！</div>'
});

他のJSフレームワークを知らないので実感をもっては言えないのですが、先日公開された soussune.fmの40で「VueはReactに比べて書き方に自由度が高い」という話が出ていました。

soussune.com

上記の例でも、略式の書き方とv−bindを使った書き方との両方で書いています。v-bindで文字列を渡す場合はシングルクオートも必要というのは、目が悪いのでソースコードを見ても気づきにくいポイントだと思います。複数の記法が混在するソースコードは避けなければなりませんが、「他の書き方の場合はどうなるのだろう」ということを知っておくことは必要ですね。

Vue.jsの勉強の続き：vue-cli & ルーティング

Part 9では、コマンドラインツールであるvue-cliが紹介されています。インストールと起動にnpmを使うことからも明らかであるように、Node.jsを利用したツールとなります。プロジェクトの雛形の作成（rails newみたいなもの）とビルド&実行も自動化できるとのことで、Vue.jsで本格的にアプリを作成するには欠かせないようです。導入から基本の立ち上げまでは以下のように行います。

npm install -g vue-cli
cd  vue-cli-practice[=プロジェクトを作成するディレクトリ]
vue init webpack[=テンプレート名] my-app[=プロジェクト名]

上記を実行すると、? Project name my-app から始まる割とたくさんの質問が次々と表示されます。書籍はデフォルトで進めていました。すべての質問に答えると、 最初に指定したディレクトリ配下にプロジェクトのフォルダが作成され、その中に必要なフォルダ・ファイルが自動的に作成されます。上述の通り、rails newと同じような感じですね。 自動生成された段階で、動くようになっているので、下記を入力して実行してみます。

cd my-app 
npm start

実行中のメッセージが色々と表示された末尾に、Your application is running here: http://localhost:8080などと表示されれば、起動は成功です。ここで表示されたlocalhostの8080番にブラウザでアクセスするとVueのロゴを含むデフォルトのページが表示されます。

f:id:ky_yk_d:20180513094057p:plain

なるほどー（棒）簡単すぎて初学者にはよろしくないですね。npm startによって何が行われたのかもよくわかりません。vue-cliについては、著者の山田さんも、

初学者が最初から vue-cli を利用するのはお勧めしません。特に Node.js による開発に精通していない場合には、導入のハードルを上げるだけです。

と述べています。また、このあと、Part 10ではルーティングについて記載されており、その部分も写経をしたのですが、紙幅の都合かこの部分は書籍でも説明が薄く、こちらについても正直いってあまりよく理解できていません。あとは自分なりのものを作りながら試行錯誤の中で学ぶべきなのでしょう。基本的なVue.jsの道具立ては獲得したので、公式のレファレンスに当たることもできるでしょうし、ネット上の記事も少しは読めるようになっていると信じます。

HTML & CSS の勉強もやり直し始めています。まだ、こちらも写経以上のことはできていないのですが、これからVue.jsも使いながらまずはある程度整った（目的のある）静的Webサイトを作成し、ゆくゆくはNode.jsなどでサーバーサイドも構築して公開・・・といったところまで行ければと思っています。「フロントエンド初心者」という肩書きが取れるのはいつになるのでしょうか？ではでは。