フロントエンドエンジニアって何してるかわからないですよね？
最近、フロントエンドエンジニアとして、アンドスペースに入社したのですが、私も自分が何なのかイマイチわかっていません。
そんなせいで、私は母親に「仕事は何をしているの？」と転職を迫らせれています。親戚にすら、「よく分からないパソコンの人」という扱いです
妻にすら収入で負けて、家庭内での立ち位置は悪くなるばかりです。
なので、このブログを使ってザッと説明しようと思います。(これから目指す人も読んでみてね)
じゃあ何をしているのか？
Web制作者の一員として、デザイナーが作成したデザインデータをWebサイトに落とし込む仕事をしています。
HTML (HyperText Markup Language) とか CSS (Cascading Style Sheets) と呼ばれるものを基本的に扱います。
この２つをちゃんと使いこなせば、ある程度のWebサイトは制作できるでしょう。
ここからがややこしいのですが、フロントエンドエンジニアと呼ばれようと思うと、ここから更に
JavaScriptやPHPと呼ばれるプログラミング言語に加え、CMS(Content Management System) と呼ばれるものを使って制作を行なっています。
CMSの有名どころと言えば、EC-CubeやWordPressかな。
この辺を使いこなせば、ブログサイトが制作できるわけですね。皆さんが社内ブログなどを書くように言われだして悩んでるとすれば、大体コイツのせいです。
この辺も触れるようになり仕事に落ち着くを持ち出すと、今度はNode.jsやら、Vue.jsやらnpmやら難しそうなものが飛んできます。
ひとつずつこなしていくしかないと思います
終わりがない、毎日が課題です。
この仕事で失敗しがちな事
この仕事、本当によく怒られます。僕らの仕事はデザイナー、プログラマー、ディレクターなど色んな職種の人達と密接に関わります。
そのため、色んな人が色んな事を言ってきます。
デザイナーの人が言ってきがちな事
- デザイン通りになっていない！
- 文字が違う
- 余白がダサい
- アニメーションつけて
この4つは本当によく言われます。 専門的な話になるのですが、例えばAdobeXDで下記のような設定がされていたとしましょう。
この時に大体こうだろとか思って、
.text {
font-size: 14px;
font-weight: 400;
line-height: 1.8;
}
とかで適当に書くと、弊社では普通に「直してね」と怒られます。なんでかってそもそも、このCSSではデザイン通りの見た目になるわけがないんですね。正しくは
.text {
font-size: 14px;
font-weight: 500;
line-height: 2;
letter-spacing: 0.1em;
}
となるわけです。上の余白がおかしいなどもコレが原因のことが多いです。ただコード書いてる時ってビックリするくらい気づかないんですね。なんでなんでしょうか？
プログラマーの人が言ってきがちな事
下記は私の友人たちが言われたこともあるので、全部が経験談ではないですが、
- インデントがおかしい
- JavaScriptとかJQuaryとかPHPとかごちゃ混ぜにしないで！
- white-space: pre-wrap;、掛けといて
- JQuary使ってるようなヤツとは仕事しない
この辺は仕事の中で言われたり、言われたと聞いて衝撃だった項目です。 長くなっちゃうんで、色々難しい話はやめときますが調べるとホントに「あ〜、なるほどな〜」となります。 新米フロントエンドエンジニアはプログラマーの話はよく聞こう！
「JQuary使ってるようなヤツとは仕事しない」
とか言われちゃう事もあるとは思いますが(友人が泣いてました)、めげずに頑張りましょう
色んな視点、色んな思考
間に挟まれて作業するのは大変です。デザインソフトも一通り触れないと話にならないし、いろんな職種の専門用語が飛び交うのも覚えないといけないし、何それ？初めて聞いたわの毎日です。それ横文字にする必要あったかと怒りすら覚えます。
そもそも皆、感じることや考えることが別なんだから、間に挟まりゃよく怒られもします。いつも目から鱗です。
私たちができるのは経験を積み、分かったことは共有し、仲間同士で助け合うことくらいです。
せめて私の家族が「なんか難しそうな事、してるんだなー」と思うことを願う。
andspace
この記事を書いた人