ちまたでは、HTMLとCSSからやれ！だの、HTMLはプログラミング言語じゃないからJavascriptからやれだの、何でもいいから１個決めてからやれだのと、これから学習しようとしているのに結構無茶苦茶じゃね！？って常に思っている私です。。。
そんな私もどれやればいいんだ！？という気持ちのままダラダラ学習した期間もあったので、どっちのルート（キャリア）に進むかによって選択すればOKかと思います！（後述するWEB系エンジニアか、WEB制作か）
ただ、個人的には現時点でもどっちのキャリアがいいのかわからないかと思いますので、ざっくりどっちのキャリアがどういう技術を使っていているのかを解説しつつ、それを踏まえてプログラミング学習の順番について解説をしていきます！！
ではレッツゴー！
WEBエンジニアとは
現在、自分がキャリアとしてスタートしたのが、こちらのWEBエンジニアです
ざっくり言うと、WEB上で動くアプリケーション全般を指すようです
今自分が使用する技術としては
- HTML
- CSS
- SASS
- Javascript
- jQuery
- Vue.js
- React.js
- Ruby
- Ruby on Rails
- MySQL
- Linux
- Docker
- TCP/IP
- オブジェクト指向
- API周り
- (ReactNative)
- (iOS関連少々）
かなりやることが増えました。。。
最近では、iOS開発としてReactNativeも触る機会が多いんですが、基本的にはRubyを触っているような感じです
こちらの記事でプログラミング学習や転職活動について解説をしていますのでぜひ！
WEB制作とは
もうご存知の方が多いと思いますが、基本的にはWEBサイト作成するものになります
WordPressやLPなんかはこちらになります
割と参入障壁としては低めで、学習時間が取れる人なら1ヶ月程度でコーディング案件くらいは取れるかも？というものになります
自分も最近Wordpressの学習を始めてて、環境構築で少し詰まった部分もあるので、こちらの記事も参考にしてもらえればと思います！
使用技術としては
- HTML
- CSS
- SASS
- Javascript
- jQuery
- PHP
- WordPress
- MySQL
- FTPサーバー関連
- AdobeXDやIllustratorなどのソフト（WEBデザイン領域）
このあたり
PHPについては、多少構文に慣れていないと苦しいものがあると思います
自分も今学習していて、魔法のような関数をHTMLに仕込むだけで割とカンタンに投稿機能なんかを仕込めるのですが、いかんせん、<?phpというハテナが付くとプログラム感がすごいするので、最初は鳥肌が立ちましたが、やっていくうちに慣れていきますよ！
ただ、WordPressを学習するにあたりFileZilla等を使ってFTPサーバーに接続して作業をするということもしないといけないので、割とこの辺まで来ると学習しきれていない人も多いのではないでしょうか？
特に設定ミスをした場合には必ずサーバー作業は発生するので、トラブル時の対応としてサーバー作業の練習はやっておくべきかと思います
また、最近の案件ではサイトを１から、要するにデザインから依頼するパターンが圧倒的に増えました
HTML、CSSだけのコーディング案件はグッと減った印象です
ということで、デザインもある程度できないと案件として受けられる数が減ってしまうので、こちらも学習しておいた方が吉だと思います
どちらのキャリアを考えましたか！？
ということで、つらつら述べてきましたが、どちらのキャリアが良いですか？
WEBエンジニアはとにかくやる分野が広いので、学習量としてはかなり多めです
自分の例で行くと半年ほどかけて学習＆ポートフォリオ作成を独学で進めていきました
ポートフォリオも大したものじゃないのですが、今の環境ならば「React.jsくらい使えるよね」ぐらいのレベル感なので、自分が転職した時よりポートフォリオのレベルはもっと上がっているように思えます
また、WEB制作は使用する技術としてはそれほど多くなく、メインはやはりHTML、CSSで装飾としてjQueryを使うというレベル感になります
そのため難しいことをやるというより、より良いデザインを表現できるか？という部分にフォーカスを当てているように思えます
個人的には、今キャリアが決まっていないのなら、WEBエンジニアがおすすめしています！
なぜなら、Wordpressもこんな自分でもすぐに理解できるレベルに到達できた上に、WordpressでMySQLをいじることになってもSQL文はすぐにかけるし、ターミナルからSSHでログインしてサーバー作業するのも、億劫にならずにスムーズにいけますからね！
(2024/11/21 15:41:36時点 楽天市場調べ-詳細)
本題、学習手順について
ということで、初学者からしたらもうわけわからんという状態だと思います
ただ、ここにきて共通点ってお分かりいただけたでしょうか？
この5つですね
- HTML
- CSS
- SASS
- JavaScript
- jQuery
WEBエンジニアではjQueryはほぼ使うことが無いですが、一応さらっと学習しておくと良いかと思います
つまり、どちらのキャリアをスタートさせるにしてもまずはこの５つを学習することがスタートなのでは無いかと私は結論付けております！！
学習の順番は記載の通りですが、どこで学習した方がよいかおさえておきましょう
HTML・CSS
最近はYouTubeでも良質な動画が増えましたが、一回プロゲートで無料の範囲で学習してみた方が良いです
というのも、いきなりエディターをインストールして、htmlファイルを用意して、、、というのは最初の最初では敷居が高すぎますからね
まずは無料の範囲でプロゲートで学習してみて、ざっくりこういうことをやるのがHTML、CSSからなんだという雰囲気を感じましょう
できれば、YouTubeでもどこでも良いので一回プロゲートはすぐ終えて、WEBサイトを作ってみたいところです
以下の本は入門としては、本当に良かったです
(2024/11/21 15:41:37時点 楽天市場調べ-詳細)
2017、18年くらいの出版だとfloatというcssの技術が使われているのですが、もう古い技術なので注意が必要です
その点、こちらは最近の技術を取り入れた上で、WEBサイトの構造やデザインについても触れらているのでHTML・CSSの学習にもってこいです
おそらく１周間もあれば一通り終わるのではないでしょうか？
その後は私もよく使っていたのですが、こちらのサイトで模写を進めます
まずは入門編の自転車サイトのコーディングからスタート初級編まで取り組んでみます
途中からJavaScriptの知識が必要になってくるので、そのタイミングでJavaScriptを学習します
SASS
少し番外編に近いところではありますが、ここまでCSSのをやったのであれば、SASSもささっとできると思います
難しいことは無く、基本的には「入れ子で記述」、「変数で色やフォントなど共通のデザイン管理」、「Mixinでメディアクエリの管理」の３つだけできればいいのかなと
特に「入れ子で記述」がめちゃ便利なので、抑えておくと良いです
↓の動画でさらっと抑えておくとOK！
このあたりはBEMという命名規則に従って書いていくと理解が深まるかもです！
一個注意なのは、SASSはそのままでは動きません！
なので、コンパイルというものをしなくてはならないのですが、Visual Studio Codeであれば楽ちんにコンパイル可能です
それがLive Sass Compilerというもので、拡張機能なのですが、これを導入し、コンパイルを実行するとcssファイルが自動で生成させるというものになります！
JavaScript・jQuery
こちらセットで学習しちゃいましょう！！
この動画でさくっと構文をやるだけでOKかと思います
その後はhttps://code-step.com/store2-menu/ ←この中級編でハンバーガーメニューと呼ばれるナビゲーションのON・OFFをする練習をすると良いと思います
このハンバーガーメニューではjQueryを使っているので、「jQuery ハンバーガーメニュー」と検索してみてまずはコピペで試すだけでもOK！
個人的にはこの本がかなり参考になりましたので、一応共有です！！
(2024/11/21 15:41:37時点 楽天市場調べ-詳細)
この本は、基礎構文から実践的な使い方まで教えてくれるので、かなり良書になります
ハンバーガーメニューができたら、アコーディオンメニューやふわっとした動きを出したり、もっと他にもやれることができると思いますので、これまで作成したサイトに自分なりに追加してみて動きを確かめる意味でもやってみても良きです！
ここまでで
ここまでで、プログラミングの学習の手順について解説しました
おそらく、ここまで来たらだいぶエディターと仲良しになったと思いますので、あとはWEB制作としてWordpressを学習するか、WEBエンジニアとしてアプリケーションを作っていくかという道になります
初心者のうちはHTMLでつまづくことかと思いますが、ここを乗り越えてしまえばかなり楽になるかと思います！
難しいことはなく、まずはここまでこれたのであればどちらのキャリアへの第一歩になりますので、ぜひチャレンジしてみください！
まとめておくと
- HTMLとCSSの学習
- SASSの学習
- JavaScriptの基本をおさえて、jQueryの学習
ではでは！！
