Webフロントエンド1年目で身につけたこと

## はじめに
地元の勉強会で、上記タイトルで登壇する機会を設けていただいたので、せっかくですしQiitaにまとめておこうと思います。

上位者の方のコメント等ビシバシお待ちしてます。

## 執筆者
- 社会人2年目
- 男
- ゲーム好き

## 経歴
地元の進学校に進学
↓
地元の情報系大学に進学
↓
地元のWeb系ベンチャーに就職

地元愛◎

# ここからスタート

## 早速１年目のアウトプット

Webは学生のころは数回の授業で、概念のみ学んだ分野です。
技術を学びながらの制作でした。

- WordPressサイト　3つ（デザインはやったりやらなかったり）
- LP（ランディングページ）　8つほど
- Alexa　スキル開発
- 中規模サイトのパーツリストコーディング

アウトプットとして多いか少ないかはさっぱりですが、個人的に充実してたなあと思います。

### 一つ、自主制作を紹介！
https://ssbtube.com/
![スライド – 6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/412377/311642d6-f369-b751-1cc3-f42c2c05a085.png)
自分はスマブラが好きなので、趣味に関する制作をしました。
Youtubeに溢れかえる対戦動画をキャラごとに、その他の情報も添えて（見所、勝者など）投稿できるサイトです。
WordPress以外何も使えなかったので、WordPressで作りました。
運営以外でも投稿フォームから動画を投稿し、運営の認証がおりれば公開される仕組みになっています。

運営開始1ヶ月目は500PV/日ほどありました。

が、今はスマブラができていないので更新が滞っています。

（ドメイン更新どうしよう）


## 1年目で身についた技術

身についた技術は主に以下のものです。

- HTML
- CSS
- jQuery
- WordPress

HTMLとCSSだけピックアップしてちょこっと書きます。

### HTML

#### W3Cに準拠したコーディング
この辺は当たり前のことも多いと思いますが、やっぱり始めたては意識できないところでした。
全てdivタグで書いても成立してしまうので、最初は使い分けができていませんでした。
ただ、ここは__SEOにも関わってきたり、アクセシビリティの面で非常に重要__ということを学びました。

![スライド – 18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/412377/5ea406fd-8b40-f92c-df33-684f1cda29b7.png)
![スライド – 24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/412377/b756d57a-2fdb-89d5-df4a-39d69e0f9431.png)

#### Emmetでコーディング高速化
今や手放せない__Emmet__です。
HTMLは色々な属性があったり、閉じタグを書かなければならなかったり、そもそも<>を打つのにshiftを押さなければならなかったりと面倒なことが多いのですが、__Emmet__で色々と解決します。


![スライド – 28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/412377/82722b54-42f2-390c-6f2c-b3c91ed23d67.png)


### CSS

#### Emmetで高速化
CSSのEmmetも必須です。
毎回 position: relative; とかもう書いてられません。

最初は頻出な物のみ覚えて使っていました。
m0-a とか。
徐々に覚えていき、パターンがわかったのでなんとなくで大体のプロパティは書けています。
 

![スライド – 32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/412377/5260a6dd-9cbf-611c-aaab-cfa1aee7b1b1.png)

他には、

- 命名規則にBEMを使う
- Sass（SCSS）を使う
- CSS設計を利用

なども重要なものとして学習しました。


## 業務において意識していたこと
![スライド – 10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/412377/e94b4514-8f46-13ee-6612-289ca981fc2a.png)

当日は突然のこのスライドでウケを狙ったのですが、みんな「うんうん」って感じだったので世の中お金は大事なんだと再認識です。
（後で聞いたら数人には結構ウケてたらしい）

なんのために働いているかというとやっぱりお金を稼ぐためが一番で、空からお金が降ってきたらエンジニアは辞めます。
ただ、そうもいかないので、給料をいかにあげるかを考えながら1年過ごしました。
考えた結果、

1. 会社の売り上げを上げる
2. その売り上げに貢献する
3. 給料が上がる

基本はこの流れだと思い、次に__会社の売り上げを上げる__には１年目で何ができるかを考えました。
こちらの結果は、

1. 業務をたくさんこなす
2. 技術を身につけて単価の高い業務をこなす
3. その他会社にプラスとなる行動をする

こんな感じでした。
結果的に、１年目の業務で意識していたことは

__業務をたくさんこなす__
→コーディングスピードを上げる

__技術を身につけて単価の高い業務をこなす__
→１年じゃあちょっとキツい

__その他会社にプラスとなる行動をする__
→勉強会での登壇、社内で勉強会開催

でした。

## じゃあ2年目以降の目標は？

エンジニアロードマップを見たところ、とてもわかりやすく図解されていて、自分の成長の段階がはっきりとわかりました。
[Web Developer Roadmap 2018が2019年版になっていたので比較してみる](https://qiita.com/ushironoko/items/a2420cf4a28af56907e5#-front-end-roadmap)

結局、1年間で学べたのはHTML,CSS,JS,WordPressくらいで、まだまだフロントエンドエンジニアと呼ばれるには早いなあと実感しております。

ロードマップを見ると今後はJSフレームワークを扱い、それらをビルドツールによって最適化し、Webアプリケーションたるものを作ることができるようになる必要があるようです。
以下のものたちは是が非でも身につけなければいけないなあと思います。

また、AWSやGCPの登場でインフラの知識が浅くとも、インフラの構築もできる時代になっています。
ここも気にかけていきたいところではあります。
ただ、こんなにモリモリだとパンクしてしまうので、優先度を見極めていかなければいけませんが。
↑アドバイスもらえたら幸いです。

![スライド – 43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/412377/6c9db2f5-08a3-5fd3-610a-c4b9c44be103.png)

### UI/UXデザインも理解だけはしたい

![スライド – 45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/412377/f67aa327-a9e9-0ca1-15c6-f281df12f302.png)

大学ではデザインを学んでいたこともあり、UI/UXデザインもしがみつきながら追いかけていきたいと思っています。
デザインについてを理解できることで、評価することができ、違和感に気がつくことができます。

ここができるかできないかで、最終的に大きな差が生まれると思っています。（なにが）
UI/UXデザインは大事だよねってことです。

## まとめ

登壇した時に話したことを文字にまとめました。
あれからすでに2年目が数ヶ月経っていますが、まだなかなか行動を起こせていません。

次はお前らのどれかだー！！！
![スライド – 58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/412377/f2781d89-20cf-2709-7391-e52f6573218c.png)