Webデザイナーの平尾誠です。
表題の通りweb系プログラミングの歩き方をまとめています。
この記事は筋肉質な勉強法を否定するものです。
あらかじめご了承ください。
僕はもともとオリジナルの家具を作る家具の施工会社にいました。
未経験・独学からWeb系プログラミング言語を覚え、デザイナーになり８年が経ちました。
- 異業種から転職したい
- プログラミングの勉強方法がわからない
- 自分が何を勉強していいかわからない
- 独学が続かない
こんな悩みを吹き飛ばしましょう。
学習したいことはたくさんあると思いますが、夢中になれることから始めましょう。
Web系プログラミングを学習する順番
まずはじめに、理想的な学習ロードマップは下記のとおりです。
- １、プログラミングの概要を理解
- ２、エディタ（コード編集ソフト）をインストール
- ３、HTMLとCSSを書く
- ４、ディベロッパーツールの理解
- ５、レスポンシブサイトを制作
- ６、Bootstrapの理解
- ７、Jqueryの基礎理解
- ８、PHPの基礎理解
- ９、Wordpressの基礎理解
- 10、オリジナルWordpressの作成
- 11、PHPの理解を深める
- 12、サーバーサイドやアプリの言語を覚える
でもこれは、順番どおりのロードマップであり、この通りに学習する必要はありません。
この通りに勉強しようとすると”退屈”という壁に阻まれて、なにも学習が進まないからです。
僕は最初の方で変数や配列について学習しましたが、単独で覚えても意味がないんですよ。
コピペしたソースコードを見たら、『あ、これが配列だったんだねホホォ』って感じが正しいかと。
独学をする際は夢中になれることに脱線しよう
よくある教科書通りの道順を守ろうとすると、どうしても壁に阻まれて進まなくなります。
たいていの人はここで学習するのをやめます。
だけど構いません。
デザインに転向したり、違うエンジニアになるのもありです。
逆に、Javascriptなんかは奥が深いので、 Javascript だけをひたすら学習してインタラクティブデベロッパーになるのもアリかと。
とにかく、『挫折した』って思わないことが重要。
まずは没頭できる領域を見つけましょう。
独学の勉強を始める前に必要なアプリ
開発環境を整えるところからはじめましょう。
エディタ
エディタとはソースコードを書くためのアプリケーションです。
コードを書きやすくし、予測変換もしてくれます。
エンジニア・プログラマに、絶対になくてはならないものです。
- DreamWeaver
- Brackets
- Sublietext
- Atom
- VScode
これらがDreamweverは有料ですが、他のアプリケーションは無料です。
使いやすければ、どれを使ってもいいでしょう。
有料アプリケーションをつかわなくても十分です。
デザインツール
デザインツールは下記の通りです。
- Photoshop
- Illustrator
- Sketch
- Figma
自分でデザインをしなくても、画像を書き出す際に必要です。
Photoshop を使わない会社やデザイナーは少ないです。
スライスと呼ばれる、デザインデータから画像を作る作業に必要です。
どうしても無い場合はデザイナーに画像をもらうことになりますが、ほとんどのエンジニアはPohotshopで画像を作れます。
ちなみに自分はPhotoshop 苦手なのでSketch 使ってます。
サーバーとFTPソフト
サーバーはホームページを公開するためのガレージみたいなものです。
とりあえずホームページを公開までは、制作の流れとして知っておかなければなりません。
まずは一番安いサーバーでいいので、契約しておく方がいです。
最初はなんでもいいですが、ロリポップなら月額100円からあるのでオススメです。
FTPソフトとは、データをサーバーにアップするアプリケーションです。
僕はTRANSMIT(有料)を使用しています。
でとりあえずFileZillaでいいと思います。
独学の勉強方法
こちらで初心者向けの勉強ができます。
PROGATE
こちらのサイトで勉強できます。
まずは試してみてから、月額980円の有料プランに切り替えるのがいいですね。
ドットインストール
こちらも無料オンライン動画の老舗です。
Udemy
こちらもおすすめですね。
Web制作以外にも投資や動画編集の授業盛りだくさんで、プログラミング以外にも使えます。
過去にオススメの動画講座をまとめているので参考にしてください。
PHPからがプログラミングです
実は、非プログラマの中でかなり広い意味でプログラミングという言葉が使われています。
でも実は、HTMLやCSSはプログラミング言語ではなく、マークアップ言語と呼ばれています。
この辺の説明が難しいので、ひっくるめてプログラミングって言ってるんです。
まぁ初学者にとったら呼び方どっちでもいいですからね。
だから、HTMLとCSSで学習をやめるとプログラマになったことにならないです。
マークアップ言語を覚えた上で、デザインを追求していきたいなら webデザイナーの道へ、PHPを覚えてサービスを実装したいならプログラマの道へという感じです。
おさらい
勉強する順番は下記の限りではない。
楽しいことがあれば、理解した上で脱線してください。
- １、プログラミングの概要を理解
- ２、エディタ（コード編集ソフト）をインストール
- ３、HTMLとCSSを書く
- ４、ディベロッパーツールの理解
- ５、レスポンシブサイトを制作
- ６、Bootstrapの理解
- ７、Jqueryの基礎理解
- ８、PHPの基礎理解
- ９、Wordpressの基礎理解
- 10、オリジナルWordpressの作成
- 11、PHPの理解を深める
- 12、サーバーサイドやアプリの言語を覚える
過去に初心者がスキルをチェックするためのシートを公開しています。
まとめ
最近は無料のツールもありますが、割と早い段階で課金を促されますよねwww
でも有料なサービスにはリスペクトの意味を込みめて課金しましょう。
ここをケチったところで学習が遅くなるだけです。
たくさん勉強方法もあるし、最近ではブロガーのマナブさんもゆうチューブを始めたりして、プログラミング学習が注目を集めています。
耳だけで聞いてもわかるように作られているので概要を理解するにはオススメ。
ほなね
