フロントエンドエンジニアのスキルを習得して副業したい！もしくはフリーランスになって独立したい！と思っている人は最近多いですよね。
- 「でもプログラミング未経験だから何から手をつけたらいいかわからない。」
- 「そもそもフロントエンドエンジニアってどんな事をして、どんな仕事があるんだろう。」
こんな悩みを持っている人も多いんじゃないでしょうか。
今回は現役でフロントエンド、サーバーエンドの仕事をしている僕がフロントエンドエンジニアのスキルを独学で学べる方法をご紹介します。
この記事を書いている僕は、2010年に新卒でプログラマとして就職。転職を１回経験し現在も現役プログラマとして日々コードを書いています。
C言語、C++、Java、HTML5／CSS３、JavaScript、PHPなど様々な言語を経験しています。
ただ先に断っておきますが、「副業で稼ぐ」「フリーランスで生きていく」ことができるようになるまで、決して簡単ではないです。
特にいきなり未経験から「フリーランスで生きていける」ほどプログラミングもフロントエンドエンジニアも甘くはないという事をお見知り置きください。
甘くない件についても当記事で理由を説明しますので、最後まで読んでもらえると嬉しいです。
フロントエンドエンジニアとは
そもそもフロントエンドエンジニアってなんでしょう？
フロントエンジニアとは、主にWebデザイナーのデザインをもとにHTML,CSS,JavaScriptを駆使してWebページを実際に作っていくお仕事です。
フロントエンド初心者はIllustratorやphotoshopで作られたデザインを見て、実際のWebページを作っていきますが、慣れれば１ページあたり２〜３時間ほどで完成できるレベルまでなら誰でも到達できる簡単さが魅力です。
さらなるキャリアアップを目指すなら、デザインも自分でやってみると良いでしょう。
例えばフリーランスで本気で生きていくなら、デザイン〜Webページの実装まで一人で出来ることは必須だと思います。
必要なスキル
フロントエンドエンジニアになるため、必要最低限のスキルは、
- HTML
- CSS
- JavaScript
- jQuery
上記の通りです。jQueryは厳密にいうと同じJavaScriptの一部ですが、使っていないフロントエンドエンジニアはほぼいないので、しっかりと使えるようになりましょう。
それぞれ簡単に解説します。
ちなみに「BootStrapもあった方が良い」という人がいますが、上記４つほど必須ではないです。
なぜならBootStrapはサイトのデザインを整える上で、非常に便利なスキルですが、《本当に自由なデザイン》でサイトを作ろうと思った時、BootStrapの制約が邪魔になる可能性があるからです。
そもそもBootStrapはCSSの拡張機能のようなものなので、CSSをちゃんと理解する前から並行して覚えるのは少々危険かなって思います。
HTML
HTMLはマークアップ言語と呼ばれ、WEBページを作るときに利用します。
要するにWEBページの図面のようなものです。
GoogleChromeやSafariなどのブラウザはHTMLで書かれが図面を見て、WEBページを画面に表示しています。
CSS
CSSはWEBページの見栄えを整える言語です。
つまりHTMLで書いた図面に色をつけたり、ボタンを丸くしたりと装飾するために使います。
さらにWEBページに簡単な動き（アニメーション）をつけることも可能で、マウスのカーソルをボタンに近づけたとき、ボタンが少し浮いたりする動作はほとんどCSSで行っています。
この二つを理解するだけで、見た目だけならかなりオシャレなWEBページを作ることも十分可能です。
またCSSを理解していると、WordPressなどで作ったブログを自分流にカスタマイズすることも容易にできるでしょう。
試しに今見ている記事のどこでもいいので右クリックをして、
- GoogleChromeなら「検証」
- Safariなら「要素の詳細を表示」
をクリックしてみてください。
以下のような画面が出てくると思いますが、画像の通りでこれがHTMLとCSSです。
今は何が書いてあるかさっぱりわからないと思いますが、２〜３ヶ月も勉強すれば、どこがどうなっているのか理解できるようになりますよ。
JavaScript
JavaScriptはブラウザ上で動作するプログラミング言語です。
要するにHTMLとCSSで書いた図面に命令を加えることができます。
例えばHTMLとCSSでチャットの送信ボタンを書いたとします。このままだとただの飾りですが、JavaScriptを理解していると「送信ボタンを押したら、文字を送信」のような命令を加えることができます。
jQuery
jQueryはJavaScriptをより簡単にコーディングできるように作られたフレームワークです。
要するにjQueryの拡張機能ですね。
例えばネイティブなJavaScriptで１０行書かなければいけない命令も、jQueryなら１行で済みます。
この二つを駆使することで、CSS3では難しいようなアニメーション演出も簡単に行うことができます。
さらに極めれば、リアルタイムで動くチャットなどを作ることもできます。
プラスで欲しいスキル
上記で紹介した、
- HTML
- CSS
- JavaScript
- jQuery
４つのスキルとは別に、プラスで欲しいスキルも紹介しておきます。
- Angular、Vue.jsなどのフレームワーク
- BootStrap
- PHPなどのサーバーサイドスキル
それぞれ簡単に解説します。
Angular、Vue.js
こちらはJavaScriptのフレームワークです。フレームワークとはわかりやすく言えば、拡張機能的なものです。
JavaScriptには非常に多くのフレームワークが存在しており、今回紹介したAngularやVue.jsはより簡潔に複雑な処理を書けるように開発されたフレームワークです。
より高度なWebページやWebアプリを作るためには必須になってくるスキルですので、慣れてきたら勉強してみると良いです。
ただし、案件や企業などによって使っているフレームワークが違うので、そこら辺は臨機応変に。
ちなみにjQeuryもJavaScriptのフレームワークです。
BootStrap
BootstrapはCSSのフレームワークです。
BootStrapに定義されているクラスを使えば、非常に簡単に統一感のあるデザインに整えてれるだけでなく、レスポンシブにも対応してくれる優れものです。
クラスという言葉の意味はCSSを勉強しだせば秒殺で理解できるので、ここでは特に詳しく解説しません。
レスポンシブとは１つのWebページで、PC画面でもスマホ画面でも最適に表示されるように対応することで、これがかなりめんどくさいです。
BootStrapを使うことで、自動的にレスポンシブ対応してくれることは、神対応と言えます。
PHPなどのバックエンドスキル
WebページやWebアプリは、
- ユーザーの目の前に画面として現れる：フロントエンド
- ユーザーのアクションをチェックしたり、実行したりする：バックエンド
の２つで成り立っています。
バックエンドエンジニアはサーバーサイドエンジニアとも呼ばれ、サーバー側ですべき事を担当します。
代表的なプログラミング言語はPHPなどで、フロントエンドエンジニアがサーバーサイドの理解を深めると、円滑にサーバーサイドエンジニアとコミニュケーションが取れるなど、多くのメリットが得られます。
副業・フリーランスに適している
フロントエンドエンジニアの大きな特徴として、フルリモートでも不自由なく仕事ができる点が挙げられます。
ただ《不自由なく》とはフロントエンドについて、しっかりとした知見があり、受注元の人と十分なコミュニケーションが取れることが大前提です。
PCとネット環境さえあれば、ぶっちゃけどこでもフロントエンドの仕事はできます。
そのため、副業・フリーランスに最も適している職種といえます。
フロントエンドエンジニアを独学で学ぶ４ステップ
フロントエンドエンジニアについてなんとなく理解したところで、独学で学ぶならどうやって進めていけば良いか４ステップで解説していきます。
- STEP1：学習サイト
- STEP2：実際に書いて慣れる
- STEP3：実際のサイトを分析する
- STEP4：架空のLPを作ってみる
上記の通りです。
それぞれ詳しく解説していきます。
STEP1：学習サイトを使い倒す
身もふたもない話ですが、全くの未経験者がスキルと知識を身につけるにはネット上に転がっている「学習サイト」を使い倒すのが最も最善です。
特におすすめなのが、
上記２つです。
僕がプログラミングを始めた１０年前に比べると、プログラミングに関するの情報は非常に充実しましたし、「学習サイト」の質は驚くほど良くなっています。
無料でできる範囲で良いので、フロントエンドに関わるスキルは全て学習するようにしてください。
全て終われば、STEP2に必要なスキルは整っているはずです。
STEP2：実際に書いて慣れる
学習サイトを使い倒したら、今度は自由にコードを書いてみてください。
学習サイトで行った課題をそのまま模写するのも良いですし、覚えた事を重ねて実装してみるのも良いと思います。
「百聞は一見に如かず」という言葉がありますが、プログラミングも同じです。誰かに教えてもらって覚えたことと、実際に自分で考えながら覚えていくのでは、スキルアップの速度に雲泥の差が現れます。
STEP2を実行するのに便利なサイトが、
です。
このサイトでは、以下の画像の通り書いたコードがリアルタイムで結果となって反映されます。
ピンクで囲ったウィンドウ
こちらのウィンドウには実際にコードを書くことができます。
上部に表示されているタブを切り替えれば、HTML、CSS、JavaScriptと編集するファイルを切り替えることも可能で、ファイルの追加ももちろんできます。
青で囲ったウィンドウ
こちらのウィンドウには書いたコードがリアルタイムで表示されます。
文字列や画像はもちろんのこと、ボタンなどを作った場合もしっかりと反映されます。
緑で囲ったウィンドウ
こちらのウィンドウにはJavaScriptのログが表示されます。
コンソールログと言って、開発者向け、つまりフロントエンドエンジニア向けのツールです。
とにかく肌でプログラミングを感じる
兎にも角にも、書いたコードがどのように結果として現れるのか肌で感じるようにしてください。
またリアルタイムで結果が見れるのもフロントエンドの良いところです。これがJavaやC++のような言語だとビルドという作業を挟まなければならないため、確認までがめんどくさかったりします。
STEP3：実際のサイトを解析する
学習サイトを使い倒し、実際に自分でコードを書いてみて、ある程度フロントエンドについて知見がついたら、もう少し実践的なところへ進みましょう。
実はフロントエンドエンジニアに必要なスキルの答えは、全てのWebページで見ることができます。
とはいえ何のことかわからないと思うので、もう少し突っ込んだ解説をしてみます。
フロントエンドとはすなわち、HTML,CSS,JavaScriptを用いてWebページを作るスキルです。
そしてフロントエンドエンジニアが一生懸命書いたHTML,CSS,JavaScriptのコードは「デベロッパーツール」と呼ばれるツールで、全てネット上で見ることができるのです。
なんでもいいので、自分が「かっこいいなぁ」「作ってみたいな」と思ったサイトを開いてみてください。（当記事でもOK）
そしてそのサイトの適当な場所で右クリックをしてみてください。
いくつかメニューが出てくると思いますが、
- Google Chromeなら「検証」
- Safariなら「要素の詳細を表示」
をクリックしてください。
画像はsafariのものです。
すると、以下のような画面が出てくると思います。
画像の通り、今開いているページのHTMLとCSSを簡単に確認することができます。
さらに
- Google Chromeなら「Sources」
- Safariなら「ソース」
タブをクリックすると、画面が切り替わり左のツリーに表示されている「.js」ファイルがJavaScriptのファイルです。それぞれクリックすることで、コードの詳細を見ることができます。
画像はsafariのものです。
これらツールを活用し、自分が理想とするサイトはどのようなコードで書かれているのか、解析しましょう。
コードの意味が読めるようになれば、もう自分で作れるようになったも同然です。
STEP4：架空のLPを作ってみる
デベロッパーツールを使って、実際のサイトが解析・理解できるようになったら、いよいよ最後のステップです。
今度は自分の手で架空のLP（ランディングページ）を作ってみましょう。
LP（ランディングページ）とは超簡単にいうと、企業の商品ページです。
企業はLP（ランディングページ）にユーザーを集客し、「商品の購入」「カウンセリングの予約」「サービスの会員登録」まで誘導します。
そしてLP（ランディングページ）が作れると、副業やフリーランスで稼ぐことが可能になってきます。
具体的な方法は以下の記事で解説していますので、そちらを参考にしてください▼
架空のLP作りを大量に行い、自分のポートフォリオ（制作物）としてストックしていけば、副業やフリーランスで案件を受注する際の実績として使えます。
ここまでできたのなら、フロントエンドエンジニアとして、副業やフリーランスで稼ぐ力は十分についています。
とはいえ独学だと挫折しやすいです。
ただ簡単そうに説明してきましたが、実際に独学だとそうはうまくいかないものです。特にSTEP3、STEP4がうまく進めることができず、挫折してしまう人も多いでしょう。
そんな人はプログラミングスクールに通うことをお勧めします。
プログラミングスクールの良いところは、専門知識を持ったメンターがついてくれるので、好きなタイミングで疑問に思ったことを質問できる点にあります。
正直、プログラミングを勉強していて質問０で完了できることなんてほぼ無いです。現役の僕でさえ、日々調べたり有識者への質問を行なっています。
フロントエンド系を学ぶためにお勧めなのが、TechAcademyのフロントエンドコースです。
詳しい内容は以下の記事で解説していますので、参考にしてください▼
未経験からフリーランスはほぼ無理です
ここまでフロントエンドエンジニアのスキルを独学で学ぶ方法を解説してきました。
STEP4までできるようになれば、副業・フリーランスとして稼ぐことは十分に可能です。
しかし、《フリーランスとして生きていく》ことは不可能に近いと思います。
STEP4まで出来たとしても、最初のうち稼げる金額は月に５〜１０万が良いところ。
副業なら本業の収入があるので、生きていくことは十分可能ですが、月の収入が５〜１０万だと今の日本では生きていくことは不可能に近いですよね。
《フリーランスとして生きていく》をしたいのなら、「急がば回れ」です。
まずは企業に就職し、確かな実績を積み上げフリーランスに挑戦してみてください。
早ければ１年ほどでフリーランスに転向した実績もあります。
もし就職・転職の仕方で迷っていたらぜひ転職エージェントを検討みてください。
転職エージェントとは、転職者と企業の間で両者の転職活動を支援する、いわば転職のプロです。
第三者が介入するので転職活動の自由度が低くなるデメリットがありますが、得られるメリットがデカすぎます。
詳しい内容は以下の記事で解説していますので、ぜひ参考にしてみてください▼
ちなみに僕も転職エージェントの力を借りて転職を成功させています。
というわけで今回は以上です。
