見出し画像

【入門の入門】WEBシステムの作り方

PK_RNX_ずんだもん博士(数物系)

みなさんこんにちは、ずんだもん博士なのだ。プロフィールに「プログラミングにも興味があります」なんて言って、なかなかプログラミングの記事を書いてませんでしたね。

ってことで今回はWEBシステムを公開するまでの手順をすんごいザックリ説明することを試みます！

今回は昔懐かし個人ブログみたいなものを…つまり、HTMLとCSSで完結する簡単なものを作る想定で解説してみましょう。とはいえ、全部を解説しきるつもりはないですし、そういう個人ブログみたいなのはSNSでやればいいって感じはあるので、あくまでWEBシステムの一例ですね。みんなは作りたいものを作ったり、作れといわれたものを作らされてね！


まず何を作るか

最初は何でもいいでしょう。昔懐かしの個人ブログみたいなのでもいいでしょうし、プチ$${\mathbb{X}}$$みたいな短文投稿サイトでもいいでしょうし。自分が興味を持ったものを作り上げましょう。一つ大事なことは、「すごすぎるものをいきなり作ろうと思わない方がいい」ってことです。何か一つを作り切る体験が重要です。なお僕。

ちなみに短文投稿サイトは初心者的には難しめかもしれません。ログインなどでユーザーを特定して、その人の投稿をログイン情報に紐づけして保存したり、フォロワーのTLを表示したりする方法を、何かしらで実装する必要があるからです。でもまぁこう言ってみるとどれも基本的なことですね。現代的なプログラマとしては、この辺までを全部自力でできるようになれば脱初心者と言ったところでしょうか。

HTML

HTMLはウェブページの「骨組み」を作るための言語(?)です。絵画でいえば線画ですね。そこにCSSで色を塗っていくイメージです。ちなみに言語(?)と言っているのは、一般的にはHTMLはプログラミング言語ではないとされるからです。if文で「この場合はこう表示して、あの場合はああ表示する…」とか、「ループして同じようなものを繰り返し表示する」みたいなことが(基本的には)できないからです。

タグ

さて、HTMLで最初に覚えることはたった一つ、タグです。HTMLは基本的にすべて以下の構造で書かれています：

<タグ名>内容</タグ名>

上記のように書けば「タグ名」に対応する役割の機能が「内容」の部分に働いて、表示してくれます。これを組み合わせて複雑なウェブページの「骨組み」を組んでいくのです。

タグは単純に並べたり：

<タグ名1>内容1</タグ名1>
<タグ名2>内容2</タグ名2>
<タグ名3>内容3</タグ名3>

入れ子にすることもできます：

<タグ名1>
  <タグ名2>
    <タグ名3>内容</タグ名3>
  </タグ名2>
</タグ名1>

タグにはもちろん種類があり、皆さんおそらく「でも、いっぱい覚えなきゃいけないんでしょう？」とご不安かもしれません！でもご安心ください！今時はCSSフレームワークやjavascript等がなんでもやってくれるので、覚えなきゃいけないタグも少なくて済みます。マニアックなタグはバサッと僕の独断で削って、覚えるべきタグを一覧化してみました。

  1. html

  2. head

  3. title

  4. body

  5. div

  6. img

  7. a

ざっと6つ紹介したのですが、1～4はもはやおまじないで書いておくものに近いです。なので実質divとimgとaだけです。

divというのは多分divisionの略で、コンテンツとコンテンツの線引きをする程度の役割があります。これは極論なんですが、いまウェブページのHTMLはdivとimgとaだけで作れます。ワンチャンaも不要です。あとはCSSとjavascriptが何とかしてくれます。例えばこんなふうに：

<!DOCTYPE>
<html>
  <head>
    <title>ずんだもん博士の日常ブログ</title>
  </head>
  <body>
    <!--ヘッダ-->
    <div>
      <div>ずんだもん博士の日常ブログ</div>
      <div>
        <div>X</div>
        <div>note</div>
        <div>YouTuve</div>
      </div>
    </div>
    <!--コンテンツ-->
    <div>
      <h1>ブログ</h1>
      <!--2025/01/01-->
      <div>
        <div>
          <h2>あけましておめでとうございますなのだ！</h2>
          <div>2025/01/04</div>
        </div>
        <div>
          あけましておめでとうございます！今年もよろしくなのだ～。
          今年は就職活動頑張るのと、基本群シリーズ動画の完結、
          そして数学書の積読を2冊以上消化するのを目標とするのだ！
          h同境定理と数論幾何入門ね！
        </div>
      </div>
      <!--2024/12/31-->
　    <div>
        <div>
          <h2>よいお年を！</h2>
          <div>2024/12/31</div>
        </div>
        <div>
          今年はいろんなことにチャレンジした年だったのだ。
          基本群シリーズ動画を作り始めたし、noteも始めてみたのだ。
          今日はのんびりYouTubeで推しのライブを見て年を越すのだ～。
        </div>
      </div>
      <!--2024/12/30-->
　    <div>
        <div>
          <h2>大掃除！</h2>
          <div>2024/12/30</div>
        </div>
        <div>
          年末の大掃除を済ませたのだ！
          お財布がカードでパンパンだったので、デジタル化できるものは
          全部デジタル化するなどしたのだ。ポイントがいっぱい入ったので、
          ちゃっかりずんだもち買っちゃったのだ！
          <img src="/img/202401230/zundamochi.png"/>
        </div>
      </div>
    </div>
    <!--アーカイブ-->
    <div>
      <a>2025/01/01</a>
      <a>2024/12/31</a>
      <a>2024/12/30</a>
    </div>
  </body>
</html>

divとimgとaだけ言いつつ、他のタグも出てしまいました。

  • <!DOCTYPE>

  • <!--ちょめちょめ-->

  • h1、h2

まず<!DOCTYPE>というタグ(?)が登場していますが、これをちゃんと理解している(日本の)エンジニアは少ないです。なので初心者はスルーしましょう。おまじないってやつです。一言解説するとすれば、ブラウザに「このファイルはHTML5というスタイルで書いてますよ！」って教えてあげるコードです。

<!--ちょめちょめ-->と書くと、ソースコードに対するコメントが書けます。業界用語でコメント(アウト)というのですが、これはブラウザに表示されることはありません。が、例えばみなさん、ブラウザでキーボードのF12キーを押したことありますか？あそこにHTMLのソースコードが見れちゃうんですが、そこには表示されちゃいます。なので悪口とか誹謗中傷とか書いたりしちゃダメよ。

h1、h2タグは見出しを作る機能です。例えば今読んでるこの部分は「HTML」っていう大見出し（多分h1タグ）の中の、「タグ」っていう小見出し（多分h2タグ）の内容なわけです。

画像を貼る機能のためにimgタグは画像を貼る機能です。指定した場所に画像を貼ることができます。どの画像を引っ張ってくるかっていうのを、src属性というもので指定しています。一般に、タグが<img/>と書かれている中に、<img src="~~~"/>というふうに書かれている「src」などを、そのタグの属性と言います。

aタグはリンクを作る機能です。上記のソースのままだと機能しないですが、href属性というものを追加するとリンクとして機能するようになります。例えばこんな感じ：

<a href="https://blog.phd_zundamon.com/20250101">2025/01/01</a>
<a href="https://blog.phd_zundamon.com/20241231">2024/12/31</a>
<a href="https://blog.phd_zundamon.com/20241230">2024/12/30</a>

あとは箇条書きを作るul、olタグとliタグの組み合わせなどもありますが、まあ今時はCSSでどうとでもしちゃうのが主流ですかね。役割を終えつつあるタグだと思います。まあ使ってラクになるなら全然使っても良いんですけどね。

また、会員登録みたいな機能を作りたいってなったとき、「名前」「フリガナ」「生年月日」「メールアドレス」「電話番号」なんかを入力するフォームが必要ですね。この機能はさすがに超初心者向きっていう感じではないので、いつかまた解説しましょう。

属性

例えば<div class="~~~">って書きますと、いうなれば「divタグにclass属性を付与した」という行為をしたことになります。

初心者が覚えるべき属性もそこまで多くないです。パッと思いつくのは以下でしょうか：

  1. id

  2. class

  3. href

  4. src

hrefやsrcについてはすでに解説ずみですね。

id属性は例えば<div id="main_content">などと書くんですが、こう書くとそのdivタグに、htmlファイルの中で一意の「main_content」という名前を付けたことになります。htmlとしてはそれ以上でも以下でもなくて、これはcssやjavascriptでそのタグをidで特定するために使用されます。id属性はすべてのタグに付けることができるんですが、そこに付けることができるidは原則そのファイルで一意じゃないといけないです。ただ間違えて同じ名前を複数のタグに付けても、いきなりバグって「500 Internal Server Error」みたいなことにはならないことは安心してください。ただ、CSSやjavascriptの兼ね合いを考えると、それは良くないことです。

class属性は現代ウェブアプリ開発で最も酷使される属性の一つと言えましょう。役割としてはid属性と同じで、cssやjavascriptがそのタグを特定しにいくために使われるんですが、複数のタグに同じclass名を付けることが可能です。cssやjsは大抵の場合、このclass名に紐づくすべてのタグに対して影響を及ぼします。このことによって何がうれしいかというと、ウェブサイトの統一感を出せます。つまり、同じ役割のタグ、例えばさっきのソース例でいえば、例えば

<!--2025/01/01-->
<div class="diary">
  <div>
    <h2>あけましておめでとうございますなのだ！</h2>
    <div>2025/01/04</div>
  </div>
  <div>
    あけましておめでとうございます！今年もよろしくなのだ～。
    今年は就職活動頑張るのと、基本群シリーズ動画の完結、
    そして数学書の積読を2冊以上消化するのを目標とするのだ！
    h同境定理と数論幾何入門ね！
  </div>
</div>
<!--2024/12/31-->
<div class="diary">
  <div>
    <h2>よいお年を！</h2>
    <div>2024/12/31</div>
  </div>
  <div>
    今年はいろんなことにチャレンジした年だったのだ。
    基本群シリーズ動画を作り始めたし、noteも始めてみたのだ。
    今日はのんびりYouTubeで推しのライブを見て年を越すのだ～。
  </div>
</div>
<!--2024/12/30-->
<div class="diary">
  <div>
    <h2>大掃除！</h2>
    <div>2024/12/30</div>
  </div>
  <div>
    年末の大掃除を済ませたのだ！
    お財布がカードでパンパンだったので、デジタル化できるものは
    全部デジタル化するなどしたのだ。ポイントがいっぱい入ったので、
    ちゃっかりずんだもち買っちゃったのだ！
    <img src="/img/202401230/zundamochi.png"/>
  </div>
</div>

っていう感じでclass名「diary」を付けていくと、それぞれにcssやjavascriptから同じスタイル(見た目)が適用されます。これが大きな利点なのです。

classの最大の特徴は、半角スペースによって複数のクラス名を付与することができることです。例えば<div class="card diary">などとすると、cssやjavascriptに紐づくスタイルや処理のうち、「card」と「diary」に紐づいたものが当該divタグに適用されます。こうみると、「タグにclassという名前を付ける」というよりも、「classに紐づいているcssやjavascriptのスタイルをタグに付与する」という目的で使われるように思います。どの目的で使うかは実際には自由なのですが、僕は後者の感覚で使っています。

htmlに関してはこれくらいで十分ですかね。あと必要なことがあればmdn web docsをあさったり、ググったり、ChatGPTなどに尋ねてみるのがいいでしょう。

CSS

CSSはhtmlファイルをブラウザが表示するときの、その見た目を調整・指定するためのファイルです。例えばこんなふうに書きます。

body {
  padding: 10px
}

#main_content {
  padding: 5px;
}

.diaries {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  grid-gap: 20px;
}

.diary {
  display: grid;
  grid-template-rows: max-content 200px 1fr;
}

.diary img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

まず1～3行目ですが、「body」や「a」のように、いきなりタグ名を書くと、そのタグ全体にスタイル(見た目)が適用されるようになります。今回はbodyタグにpadding: 10pxを指定しているので、画面の際ッ際まで文字などが来ないようにすることを期待していますね(効くか自信がない)。paddingについては各自調べてみてください。

次に「#main_content」と書いてますが、そこに指定されたスタイル(見た目)が、id="main_content"属性が(上から読んで最初に)指定されたタグに適用されます。ここではpaddingという、そのタグが指定する範囲の「内側の余白」を5pxに指定しています。

「.diary」と書くと、そこに指定されたスタイルがclass属性に「diary」を含むすべてのタグに適用されます。これがidとclassの大きな違いです。この機能によって、ウェブアプリの統一感を演出することが簡単になります。

役割としては、htmlは内容をタグにカッチリ分けることに集中し、CSSがその見た目や配置すら決めることが多いです。もちろんhtmlの段階で適切に要素を配置していればcssも楽になりますが、例えばhtmlの一番下に書かれている要素をブラウザ上に表示したとき一番上に持ってくることすらcssは可能なので、後からどうにでもできちゃいます。

CSSフレームワーク

といいつつ、今となってはもはやcssをじかに書くことすら少ないです。最近はCSSフレームワークというものがあって、それを使ってスタイルをバシッっと決めることが多いです。CSSフレームワークには例えば

  • bootstrap: 由緒正しい歴史あるフレームワーク

  • bulma: bootstrapと似たような感覚で使えるフレームワーク

  • Angular Material: Angularというhtml+css+jsをひとまとめで構築できるフレームワークで使えるCSSフレームワーク。いわゆるマテリアルデザインが簡単に使えるけど、Angularとtypescriptに通じてないと簡単には感じないかも。

なんかが有名です。これをぶち込むと、良い感じのスタイルが詰まったclassが既に用意されているので、例えば


<div class="card">
  <div class="card-header">
    <h2 class="card-header-title">大掃除！</h2>
    <time>2024/12/30</time>
  </div>
  <div class="card-content">
    年末の大掃除を済ませたのだ！
    お財布がカードでパンパンだったので、デジタル化できるものは
    全部デジタル化するなどしたのだ。ポイントがいっぱい入ったので、
    ちゃっかりずんだもち買っちゃったのだ！
    <img class="card-image" src="/img/202401230/zundamochi.png"/>
  </div>
</div>

なんて書けば、CSS一切書いてないのに、ブラウザ上にカードのようなものがバチッと貼ってあるような見た目になってくれます。たぶん(今ドキュメントを適当に読んだだけで書いてるので、動作確認とかはしてないです)。css書く必要が今やほぼ無いんですな。

bulmaでcardコンポーネントを使う例。公式サイトより。

…なのでね、僕がcssについて解説できることはあんまりないです。。。余談ですが、よく「CSS完全に理解した」って言ってる人がいますが、たいていの場合、それは日本人エンジニアのスラングです。僕たちが何かに対する理解度を語ったとき、おおむね次のような深さで理解しています：

「これからチュートリアルを読みます！」←本当の初心者
↓
「完全に理解した」←チュートリアルを終えた
↓
「なんもわからん」←技術を十分理解して業務に使えるレベルだが、だからこそその技術が抱えている困難も見えてきた
↓
「チョットデキル」←その技術を作ったのは私です

ちなみに僕、まっこと僭越ながら、CSS完全に理解させていただいております(卑屈)。みんなも基本はCSSフレームワーク一つ決めて、チュートリアルやドキュメントを眺めてみて、使えそう・面白そうと思ったものを使い始めてみると良いと思います。上に挙げた以外にも、サイバーパンクなUIが作れる「augmented-ui」ってのがあります。かなりキワモノですが、だからこそ面白いですね。

僕が初心者にオススメするのはやっぱりbootstrapですかね。なぜなら、後継のCSSフレームワークはbootstrapの「クラス名」をある程度継承しているので、bootstrapが使えれば他のフレームワークにもすんなり移行できるからです。あ、そういう意味ではもはやどこから入門してもいいかもですね。じゃあbulmaかな？(優柔不断)

最低限のCSS知識

とはいえ、フレームワークに頼ってばかりでは、問題に対して柔軟に対応できないです。フレームワーク前提で必要最小限のCSSをChatGPT君に聞いてみました。確かによく使うものばかりですね：

/*文字関連*/
color: red;         /* 文字の色 */
font-size: 16px;    /* 文字サイズ */
font-weight: bold;  /* 太字 */
text-align: center; /* 中央寄せ */
line-height: 1.5;   /* 行間 */
text-decoration: none; /* 下線を消す←基本的にaタグ用 */

/*余白・サイズ関連*/
margin: 10px;   /* 外側の余白 */
padding: 20px;  /* 内側の余白 */
width: 100%;    /* 幅を画面いっぱいに */
max-width: 500px; /* 最大幅を500pxに制限 */
height: auto;   /* 高さを自動調整 */

/*配置・レイアウト関連*/
display: flex;         /* フレックスボックス（中央配置などに便利） */
justify-content: center; /* 水平方向の中央配置 */
align-items: center;   /* 垂直方向の中央配置 */
position: absolute;    /* 絶対位置指定 */
top: 50px;            /* 上から50px */
left: 100px;          /* 左から100px */
z-index: 10;          /* 重なり順を変更 */

/*!importantでフレームワークを上書き。多用厳禁。でも使っちゃう…*/
.btn {
  background-color: red !important;
}

それぞれのプロパティ(background-color)の値などは、ググればすぐ出てきます。

ホームページの公開

さてHTMLとCSSを書き上げたところで、それをどう公開するのかわからないことがあると思います。いくつかやり方はありますが、(おそらく)すべてに共通する重要なことは以下の通りです：

  1. クラウドなり実物PC(いわゆるオンプレ)なり、とにかくPCを用意する

  2. ApacheなりIISなり、何かしら「サーバープログラム」をインストールして実行する

  3. htmlとcssを所定の場所に置く

  4. 80番ポートのTCP受信を開放

  5. 別ネットワークから疎通確認

  6. 繋がらない場合、つながるまでググるなり弄り回すなりしてつながるまで頑張る

PC・クラウドの用意

どうしてもPCを用意するところでお金はかかります。お金をかけずにやるなら、GoogleのFirebaseを使う方法があるようですが、僕は実はよく知らないです。調べれば簡単そうな雰囲気だけ感じ取れています。クラウドといえば、awsやazule、さくらインターネットにHeroku、Oracle Cloudなどがありますな。awsやazuleは高機能すぎて手に余す予感がするかもですが、使わない機能は使わなければいいだけです。基本は従量課金なので、使わなければそこまで費用は発生しないです。初心者は費用が怖いでしょう。でもご安心ください！

awsなんかは確かEC2の小さなインスタンス(t2.microとか)ならアカウント作成から1年間、1か月ずっと稼働させてても無料みたいなのがあった気がします。「1年間1か月分無料ってドユコト？」って思うかもですが、要するに

$$
\begin{align*}
24\times 30 =720\;[\text{時間}]
\end{align*}
$$

分の料金が1年間無料になるってことです。例えば一年間、週一でちまちま使って、1か月分を1年間無料で使うことができますよってことです。

…とまぁ、実際料金まわりはちょっと難しいんですけどね。ただ、料金を理由にそこまでビビんなくていいってのはあります。例えばaws S3っていうストレージに100GBぶち込んだぐらいで何百円もかかんないんじゃないかな？ってぐらいなのでね。よくどこかの記事で「aws失敗談」よく見かけるかと思いますが、「100万円の請求が来た😱😱😱」みたいなのは、よっぽどのドジをしないと起きないです。だからそこまでビビんなくていいです。よっぽどをやらかさないでね。

もし心配なら、例えばawsならLambdaとEventBridgeを組み合わせて日々日々料金をSlackか何かに通知するシステムをサクッと組めます。例えばココではLINEに通知してくれるようにしたみたいです。あと公式でも予測使用料金をモニタリングしてアラートを出してくれる機能があったみたいです。知らんかった…。

初心者はあんまり使わないかもですが、awsのRDSは電源落としても1週間後ぐらいに勝手に起動するので気を付けてくださいね。開発や勉強用に立てたRDSを消さずに残しておきたいっていうときは、これもLambdaとEventBridgeを組み合わせて6日に1回電源上げてすぐ(1時間以内に)切る、ってのを繰り返すタスクを組めば、費用は掛かりません。

サーバーを立てる

もしオンプレやクラウドを選択するとき、Apacheなどのサーバーを無料で使えることが多いです。サーバーというのは、起動しておくとインターネットにPCを繋いでくれて、特定の場所に置かれた特定のファイル(今回はhtmlやcssファイル)の要求(リクエスト)があれば、相手に勝手に送ってくれるというプログラムです。次のポートの概念と合わせて理解してゆきましょう。

ポートの開放

「80番ポートのTCP受信を開放」というのはあるあるなんですが、疎通がうまくいかないときは大抵ここが閉じちゃってます。開け方は、Windowsならココなど。Linux(CentOS)ならココなど。

ポートというのはよく港に例えられます(というか英語では港そのものじゃんね)。例えばIPアドレスをブラウザに打ち込むと、そのIPアドレスに割り振られた、いわば『国』(実際はインターネット上に存在する個々のPC)に向かって船が出航します。

その船は、取引したいモノによって、その国のどの港を使うかを決めるわけですが、httpを取り扱う場合は80番ポートという港を使うという『慣習』(実際にはIANAが管理している事実上の国際基準)があります。そこに「http取引船」がやってくると、その国のApache君やらIIS君やらがえっちらおっちら荷物を積み込んでくれます。積み終わったら帰ってきて荷揚げして、こっち(ブラウザ)で展開します。

ちなみに80番ポートはhttp用によく利用されているというだけで、たまに密売人が80番じゃない港を用意していることもあります。あ、433番はhttps用なので、基本的にはちゃんとしたhttps用の港です。他にも「この通信にはこのポートを使いましょう」みたいな「習慣」(厳密に決まってるわけじゃないけど、みんながそれに合わせちゃったみたいな状態)がいくつかあって、0番から1024番ポートは大体そういうので埋まっちゃってるので、これらを「ウェルノウンポート(well known port)」と言ったりします。

クラウドを使ってる場合、クラウド側がTCP通信をシャットアウトしてる場合もあります。その辺のセキュリティはクラウドごとに異なるとは思うんですが、例えばawsならIAMとかセキュリティグループとかを弄ることになります。大抵は公式ドキュメントが懇切丁寧に解説しているページがあるので、それを読むなり、ググってみたりしましょう。

最後はお祈り？

世の中のデプロイ作業、一番時間がかかるのは大抵、疎通確認ですわな。まず一発ではうまくいかないもんです。なのでちょっと失敗しても安心してください。みんなそうやって大人になっていくのです。色々試行錯誤したり、ググったりして、発狂して「らりるれろ！らりるれろ！」って叫んだりしながらこの作業をします。だから、ここをスルッと通せるエンジニアは中々強いです。

ホームページの公開について、ここまであんまり具体的な解説してないですが、大原則はここまでとなります…し、僕はこれ以上あんまり一般論は語れないです。。。このフェーズで問われるのは経験とググり力です。ちょっと違いますが、日本のインフラエンジニアがサーバー用PCに神棚を載せてお祈りする様子を$${\mathbb{X}}$$で見かけたことがあります。「どうか問題なく動きますように！」って祈るんだそうで。祈祷力も試されるんでございますな。

おすすめの本

WEBシステムを作るからには一回は読んでおいた方がいい(と僕が思っている)本があります。それがこちら

「なぜ、あなたはWEBシステムを開発できないのか」という過激なサブタイトルのわりには、堅実な内容でギャップ萌えです。今あらゆるサービスがインターネットを介して提供され、時々刻々と技術が進歩しているように見えますが、この本には、インターネットというものが生まれてから変わっていないこと、つまりはインターネットの基盤が分りやすく書いています。

いいなと思ったら応援しよう！