フロントエンジニアになるぞぉぉー！！
Web制作の仕事に就きたい人向けに書きます。
この記事の内容
・フロントエンドエンジニアとして働きたい
・フロントエンドエンジニアになるにはどんな知識が必要なのか
・独学でもフロントエンドエンジニアで転職できるか
僕は現在、
フロントエンドエンジニアを本業にしてます。エンジニアに転職する前は未経験でした。
そして、色々なエンジニアの方とも出会えました。
フロントエンドエンジニアとして
ここだけは最低限身につけておいて方が良いスキルを紹介します。
あと、プラスαでやっておいた方が良いことも紹介します。
フロントエンドエンジニアになる前に最低限身に付けておくべきスキル
スキルを身につけておくことは
転職に有利になることは間違いないですが
働き出してからもスキルがないと困ることになるので
この記事で紹介することは最低限身につけた方が良いと考えています。
ここでは主にWeb制作の仕事に就きたい人向けに書きます。
アプリ制作とかはまた別物ってことになります。
Web制作に必要な言語
下記の言語を扱えることが必須になります。
- HTML
- CSS
- JavaScript（jQuery）
- PHP
この当たりを学習しておくと良いです。
それぞれ、どのくらいの知識があれば良いか解説します。
HTML
Web制作では基本となるマークアップ言語です。
HTMLとは
略語で正式には「HyperText Markup Language」と良います。
HTML＝ HyperText Markup Language
Webページを表現するための言語です。
おそらく大本の人は最初に学ぶ言語だと思います。
では、どのくらいスキルとして身につけたら良いか箇条書きにしてみます。
- インデントを揃えてかける
- class名を規則的に付けれる
- 基本的なタグを理解している
- h１〜h６の適切な見出しを付けれる
- ol,ul,liを理解
- dl,dt,ddを理解
- table,tr,td,thを理解
- フォーム関連のタグを理解
こんな感じですかね。
この辺を理解しておけば
とりあえず、サイトは作れてしまうと思います。
注意したいのは
全てを完璧に習得しようとしないことです。
実務で分からないところは必ず発生します。
その都度ググれば良いです。
と、いうか
慣れてきたら分かるのですが
ほぼほぼ自分のコードの書き方を身につけてしまえば
めちゃ変わったサイトでもない限り
同じように実装できてしまいます。
CSS
CSSはHTMLとセットです。
HTMLで書いた物に装飾してくれるのがCSSです。
CSSとは
略語で正式には「Cascading Style Sheets」と良います。
CSS ＝ Cascading Style Sheets
では、
CSSはどのくらいスキルとして身につけたら良いか箇条書きにしてみます。
- paddingとmarginの違いを理解
- Flexboxを使える
- レスポンシブで作成できる
- z-indexの理解
- position 「relative・absolute」の理解
- 擬似要素の理解
- hoverの使い方
こんな感じです。
JavaScript（jQuery）
jsと呼ばれるものですね。
サイトの動きをつける役割とかを担ってます。
Web制作の現場では主にjQueryを使用すると思います。
jQueryとは
JavaScriptのライブラリで、
JavaScriptのコードを簡易的に実装できるように設計されています。
jQueryでできることはJavaScriptでできるし
JavaScriptでできることも
ほぼほぼjQueryでもできます。
Webサイトの動きはある程度、決まったものが多いので
良く使う物を最低限、スキルとして身につけておけば問題ないです。
おそらく下記のものを良く使います。
発火タイミング別
- クリックしたら発火
- 要素が変更されたら発火
- サイトが表示されたら発火
- スクロールしたら発火
- タップしたら発火
メゾット別
- consoleに表示させる
- aertで画面に表示させる
- クラスを追加/ク取り除く
- 要素を書き換える
- 要素を表示させる/非表示にさせる
- フェードイン/フェードアウト
発火とは
動きをいつ発動するかのタイミングの処理です。
発火のタイミングで
指定した要素に動きを与えます。
PHP
フロントエンドの最低限のスキルとして
上のHTML,CSS,jQueryの知識があれば程度は大丈夫です。
ですが、PHPを含めた理由として
WordPressのようなCMSというものに対応するためです。
CMSとは
コンテンツ管理システムといいます。
例えばブログ記事を投稿したら、PHPで作っておいたテンプレートを元に自動的にWebページを作ってくれます。
WordPressを導入しているサイトは非常に多く、WordPressの開発にはPHPを使います。
なので、フロントエンドエンジニアが扱うPHPはWordPressに良く使う物を理解しておくことが必須になります。
WordPressで良く使う関数はググればすぐ出てくるので
それはなんとなく見ておきましょう。
あとは、PHPの基本的な下記のものも理解しておきましょう。
- echo
- if文、foreach文、switch文
- 配列の書き方
本当に最低限ですが、この当たり理解すると
他のはなんとなく分かると思います。
プラスα
最低限のスキルとして言語を紹介しましたが、プラスαとしてGitというものを理解しておくとチームでの開発に役立ちます。
Gitとは
バージョン管理システムと言われている物です。ソースコードの管理を良い感じにしてくれます。
ま、簡単にゆうと
Webサイトを作ってるコードのファイルをチームのみんなで共有する感じです。
イメージとしてはiCloudとかGoogleドライブのようなもので。
管理している元のファイルを自分のパソコンに複製してきて
複製してきたファイルで作業します。
その作業したファイルを元のファイルに上書きしていくとう認識で最初は大丈夫です。
Gitに関してググって知っておいた方がいいワードは下記です。
- GitHub
- リポジトリ
- コミット
- プッシュ
- プル
- フェッチ
- マージ
- チェックアウト
開発していても上の用語は良く使うし、現場でも飛び交う言葉なので知っておくべきです。
まとめ
フロントエンドエンジニアになる前に最低限身につけておくスキルや用語は以上です。
全部をいきなり使いこなせたり覚えることは不可能ですが、
調べたことにより
頭の片隅にあればすぐにまたググれるし
先輩エンジニアへの質問の質もあがるはずです。
最初か完璧を求めたりせず、気楽にいくのも大切なので
楽しんでエンジニアライフしていきましょう。
