はじめる前に知っておきたいこと

1. 複数のWebページである構成されるWebサイトの制作を自ら行う2つの方法

Webサイト制作は、次の2つの方法に分けられます。一つ目は、Webプログラミング言語を学び、エディタで手入力を行ってWebページを作成して行く方法で、二つ目はWordPressに代表されるデータベースを組み込んだCMS（コンテンツ管理システム）を利用したWebサイトを構築して行く方法です。

2. Webサイト制作を行う時に使用するPCは何が良いのか？

Webプログラミングを行う時に使用するPCは、ハードウェアと言う分類に分類分けされます。それに比べ、WindowsやmacOS、Linux、FreeBSDなどのオペレーティングシステム（OS）はソフトウエアと分類されます。Windows PCやMacは、家電量販店やメーカーの公式サイトでそれらを購入することができます。最近では、Linux PCもネットの専門店で購入することもできるようになってきている様です。FreeBSDは、専ら自分でPCとそのインストーラーを用意してインストールして行くしかないでしょう。

Webプログラミングを行う際に使用するソフトウェアには、次のようなソフトウェアが必要になります。オペレーティングシステム（WindowsなどのOS）、ミドルウェア（XAMPPなど）、アプリケーション（Visual Studio Codeなど）です。

3. オペレーティングシステムはどのメーカーの物が良いのか？

Webプログラミングに適しているOSの筆頭は、Windowsでしょうか。次にmacOS、そして、Linuxの順になると思います。Webページを閲覧する際に必要となるブラウザは、Chrome、Microsoft Edge、Safari、Firefoxの順にシェアを分け合っている様ですので、ChromeとMicrosoft Edge、Firefoxのブラウザを使えるWindowsは、一番使い勝手の良いOSと言えるのでは無いでしょうか。

4. アプリケーションを揃える

Webサイト制作で必要になるアプリケーションは、Webページを作成するならエディタと作成したファイルを閲覧するブラウザ、そしてXAMPP（ザンプ）と呼ばれるミドルウェア群です。

• HTMLを学ぶ・・・エディタで本文を記述し、ブラウザで検証します。
• CSSを学ぶ・・・エディタで本文を記述し、ブラウザで検証します。
• JavaScriptを学ぶ・・・エディタで本文を記述し、ブラウザで検証します。
• PHPを学ぶ・・・XAMPPで環境を構築した後、エディターで本文を記述し、ブラウザで検証します。

5. 基礎を学んだ後にフレームワークやライブラリを学ぶ

世界には「ライブラリ」や「フレームワーク」と呼ばれるパッケージされたプログラム集の類が、多くあります。これらの多くは、コミュニティで開発や保守が行われていますが、それぞれはGPLライセンスやMITライセンスなどのライセンスで纏められているので、使用する前に注意事項を確認しましょう。

当方は、それらを駆使してWebアプリケーションを作成したりもしていますが、中々難しい課題に出合うこともありました。

6. Webプログラミングを学ぶ上で大事なことは？

• 基礎（HTML/CSS/JavaScript）は絶対に飛ばさないで学ぶ。
• 「学び続ける」ことが前提の仕事であるため、常に学習するスタイルを身に付ける。
• エラーは「敵」ではなく「道しるべ」と考え、これを指標とする。
• 「検索力」は「技術力」の一部であるがため、検索サイトの利用方法を知ろう。
• 英語への抵抗を無くすこと。これは、間違いなく言えること。
• とにかく何かを「作ってみる」とプログラミングの楽しさを知ることになるだろうが、それはプログラミングの第一歩である。
• Webプログラミングの全体像（フロントエンドとバックエンド）を理解して行く。
• バージョン管理のGit（ギット）を直ぐには学ばないで慎重に見るが、これは必須項目になって行くだろう。
• 「完璧」より「まず動くもの」を作ろうとする力は養いたいだろうが、それは中々難しい課題になっているだろう。
• 一人で抱え込まないでコミュニティの活用を大切にする。

7. オペレーティングシステム（OS）の特徴を知る

インターネットや書籍、WebサイトのAI機能を利用するならWindowsを選ぶのが、妥当だと思いました。当方は、Windows 3.1がリリースされた1996年頃からWindowsに携わってきましたので、Windowsの長所と短所を知っているつもりでいます。これからWebプログラミングを学んで行くならLinuxを選ぶ選択肢もあります。LinuxでWebプログラミングを学ぼうとするとエンジニアの仕事や求人を意識した道のりとなってしまうかも。でも、ここで言うエンジニアとは、システム開発やミドルウェア開発、ドライバーの開発者を言うのではなく、Webエンジニアを指します。

8. エディタとIDE（統合開発環境）の違いを知る

エディタは、テキストを記述して行くことを主体としたテキストエディタとバイナリーデータを扱うバイナリーエディタがあります。Webサイト制作で使うエディタは、テキストエディタと言うアプリケーションです。IDEはテキストエディタとコンパイラ、デバッガが、一画面で連携して動作するアプリケーションで開発者は効率よく作業を進めることができます。

9. 何を開発するかによって使用するプログラミング言語が異なる

HTMLとCSSの組み合わせは、シンプルなWebページから複雑なレイアウトのWebページまで様々なWebページを作成できます。

JavaScriptは、Webページに動的な演出を加えることができます。それに加えて、Webアプリケーションの開発も可能です。

PHPは、インターネットユーザーのPC（クライアントPC）とサーバーとの間でデータの送受信や連携で使われます。

WordPressは、HTMLとCSS、PHP、データベースを主体としたCMSです。これらのプログラミング言語などを使ってTheme（テーマ）を制作することも可能です。

10. お金を掛けずにWebプログラミングを学ぶ

Webプログラミングは、インターネット回線を持っていなくても学べる技能です。WindowsやmacOS、Linuxなどを搭載したPCが、学校やその他の施設にあれば、その端末の管理者に許可をもらい、Webプログラミングに必要なアプリケーションをインストールして貰おう。または、それ等に標準でインストールされているテキストエディターを使ってHTMLのタグやCSSのセレクタ、JavaScriptのモジュールを記述して行くことでHTMLファイル等は、完成するでしょう。そして、作成したHTMLファイル等は、各OSに付属のブラウザでそれを表示させることでプログラムの検証を行うことが可能です。

11. 当方の使用している主なソフトウェア

Webページを作成する時に使用するアプリケーションは、Visual Studio Code、XAMPP、Chromeです。そして、Webアプリを制作する時に使用するソフトウェアは、WindowsとWSL2（Ubuntu）、Docker Desktop for Windows、Laravel Sailです。Visual Studio Codeの拡張機能は、「Japanese Langrage Pack for Visual Studio Code」「Auto Rename Tag」「HTML CSS Support」「JavaScript (ES6) code snippets」「Laravel Blade Snippets」「Live Server」を始めとした拡張機能を利用しています。

12. 仮想化ソフトウェアで仮想環境を構築してWindowsをLinux上で使用する

余談ですが、高速処理のCPUと大容量のメモリー、GPUを搭載したPCにVirtualBoxなどの仮想化ソフトウェアで仮想環境を構築して、そこにWindowsをインストールします。Windowsは、パッケージ版を使用する必要がありますが、この様に仮想化ソフトウェアを利用することで、1台のLinux PCで複数のOSを利用した環境を構築することが可能になります。

これらの点に注意してWebサイト制作の技能を身に付けて下さい。