【漫画で解説】Webアプリってなあに？

みんな！HTMLを書いているかな？

https://gyazo.com/a3521b003d20730b77623495e44f6f75

HTMLってすごいよね！

適当に以下のように書くだけで、かっこいいページができるんだ！！

code: 01.html

<html>

<body>

<h1>わーいわーい</h1>

</body>

</html>

これをパソコンに保存して、ブラウザで開くと、下記みたいな格好いいことになるんだ！

https://gyazo.com/f32b4744c260c99df58b984f0acd86f5

うわー！かっこいい！

ところで君はウェブアプリというものを知っているかな？

この「わーいわーい」という部分をJavaScriptというもので動かして、

楽しいものや便利なものを作ることができるんだ！

例えば下記のようなコードを書くと…

code: 02.html

<html>

<body>

<h1 id="message">わーいわーい</h1>

<button onclick="changeMessage()">ぼたんだよ</button>

function changeMessage(){

document.querySelector("#message").innerText = "ほーいほーい";

}

</script>

</body>

</html>

こうやって、ボタンをクリックすると見た目がかわるんだ！

https://gyazo.com/b3e475240fd869d35ea71d23c90ea37e

この「<script>」という印でくくられた部分が、「JavaScript」だよ！

どういう風にこれが動いているかというと…

code: 02-1.html

<button onclick="changeMessage()">ぼたんだよ</button>

まず、ボタンくんは自分が押されたときに何をしないといけないのかを

「onclick」に続けて指定されているよ！

https://gyazo.com/14a18f92bbc935142b0413781bb35931

そして、下記の部分は「message」という名前のついた場所に、「ほーいほーい」という文字列を埋め込んでいるんだ！

code: 02-2.html

function changeMessage(){

document.querySelector("#message").innerText = "ほーいほーい";

}

https://gyazo.com/80c72ebc29b70c5f74f66a3970ab1e4f

こうやって、動きのあるページが作れるんだね！

これを使って、どんな便利なものが作れるかって？

例えば以下のようなものは簡単につくれるよ！

ラーメンタイマー

お買い物リスト

https://gyazo.com/554d0ef0e7a21d13c353ea03052d1df0

このラーメンタイマーを一つ千円で１０万人に売れば、億万長者になれるよ！

youtuberになるよりは可能性あるかも！！！

でも…

いままで見たとおり、すごい簡単なものを作るにも、結構たくさんキーボードを打たないといけないよ！

それじゃあyoutuberになったほうが楽じゃん！！！！！

ってなるね！

でも心配ないよ！

Vue.jsを使えば楽だから…

querySelectorとかinnerTextみたいな、長くてめんどくさい英語を今は覚えなくてもいいよ！

Vue編につづくよ！

【漫画で解説】Vue.jsで楽をしよう！