学習ロードマップ

こちらのロードマップは、皆さんの学習の手助けになるよう制作しています。

このロードマップや各種記事は、新しい情報を取り入れたり、よりわかりやすい内容になるよう常に改善をしていきますので、ぜひブックマークお願いします。

ゴールイメージを持とう

まずはどんな状態を目指して学んでいくかを明確にしておきましょう。

目標を明確に意識しておかないと、学習すべき内容を間違えたり余計なものに多くの時間をかけてしまう可能性があります。

LEVEL-1 HTML/CSS/JSの基本が分かる

HTML/CSS/JSの基本を学ぶ上では、すでにさまざまな学習サービスが展開されていますね。

ですから基本的なことについてはドットインストールやprogate、その他教材で学んでいればOKです。

HTML/CSSの基本が分かる

JavaScript(jQuery)の基本がわかる

LEVEL-2 デザインをHTML/CSSで綺麗に再現ができる

コーダーにとって最も重要なのは、デザインを綺麗に再現することです。それをする上で必要な知識を学びましょう。

HTMLの理解

基本が理解できたら、セマンティックなタグとインタラクティブなタグについて改めて理解をしましょう。

CSSの理解

実案件で納品できるレベルのサイトを構築する上で、CSSの深い理解が重要です。特にレスポンシブデザインをどのようにコードに落とし込むかはとても大事です。

JavaScriptによって頻出パーツを作ることができる

web制作の領域では様々なパーツを作れるようになる必要がありますが、頻出のものから優先的に覚えましょう。

作る上ではjQueryでも全く問題ありません。逆にVue.jsなどを用いても良いですし、生のJavaScriptでも良いです。

LEVEL-3 デザインデータから制作し、納品できる

デザインデータからのコーディングができる

デザインツールはさまざまありますが、まずはAdobeのものを覚えましょう。

特に、各種要素のサイズ、形状を読み取れること、画像を適切に書き出すこと、デザインで使われているフォントを読み取れることが重要です。

品質向上のための最低限の作業ができる

実案件では、デザインを再現できるだけでなく「サイトとして納品する」上で必要な項目がいくつかあります。

これらを覚えて、一歩上のコーダーになりましょう。

納品前のテストが行える

納品をするということは、お客様に商品をお渡しするということです。商品に問題や欠陥があったらいけませんよね。それを未然に防ぐための手法を学びましょう。

webサイトにおいては、特に複数のブラウザで意図した通りの挙動をするかどうかを確認したり、実際にサーバーにアップロードした時に想定通りの動きかを確認することが重要です。

また、テスト環境を構築する際に使うFTPツールもここで覚えましょう。納品時にも同様の手順で行うことがあります。

納品の作業が行える

まとめ

web制作を学ぶ上で、最低限の知識を順序よく学ぶためのロードマップは以上になります。

この先は、必要に応じて各種技術を学んでいくことになるでしょう。

web制作領域を進める場合

  • WordPress
  • JavaScript、jQuery

よく目にするモダンなフレームワーク、ライブラリは制作の現場では全く使わない訳ではないもののややオーバースペック気味です。それらを学ぶよりは上述の技術、特に生のJavaScriptを中心に学びましょう。

web開発領域を進める場合

  • JavaScript/TypeScript
  • React、Next.js
  • Vue.js、Nuxt.js
  • npmの理解
  • 開発環境構築の理解
  • テストの理解
  • etc

一方アプリケーション開発となると言語の理解は当然のこととされ、Reactに代表されるライブラリをよく採用されます。まずはそれらの理解が前提になるでしょう。

また、単純に言語の理解だけでなく開発する上で必要な関連技術の要求度が高いです。むしろコードを書ける環境を整えたり、書いたコードの品質を保つための技術の方がより多く学ぶ必要があります。

共通

  • httpの理解

制作であろうが開発であろうが、そもそも「Web」とはいったい何なのかを理解しておくと良いです。その中でも、どのように通信が行われているかを学ぶと各種言語、技術の理解がより一層深まります。それらの基盤とも言える部分ですからね。

というわけで、最低限の知識を身につけたらこのような技術を覚えていきましょう。

1 COMMENT

Leave a Reply

Your email address will not be published.