6
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Posted at

はじめに

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

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

執筆者

  • 社会人2年目
  • ゲーム好き

経歴

地元の進学校に進学

地元の情報系大学に進学

地元のWeb系ベンチャーに就職

地元愛◎

ここからスタート

早速1年目のアウトプット

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

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

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

一つ、自主制作を紹介!

https://ssbtube.com/
スライド – 6.png
自分はスマブラが好きなので、趣味に関する制作をしました。
Youtubeに溢れかえる対戦動画をキャラごとに、その他の情報も添えて(見所、勝者など)投稿できるサイトです。
WordPress以外何も使えなかったので、WordPressで作りました。
運営以外でも投稿フォームから動画を投稿し、運営の認証がおりれば公開される仕組みになっています。

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

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

(ドメイン更新どうしよう)

1年目で身についた技術

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

  • HTML
  • CSS
  • jQuery
  • WordPress

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

HTML

W3Cに準拠したコーディング

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

スライド – 18.png
スライド – 24.png

Emmetでコーディング高速化

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

スライド – 28.png

CSS

Emmetで高速化

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

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

スライド – 32.png

他には、

  • 命名規則にBEMを使う
  • Sass(SCSS)を使う
  • CSS設計を利用

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

業務において意識していたこと

スライド – 10.png

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

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

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

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

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

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

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

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

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

でした。

じゃあ2年目以降の目標は?

エンジニアロードマップを見たところ、とてもわかりやすく図解されていて、自分の成長の段階がはっきりとわかりました。
Web Developer Roadmap 2018が2019年版になっていたので比較してみる

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

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

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

スライド – 43.png

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

スライド – 45.png

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

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

まとめ

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

次はお前らのどれかだー!!!
スライド – 58.png

6
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?