ウェブ入門

MDNのカリキュラムを読み進めます。

MDN Web Docsは最高の学習素材です
に従って「ウェブ開発を学ぶ」から始めることにします。
完全な初心者向けの記事もあるようです。

なんとなく分かった気になってる部分もあるので、初心者向けの記事も読むことにします。
ただ、十分に知っている（開発できる、他人に説明できる）ものはさらっと読むだけにしておきます。

ウェブ開発を学ぶ

このエリアの目的は対象者を「初心者」から「エキスパート」にすることではなく、「初心者」から「中級者」にすること

だそうです。
明確に目的とゴールがあるのは良いですね。

読み始める場所
によると

1. 全くの初心者の方
2. 基本の次の段階の方
3. スクリプト作成まで進む方
4. フレームワークとツールの利用

の４段階あるそうです。

全くの初心者の方用の「ウェブ入門」を読んでみます。

1. ウェブ入門

1.1 基本的なソフトウェアのインストール

まずは開発環境の整備からですね。

(a) コンピューター
コンピューターというよりはOSでしょう。
Windows, macOS, Linuxがありますが開発環境としてはWindowsかmacOSでしょうね。
特にこだわりがなければWindowsにしておけば良いと思います。

(b) テキストエディター
下手すると宗教戦争ｗになるので深く突っ込むのは止めます。
Web開発をするなら"Visual Studio Code"で良いでしょう。
Visual Studio Codeは2015年に公開されました。
私は当時マイクロソフトがオープンソースのソースコードエディタを出すってと懐疑的に思っていました。
おそらく私はその当時はEclipseとか使っていたと思います。 

VS Codeは機能も順調に増えていますし、プラグインで色んな機能を追加できます。
もうデファクトスタンダードと言って良いでしょうね。

(c) ウェブブラウザー
ブラウザは最初は文字だけの文章をリンクでたどって参照、閲覧できるだけのものでした。
ヘルプのちょっと高機能版くらいですね。

それがあっという間にWebアプリの実行環境となりました。
ただブラウザ戦争などの影響もあってブラウザ依存やサポートしている機能の差異などもあります。
その辺を調べるサイトもあるので、xxxだと表示が崩れる、期待する動作をしないということを避けることができます。

とりあえず

1. Google Chrome
2. Firefox
3. Microsoft Edge

の最新版でテストしておけば問題ないと思います。

Safariは現在はmacOS版しかないので、どうしてもmacOSを使いたいという要件がなければテスト対象外にして良いでしょう。
また「古いブラウザー（IE 8-10 など）でもサイトがどう動くのかをテストしましょう。」
とありますがとりあえず無視でいいと思います。

(d) 画像編集ソフト
仕事でWebサイトを構築するとデザインはpsd, ai, xd形式で受け取ることが多いでしょう。
どれもAdobeのアプリ用のファイル形式ですね。
Adobeはサブスクリプション形式になって、いわゆる"Adobe税"を支払わなければならない状態です。
フリーランスで開発を受託している人たちなどは結構な負担になりますね。

以前psdファイルを扱うことが出来る無料ソフトを探したのですが以下の三択になりそうです。

1. GIMP
2. Paint.NET
3. Photopea

GIMPは昔からある有名な画像編集ソフトですね。ただ個人的にはあのUIがダメです。どこで何をしていいのか迷います。

Paint.NETはWindowsでのみ動作する画像編集ソフトですね。Windows標準のPaintの延長上で使えます。

Paintでは機能が少なすぎ、PhotoShopなどは機能が多すぎって人がカジュアルに使うには良いと思います。

またプラグインを導入する必要がありますが、psdにも対応できます。

 

PhotopeaはWebベースのアプリケーションです。

画面右側に広告が表示されますが、無料でpsd, ai,xd, sketch, pdf, xcf, rawと様々なフォーマットに対応しています。

UIもフォトショップに似ているので人によってはすぐに使えるようになるでしょう。

 

(e) バージョン管理システム

チームで開発するときはもちろん自分１人であってもソースコードの変更履歴の管理や特定の版から派生して開発をしたり、その結果をマージしたりとなくてはならないツールですね。

ツールとしてはGitが事実状の標準と言ってよいでしょう。2014年出版と古いですがPro Gitという使い方を説明した書籍が無料で公開されています。

Gitに基づいたソースコードホスティングサービスがあります。有名なのは以下の３つですね。

サービス上でソースコードをリポジトリという単位で管理できます。

1. GitHub
2. GitLab
3. Bitbucket

GitHubは最も有名なホスティングサービスでしたが2018年にマイクロソフトに買収されました。

当時はGitHubの優位が崩れてマイクロソフトによる強い支配ｗが始まるかと危惧しましたが、幸いそうはなりませんでした。

無料版でもプライベートリポジトリが作成できるようになりましたし、コラボレーターの制限もなくなりました。

オープンソースは元より企業での開発においても十分に使えるようになったと思います。 

(f) FTP プログラム

ローカルの開発環境で開発したものは、テスト環境や本番環境にコピー（デプロイ）する必要があります。

開発したファイル一式をFTP(File Transfer Protocol)というプロトコルに対応したアプリケーションでサーバにアップロードします。

この目的では、 FTP の代わりに Git が用いられつつあります

とありますが、Gitにソースコードをコミットしたら自動的にサーバにデプロイするように環境を構築するというのが正確でしょうか。

私はFFFTPを使っています。特に理由はないですが新入社員ｗのころに使いだして慣れているせいかそのまま使い続けています。

曽田純氏による開発は2011年8月31日をもって終了したようですが、その後は有志によるオープンソースでの開発が続けられているようです、ありがたい。

 
(g) 自動化システム

Webpack、Grunt、Gulp はコードの最小化やテストの実行などのような反復作業を自動的に実行することができます。

Webpackは複数になっているJavaScriptをまとめて１つにするいわゆるモジュールバンドラーのことですね。

Grunt、Gulpはタスクランナーという分類だそうです。

何が違うんだろとググってみました。

タスクランナー　ビルドツール　モジュールバンドラ　違い 

モジュールバンドラ

モジュールをひとまとめに（bundle）するツール。
＝JavaScriptの依存関係を解決して、ひとつのファイルにまとめてくれるツール

 

タスクランナー

フロントエンドの仕事で面倒なタスクを自動的にやってくれる便利なツール 

うん、分からんｗ

タスクランナーとの違い - webpackのチュートリアル

ふむ、ちょっと読みずらいですが抜き出して整理すると以下のようです。

Webpack のようなモジュールバンドラーの主たる目的

1. それぞれのモジュールの依存関係を解決すること。
2. それらの複数モジュールを１つファイルとしてまとめる（バンドル）すること。

Gulp や Grunt といったタスクランナーの主たる目的

1. タスクを自動化すること
2. Web 製作には様々な細かいタスクがありますが、その中にモジュールバンドルがあります
3. 他のタスクとしては、ファイルのコピーや結合、JavaScriptやCSSファイルなどの構文チェック、 正しく機能が動作しているかという テストなど、様々なタスクを含めて複合的に実行することができます。

ああ、なるほどタスクランナーが管理するタスクの一つとしてモジュールバンドルがあり、そこでモジュールバンドラーを使うんですね。

 

(h) ライブラリーやフレームワークなど

ライブラリーは、既存の JavaScript や CSS のファイルであり、コードで使用するために、すぐに使える機能を提供しています。フレームワークは、この考えをさらに進めて、ウェブアプリケーションを書くためのカスタム構文を持つ完全なシステムを提供する傾向があります。

私は以下のように漠然と認識していました。

ライブラリ：共通的な機能をまとめたもの。 使える機能が提供されているのでプログラマが実装したい要件に合わせて利用するもの。

フレームワーク：ライブラリをさらに進めて特定の用途（Webアプリケーション、デスクトップアプリ、組み込み系アプリ）の開発のための枠組みを提供するもの。

 

ググってみると決定的な違いは「制御の反転」 にあるようです。

Part1　ソフトウエアのフレームワークとはなにか

 

ライブラリ

ライブラリを呼び出すのはユーザのコードです。

関数の中で共通機能を呼び出して自分の実装したい機能を実現していきます。

 

フレームワーク

ユーザのコードはフレームワークから呼び出されます。

フレームワークによって作法が違いますが、作法や記法に従って特定のフォルダの下にファイルを追加して、ファイル内にクラスや関数を実装していきます。

そしてその関数を呼び出すのはフレームワーク側の処理です。

 

(i) 他にも便利なツールがたくさんあります！

そうですね。私もブログを書きながら思い出したり、見つけたりした場合は記載しておこうと思います。