この記事を読んでほしい方
- フロントエンドエンジニアとは何か知りたい方。
- フロントエンドエンジニアに興味があるが、自分に向いているかを知りたい方。
- web制作の業務に興味がある方。
サイト制作を行う場合、工程ごとに担当する人が変わることが一般的です。
企画 → ディレクション → デザイン → コーディング
この流れで制作するパターンが多いかなと思います。一人で複数工程を担うパターンや、全行程を担うパターンもあったりします。
Web制作の全体的な業務内容
この工程のなかで、「コーディングの一部分」を担うのがフロントエンドエンジニアです。
Web制作の全体的な業務内容
ざっくりそれぞれの工程について説明すると
- 企画 → 何をどのように制作するかを決める。
- ディレクション → 企画されたものを満たすワイヤーフレームを作り、デザイン・コーディングを指揮する。
- デザイン → ワイヤーフレームをもとに装飾やレイアウトの見た目を組んでいく。
- コーディング → デザインをもとにwebサイトとして反映・機能を実装する。
こんな感じです。
コーディングについては色々範囲があるのですが、
- フロントエンド → Web上で可視化できる部分のコーディング。
- バックエンド → Web上で見えない、「データのやり取り」だったり、「見る人や時間によって表示を変える設定」の部分をコーディング。
このあたりが定義になってきます。
フロントエンドエンジニアにも、開発するモノによって必要なスキルが変わってくるのですが、
今回はWeb制作でページを作る場合についての話をしようと思います。
フロントエンドエンジニアの業務内容
基本的な業務内容
フロントエンドエンジニアは、コードを書いてデザインをwebサイトに反映させていきます。
どんなコードを使うかといいますと、
- HTML → テキストを反映させる
- CSS → 装飾だったりレイアウトを整えたりする。
- Javascript → サイトに動きをつける。
すごくざっくりですが、こんな感じです。
以前、コードをwebサイトにどのように反映させるかを書いた記事があるので、参考にしてください。
HTMLとCSSを知っておけば、最低限サイトは作れるかなと思いますが、
動きのついたサイトや、CSSで実装できないレイアウトを達成するためにJavascriptを使ったりしますね。
Javascriptについては、jQueryという、Javascriptをより簡単にかける「ライブラリ」がありますので、
Javascriptより先にjQueryを学んでおくと、初学者からいち早く抜け出せるのではと思います。
その他の業務内容
プログラミングやコーディングでは、
webサイトを閲覧する「ブラウザ」ごとで見え方が違ったり、ブラウザ特有の不具合が出たりします。
たとえば、あるブラウザではJavascriptのコードが問題なく動作しているのに、他のあるブラウザで動かない、とか。
その他にも「PCやスマホの機種」ごとでも見え方が違います。
不具合の起こっているブラウザや機種に対してエラー対処していくことも、フロントエンドエンジニアの領域になってきます。
フロントエンドエンジニアに向いている人とは？
これは完全に個人的な経験をもとに話しますが、
- 「技術に興味があって、コツコツ作業ができる人」
- 「webデザインやその機能に興味がある人」
- 「人に聞くより、まずは調べて実践する人」
- 「作業を効率化させたいという考えがある人」
このあたりではないかと考えてます。多くてすみません。
一部でも当てはまって、やってみるか迷った方は、VSCodeをインストールしてコードを書いてみてください！
制作をしたいのであれば、フロントエンドエンジニアはおすすめ
フロントエンドエンジニアとして業務をすれば、
Web制作の他工程を行うときにも役に立ったりします。
- コードに反映させる上で、どこに時間がかかるかを把握できるため、ワイヤーフレームやデザインを作るときにより良い方法を選ぶことができる。
- バックエンドエンジニアを担うときには、表示面のコードを読めるので作業の難易度が下がる。
もし「フロントエンドが自分に向いていない」と感じても、その他の工程に役立つので、Web制作一歩目としておすすめですし、
フロントエンドができれば、一人で全工程をを担うことができる可能性も高まると考えてます。
フロントエンドエンジニアについて書いてみました。初学者をいち早く抜け出したい方に、プログラミングスクールもオススメします。
また、エンジニア転職を考えている方、転職エージェントを活用すると転職周りのことをサポートしていただけます。
それでは〜
