DESIGNMAP

まったくのゼロからフロントエンドエンジニアを目指すための独学方法 vol.2 - UNIXコマンド/Git/HTTP/HTML・CSS/プログラミングの基礎

記事公開日:2016年09月22日

frontend-engineer-2016

前回からの続きです。

UNIXコマンドからはじめよう

UNIXコマンドの勉強からはじめよう。これがすべてのベースになる。

いわゆる黒い画面からコマンドを入力して、ファイル操作をしてゆく。Web技術の入門書や記事を読んでもUNIXコマンドの知識が前提のものが多い。例えばStoyan Stefanov著『React: Up & Running』(O'Reilly Media, 2016)で最初に登場するコードは

mkdir ~/reactbook
mv ~/Downloads/react-0.14.7/ ~/reactbook/react

である。mkdirもmvもUNIXコマンドで、mkdirでフォルダ(ディレクトリ)をつくり、mvでフォルダ名を変えつつ、保存場所を移している。

このあとに学ぶGitやプログラミングの学習もこのUNIXコマンドが前提になっている本が多い。UNIXコマンドがわからないとプログラムの動作環境すら作れない状態になる。

Macの場合『入門 Unix for OS X 第5版』という入門書があり、コマンドを入力しながら一度は読んでおきたい。MacはターミナルというCUIツールがあり最初からUNIXコマンドが使える。MacはOS XからUNIX系のOSに根本的に変えたからである。

CUIツールとはいわゆる黒い画面の端末で、マウスを使わずコマンドを入力する文字だけのインターフェイスである。ディレクトリの移動、フォルダ作成、ファイル作成・修正、ダウンロード、圧縮、解凍などをコマンド操作でおこなう。

普段パソコンを使うときに使っているアイコン・ウインドウ・パネル・メニュー・ボタンはGUIと呼ばれる。Word、Excel、IllustratorはGUIである。

Windowsの場合だと、「PowerShell」というCUIツールがあるが、完全にUNIXコマンドとは互換性がない。Windows環境の場合、筆者が過去に試した方法だと「VirtualBox」をインストールをしてCent OS等のLinuxをいれる方法がある『新しいLinuxの教科書』のような入門書をコマンドを入力しながら読んでいこう。

他には、筆者は学習用にVPSサーバー(仮想専用サーバー)を借りたこともある。当時は日本では安いサービスがなく海外のサービスを契約した。当時で月20ドルほどの費用だった。現在だと日本の会社のサービスで月1,000円くらいから借りることができる。

UNIXコマンドの勉強のコツは一度で良いので実際に入力することだ。一度ではコマンドを覚えることはできない。このあとの勉強でもUNIXコマンドが繰り返しでてくるので、フォルダの作成・削除・名前を変えるなどの基本的なコマンドは自然と覚えてしまうだろう。

コマンドは暗記せず必要に応じて調べていけば十分だ。viエディタは独特で最初は戸惑う。これも徐々に慣れていくから心配はいらない。シェルスクリプトは最初は難しくみえる。まずは写経でよいので、実際に書いて、実行しておきたい。複数のUNIXコマンドを一つのファイルにまとめて、複雑な仕事をコマンド一つで実行することができる。例えば、自動でWebページを公開したいときや定期的にバックアップをとりたいときにシェルスクリプトを知っていれば作業の自動化が可能である。シェルスクリプトはのちのち役に立つ技術である。

Gitを学ぼう

Web制作会社にいくといまだにコードのファイル名に日付を追加して過去のファイルを保存したり、コードの中にコメントをいれて名前と変更ポイントを書いたりするような現場がある。アナログのバージョン管理である。

バージョン管理はGitを使うと楽に管理ができる。Gitはバージョン管理システムでファイルの過去の状態を保存ができる。必要によっては過去の状態に戻すこともできる。さらに修正履歴とコメントが残るので、過去に誰が何を修正したのかコードの歴史を残すことができる。複数人で分担でコードを書いてゆく場合、差分だけを効率よくまとめることもできる。

バージョン管理ツールはSubversionが以前は使われたが、いまではGitが業界標準になっている。フロントエンドの技術記事を読むといきなりGitコマンドが前提になっている記事が多い。記事が「git clone」から始まったりする。

GitはUNIXコマンドと同様にCUIツールでコマンドを入力していくのが基本である。『独習Git』がおすすめだ。週5日、毎日1時間で1ヶ月で終了できるチュートリアル本で、分量や深さが丁度良い。本書は図解が豊富なので難解といわれるGitをエンジニアでない人でもわかるように説明している。 CUIだけでなく、GUIツールやGitHubの使い方までフォローされているのもありがたい。

Gitのよいところはサーバーがなくても手軽にバージョン管理ができるところだ。作業用フォルダをつくり

git init
と打つだけで作業フォルダに過去のバージョンを保存するフォルダができる。あとは作業の一区切りで
git add ファイル名
git commit -m "コメント"
でその時のバージョンをコメント付きで保存することができる。奥は深いがシンプルなので徐々に慣れていこう。

HTTPを学ぼう

Webの技術でもっとも重要な根幹技術は何かときかれれば、HTTPといえる。HTTPとはWebブラウザとWebサーバーとの通信のルールである。HTTPがあるから多様なWebブラウザと世界中に分散されているWebサーバーがお互いに通信ができる。

HTTPに関しては過去に何度かまとめている。「HTTP、動的サイト、WordPressのブログ - まったくのゼロから、独学でWebデザイナーになるためのロードマップ 【Vol. 4】」でポイントをまとめているので参照してほしい。

学習の序盤でUNIXコマンド、Git、HTTPをおさえてしまえば、この後の勉強のルートは自由である。大きく間違える心配はないだろう。HTML・CSSを学んでいくルート、プログラミングの基礎を学ぶルート、いきなりJavaScriptを学ぶルートなどなど。この先は本記事を読まないで、自分なりに試行錯誤してフロントエンドの世界を泳いでいって構わない。

HTML・CSSはざっくり書ける程度で

本当にここから先の勉強法は自由だ。原稿の都合上まとめていくが、実際は好きな順番で学習していってほしい。

フロントエンドエンジニアはコーダー(マークアップエンジニア)とは違い緻密で細かいHTML・CSSが書ける必要はない。コーダーは、UIデザイナーが描いた絵(カンプもしくはモックアップと呼ばれる)をHTML・CSSで完全に再現できる必要がある。またそのコードをCMS(コンテンツ管理システム)に組み込んでいくのが主な仕事である。なのでコーダーはCSSやWordPressのようなCMSツールを学ぶことが学習の中心になる。

フロントエンドエンジニアはJavaScriptのプログラミングに力点が置かれる。ホームページ作成ではなくWebアプリケーションの作成が中心になる。CMSツールの組み込みのスキルは不要だ。とはいうもののある程度はHTML・CSSは書ける必要はある。最初の一冊目としては『HTML5&CSS3レッスンブック』、『HTML5&CSS3デザインブック』あたりで、ざっくりとしたページは作れるレベルにはしておこう。

Webブラウザに読み込まれたHTMLはDOMとよばれ、JavaScriptの操作対象になる。読み込んだHTMLをJavaScriptで書き換えることが可能になる。

プログラミングの基礎をかためよう

フロントエンドエンジニアの中心言語はJavaScriptだが、プログラミング自体の勉強はどの言語を選んでも問題がない。たとえばC、Javaだとノンプログラマー向けの入門書が豊富に存在する。Python、Rubyでもよい本がある。PythonはもともとGoogleが採用していた言語だったが、近年は統計学や機械学習の分野で注目をあびていて、分かりやすい入門書が刊行されている。

どの言語を選んでも配列、if文、ループ、参照、関数の戻り値、式の評価、演算子による評価の理解は同じである。

JavaScriptの入門書だとどうしてもプログラミング自体の基礎の部分が薄くなる。記述の中心がHTMLの操作になってしまうからだ。HTMLの操作はDOMといわれる部分で本来のJavaScriptとは別の技術である。かといってJavaScriptのコア部分だけをしぼった本は初心者には難しすぎる。となると、CやJavaの入門書でプログラム自体の概念にじっくり慣れた方が得策である。

同じことはPHPでもいえる。PHPもセッションやデータベースの接続に記述の中心がシフトしてしまい肝心なプログラミング自体の基礎部分が薄くなってしまう。フォーカスがぼけてしまうのだ。

具体的なおすすめのプログラミングの入門書に関しては「ノンプログラマーのためのPHPの独学方法」にまとめてあるので参考にしてほしい。

Vol.2はここまでとします。

まったくのゼロからフロントエンドエンジニアを目指すための独学カリキュラム 目次

↑このページの上に戻る