プログラミング

[初心者向け]Webサイト制作の始め方

友人にWebサイト制作の始め方を教えてほしいとお願いされたので、一から始める人向けにどうやったらWebサイトを自分で作れるようになるのか簡単に説明してみたいと思う。

ちょっと話がそれますが、たまにプログラミングを始めるにあたって中高年者は厳しいという意見を耳にするが、プログラミングは試験なんかと違って作業中に調べながらコーディングしていくのがごく当たり前で、暗記力をそれ程必要としないので、本人のやる気次第で何歳からでも始めるのに遅いということはないです。

始める前に学んでおくべき事項

 本題に入ります。

まず最初に学ぶべきことはHTMLとCSS。HTMLはサイト上の文章を表示させるのに、CSSは表示のさせ方や装飾なんかに使われます。山ほど教材があるので自分の好きな学習スタイルに合わせて勉強するといいです。Progateは初心者に人気で、自分も使ってみましたが入門としていいサイトだと思います。

CSSについて一言アドレス。FlexboxとCSS Gridを扱えるようになると要素のポジショニングが非常に楽にできるようになります。ぜひともマスターしておきたいです。また、スマホとPCサイトでデザインを使い分けるためにレスポンシブデザイン（media query）についても学習しましょう。

HTMLとCSSは、どのウェブサイトを作るにあたっても必要になりますが、JavaScriptも勉強することでウェブサイト上に動きや機能なんかを持たせることができるようになるので同じく学んでおきたいです。ただ、JavaScriptはかなり奥が深いのでこの段階では基礎の部分まで学習することをおすすめします。

 おめでとうございます。ここまでの知識でウェブサイトは作れます。

ウェブサイト制作の手順

ウェブサイト制作の取っ掛かりとして、最初にHTMLで必要となる文章を埋めていきましょう。次にCSSでポジショニングや装飾を行っていきます。

この際ブラウザに組み込まれているデベロッパーツールを利用するとCSSの編集がかなり楽になります。「デベロッパーツール　使い方」で検索すると使い方の記事が多数見つかるので一度目を通しておきましょう。

作業を進める段階でわからないところが出てきたら積極的にGoogle検索を駆使していきます。ウェブサイトでよく見かけるパーツがあるけど名前がわからない場合、Bootstrapのリファレンスが参考になるかもしれません。一度コンポーネントにある項目すべてに目を通すと調べたい名前がわからない問題をある程度解決できると思います。

ある程度仕上がってきたら、一度自分の書いているHTMLとCSSが文法的に正しいか検証することも大事です。この記事が参考になります。

ウェブサイトページの高速化にあたってはPageSpeed Insightsが参考になります。インターネット上にページを公開後に利用してみましょう。Chromeブラウザを利用している場合、デベロッパーツールにあるAudits, Lighthouseが同等の機能を持っているので使ってみましょう。

（応用）ウェブサービスを作りたい場合

たとえば家計簿ウェブサイトとか、もっと機能的なサイトを作りたい場合、JavaScriptの応用(ES6)とフレームワークの学習がほぼ必須になってきます。自分はReactを普段利用していますが、頻繁にバージョンアップされており、日本語の書籍が出てるころにはもう既に新しい記法が導入されていたりするので日本語で学習するのであれば公式ドキュメント
が一番です。他のリソース（動画やブログ記事）で学習したい場合は英語コンテンツとなりますが、プログラミングに使われる英語は比較的簡単なので基本的な英語がわかればついていけると思います。自分はよくYouTubeで学習しているのでいくつかおすすめのチャンネルを紹介します。

The Net Ninja
あるテーマに対していくつかのパートに分けて動画を投稿しているので、学習しやすい。英語も聞きやすくておすすめ。FlutterやReact Nativeを使ったアプリ開発の動画も上げてます。

Traversy Media
こちらも英語が聞き取りやすくおすすめ。ウェブ系の動画が大半です。

学習の仕方としては、実際に動画の通りに何か作ったら、それをベースに機能拡張させていくと、その過程で大きく学習効果を高めることができるのでおすすめ。そこから新たな学びがあるし、自然と復習することにもなるしね。