Webプログラミングは何から始めれば良いの？
どこまでやれば実務に通用するくらいのスキルになるの？
そのへんの判断って最初はなかなか難しいですよね。
多くの企業様のブランドサイトやランディングページ（LP）などのWebサイトを制作してきた僕の経験から、中級者になるまでの個人的ロードマップを考えてみました。
これから勉強しようとしている方、今勉強中の方の参考になれば幸いです。
HTML、CSS
Webサイトの基本。
まずはHTMLとCSSでどんな見た目のデザインでも組めるようになるのを目標にしましょう。
最近だとProgateやUdemyなどのオンラインで学べるものもありますので、そんなに時間を掛けずに学ぶことはできると思います。
1冊ですべて身につくHTML & CSSとWebデザイン入門講座
書籍だとこれとか最低限必要なものがまとまっているので分かりやすいです。
Sass
CSSをより効率的に書けるようにしたメタ言語です。
Sassを使う場合はコンパイルが必要になりますので、後述するタスクランナーもセットで使うことになるでしょう。
上述のCSSとまとめるか悩みましたが、あえて別枠にしました。
理由は初めからSassを勉強してしまうと、コンパイル後にどんなCSSが吐き出されるのかが想像しづらくなるからです。
初心者でありがちなのが、Sassでは変数や関数が使えるので、触っているうちにそのままCSSでも使えるような気がしてくるんですよね。
Sassではいろんな便利なことがたくさんできますが、それはあくまでCSSを書くのが便利になるだけ、ということを頭の片隅に置いておきましょう。
CSSでできないことはSassでもできませんので。
Web制作者のためのSassの教科書
Sassの勉強ではこの本が最強です。
この一冊マスターするだけで、実案件こなせるようになります。
JavaScript
HTMLやCSSと違ってちゃんとしたプログラミング言語ｗ
フロントエンドと言ったら、JavaScript（以下jsと略します）を指すことが多い気がします。
DOM操作したり、動きを付けたり、一気に何でもできるようになります。
最近のフロントエンド開発ではReact、Angular、Vueなどのフレームワークを使うのが一般的ですが、こちらもSassと同様、初めからフレームワークを触ると、
それがjsの言語が持つ機能なのか、それもともフレームワークが持つ機能なのかが判断しづらく、何かで躓いたときにかなりの時間を無駄にしてしまいがちです。
jsの勉強でおすすめなのは、フレームワークもライブラリも一切使わず、簡易的なアプリを作ることです。
TODOアプリなんかがいわゆるCRUD（CREATE、READ、UPDATE、DELETE）が必要になるので良い勉強になると思います。
JavaScript本格入門
ぶっちゃけjsはこれだけ読めば良いと思う。
それくらい基本が詰まってる良著。
タスクランナー
GulpとかGruntとかいろいろありますが、個人的には「Gulp + webpack」をおすすめしています。
最近のシェア的にはwebpackが最も多いですが、webpackはあくまでJavaScriptのモジュールバンドラーですので、Gulpと併用した方が汎用性が高まります。
タスクランナーを導入するにあたって、nodejsが絡んできますが、この時点ではそこまで深く理解する必要はありません。
なんとなく「nodejsってやつが裏でタスクランナーを動かしてくれてるんだなー」くらいを理解していれば大丈夫です。
面倒な方は（というか最初は深く理解しなくても良いので）、テンプレートを用意していますので、こちらをベースに作成されても良いかなと思います。
レンタルサーバー
Webサイトを公開するにはサーバーが必要です。
自分でサーバーを立てたり、クラウドサーバーという選択肢もあったりしますが、管理が大変だったり高額になったりと少々ハードルが高いので、
最初はとりあえず安価に始められるレンタルサーバーにしておくのが良いでしょう。
ロリポップのライトプランだと 月額220円 から始められるので、変なサブスクサービスに入るより全然安いですｗ
中には無料のレンタルサーバーもあったりしますが、不安定だったり突然サービスが終了したりするデメリットもあるため、あまりおすすめはしません。
その点、ロリポップはGMOの子会社のGMOぺぱぼが運営しているので安心です。
デザインツール
Webデザイナーを目指すならもちろんですが、エンジニアを目指す場合もある程度は触れるようにしておいた方が良いと思っています。
なぜならWebサイトは
デザイン
↓
コーディング
というワークフローで作成されることがほとんどですので、
仮にあなたがデザインをしていなくても、誰かが作ったデザインデータを触ってコーディングすることになるからです。
普通のLPのコーディングだと、意外とデザインツールを触っている時間が長くなりがちで、
ツールを使いこなしてこの時間をいかに短縮できるか？で作業単価も大きく変わってくるので、
ある程度使えるようになっておきましょう。
肝心なツール選定ですが、基本的に Photoshop を使用していれば大きく問題はありません。
最近では Adobe XD、Figma（フィグマ）、Sketch（スケッチ）など他のツールを使っている会社さんも多いですが、「正直どんなデザインを作るか？」「どのくらいの規模のサイトになるか？」など案件内容によって向き不向きがあり、ごりごり凝ったデザインを作ろうとすると、結局現状ではまだPhotoshop一択になります。
PhotoshopはAdobe Creative Cloudの一部になっていますが、Photoshop（+Lightroom）だけ使用できる安価なプランもあるので、まずはこのへんを使ってみて練習してみてはいかがでしょうか？
Git
言わずと知れたバージョン管理ツールです。
（ちなみにGitとGithubは別です！）
複数人で開発する場合はGitを使わない案件は無いんじゃないか？というくらい必須のツールになります。
一方、個人開発においても、バージョン管理しておくと、
バグが出た際にすぐに前のバージョンに戻せたり、今作っている機能とは別で修正が行えたり、
何かと便利なので、早い段階でGitを導入しておきたいですね。
Webディレクション
Webエンジニアとして、ただ言われたものを作れるだけでは単価はそれほど上がらないのが実情です。
特にフリーランスを目指している場合は、お客さんは基本何も知識がないので、0から100まですべてあなたが面倒を見なければなりません。
「なんか良い感じのWebサイトはできたけど、効果が出なかったから次は別の人にお願いすることにしました！」
なんてのは、あるある話です。
継続してお仕事を貰うためには、ディレクション領域も必須になるでしょう。
その他
上記までで一通り案件をこなせるようにはなっているはずです。
この後のステップアップとして、「フレームワークを触るか」「サーバーサイドをやるのか」「デザインをやるのか」など、興味のあることを広げていけば良いのではないでしょうか。
コメント