Web制作会社のエンジニアになりたいが、

• 何を勉強すればいいのだろう

• どの教材をどれだけやればいいのだろう

と悩んでいる方も多いではないのでしょうか。
そこで実際に働いているエンジニアが、「今だったらこうするな」といった学習方法を紹介します。

学習でつまづいている方は参考にしてみてください。

学習ポイント

ロードマップを紹介する前に、学習する上でのポイントを挙げます。

• 暗記しようとしない

  わからなければ、ググって大丈夫です。検索能力を磨くこともエンジニアにとって大切なことです。

• 同じ教材を周回しすぎない

  大切なことは何度も出てきます。
  理解しきれていないと思っても2～3周で終わらせましょう。

• アウトプットを意識する

  実際にコードを書きましょう。見るだけ、読むだけだと頭から通り抜けがちです。

  また、勉強している内容をTwitterやブログで投稿したり、GitHubでコミットしてみるなどの学習の軌跡を残すといいです。

開発環境等

まず開発環境についてざっくり紹介したいと思います。

パソコン

パソコンはMacかWindowsどちらがいいかという問題がありますが、どちらでもいいです。
弊社ではWindowsを使っています。

エディタ

特にこだわりがなければ、エディタはVisual Studio Code（VSCode）一択です。

拡張機能を追加すると、機能が追加されます。
使いやすいようにカスタマイズしていきましょう。

おすすめの拡張機能は以下になります。

ブラウザ

ブラウザは普段使っているGoogle ChromeやSafariなどのホームページを見るためのソフトです。

コーディングをしていると、ブラウザによっては表示が崩れていることがあります。
そのようなことがないようにブラウザチェックを行ってから、クライアントに提出します。

現在（2022年2月）の弊社の対象ブラウザは以下になります。
すべての環境でコーディングを確認できる状態が望ましいです。

コーディングをする中、幾度となくIEに苦しめられてきましたが2022年6月16日（日本時間）にIEのサポートを終了することが告知されました。

それに伴い、弊社でもIEが対象ブラウザから外されております。

タイピング練習

タイピング速度は早いに越したことはないので、苦手な人は練習しましょう。
毎日勉強する前に練習するといいと思います。

おすすめの練習サイトを紹介しますので、ぜひ取り組んでみてください。

Monkeytype

TypingClub

typing.io

HTML & CSS

Web制作では、HTMLとCSSは避けて通れない分野です。

HTMLでサイトのコンテンツ構造を作り、CSSでサイトを見た目を調整します。
これらを学習することで、普段目にしているサイトを作成できるようになります。

おすすめ学習手順

Progateとドットインストールどちらがおすすめかと聞かれると、

です。

Progateはブラウザ上で完結するので環境構築の必要がなく、スライド形式でわかりやすく教えてくれます。
ドットインストールは動画学習で、自分で環境を構築する必要があります。

どちらも無料でできるレッスンがありますので、どちらが自分に合っているか確認してみてください。
迷った場合はProgateがいいと思います。

Progateを選んだ場合

ドットインストールを選んだ場合

基本的なタグやスタイルから、レスポンシブデザインに対応したコーディングまで学んでいきます。
flexboxはコーディングする上で頻出です。しっかり理解しておきましょう。

慣れないうちは以下がまとまっています。
コーディングの途中でflexboxの使い方がわからなくなったら、参照してみてください。

CSS Flexboxチートシート

Progateを選んだ場合、道場編は余裕があれば挑戦してみてください。
その前に以下の記事を読むとやりやすいかもしれません。

Progateが教えてくれない、デザインカンプからのコーディング手順

道場編は急に一からコーディングしないといけないので難しく感じやすいです。あと普通にProgateの採点が厳しいです。
ここで挫折するぐらいなら飛ばしましょう。

Progateやドットインストールで基本的なことが頭に入ったら、1冊書籍で学習しましょう。
書籍ではサイトの作り方を体系立てて教えてくれるので、より実践的なコードの書き方が知れます。

これから先も書籍のおすすめを紹介しますが、可能であれば購入する前に書店で一度目を通してみてください。
パラパラと内容や目次を見て、自分に合った本を選んでみてください。

Sass

SassはCSSを拡張した言語で、より効率的にスタイルを記述することができます。

おすすめ学習手順

Progateで基本を押さえた後は、使いながらわからない点を調べていきましょう。
もっと網羅的に知りたいという方は、以下の書籍がおすすめです。

Web制作者のためのSassの教科書 これからのWebデザインの現場で必須のCSSメタ言語

Sassを導入方法は色々あるのですが、VSCodeの拡張機能を追加するのがおすすめです。

拡張機能はいくつかありますが、DartJS Sass Compiler and Sass Watcherがおすすめです。
Sassには3つ実行環境があるのですが、現在はDart Sassのみが推奨されています。

• Ruby Sass

• LibSass

• Dart Sass

現在、Dart Sassに対応している拡張機能は先ほど紹介した拡張機能のみです。
以下の記事を参考に導入してみてください。

Dart SassをVSCodeの拡張機能(プラグイン)で利用する方法を紹介

JavaScript

JavaScriptによって、サイトに動きをつけることができます。
ここでJavaScriptの基本的な文法を知りましょう。

おすすめ学習手順

Progateを選んだ場合

ドットインストールを選んだ場合

HTML・CSSと考え方が変わってくるので、JavaScriptの理解が進まず手が止まってしまうことがあるかもしれません。
最初はわからなくても、教材のコードを写経（コードを写す）してみましょう。
こんなことができるのだな、ぐらいの理解でいいです。

また、Web制作でのJavaScriptを利用する場合はDOM操作がほとんどです。
Progateでは扱われていないので、こちらの記事を読んでおくといいです。

JavaScript超基礎講座！DOM操作を学ぶ

jQuery

jQueryはJavaScriptの記述を簡単に書くことができるライブラリです。
またプラグインも豊富で、複雑な動きを簡単に実装できます。

jQueryはオワコン、などと言われることもありますがWeb制作ではまだまだ現役です。
基本的な書き方をわかったら、モーダル、ハンバーガーメニューなどの頻出パーツを実装してみましょう。

おすすめ学習手順

Progateを選んだ場合

書籍で紹介した動くWebデザイン アイディア帳ですが、期間限定でサイトが公開されています。
ここでWebサイトで使用される動きのあるパーツのほとんどが紹介されています。

期間限定で公開されている動くWebデザインアイデア帳のサイト

ここを参考にコーディングしつつ、デザインに合わせてカスタマイズしていったり、より良い書き方を調べてみるといいと思います。
加えてパーツの実装方法をメモなどにストックしておくと、コーディングの効率がアップします。

デザインカンプからコーディング

ここまで来たら、アウトプットに挑戦してみましょう。

昔は模写コーディングが推奨されていました。
実務ではデザインカンプからコーディングを行いますので、模写コーディングは必要ありません。

無料でデザインカンプを配布してくれるサイトがあるので、ここで1～3サイトコーディングしてみましょう。

【デザインカンプ無料配布】未経験からのコーディング学習ステップ

Codestep | 作って学ぶコーディング学習サイト（HTML、CSS、JavaScript、WordPress）

それに伴い、各種デザインツールでコーディングに必要な情報を取得・画像の書き出しの仕方を覚えましょう。
体感ではPhotoshop > XD > Illustratorの順でデザインが来ます。

取得方法については以前ブログで書かれていますので、ぜひ参考にしてください。

【コーディング初心者向け】Photoshop・Illustrator・XDから余白やフォントサイズを取得する方法まとめ

またコーディングして終わりではなく、検証まで行ってください。
何を検証するかわからない方はこちらのブログを参考にしてみてください。

HTMLコーディングの検証ってどこ見るの？チェックポイントとよくある不具合をまとめました

基礎知識

以前書かれた弊社のエンジニアの記事にもありますが、Webの基礎知識を知っておくことは非常に重要です。

またエンジニアだとコマンドプロンプトでコマンドを叩くことがあります。

通称：黒い画面こと、コマンドプロンプト

ですので基本的なコマンドについても学習しておきましょう。

おすすめ学習手順

Git

Gitでソースコードなどのファイルの変更履歴を管理をすることができます。
そうすることで、複数人で作業した場合に相手のコードを上書きしてしまうことを避けたり、ファイルの過去の状態に戻せたりできます。

開発する上で欠かせないので、基本的な操作を知っておきましょう。
ちなみに弊社ではSourcetreeというGUIツールを使用して、Gitを利用しています。

おすすめ学習手順

PHP & データベース

次に、サーバーサイド言語を勉強しましょう。
Web制作でよく扱うWordPressで使用されているPHPがおすすめです。

おすすめ学習手順

Progateを選んだ場合

ドットインストールを選んだ場合

弊社ではデザイナーでコーディングができる方が多いです。
そこでエンジニアとしてどう存在感を発揮していくかというと、以下ができるかどうかになります。

• PHPなどのサーバーサイド言語のコードが書ける

• WordPressやECサイトなどのシステムの組み込みができる

PHPで一からシステム構築するスクラッチ開発も多いので、しっかり学習してほしい分野です。
ですのでドットインストールまたは書籍を使って勉強することをおすすめします。
PHPはがっつりさわらず、WordPressメインで行くならProgateでもいいかもしれません。

またドットインストールでは開発環境にDockerを導入しています。
難しい場合はMAMPで環境構築したので問題ないです。

WordPress

WordPressはオープンソースのブログソフトウェアです。
全世界のウェブサイトの43%がWordPressというぐらいシェアの高く、弊社でもWordPressを使ったサイト構築案件が多いです。

おすすめ学習手順

WordPressの基本操作だけでなく、独自テーマの作成も求められます。
独自テーマを作成するにあたり、押さえておきたいポイントをいくつか挙げておきます。

• 動的部分と静的部分の区別がつく

• カスタム投稿タイプ

• カスタムタクソノミー

• カスタムフィールド

• テンプレート階層

教材での学習を終えた後、自分でコーディングからWordPressの組み込みまでやってみると大変力になると思います。

ローカルでWordPressを構築できるLocalを利用しても構いませんが、ぜひレンタルサーバーを借りて構築するのをおすすめします。
レンタルサーバーの操作を学ぶことができますし、そのままポートフォリオとして公開することもできます。

WordPressはネット上にたくさん情報があります。
困ったことや実現したいことを検索すれば大抵ヒットしますので、試行錯誤しながら作成していきましょう。

今後の学習方針

これから先は、自分の進みたい分野をどんどん学習していきましょう。
以下のサイトで分野ごとのロードマップを見られます。

Developer Roadmaps

まとめ

やることが多いですね！
Web業界はどんどん新しい技術が出てくるので学習に終わりはないですし、仕事内容も楽とは言えません。
それでもWeb制作のエンジニアを目指したいという方は、参考にしてみてください。

また弊社のブログでは、Web制作に役立つ記事を多数公開しています。ぜひご覧ください。

弊社のブログ