目次
フロントエンドエンジニアとは
そもそもフロントエンドエンジニアってなんでしょう？
フロントエンジニアとは、主に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などで、フロントエンドエンジニアがサーバーサイドの理解を深めると、円滑にサーバーサイドエンジニアとコミニュケーションが取れるなど、多くのメリットが得られます。
フロントエンド系を初心者におすすめする理由
フロントエンドエンジニアについて、なんとなくわかったところで初心者におすすめする理由を解説していきます。
- すぐ動作が確認できる
- 微調整が格別に簡単
- 副業・フリーランスに適している
上記の通りです。
それぞれ詳しく解説していきます。
すぐ動作が確認できる
フロントエンドは、結果をすぐに確認できることが大きな魅力です。
フロントエンドで使うJavaScriptはスクリプト言語と呼ばれ、《ビルド》する必要がなく、safariやGoogle Chromeなどのブラウザがあれば簡単に確認することができます。
しかしJava、swift、C言語などは書いたコードを《ビルド》という作業をしなくてはならないので、一手間多く、これが結構めんどくさいです。
さらに《ビルド》はエラーが出る場合も多く、エラーを解決しない限り動作を確認することはできません。
もちろんJavaScriptもエラーは出ますが、《ビルド》がない分トライ＆エラーを効率よく行うことができます。
確認はXAMMPで
具体的にどうやってsafariやGoogle Chromeなどのブラウザで確認できるか気になりますよね。
勉強するだけならXAMMPが非常におすすめです。
XAMMPとはWebページやWebアプリケーションの開発環境に必要なソフトウェアを１つにまとめたソフトウェアのことで、無料でインストールすることができます。
少し設定が手間ですが、使い方は簡単で、Webページの確認がしたければ指定されたフォルダにソースファイルを置くだけでOKです。
ちなみにMacをお使いの方はXAMMPの代わりにMampをインストールしてください。
詳しいインストールの方法は以下のページをご覧ください。
微調整が格別に簡単
フロントエンドで使うHTMLやCSSはGoogle Chromeのデベロッパーツールを使うことで簡単に微調整を行うことができます。
Java、swift、C言語などは前述の通り、ボタンの位置を数ミリずらしたいだけでも、《ビルド》して確認する必要があります。
しかしHTMLやCSSならデベロッパーツール上のパラメータを変更するだけで、今見ているWebページのビジュアルがリアルタイムで変更されます。
変更されるのは自分が見ているページのみなので、ネット上で自分のWebページを閲覧している人の画面まで変わってしまう心配はありません。
僕はC言語、Javaからフロントエンドに移ってきましたが、フロントエンドの微調整は正直言って、むちゃくちゃ楽しいです。
実際の動作環境で、現物を見ながら調整できることは、エンジニアにとって大きな作業効率化に繋がりますよ！
デベロッパーツールの詳しい使い方は以下の記事を参考にしてください▼
副業・フリーランスに適している
フロントエンドエンジニアの大きな特徴として、フルリモートでも不自由なく仕事ができる点が挙げられます。
ただ《不自由なく》とはフロントエンドについて、しっかりとした知見があり、受注元の人と十分なコミュニケーションが取れることが大前提です。
PCとネット環境さえあれば、ぶっちゃけどこでもフロントエンドの仕事はできます。
そのため、副業・フリーランスに最も適している職種といえます。
効率よく勉強するならプログラミングスクールがおすすめ
フロントエンドの技術は、独学でも勉強できないことはないですが、挫折しやすく時間も長くかかってしまいます。
効率よくフロントエンドスキルを身につけたいならプログラミングスクールがおすすめです。
僕がおすすめするスクールはTechAcademyのフロントエンドコースです。
TechAcademyのフロントエンドコースについては以下の記事で詳しく解説していますので、そちらを参考にしてください▼
今回は以上です。
