今回は TypeScript あんまり関係ないんですが、Vue.js は既存サイトに少しずつ適用可能と書いてあるじゃないですか。 これがどういうことなのかというのを試してみました。
本当に書きながらやってるのでまとまりありませんが、学習ログってことで。
プロジェクト作成
例えば、超シンプルですが以下のように index.html, css/site.css, scripts/index.js だけで構成される既存サイトがあるとします。（今時ねーよってのは置いといて）
<!DOCTYPE html><htmllang="ja"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>Sample Web site</title><linkrel="stylesheet"type="text/css"href="css/site.css"><scripttype="text/javascript"src="scripts/index.js"></script></head><body><h1>ようこそ！！私のホームページへ！</h1><spanclass="welcome-message">Welcome!!</span><p>あなたは 201923 人目の訪問者です。</p><p>現在は <spanid="clock"></span>です。</p></body></html>
document.addEventListener('DOMContentLoaded', function() { setInterval(function() {var now = newDate(); var message = `${now.getFullYear()}年${now.getMonth() + 1}月${now.getDay()}日${now.getHours()}時${now.getMinutes()}分${now.getSeconds()}秒`; document.getElementById('clock').innerText = message; }, 1000); });
html{width: 100%; }body{width: 100%; text-align: center; }.welcome-message{font-family: monospace; font-size: 24pt; background-color: yellow; color: red; }
よくあるこんな感じですね。
これに Vue.js を一部当て込んでみましょう。
Vue.js の CLI でこんな感じで TypeScript のプロジェクトを作ります。
$ vue create vue-item Vue CLI v3.4.0 ? Please pick a preset: Manually select features ? Check the features needed for your project: TS ? Use class-style component syntax? Yes ? Use Babel alongside TypeScript for auto-detected polyfills? No ? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files ? Save this as a preset for future projects? No
出来上がったら public フォルダーにサイトの中身をごそっと入れます。
そして id が app の div タグを追加。
<!DOCTYPE html><htmllang="ja"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>Sample Web site</title><linkrel="stylesheet"type="text/css"href="css/site.css"><scripttype="text/javascript"src="scripts/index.js"></script></head><body><h1>ようこそ！！私のホームページへ！</h1><spanclass="welcome-message">Welcome!!</span><p>あなたは 201923 人目の訪問者です。</p><p>現在は <spanid="clock"></span>です。</p><divid="app"></div></body></html>
npm run serveしてみて結果を確認。なんか違和感を感じる見た目だけど動いた。
ん？でも
でも create-react-app で作ったやつも同じ手順でこんな見た目のが出来ますね。
ということは？
特別な JavaScript をビルドするような構成無しで以下のように追加できるのが、既存サイトに少しずつ適用可能ってことなのかな。
<!DOCTYPE html><htmllang="ja"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>Sample Web site</title><linkrel="stylesheet"type="text/css"href="css/site.css"><!-- <script type="text/javascript" src="scripts/index.js"></script> --></head><body><h1>ようこそ！！私のホームページへ！</h1><spanclass="welcome-message">Welcome!!</span><p>あなたは 201923 人目の訪問者です。</p><p>現在は <spanid="clock">{{ message }}</span>です。</p><scriptsrc="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><scripttype="text/javascript"src="scripts/vueclock.js"></script></body></html>
んで vueclock.js はこんな感じ。
function generateMessage() {var now = newDate(); return `${now.getFullYear()}年${now.getMonth() + 1}月${now.getDay()}日${now.getHours()}時${now.getMinutes()}分${now.getSeconds()}秒`; }new Vue({ el: '#clock', data: function() {return{ message: generateMessage(), }; }, created: function() {varself = this; this.handle = setInterval(function() {self.message = generateMessage(); }, 1000); }, destroyed: function() { clearInterval(this.handle); }, });
実行結果は最初と同じでこんな感じです。
