派遣で働くエンジニアのスキルアップを応援するサイト

PRODUCED BY RECRUIT

【イベントレポート】フロントエンドエンジニアに転身したい人のための HTML&CSSの基礎知識とつまずかずに学ぶ方法とは

株式会社リクルートスタッフィングが運営するITSTAFFINGでは、弊社に派遣登録いただいている皆さまのスキル向上を支援するイベントを、定期的に開催しています。

2018年8月24日のイベントでは「これから需要の高まる職種『フロントエンドエンジニア』に転身したい人のための HTML&CSSの基礎知識&つまずかずに学び通すための学習方法」と題して、オンラインプログラミングスクール「CodeCamp」で講師として活躍する山崎響さんに、フロントエンドエンジニアについて教えていただきました。

f:id:itstaffing:20180925143726j:plain

■今回のイベントのポイント

・食いっぱぐれたくなければフロントエンドエンジニアを目指そう
・Webデザイナーやバックエンドエンジニアが目指すからこそ価値がある理由
・フロントエンドエンジニアに必要なスキル
・こんなに簡単に!HTML&CSSの基礎知識をデモンストレーション形式で解説
・使える力を身につけて、つまずかずに学び通すための学習方法

【講 師】山崎 響さん
▲【講 師】山崎 響さん
株式会社エルビーエム代表取締役・株式会社フェローライン執行役員CBO。オンラインプログラミングスクール「CodeCamp」で講師として、受講生がつまずきやすいポイントをフォローしながら『学ぶ楽しさ』を共にする授業を行う。HTML・CSSを16歳の時に独学で習得し、実務経験を積んだのち独立。デザイナー兼エンジニアとして制作業務に携わる。担当教科はHTML5、CSS3、JavaScript、PHPなど。著書に『HTML5&CSS3しっかり入門教室』(翔泳社)がある。

食いっぱぐれたくなければフロントエンドエンジニアを目指そう

今回、山崎さんが語ったのは「バックエンドのエンジニアやデザイナーが、フロントエンドエンジニアになると、こんないいことがあるよ」というお話です。では、いったい、フロントエンドエンジニアってどんなことができる人の事を指すのでしょうか?

一般には次のような素養を備える人だと言われています。


イメージ
▲HTMLやCSSのコーディングのみならず、システムやサービスの一歩踏み込んだ領域にまで知識やスキルが及ぶ人のこと

なぜ、フロントエンドエンジニアは「食いっぱぐれない」のでしょうか。山崎さんは次の3つを挙げ、今後の需要の高まりを説明しました。

f:id:itstaffing:20180925143734j:plain
▲クリエイティブワークはAIの苦手領域。将来も無くならないというのは大きな安心材料

Webデザイナーやバックエンドエンジニアが目指すからこそ価値がある理由

山崎さんによれば「デザイナーやバックエンドエンジニアこそが、フロントエンドエンジニアを目指すべきだそうです。

f:id:itstaffing:20180925143736j:plain
▲デザイナーもバックエンドエンジニアも、フロントエンドエンジニアの知識やスキルを備えることで自身の仕事の幅が広がり質も高まる

特にフロントエンドエンジニアのスキルも併せ持ったバックエンドエンジニアは、話の理解が早く、現場で重宝されるそうです。

フロントエンドエンジニアに必要なスキル

では、フロントエンドエンジニアに必要なスキルには、どのようなものがあるのでしょうか。山崎さんは次のような技術を示してくれました。

f:id:itstaffing:20180925143739j:plain
▲たくさんあり、「そんなに覚えないとダメなの?」と思うかもしれないが、上の段ほど優先順位が高く、下の段は必要に応じて身につければよいとのこと

いずれの技術も進歩のスピードが速いため、常に情報収集と勉強が必要です。とはいえ、HTML、CSS、JS等の基礎的な技術は、時間を経ても、それほど大きく変わっているわけではありません。そこで、スキルを効率よく身につけるためのポイントとして山崎さんが推奨するのが、

・基礎技術を、時間をかけずに押さえる
・我流ではなく正しい基礎を学ぶ
・学習内容の濃淡を明確にする

という3点です。

「初心者がそこまで知らなくてもいいよね」ということもたくさんあるため、取捨選択が大切。そして一番大切なのは“できる楽しさ”を感じることだそうです。

「テキストエディタとWebブラウザがあれば、手軽に始めることができますから、すぐに楽しさを感じていただけるはずです」(山崎さん)

こんなに簡単に!HTML&CSSの基礎知識をデモンストレーション形式で解説

ここからは、山崎さんによるデモンストレーションが始まりました。

実際の仕事をイメージして作業を進めます。まずフロントエンドエンジニアのもとに、デザイナーから、完成イメージが届きます。

このとき、画像の素材が、デザインとは別に渡されればよいのですが、無い場合はデザイン画面から切り出す作業も発生します。

f:id:itstaffing:20180925143741j:plain
▲コーディングに入る前に、画面に読み込む画像などを整理しておく

そして、テキストエディタを起動して新規ファイルとしてindex.htmlを作成します。続いて、デザインの構成を確認します。

・ヘッダ
・ナビゲーションバー
・見出し
・コンテンツ
・トピック
・ニュース
・ギャラリー(JS)
・アクセスマップ(Google マップの埋め込み)
・フッター

確認した構成に従って、HTMLの基礎構文を入力します。

f:id:itstaffing:20180925143744j:plain
▲index.htmlを作成し、基礎構文を入力する

続いて、文書タイプの宣言文(HTML5)を入力し、言語設定、ヘッダ情報、キャラクターセット(UTF-8)などを指定します。bodyタグで囲まれた範囲に原稿をテキスト入力し、マークアップしていきます。「ここは見出し」「ここは本文」などの構造化タグを付けていきます。

検索エンジンのクローラーが参照するメタタグや、検索エンジンでサイト概要として表示されるdescriptionなども入力します。

さらに、画像の読み込みや、ページ内ジャンプなどもタグで指定していきます。

f:id:itstaffing:20180925143746j:plain
▲実際に目の前でサイトがつくられるので、わからない部分が細かく確認できます

そして、今回の見どころでもあるGoogle マップの読み込みを指定します。

Google マップは、従来は無料で1日2万5千マップロードまで利用でき、それを超える場合は利用料を前払いという仕組みでしたが、2018年7月16日からは、1ヶ月2万8千マップロードまでが無料で、それを超えると従量課金となりました。そのため、事前にAPIにアクセスするためのキーの取得が必要になったそうです。今回はキーの取得から、マップの表示を実装するところまで実演してくださいました。

本文の構造化が終わったら、次にCSSを適用し、デザインを整えていきます。

CSSには「ノーマライズCSS」と「自分で設定するCSS」というものがありますが、ノーマライズCSSという存在を初めて聞いたという人もいるかもしれません。

実はWebブラウザにはそれぞれ固有の表示ルールがあります。たとえばFirefoxは、特に指定がなければページを表示する際に、ページの端に自動的にマージンが挿入されることが知られています。小さなことですが、それでページの見え方が変わってしまうこともあります。そこで、ブラウザ固有の部分を吸収するために、ノーマライズCSSであらかじめ各ブラウザの差異を吸収しておき、その上で「自分で設定する」CSSを適用して、目的のデザインに仕上げていきます。

このノーマライズCSSは、Web上を探すといくつか見つかるそうなので、いろいろと試してみるのがよいそうです。

f:id:itstaffing:20180925143748j:plain
▲ノーマライズCSSの存在はコーダーの人以外には耳慣れない存在

CSSファイルが完成したら、HTMLファイル内にCSSの読み込みを指示します。

このとき、初期化、ノーマライズCSS読み込み、自分で設定するCSS読み込みの順に指定します。こうして、イベントの短い時間内に、ページが完成するところまで実演してくださいました。

使える力を身につけて、つまずかずに学び通すための学習方法

最後に、山崎さんが、フロントエンドエンジニアになるためのスキルを身につけるためのコツを教えてくださいました。

・手を動かして何度も書き、手で覚える
・疲れたと思ったら休憩する、寝る
・最初から完璧に覚えようとしない

とにかく、「プログラムがうまくできた事を楽しむ」のが大切だそうです。

f:id:itstaffing:20180925143751j:plain
▲短時間でデザイン通りのレイアウトや機能を実装してしまうことにビックリ

今回のイベントで、フロントエンドエンジニアという仕事の面白さがとてもよくわかりました。特に、自分の書いたコードの結果がすぐにその場で確認できるというのは魅力的です。ノーマライズCSSなど、聞きなれないものもあったかもしれません。これを機に正しい基礎を身に付けていきましょう。