初学者の方の場合、いざフロントエンドの勉強を初めてみるよう!
とか、また実際企業に内定が決まって業務に就けた!や、案件獲得できた!
等で仕事を進めている中で調べ物をしていたりすると、
続々と関連する様々な用語やツールが登場してきて
一体どこまでがフロントエンドの担当領域なんだ？
と思ってしまうと思います。
フロントエンドの業務を行う上で遭遇する用語たち
具体的には
- UXやUIというデザインに関連する話
- 黒い画面の話(主にnpmやnodeのコマンドライン)
- PHPやRubyというプログラム言語
- DBやMySqlというデータベースの用語
- Webサーバーに関連するApacheやNginxの話
- WordPressやCMS
- Git,Docker,Slack等のツール
等々ざっとこんな所でしょうか、
他にもまだまだ色々な用語が登場してくると思いますが、
今回はこれらのどこまでがフロントエンドエンジニアの担当範囲で必要か。
という話です。
これら全てにつてい深い知識があればもちろんそれがベストなのですが、
実際これがどれを、どこまで、という明確な区切りが無く、
いきなり全部の知識を覚えようとすると中々難しい所があります。
とういう所で現役フロントエンドエンジニアである筆者が個人的な見解や感想なんかを踏まえつつ
これは必須!やこれはとりあえず後回しで良いかな？等の優先度をご紹介いたします。
(前提知識)フロントエンドとバックエンド
前提知識としてWebエンジニアは、
大きく分けて、バックエンドエンジニアとフロントエンドエンジニアの2つに分かれると思います。
こちらの違いは下記参考にしていただければと思います。
以降は筆者が思う、
フロントエンドエンジニアとしてよく遭遇する各ツール、用語、技術等を
ざっくり紹介しつつ、どこまでの知識があれば良いのか
といった点をご紹介します。
HTMLとその関連知識
HTMLは紛れもなく必須で
基礎知識は分かってなければ話にならないレベルです。
SEOとセマンティックコーディング
最低でもSEO等を考慮したセマンティックコーディングが出来るぐらいの知識は欲しいです。
とりあえずHTMLとCSSだけでも、書いてくれる人いないかな、
どこかに安心して任せられる頼れるコーダーはいないかな。
と思っている同業者は多いです。
テンプレートエンジン
EJS、pug等に代表されるhtmlのテンプレートエンジンは
案件によってですが何かしらのテンプレートエンジンを利用する。
という事は多々あるのであれば尚良です。
CSSとその関連知識
基本的なCSSが書ける事は紛れも無く必須です。
CSS拡張言語
SCSSに代表されるCSS拡張は必須。
とまではいかないかもしれないですが現場レベルだと、
素のCSSを書く。という事はまず無いので
かなり優先度が高めの知識です。
一旦普通にページが組めるようになったら次はSCSSを覚えましょう。
CSS in JS
こちらはあればなお良し。ぐらいだと思います。
というかWebpackの利用だったりSCSSの知識は前提なので
その頃には少し使えば感覚的に分かると思います。
CSSフレームワーク
BootstrapやTailwindに代表されるフレームワークの知識は
あればなお良し。です
ただ企業や案件によっては必須な場合もあります。
JSとその関連知識
プラグイン等を利用しつつスライダー等に代表されるオーソドックスな実装は可能できる。
というレベルが必須かなと思います。
JS(フロント)は、HTML,CSSと比べると
深い知識をつけようとすると結構大変なので
少し難易度が高いだけあって自分でガリガリコード書いてスクラッチで実装。
とかVueやReact等のフレームワークが扱える。TypeScriptが扱える。
等が出来れば大きな強みになります。
Node.js
初学者の人は同じような〇〇.jsというのがたくさんあって戸惑いやすい所ですが
jQueryとかVue.jsとかReact等はブラウザで動くモノがほとんどですが、
Node.jsはサーバーサイドで動くJSです。
言語的には同じなので書き方等大体は同じですが
使い方や役割はけっこう別物で異なります。
Webpackやnpmを利用するのに必須なので
インストールと環境構築自体は結構優先度高めです。
なんだか難しく感じてしまいますが
ある程度決まった事をするだけなので利用するだけであれば
そこまで難易度も高くありません。
(併せてバージョン管理出来るNodebrew等も必要になるのであった方が良いです)
実際にNode.jsで何かプログラムを実装する。ということはあまり必要ないです
バックエンドもガリガリ書けるようになりたい！ とかであればトライしてみる感じで良いでしょう
サーバーサイドjsといった通りフレームワークなんかもあります。
RubyだとRuby on Rails
PHPだとLaravel
Node.jsだとExpress.js
みたいな印象で何となくわかってれば大丈夫です。
デザインと関連知識
デザインの確認・書き出しに利用するので 各種デザインアプリに操作知識は必須です。
支給されるデザインは担当するデザイナーや案件によって異なるので
それに合わせ環境を用意する必要があります。
Photoshop
少なくともPhotoshopでの書き出し操作は必須です。
余裕があれば今だとFigmaの操作知識があれば良いと思います。
その他Adobe XDやAdobe Illustratorも利用頻度としては少なく無いです。
書き出し操作以外にの操作は必須。とまではいかないまでも
ちょっとしたトリミングとか補正等の調整が出来ればと重宝されます。
デザインもできればベストです。
UX/UI等の用語と知識
UI/UX周りの知識はあればなお良しです。
が、ほとんどディレクター等から指示があり、その指示通りにしたがっておけば良い。
という事が多いので指示にある言葉の意味がわかる程度で大丈夫です。
コマンドライン周り
CUI
初学者は特に拒否反応起こす人も多いかと思う。
が黒い画面でカタカタ文字打ってどうこうするアレです。
CUIといいます。
ちなみにマウスとかで操作したり出来る
Photoshop等のアプリは対義語としてGUIと呼ばれます。
Node.js
JSの項目でも登場しましたが
Nodebrewだったり含めイントールや環境設定は優先度高めです
ビルドツール、パッケージマネージャ
最初は必須。とまではいかないものの 近代のフロントエンドだと開発にはほぼ必須で、
Webpackやnpmで頻繁に利用するのでかなり優先度高めです。
フロント開発なのに何故Node.jsが必要なのかと言うと主にこれらの利用頻度が高い為です。
サーバーやドメイン等知識
ここもインフラエンジニアという専門職もあったりで
色々どういったサーバー利用するかによっては結構難解になります。
レンタルサーバーの操作
フロント開発の最低知識としては
Xサーバー等に代表されるいわゆる普通のレンタルサーバーの操作は必須です。
(FTPソフト等利用してサーバーにファイルをアップする操作等)
ドメインやDNS・SSL
レンタルサーバーの場合は
コントロールパネルで設定すれば諸々うまい事やってくれるので
そこまで知識は必要ないと思います。
ただそれぞれ
どうゆう物か？という点ぐらいは知識として知っておいた方が良いです。
VPSやAWS等クラウドサーバーの操作
VPSやAWS等もよく目にする用語かと思いますが
これらは一般的にはフロント開発で触る事はあまり無いので
優先度は低めで、あれば尚良し。です。
AWSは人気ですが、多機能で出来る事がありすぎて初心者には敷居が高いので
最初のサーバー選びとしてはあまりおすすめしないです
が、扱えると強みにはなるのでやる気に燃えてる方はチャレンジしてみても良いと思います。
難易度としては
一般的なレンタルサーバー < VPS < クラウドサーバーです。
UNIX
項目的にはコマンドラインで触れても良かったかもですが、
作業PCがMacの場合でもWindowsの場合でもサーバーのOSはUNIXの場合がほとんどなので
サーバー操作自体はUNIXコマンドの知識が必要になあります。
前述の通りフロント開発でこれらの作業が必要になる。
というケースはあまり無いので最初は不要です。
ただバックエンドやサーバー周りの設定なんかも出来るとフルスタックエンジニア。
と呼ばれたりで重宝されます。
ApacheやNginx
ApacheやNginxはWebサーバーソフトです。
これらも基本的にはフロント業務で何か設定整えたり、という事は
あまり起きないので普通は必要ないと思います。
WordPressやCMS
一時期程聞かなくなりましたが
CMSといえばまだまだWordPressだと思います。
WordPress自体の実装は必須では無いですが
ローカルに環境用意する事でPHPやDBだったりサーバー(ローカル)等の知識が付くくので
環境構築の初歩としてうってつけなので率先してやって良いです。
PHP使ったりDB使ったりってバックエンドの話じゃないの？
フロントの業務に関連するの？と思ってしまいますが
これがまた微妙なラインでそこそこ必要になります。
WordPress
あまり聞かなくなって来た印象があるので
WordPress自体の実装知識は必須では無いです。
個人的な頻度としては
年に一度ぐらいWordPress実装の案件があります。
ただ以前と違いWP REST API利用しつつ実装という事が多いので
余力のある人はチャレンジしてみても良いと思います。
DB(MySql)
SQL構文を書けるように。という事は覚えなくても大丈夫です。
WordPressの利用にDBが必須なので
単純にどうゆうものか？等の知識はつけた方が良いです。
MAMP(XAMPP)
WordPress(に限った話では無いですが)をローカルで動かす際に
MAMP(XAMPPはwindowsの場合)が必要になります。
PHP等が動くローカルサーバーの環境用意としては色々自動でやってくれて
比較的難易度が低めなので初歩としてはこれらの利用知識をつけるのがおすすめです。
Docker
ちょっと発展して最近だとDocker利用する事が多いです。
コンテナ型の仮想化環境をつくる事が出来ます。
Dockerの設定等はMAMPより難易度が高くなるので最初は不要ですが
チーム開発等に参加する場合には結構必須となる事が多いです。
チーム開発の場合はおそらくプロジェクトのエライ人等が用意してくれる。
というパターンが多いと思うので
自分で設定したり。という事はそこまで必要ないですが余力があればトライしてみましょう
少なくともインストールぐらいはしておいても良いです。
連絡手段、タスク管理等
連絡手段はクライアントによります。
オーソドックスなのはいわゆる普通のメール、スラック、チャットワークあたりでしょう。
Slack
今だと1番多いのはスラックになると思います。
チームコミュニケーションツールという位置付けです。
ただ、あんまり覚える、というよりは、最近だとチャットツールは当たり前なので
実際使えば感覚的に分かると思います。
必要になったらインストールしてみる。とかで十分だと思います。
タスク管理やプロジェクト管理
このあたりもNotionだったりBacklogだったり結構色々ありますが
クライアントやプロジェクトによってまちまちで
ちょっと使えばわかる作りになっているので
実際必要になったら覚える。とかで十分だと思います。
その他
その他上記であまり区分けできないその他ツールです
Git
ソースコードのバージョン管理に利用します。
初学者だとそもそも何に利用するかピンと来ないですが、ざっくりいえば
作業の記録をつけて、記録をつけたポイントにすぐ戻したり切り替えたり、といった事ができます。
何か致命的なエラーが起きた！
という時に記録を確認したり戻したりすれば
どの時期にどこの変更でエラーがおきるようになってしまったのか。といった事がわかります。
Gitも案件によってはですが、比較的必須な事が多いので優先度高めです
とりあえず下記が出来るぐらいだと良いです。
フェッチしてマスターマージしてから
ブランチ切ってチェックアウトしてコミットしてプッシュする
と行ったような、専門用語のオンパレードで
なんだか敷居が高く感じてしまいますが
慣れれば実際やる事は基本そんなに変わらず大体上記の繰り返しです。
凝った事をやろうとしなければ
日常的に使う分にはそんなに難しい事もないので身構えなくても大丈夫です。
コマンドでも操作できますが
GUIのGitクライアント利用した方が
最初はとっつきやすいと思います
GitHub
GitとGitHubは混同しがちですが、
Gitは管理ツールなのに対して
GitHubはGitを利用したホスティングサービスです。
プルリクエスト
GitHubの特長としてはプルリクエストがあります。
これは本来Git自体の機能では無く
GitHubが最初に提供したサービスです
名前そのままですが、プッシュしたブランチをプルしてください。
というリクエストが出来ます。
リクエストされた側はリクエストされたコードをレビュー後にマージ。
といった手順を取る事が出来るので
不要なコードが無いか確認できたりバグが起きる可能性を低くできたり、
といったメリットがあります。
ワークフロー
また、プッシュした際に特定のワークフローを作動させたり。といった事も出来ます。
サイト公開時には、
サーバーにFTP等で接続、ファイルをアップロード。
という手順が一番シンプルですが
このあたりをワークフローで自動化する。
といった便利な事もできます。
同じようなサービスだとGitLabやBitbucketなどが挙げられます。
現在だと無料プランも使いやすくなってGitHubが1番一般的です。
プルリクエストやワークフローの知識に関しては
フロント開発で設定担当する事はあまり無いので
出来れば便利ですが後回しで良いでしょう。
VSCode
エディタも色々ありますが今だとVSCodeが一番かと思います。
色々使ってみて自分の好みのエディタ使えばよいと思います。
ちなみに古くからあるエディタであるEmacs派とvi派で今もなお？戦争が続いています
僕は一時期Emacsにあこがれていたので
VSCodeをEmacsバインドに変更して利用しているなんちゃってEmacs派です。
まとめ
ちなみに下記はこれまでの内容、とは逆にいらない知識はどれか。
という視点で書かれた内容なので参考にしていただければと思います。
まだまだまだいろんな用語やツール、技術が日々登場してくるので
これらを覚えておけば完璧!という訳にはなかなかいかないのが大変な所でもありますが
何となくでも予備知識として頭に入れておけば参考になるかと思います。