あなたの見ているこのサイト、実はWebアプリです。Webアプリといっても、特別なことではありません。
HTML・CSS・JavaScript などのプログラムを組み合わせて、文章を書いたり、見た目を整えたり、ちょっとした動きをつけたりして作られています。
じゃばすく･･･？なんか難しそう･･･
いのっちいえいえ、そんなことないですよ。
ということで、今回はWebアプリの超基本の概念を解説します。おっと、その前に例によってミニコデを起動しながらお読みください。
＼ 今すぐタップ ／
Webアプリの基本的な構造
- ブラウザ（ChromeやSafariなど）
-
サイトやアプリを実行するためのソフトウェアのこと。
- サーバー
-
世界のどこかにあるコンピュータ。Webアプリのファイル（
index.htmlなど）を置いていて、ユーザーからのリクエストに応じて送信する。 - Webアプリ本体（HTML・CSS・JavaScript）
-
画面の骨組み・デザイン・動きを担当。ブラウザの中で動く。
- データベース
-
アカウント情報や投稿内容など、アプリが使うデータを保存しておく場所。サーバーと連携して動く。
ざっくりとした図解になるのですがイメージ的にはこんな形で動いています。
補足ですが、当サイトではデータベースを利用するタイプのWebアプリは開発しません。
データベースを使うと便利なアプリも作れますが、複雑になるのでお手軽に動作させられるクライアントサイドアプリ（雑に説明すると特定のスマホやPCのブラウザのみで動作するアプリ）に特化させています。
HTMLとは、家の「骨組み」みたいなもの
HTMLはHyper Text Markup Language（ハイパーテキスト マークアップ ランゲージ）の略なんですが、HTMLは家で言うところの基礎や骨組みの部分です。
基本的にHTMLがいないとWEBアプリは動作しません。HTMLはHTMLタグというもので囲まれている内容を実行する仕組みになっています。
サンプルでソースコードを載せました。
サンプルコード
<p>HTMLは <strong>ページの土台</strong>。
<br>文章や画像を「ここに置いてね」と決める役割
です。</p>上記のサンプルコードをミニコデで実行すると以下のようになります。
HTMLは ページの土台。
文章や画像を「ここに置いてね」と決める役割
です。
HTMLについては以下の記事でちょっとだけ深堀していますので、是非ご覧ください。
CSSはデザイン担当
CSSはCascading Style Sheets（カスケーディング・スタイル・シート）の略です。
カスケ―ディングとは「段階的に適用する」という意味で、スタイルシートは「見た目の指示書」という意味です。
つまりCSSを使うとHTMLで作成した文章やボタンなどのパーツの色や大きさを変えたり、背景をつけたりすることができます。
サンプルコード
<p><span class="red-text">HTMLは <strong>ページの土台</strong>。<br>
文章や画像を「ここに置いてね」と決める役割です。</span></p>
<style>
.red-text {
color: red;
text-align: center;
}
</style>HTMLは ページの土台。
文章や画像を「ここに置いてね」と決める役割です。
細かい説明は省きますが、HTMLで書いた<p>タグで囲まれた文章を赤くしてセンタリングする内容が書かれています。
こちらに関しても別記事で掘り下げていますので、ご確認ください。
JavaScriptは家を「動かす」装置
JavaScriptは 動きをつける装置みたいなものです。
おそらくはHTMLやCSSと異なり、皆さんがイメージするところの開発言語になります。（※そもそも、HTMLもCSSも正確には開発言語ではなかったりしますが・・・）
Javascriptでは、ボタンを押したら文字が変わる、入力すると結果が出る、そんな仕組みを作れるのが特徴です。
サンプルコード
<p><span class="red-text">HTMLは <strong>ページの土台</strong>。<br>
文章や画像を「ここに置いてね」と決める役割です。</span></p>
<!-- ボタンを追加 -->
<button onclick="changeColor()">色を変える</button>
<style>
.red-text {
color: red;
text-align: center;
}
</style>
<script>
function changeColor() {
// .red-text クラスを持つ要素を取得
const text = document.querySelector('.red-text');
// 青に変更
text.style.color = 'blue';
}
</script>上記ソースの実行結果はこちらになります。
HTMLは ページの土台。
文章や画像を「ここに置いてね」と決める役割です。
こちらも少し掘り下げた記事を用意しておりますので、是非ご覧ください。
まとめ
ということでまとめです。
WEBアプリは世界のどこかにあるサーバーにおいてあり、ブラウザからのリクエストに応じてＷｅｂアプリの本体などをブラウザに送信する仕組みで動作しています。
そして、HTML、CSS、Javascriptを簡単に説明すると以下の役割を担っています。
今回は概念的なところだけ説明させていただきました。
不思議なものでこういう記事を書いていると自分も勉強になったりするものですね。誤解していることとかが整理されました。
因みにWebアプリはHTML、CSS、Javascriptの組み合わせ以外のものもあります。
当サイトではこの3つの言語を利用して開発する方針にしているため、絞ってお話をしています。他にも開発言語はありますゆえ、誤解なきようお願いいたします。
ということで今回はここまで。
残念パパいのっちでした。
では、また！
コメント