Vue.jsでwebアプリを作ろう#02(準備編)

濱口まさみつ

2020年2月26日 09:00

こちらはJavaScript中級者向けの記事となります。前提として、HTML/CSSとJavascriptの基礎知識をお持ちの方が対象です。

前回はvue.jsの導入をしました。

1.BootstrapをCDNで導入

webアプリを作るためにデザインも整えていく必要があります。そこでBootstrapのCSSとJSもCDNを使って導入しておきましょう。

Bootstrap4.2 はじめにのページから

CSSのCDNリンク

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

JSのCDNリンク

こちらの二つのリンクを<head></head>(CSS)

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

<body>の終わりタグ</body>の前に（JS）のCDNを記載します。

導入後のコードを下記に記載します。前回のvue.jpを導入したコードもお忘れなく記載ください。

<!DOCTYPE html>
<html lang="ja">
<head>
 <meta charset="UTF-8">
 <title>Vue App</title>
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
</head>
<body>
	<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
	<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</body>
</html>

これでアプリ作成の準備ができました。

試しにHTMLで見出しを作って名前を表示してみます。

<script>
    var app = new Vue({
    
    }) ;
</script>

【el: 】(elements) HTMLのターゲットとなる要素を指定します。ここでは、appというIDを持つ要素としております。

【data: 】ドキュメントに表示するデータを作成します。そこにnameというキーでHamasanという値を保持してもらいます。

<script>
    var app = new Vue({
        el: '#app',
        data: {
            name: 'Hamasan'
        }
    }) ;
</script>

こちらのデータオブジェクトをHTMLに表示させてみましょう。

ターゲットとなるIDを指定するので、<div>タグでidを指定して、見出し<h2>のなかに先ほど作ったオブジェクトのnameを表示させます。Vue.jsのテンプレート構文を使用して、{{}}二重波括弧の中に記述します。下記のように記載します。

<div id="app">
    <h2>{{ name }}</h2>    
</div>

2.mt-4をbodyタグに追加する

全体を中央寄せにしたいので、containerクラス(bootstrap)とマージンを上に入れるクラス(mt-4)をbodyタグに追加します。

全体のコードは下記になります。

<!DOCTYPE html>
<html lang="ja">
<head>
 <meta charset="UTF-8">
 <title>Vue App</title>
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
</head>
<body class="container mt-4">
	<div id="app">
		<h2>{{ name }}</h2>
	</div>

	<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
	<script src="https://cdn.jsdelivr.net/npm/vue"></script>
	<script>
		var app = new Vue({
	        el: '#app',
	        data: {
	            name: 'Hamasan'
	        }
   	}) ;
	</script>
</body>
</html>

実際の表示はこちらになります。

スクリーンショット 2020-02-09 20.34.51

これで準備が完了しました。次回から、簡単なTodoリストのアプリを作っていきます。

今日は以上です。

Twitterではブログに書いていないこともつぶやいているので、ぜひフォローしてください。
https://twitter.com/HAMA3san

ストリートアカデミーで毎月講座を開催中。
https://www.street-academy.com/steachers/198346

note専用コミュニティへの招待について

https://note.mu/hamasan918/n/ne4d98f9db9ec

note専用コミュニティ、作成しました。コミュニティでは質問などを受け付けています。毎月500円となります。

この記事が気に入ったらサポートをしてみませんか？