CSS は後回しにしても良い

CSS は後回しにしても良い

Web 開発の基本は、HTML/CSS/Javascript です。基本的にどれも勉強しなければいけないのですが、優先度を考えると後回しにできる物もあります。Web アプリを開発する場合には、CSS は後で学習する事にしても良いもの一つです。

Web ページを作るには必要

Web ページを作る際には、HTML と CSS は必要です。これは、目的が「Web ページ」を作ることにあるためです。HTML だけでは、ページの細かい装飾ができないので、どうしても CSS を使って体裁を整える必要があリます。

一方で、Web アプリの開発を考えた場合は、少し話が違ってきます。 Web 開発でも、最終的なページの体裁を整える場合には、CSS を使う必要があります。しかし、当面の目的は、「機能」の実現になるので、HTML と Javascript を中心に進めた方が効率的です。

多少、体裁が悪くても機能は検証できるので最初は、HTML と Javascript で CSS は後回しにするか、最低限の利用でも問題ありません。

CSS は手抜きもできる

もう一つの理由は、Web アプリの開発の場合は、ある程度、手抜きができます。 Bootstrap などを利用すると、CSS の細かい部分を知らなくてもある程度の体裁を簡単に整える事ができます。基本的な CSS の記述を Bootstrap が提供してくれているので、細かい記述は書く必要が無いからです。もちろん、Bootstrap などでカバーされない部分もあるので、最終的にはその部分は CSS を使って記述する必要があります。

しかし、かなりの労力を節約する事ができます。

また、「学習する事が増える！」と思うかもしれませんが、Bootstrap は、記述例が Bootstrap のサイトにあります。この記述例は、CSS ではなく、HTML の記述例です。

CSS の記述は、Bootstrap が既に、記述して提供しているので、それを指定して読み込むだけで利用できます。記述例は、その CSS の記述をどのように HTML で利用するかの例になっています。 これを見ると、Web プログラミングで必要な基本的な HTML の書き方が分かるというわけです。

つまり、学習する事が増えるというよりは、とても便利な例題を学ぶ事ができるという事になります。 これをマスタすれば、基本的な HTML は取り敢えずカバーできると思います。

まずは HTML！

取り敢えず、安心して CSS を後回しにできるという根拠はお分かりいただけたでしょうか？ では、HTML と Javascript を中心に学習を進めれば良い事になります。

フロントエンドのフレームワークを利用する場合には、HTML の基本をマスターする事が重要です。 理由は簡単で、フロントワークのフレームワークは、表示する物を「部品化」するというのが基本的なコンセプトになっているからです。

「表示する物」を表現するのが HTML という事になるので、まずは HTML が出発点になります。Web ブラウザで動くプログラムを作成する基本になります。この方を Bootstrap のサンプルを例題にして学習するのが近道です。これも、全て学習するのではなく、必要な部品から学習していけば、実際に学習する部分もそれほど多くはなりません。

表示の体裁もある程度綺麗になるので一石二鳥です。

Javascript の打一歩は？

Javascript を学習するのは、その次になりますが、最初に学習するのは「イベント」処理です。 Web アプリを完成させるためには、データの処理もする必要がある場合が殆どですが、最初に必要なのは、ページに配置した部品の操作です。

例えば、「ボタンを押す」、「文字を入力する」、「必要な項目を選ぶ」などのような、GUI(Graphical User Interface)に関連した操作です。こうした、操作を「イベント」と呼んでいて、このイベントに応じた処理を Javascript で書く必要があります。

データを入力したり、特定の処理を開始するための画面の操作が Web アプリでは必要になるので、その部分のプログラムの書き方をマスターするのが最初のステップです。

純粋な Javascript、React(JSX)、Vue が採用している HTML の形式は微妙に違っていますが、基本は似ています。まずは、この HTML に近い記述の中に、イベントに関係した記述を埋め込んで、それを Javascript と結びつける事が最初のステップです。

例えば、ボタンを押した時の記述は

Vue: <button on:click="clickEvent()">Click</button>;

React: <button onClick={() => clickEvent()}>Click</button>;

のような形で HTML 系の記述をします。結構似ていますよね？あとは、Javascript 側で、「clickEvent()」の処理をする関数を用意するような形になります。

まとめ

Web 開発の学習を、フロントエンドのフレームワークから入る学習方法の場合、CSS は後回しにするというのが一つの方法です。Web アプリのようなプログラムの場合、体裁を整えるより「機能」を作る方が学習の中心になります。つまり、Web ページの作成を目的にする場合とは、少し事情が変わります。

いずれにしても、基本は HTML/CSS/Javascript である事に変わりはないのですが、Web アプリの場合、体裁を整えるのは仕上げでも良いので、後回しにしても良いという事です。

ただし、余り体裁が悪いのも面白くないので、この記事ではBootstrapをお勧めしています。 この、サンプルの記述が HTML の学習にも役立ちます。