こちらのロードマップは、皆さんの学習の手助けになるよう制作しています。
このロードマップや各種記事は、新しい情報を取り入れたり、よりわかりやすい内容になるよう常に改善をしていきますので、ぜひブックマークお願いします。
まずはどんな状態を目指して学んでいくかを明確にしておきましょう。
目標を明確に意識しておかないと、学習すべき内容を間違えたり余計なものに多くの時間をかけてしまう可能性があります。
HTML/CSS/JSの基本を学ぶ上では、すでにさまざまな学習サービスが展開されていますね。
ですから基本的なことについてはドットインストールやprogate、その他教材で学んでいればOKです。
コーダーにとって最も重要なのは、デザインを綺麗に再現することです。それをする上で必要な知識を学びましょう。
基本が理解できたら、セマンティックなタグとインタラクティブなタグについて改めて理解をしましょう。
実案件で納品できるレベルのサイトを構築する上で、CSSの深い理解が重要です。特にレスポンシブデザインをどのようにコードに落とし込むかはとても大事です。
web制作の領域では様々なパーツを作れるようになる必要がありますが、頻出のものから優先的に覚えましょう。
作る上ではjQueryでも全く問題ありません。逆にVue.jsなどを用いても良いですし、生のJavaScriptでも良いです。
デザインツールはさまざまありますが、まずはAdobeのものを覚えましょう。
特に、各種要素のサイズ、形状を読み取れること、画像を適切に書き出すこと、デザインで使われているフォントを読み取れることが重要です。
実案件では、デザインを再現できるだけでなく「サイトとして納品する」上で必要な項目がいくつかあります。
これらを覚えて、一歩上のコーダーになりましょう。
納品をするということは、お客様に商品をお渡しするということです。商品に問題や欠陥があったらいけませんよね。それを未然に防ぐための手法を学びましょう。
webサイトにおいては、特に複数のブラウザで意図した通りの挙動をするかどうかを確認したり、実際にサーバーにアップロードした時に想定通りの動きかを確認することが重要です。
また、テスト環境を構築する際に使うFTPツールもここで覚えましょう。納品時にも同様の手順で行うことがあります。
web制作を学ぶ上で、最低限の知識を順序よく学ぶためのロードマップは以上になります。
この先は、必要に応じて各種技術を学んでいくことになるでしょう。
- WordPress
- JavaScript、jQuery
よく目にするモダンなフレームワーク、ライブラリは制作の現場では全く使わない訳ではないもののややオーバースペック気味です。それらを学ぶよりは上述の技術、特に生のJavaScriptを中心に学びましょう。
- JavaScript/TypeScript
- React、Next.js
- Vue.js、Nuxt.js
- npmの理解
- 開発環境構築の理解
- テストの理解
- etc
一方アプリケーション開発となると言語の理解は当然のこととされ、Reactに代表されるライブラリをよく採用されます。まずはそれらの理解が前提になるでしょう。
また、単純に言語の理解だけでなく開発する上で必要な関連技術の要求度が高いです。むしろコードを書ける環境を整えたり、書いたコードの品質を保つための技術の方がより多く学ぶ必要があります。
- httpの理解
制作であろうが開発であろうが、そもそも「Web」とはいったい何なのかを理解しておくと良いです。その中でも、どのように通信が行われているかを学ぶと各種言語、技術の理解がより一層深まります。それらの基盤とも言える部分ですからね。
というわけで、最低限の知識を身につけたらこのような技術を覚えていきましょう。