Quantcast
Channel: CSSタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8686

フロントエンドエンジニアを目指して学んだ過程 part1

$
0
0

プログラミングスクールからSES

まず自分は、2019年の7月から某プログラミングスクールに通い,PCの操作もままならない状態でRuby、Ruby on rails、を学びました。

正直自分の中ではミスったなぁと最近まで感じていたのですが
最近その考えが変わりつつあります

自分は将来、フロントエンドを軸としたエンジニアになりたい とスクールの終盤になって
ぼんやりと考えはじめました

そして就職活動をしていく中で、自分は、Ruby Ruby on rails を学んでみた中で自分の理解度に全然自信が持てないまま面接を受けていき当然ながら良い結果は得られませんでした

そんな中、都内の今所属しているベンチャーSES企業さんで面接をしていただき、
SESですぐには開発案件には入れないが
そのSES企業のパートナーのベンチャー企業の現役バリバリのフロントエンドエンジニアの方に指導していただけるという環境のお話を聞かせていただき、正直SESに不安はあったのですが、自分の中でこれ以上中途半端なポートフォリオを持って面接を頑張るより、大変なのは重々承知でSESとして働きながら、フロントエンドに重きを置き、その環境を信じて頑張ろうという決心をしました。

SESに入ってから学んだ事

内容
HTML
基本的なHTMLの記述を理解する
セマンティックマークアップの理解
基本的なPCサイト、SPサイト、レスポンシブサイトのHTML実装

CSS
基本的なCSSの記述を理解する
float, flexboxを使った横並びの実装
positionを使った要素配置
基本的なPCサイト、SPサイト、レスポンシブサイトのCSS実装

git github sourcetree の使用

テキストエディタの設定

ここまではどこでも体系化された学習方法が落ちていると思います。
そのあとに教えていただいた技術が、より実践的で自分で自発的に学ぶには時間がかかっただろうなという物でした

Node.js nodebrew
npm
prettier
Eslint
editor config

npmとは何かを理解する
webpackとは何かを理解する
npmを使ってpackageをインストールできるようになる
webpackを使って開発ができる
webpack+Babel+jQueryの構成を作成する
EJSの基本を理解する
EJSを使ってサイト開発ができるようになる
Sassの基本を理解する
SCSS記法を使ってサイト開発ができるようになる
BEM + FLOCSSによるCSS設計の基本理解

これらを学び始めたときはなにを言っているんだと

webpack?

npm?

yarn?

モジュールバンドラー?

Ejs?

BEM+FLOCSS?

という状態でした

しかし毎日SESでの仕事の終わってから、休みの日の全ての時間を投資すると

まだ理解は足りていない部分だらけですが、

徐々に全体像だけ掴めてきました

そして今はコーディングを仕事にできるレベルにする事を目標にして学習しています。

最近フロントエンドの開発について調べていくうちにwebpackやNode.jsといった単語が出てきた時に
前よりは概要をなんとなく理解できているので、何を言いたいのかが少し掴めるようになりました。

やはり触った程度でも知識があるものと、全く知らない事をキャッチアップするのは全然速度感が違うと感じ
何事にも好奇心を持ってやってみる という事の大事さを身に染みて感じました

そして、最近気づいた事は、JSの関数の引数であったり、配列の中身を取り出すことであったり、
for文やwhile文でejsを書いていく中で、これは自分はRubyで配列、連想配列、引数、クラス、MVCの考え方、この基礎をしっかり学んでいなければ、すぐには理解できなかっただろうなという事に最近気付きました。

最近はJsの基礎からしっかり学ぼうということで、もりけんさんという方のもりけん塾に参加しています。

塾長さんのブログ
https://kenjimorita.jp (武骨日記))と
@terrace_techのツイッターへのリンク(https://twitter.com/terrace_tech)


Viewing all articles
Browse latest Browse all 8686

Latest Images

Trending Articles

<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>