インターネットとパソコンがあれば場所や時間に縛られず仕事ができるWebエンジニア。
近い将来フリーランスや副業で効率よく稼げるようになりたいけど、そのためには何から手をつければいいのだろ？やなかなか思い通りにスキルの定着がせずモチベーションが下がったり、非効率な勉強をしているのではなかいかと心配になりますよね。
この記事ではWeb制作に必要なプログラミングのスキルは何か。独学がいいのかスクールがいいのかなどを、現役のフロントエンドエンジニアの目線でまとめました。
この記事を読みむことで最短かつコストを抑えながら確実にWeb制作に必要なスキルが理解できます。
余計な不安を解消し、明日からの勉強に役立つ情報になっていると思います。
私も未経験からのスタートでしたが結果的に上場企業でフロントエンドを５年していました。
独学では色んなことを試して、あれは無駄だったな。。と思うことがいくつもあります。
より道せず最短でスキルアップできるようこの記事が参考になればと思います。
本記事はWeb制作（サイト・LP）などユーザーが見る部分いわゆるユーザーインターフェースの実装をしていきたい方が対象となっています。この記事ではWeb制作とはWebアプリ制作ではなく、サイト・LP制作を指します。
目次
では解説していきます。
Web制作なら言語はこれだけ
結論から言いますとWeb制作（サイトやLP）であれば
メインとなる言語はHTML・CSS・JSの3つとサブでSass・jQueryの2つの計５つです。
サブの2つですが、SassはCSS、jQueryはJSと関係が深く、CSSとJSを理解しておくとそれぞれの理解するのに時間がかからないので優先度は下げて大丈夫です。
まずはメインの3つに絞ってインプットをしていきましょう。
理由は2つです。
①HTML・CSS・JSはサイト・LPだけでなく、より高度なスキルを必要とするアプリ制作でも使う言語だからです。
②この３つをある程度自由に使えるようになるだけで副業で案件獲得が可能です。
最初からサイト制作はハードルが高すぎるので、まずはLP制作を受けることになると思います。
LPとはランディングページの略で、サイトのように複数ページではなく、縦長の１ページのことを指します。
私は今もこの言語を中心にフリーランスとして活動しております。
実際に私の2021年の副業で３/５案件でこの３言語だけで対応しました。LP制作だったのでひと案件10万ほどです。
他のサイトでPHP、Ruby、Perlとかも見たけどこれらは不要？？
確かにブログサイトを作ったりやアプリを開発したりするのであれば必要になってきますが、学習を始めたばかりの人にとってはまだ不要です。
HTML・CSS・JSを使いこなせるようになってから別の言語を学習すると良いでしょう。
自分自身そうだったのですが始めたばかりで色んな言語をやってしまうとそれぞれの理解がどうしても薄くなってしまいます。
また学ばなくてはならない情報量に圧倒されて病んでしまいます。w
なので3つに集中しましょう。（3つでもハードです）
独学だけでもOK。スクールは余裕があれば。
最近各社でプログラミングスクール事業を展開していて、魅力的な広告がバンバン流れてきますよね。
スクールに入れば３ヶ月でエンジニアになれるぞ！と思っている方もいるかもしれませんが、現実の話をしましょう🤫
学び始めて間もない時にスクールに行くことが必ずしもスキルを身につけられる一番の近道ということではありません。
むしろ独学で項目を絞って勉強をしたほうが効率的だと考えています。
理由としてはスクールはある程度短期間（1-3ヶ月）でアプリ開発までやるというものが多く、この記事で言うWeb制作をやりたいという点から見ると悪い意味で「やり過ぎ」になります。
どういうこと？？？
確かにスクールでもHTML・CSS・JSを学ぶのですが、多くのスクールではここはさらっと終わらせ、Rubyなどのアプリ開発のための言語に時間を費やすことになります。
実は私はテックキャンプに参加していました。
カリキュラムを一通りやったのですが、Web制作と言う点では一番時間を要したアプリ開発の知識は使わず、アプリ開発を必要としていた知識は忘れてしまいました。
誤解しないで欲しいのですが、TECH CAMPは素晴らしいサービスだと思います。
当時の自分にはまだ早かったということです。（今からもう一回行こうかな🤔w）
逆にアプリ開発をバリバリやりたいと言う人であればスクールはありです。
しかしそれでもHTML・CSS・JSはアプリ開発の過程で実装しなければならないので結局外せないでしょう。
Web制作であれアプリ開発であれ、まずはHTML・CSS・JSは必要です。
繰り返しになりますが、まずはメインのHTML・CSS・JS３つを十分に理解してから別言語を学習にしても遅くはありません。
コスパ最強。独学する上で心強い学習サイト
まずはProgateをする人が多いかと思いますが、個人的にはudemyだけで問題ないと考えています。
一人でカタカタ進めるProgateとは違いudemyはオンライン動画学習サービスなので口頭で説明をしてれますし、各言語の最新の慣習（記述スタイル）などもわかります。また疑問点は講師に質問を送ることができるので心配ないです。
そしてコース購入後は視聴期限なくずっと見ることができます。
スクールだと卒業するとカリキュラムが見れなくなります（テックキャンプではそうでした）
一点udemyで気をつけて欲しいのでが、購入するときはセール時にしてください。
通常￥20,000するコースがセールでは￥2,000弱になったりします。そしてセールはほぼ毎月の頻度でやっています🤭
現役でフロントエンドをしている自分のお勧めの教材を3つに絞ったので紹介しておきます。
①【最新2021】未経験からHTML、CSS をマスターして、WEBデザイナー・エンジニアを目指す 最高の実践コース
こちらのコースではコーディングは初めてという方でも、確実にHTML5とCSS3の技術を身につけ、WEBサイトを公開することができます。すべてのセクションで理論だけでなく実際に手を動かしてコードを書く演習が行われるので、初心者でも実践的な技術が身につきます。
最新のCSS Gridによるレイアウトも学べ、またPC、スマホ、タブレットあらゆるデバイス機器に対応するレスポンシブページ制作技術が身につけられます。
レビューの点数も5段階で4.2と高評価です。（2022年8月時点）
②【2022年最新】【JavaScript＆CSS】ガチで学びたい人のためのWEB開発実践入門（フロントエンド編）
こちらのコースはHTMLやCSSの基礎レベルは分かったけど、どうやってプロが作成するような本格的なサイトを組み立てていけばいいの！？という方のためのコースです。
CSSとJSを使ってアニメーションを使うので動きのあるサイトの制作ができるようになります。
またCSSの効率的なコードの書き方も学べ、初心者レベルからの脱却に役立つコースとなっています。
レビューの点数も5段階で4.6と高評価です。（2022年8月時点）
③即実践 手を動かして6時間でjQueryをマスターしよう。知識、経験ゼロからjQueryを使いこなそう
こちらのコースはjQueryメインとなっています。
jQueryの基礎やJSの関係性の説明など、全くの初心者からでも受けられる講座です。
一般的に公開されているサイトのスライダー機能やドロップダウン式のメニューの実装方法まで解説してくれます。
またライブラリーやプラグインの実装方法も学ぶことできるので、一気にリッチなサイト制作ができるようになります。
レビューの点数も5段階で4.3と高評価です。（2022年8月時点）
改めて必要な学習内容を表にまとめました。
| 講座名 | 【最新2021】未経験からHTML、CSS をマスターして、WEBデザイナー・エンジニアを目指す 最高の実践コース | 【2022年最新】【JavaScript＆CSS】ガチで学びたい人のためのWEB開発実践入門（フロントエンド編） | 即実践 手を動かして6時間でjQueryをマスターしよう。知識、経験ゼロからjQueryを使いこなそう |
| スキル | HTML・CSS | JS・CSS・Sass | jQuery・JS |
| 特徴 | ・HTML５とCSS３の最新の技術が学べる ・スマホ、タブレット、PC全てに対応できるレスポンシブデザインを学べる ・実践的で実務で活用するコーディング技術を学べる |
・CSS、JavaScriptの実践的な記述について深く学べる。 ・Sassも学べて実装スピードUPできる ・JSの基礎からDOM操作まで学べる ・動きのあるサイトを実装できる |
・jQueryメインの内容 ・JSの基礎部分もカバー ・ドロップダウンメニューなどよくある機能の実装 |
上記の内容が理解できていれば、スキル的には副業として案件を受けても十分に対応できるでしょう。
プログラミングについて有益な情報を発信しているブログ４選
独学は孤独な戦いです。
表示崩れが起こっていたり、エラーになったり、自分だけができてないのでは？と不安になります。
そんな時は同じ境遇を経験した方のブログを見るといいでしょう。
自分がつまずいていたエラーの解決方法を説明してくれているかもしれません。
将来的に副業でいくらぐらい稼ぐことができるなどの情報発信をされている方もいるので継続のモチベーションに繋がったりします。
オススメのブログを４つ紹介します。
①COMBLOG 完全未経験からフリーランスエンジニアに
文系Fラン大学出身で全くの未経験からプログラミング学習をスタートし、ブラックSESに勤めて現在フリーランスエンジニアとして活動されています。
プログラミングの勉強方法・継続のコツ、IT業界についての記事を執筆をされています。
②かずたか@プログラミング独学して起業した人
noteでの執筆をされています。
タイトル通り独学後起業されたかずたかさん。
プログラミング初心者が知っておくべき独学のコツやオススメのツールなどの情報を発信してくれています。
③webliker
主にHTML・CSS・Web制作について発信をしてくれています。
内容としては、CSSの記述効率化のチートシートやWeb用語の解説、Web制作現場の必須テクニックを豊富な記事の量で解説しています。
④SAMURAI ENGINEER BLOG
今回紹介した言語の基礎知識を豊富な記事数で細かく解説してくれています。
PHP,Ruby,,,の記事も多くあり新たな言語を学習する際での見ることになるブログです。
プログラミングの内容だけではなく、副業で稼ぐためには？やフリーランスまでのロードマップの記事もあり今から独学を始めた方が知っておくべき情報が詰め込まれています。
このブログも将来的に、皆さんの役立てるようにどんどん情報をアップデートしていきます！
また質問等があればTwitter：@YAMATOdevlogにメッセージもらえると嬉しいです。
まとめ 的を絞って集中的にやりましょう
以上、解説してきましたがまずはWeb制作であれば、フロントエンド／バックエンドの両方で必要になる言語であるHTML・CSS・JS（Sass・jQuery）をマスターしましょう。
スクールに行けば効率的に学べると思いがちですが、サイト制作をしたいはずがアプリ開発を学ぶことになり、今後使わない言語の学習に時間と費用をかけることになります。
スクールに通わずとも今回紹介したudemyの３つの教材を購入しておけば、費用を1/100以下に抑えることができ、必要言語を集中して学ぶことができます。
３ヶ月ほどでカリキュラムが終わり教材にアクセスできないスクールと違い、動画の視聴期間もないのでずっとみ続けられるのは大きなメリットの一つです。
挫折することもあるかもしれませんが、その際はTwitterで仲間を集めるのもよし、紹介したサイトやブログでモチベーションを上げて独学を継続していきましょう！
以上です！
夢に一歩前進していきましょう～。