JavaScriptTweetはてなブログ、HTML、CSS,JavaScriptをブログ全体に追加できたりと、ある程度揃っているブログサービスなのに、カスタマイズできるところもたくさんあって便利ですよね!今回は、そんなはてなブログに、Vue.jsを導入してみたので、その手順についてご紹介します!今回のテーマはこちら!はてなブログにVue.jsを導入して、コンポーネントを作成しよう!Vue.jsを使うと、コンポーネント、つまりはテンプレートとなるタグを作ることができます!はてなブログの記事の編集画面では、HTMLタグが記述できますよね?上記のThemaも、HTMLタグとCSSで作成されています。ある程度ちゃんとしたHTMLタグを書くと、その記述が複雑になり、毎回の記事で複雑なHTMLタグを記述するのが面倒になってきたりします。記事編集画面でコンポーネントを呼び出すVue.jsの仕組みまとめVue.jsとはそもそもVue.jsとはなんなのかというと、JavaScriptのフレームワークです。プログラムでよく使われる、決まりきった処理を簡単に記述できるようになるのがフレームワークです。イベント処理の実行などなどです。今回はブログの記事執筆への導入が目的なので、コンポーネント生成にフォーカスして見ていきましょう!Vue.jsの詳細は公式ドキュメントにまとまっているので、気になる方は以下をどうぞ。jp.vuejs.orgVue.jsまずははてなブログでVue.jsで利用できるようにしましょう!Vue.jsを利用するには、以下のタグを<head>内に追加します。[詳細設定]を開き、「headに要素を追加」に上記scriptタグを追加しましょう。これでVue.jsの導入は完了です!Vus.jsでコンポーネントを作成するVue.jsでコンポーネントを作成するためにはJavaScriptを記述する必要があります。はてなブログではJavaScriptを記述できる欄はありませんが、[デザイン]の画面でHTMLを追加できます。scriptタグを用いてHTML内にJavaScriptを記述していきましょう。]]></script>貼り付け先はこちらこれで、<compoment-sample-1>と、<compoment-sample-2>が使えるようになりました!!詳しいコードの解説は後回しにして、先に結果を確認してみます。記事編集画面でコンポーネントを呼び出す<compoment-sample-1>と、<compoment-sample-2>の2つのコンポーネントが使えるようになりました。これをはてなブログの記事執筆画面に入力すると、コンポーネントが利用できます。1つ注意点として、コンポーネントは必ずdivタグで囲むようにしてください。はてなブログの記事執筆画面では、divタグでコンポーネントを囲まないと、通常の文字列として表示されてしまいます。■HTMLソースVue.jsの仕組みでは先程のVue.jsの中身を詳細に見ていきましょう!まず以下でコンポーネントを定義しています。変数名はわかりやすい名前であれば何でも構いません。HTMLタグが実際に公開した時に表示されるタグになります。コンポーネント内に要素を入れたい場合は、compomentSample2にあるように、<slot></slot>をテンプレートのHTMLに記述します。slotタグ内に、コンポーネント内に記述された要素が挿入されます。定義したコンポーネントを適用するために、以下の記述をします。Vueインスタンスを生成しています。これをやることで、自分のサイトにVue.jsの機能が実行されるようになります。'#main',は、Vue.jsが適用されるHTML要素のidを指定しています。はてなブログは記事がmainというidのdivタグで囲まれているので、main全体にVue.jsが適用されるようにしています。{}内に、カンマ区切りで、コンポーネントを適用しています。:の左側が、コンポーネントタグとなる名前で、右側は先程定義した変数です。コンポーネント名は、英数と、一つ以上のハイフンで構成される必要があります。まとめ以上、今回ははてなブログにVue.jsコンポーネントを導入してHTMLを簡略化する方法についてご紹介しました。当ブログの一部の要素も、Vue.jsコンポーネントで描画しています。コンポーネント名は、英数と、一つ以上のハイフンで構成される必要があります。</div></div>記事を執筆するときは、以下のみを記述して簡略化しています。<div><emphasize-points>コンポーネント名は、英数と、一つ以上のハイフンで構成される必要があります。webpackでWebアプリケーション...2022-03-09TypeScriptはじめました皆さん、JavaScriptはお好きですか?僕は苦手です。はてなブログPro都内でGCP、Python使ったデータエンジニアやってます。クラウドでの設計~開発・運用まで全部やります。20代文系エンジニアです。GCP、Python中心に、データエンジニアとして学んでいる技術をご紹介する記事を書いています。BigQueryとAirflowとバイクと鳥が好き。アイコンはたまたまお魚を加えていたときのカワセミさん。引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。