最近妙に忙しいぞ、と思ったら、めちゃくちゃ仕事しとるんやないけ！
まったく呆れるほどのワーカホリックです。
思い返してみると、ここ数ヶ月、週に２，３本ぐらいのホームページを作っている。
仕事ばかりじゃなく、自分の会社のサービスページも含めてだけど、とにかくWebページ100本ノック状態を実行中なのである。
そして最近更に自分のホームページコーディングテクニックが増してきたように感じたので、
Webサイトコーディングが苦手な人に向けて、自分なりのコツを書き残しておきたいと思います。
フレームワークなんか無意味
個人的にフレームワークは時間の無駄と感じています。
たくさんあるフレームワークで、ホームページの代表格は、「Wordpress」でしょう。
Wordpress
他にも、フレームワークというと、
Reactや、
Next.js、
Vue.js、
Django・・・
とにかく膨大な量の便利フレームワークが大量に存在します。
どれも、任意のサーバーサイド言語のライブラリ集になっていて、それぞれ方言に誓い特殊仕様を持っていて、それが便利かどうかという無駄な議論が日々SNSなどで行われているようです。
所詮他の人が考えたホームページ作りの便利ツール。
それが自分に合うかどうかは、自分次第だけれど、そもそものHTMLやCSSなど基本スキルがないままこうしたフレームワークを使うと、フレームワークに存在しない機能が求められた時に破綻してしまう。
そして、HTMLとCSSの基本スキルを完璧に身に着けると、もはや自分で書いたほうが早い現象が発生し始めてしまいます。
こうして、素でテキスト入力したホームページは、最強のフレームワークへと成り上がっていくことになります。
一周まわってテキストエディタ最強みたいな感じになるんですよ。
ちなみに、ユゲタは10周目ぐらいの感覚です。
少なくても1周目の人にこの手の話をしても通じないことも十分理解しています。
デザインとコーディングは鶏と卵
ホームページ制作で重要な要素を占める、
ページデザインは、経験と知識とテクニックが必要です。
XDやFigma、最近ではCanvaで、サクッとデザインを作って仕事をサクサク進める人も多いと思いますが、
ガッチガチのサイズ指定（ブラウザの幅指定）などが固定されているデザインであれば、問題ないですが、
ホームページは基本的に、
リキッドデザインとレスポンシブデザインで構築しなければ、使い勝手が良いホームページとは言えないため、固定のデザインを作成した時点でもデザインFIXは50%もできていないことになります。
この時点で、クライアントOKをもらったとしても、その後のコーディングでやり直しが発生したり、デザインのやり直しになるケースは少なくありません。
ということで、ユゲ式テクニックとして、HTMLコーディングでデザインを作り上げるようにしています。
「それって、もう、デザイン確認のレベルじゃなくて、本番やんけ！」
と考えた人、そうです、OKがでたら、すぐに納品できちゃいます。
でも、確かに簡易デザインをコーディングじゃなくて、アプリケーションで構築するのも悪いわけではありません。
だって、テイストの確認などは必要ですからね。
このサジ加減が難しいので、ホームページ作りは、クライアントの顔色を伺いながら行う必要があるんですよ。
最初にデザインの画像データを作るか、コーディングで進めるか、この見極めって重要なんですよね。
環境つくりの極意
デザインがFixしようがしまいが、コーディング作業はホームページ作りには必須です。
その時に、どういった環境が必要かと言うと、windowsかmacのパソコンとVScodeがあれば、ホームページは問題なく作れます。
開発用のサーバー・・・いらんいらん
スペックの高いワークステーションPC・・・いらんいらん
高速なネット回線・・・いらんわけではないが、無くてもできる。
メモ帳や、他のテキストエディタじゃなくて、VScodeを使っているのは、プロジェクト管理の便利さと、使い慣れエディタのためです。
別に他のテキストエディタでも良いんですが、世の中の多くのディベロッパーがVScodeを使っていることを考えると、これがベスト環境と言えるでしょう。
VScodeのLiveServerというプラグインをいれておけば、httpアクセスも簡単にできてしまうし、Gitなどの操作もできてしまいますからね。
便利すぎて踊りだしたくなります。
HTMLの極意
VScodeで「Shift + !（エクスクラメーションマーク※びっくりマークの事）」をショートカットで使うと、簡単にHTMLのテンプレートがテキストに表示されます。
これが結構便利で、他にもよく使うコーディングなどをテンプレ化しておくと、コーディングが捗ること間違いないでしょう。
※テンプレートの登録は以下のサイトの通りに行うと簡単にできます。
参考 :
【早めにつけたいVSCode習慣】何度もよく使うコードのテンプレートはスムーズにコードスニペットへ！
ちなみに、VScodeの基本HTMLテンプレートを自分用にカスタマイズしたものが以下のコードです。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title</title>
<link rel="shortcut icon" type="image/svg+xml" sizes="32x32" href="favicon.svg">
<link rel="stylesheet" href="css/style.css"/>
<script type="module" src="js/main.js"></script>
</head>
<body>
<header></header>
<main> </main>
<footer></footer>
</body>
</html>
cssとjavascriptの外部ファイルは、headタグの中で、それぞれベースファイルを参照して、それ以降はそのファイルから連動して読み込むようにすることで、ホームページ制作時はほぼ固定化することができます。
あと、ほとんどのホームページの表示部分は、次の構造にすることで、便利に管理することができます。
<header></header>
<main> </main>
<footer></footer>
メニューやロゴなどのヘッダ部分は、headerタグ
ホームページのそれぞれの内容部分は、mainタグ
フッタは、footerタグ
よほど、トリッキーなページじゃなければ、これで十分です。
あと、SNS対応など十分にしたい場合は、OGPタグや、descriptionのmetaタグなどを書き込んだテンプレートを作っておくと、かなり実践的です。
結構誰もがナメているHTMLコーディングも、自分でテンプレートを作る効率化と、その中のDOM構造などは、ある種のデザイン的なセンスも必要になるので、
他人のコードを良く読み込んだり、人にレビューをしてもらうことで、スキルアップすることが重要ですね。
CSSの極意
cssの基本は、style.cssに始まり、数珠つなぎに連動させていくファイル管理にあります。
数珠つなぎにするために、@importを使うワケですが、
ページ速度を改善したければ、開発時には、cssをページ毎、パーツごとに分けたファイルを@importさせて、
本番では、それらを１つのファイルにまとめて、style.cssのみでやることで、簡単に速度改善も心配がいらなくなります。
さらに、ファイルを分ける場合に、header/やmain/などのフォルダ分けをすることで、テキストエディタの見た目的にもわかりやすいし修正もし易い環境構築になります。
CSSのプロパティや、色々な表現のテクニックなどは、その都度学習していくことで経験値とデザインテクニックをスキルアップすることができます。
最近よく感じるのは、読み込み用のfontや、レスポンシブ用のハンバーガーメニューは一つ汎用的なものを作っておくと、非常に便利に使い回せます。
あと、
flex-boxをマスターしておくと、
どんなデザインであっても、レスポンシブ対応も含めて、できてしまうので、これは重要ですね。
CSSコーディングに慣れていない人は、Bootstrapなどの、CSSフレームワークを使ってなんとかしようとしますが、この手のフレームワークは、DOM構造やらclass属性が煩雑になりがちなので、できれば自己整理できる方法を採用することがオススメです。
Javascriptの極意
ホームページで唯一使える動的プログラミング言語は、Javascript一択です。
ということは、何か特殊なプログラミング操作をホームページでやりたい場合は、Javascriptを使うしかありません。
そして、Javascriptを制するものは、ホームページを制すると言い切っても過言ではないでしょう。
Javascriptで何がどこまでできて、何ができないのか？
PHPや、Python、Nodejsなどの、サーバーサイド言語と連動することで、どういった事ができるようになるのか？
ページ内のイベント操作や、他のページで実現できている技術などを理解することで、
アプリケーションばりのホームページなどは、意外と簡単に作れてしまいます。
ゲームや、便利ツールなどが作れるようになると、ホームページのカルーセル処理や、フォームアクションなどは、子供の遊びのようにも感じるようになるかもしれませんよ。
そして、Javascriptもclassを使うのが当たり前になってきた現在環境において、type="module"でimport,export処理で、便利なオブジェクト思考構造を作ることで、
かなり本格的なコーディング環境と、拡大、改善などに適した構造体を作ることができるでしょう。
あとがき
今回は、基本概念的な極意を個人的な視点で書いてみましたが、どれも深いことを書いていないので、モヤモヤする人もいるかもしれません。
実際にどうしたらいいの？という人は是非、ユゲメンターを採用してみてはいかがでしょうか？
きっとあなたのホームページ作りとスキルアップに役立つかもしれませんよ。
ご希望の方は、お問い合わせフォームで、「メンター希望」と書いて送信してください。
この極意が良いともう人が果たして何人ぐらいいるかは正直わかりませんが・・・
