How I started as a front-end developer

Hi there!

TagbangersのSylvester Abengです！

名前、長いでしょう？🤣
周りから「シル」とか「シルくん」とか呼ばれています。

マレーシア出身の写真好きなシャイボーイです。

自己紹介これで十分なのかな？🙂

今はフロントエンドをメインでやっていますが、
最初の６ヶ月はインターンで色々触らせてもらいました😁

Before joining Tagbangers🔰

・授業でC言語やjavaを少し勉強したぐらい
（授業面白くなかったので流石に忘れていて、ほぼ知識ゼロで入社した）

・高校でインターネットの仕組みを少し勉強したけど面接の時聞かれたが、何も思い出せませんでした😅

My first 3 months

研修期間でした。

学んだこと

gitの使い方
・clone, push, pull requestなど

HTML, CSS - 自己紹介ページの作成
・https://sylvester-abeng-introduction-page.netlify.com/

Java
・java触って1週間後に「あ、java授業でやってたなー」と、今更思い出しました😂

Javascript
・vanilla jsでmini todoアプリ。ちょっとバグってるけどどうぞ…🙇‍♂️
https://mini-todo.netlify.com/

React + TS
・ウェブアプリのプロトタイプのプロジェクトで少し触れせてもらいました

AWS console
・インフラのことをよりわかるようになりました

My 4th ~ 6th month

研修期間が終わって、次は実戦的コーディングをさせてもらいました。

やったこと

Riot jsでのweb開発
・「routerとかAPIコールって何？」と思っていました

Androidアプリの開発に関わらせてもらいました
・実践的にjavaとかrxjavaで、reactive programming学びながら

Reactでのweb開発
・Atomic designを勉強しながらシンプルなタスクからやらせてもらいました

Spring Fest(JSUG)
・ワイヤーフレーム・デザイン

・グッズのデザイン

・Reactでコーディング

６ヶ月でこんな色んなことを学べるとは思ってもいませんでした😳
Tagbangersだからこそこんなに学べるのかな🙂

Now working full-time

インターンの期間が終わって、今は正社員になってUIチームで活躍中。

ワイヤーフレーム・デザインもコーディングも引き続きやっています笑

最近何をやってるかと言うと

Sketchでワイヤーフレーム・デザイン
・PhotoshopやIllustratorなど今でも使ってるいるから使い方はだいたい同じですね😁

・Reactでコンポーネントを作ってるいるけど、Sketchではlayerをいちいちコピペしてデザイン作成していて面倒くさいことをやっているんですね🤣

・次はちゃんとコンポーネントから作りたいと思います！

React + TSでのweb開発
・研修の時、同じツールでシンプルなタスクをやらせてもらえた

・今回やっているのはコンポーネントとページ作成で面白いプロジェクトですね😁

・TypeScript使って最初の印象 →「型が合わないとpropsが渡せないから面倒くさい😫」

・今 →「メンテしやすいし、バグも少なくなるしTypeScriptマジで便利😳」

・React + TSは最強の組み合わせですね💪

Keycloakのログインページのカスタマイズ

・Docker image中のkeycloakのファイルをいじってました笑

・最初はCLIコマンド詳しくなくて、keycloakのどこいじればいいか分からなくて難しかったが、
　やり方分かったら意外と簡単でした🙂

・KeycloakのthemeはちなみにFreeMarkerでした。HTMLとあんまり変わらなくて助かりました笑

・ログイン画面のthemeのカスタマイズのする方法今度、2月の頭ぐらいにタグバンのブログに載せたいと思って、もし良かったら是非読んでみてください！（英語で🙇‍♂️）

IE11対応の開発
・１フェズ目はワイヤーフレーム・デザインだったが、
２フェズ目から自分もコーディングをやれせてもらいました

・Jade langの勉強

・IE11は、まぁ、あれですね、フロントエンドの人のnightmareとは言えるんですかね🤣

・Arrow functionとか、template literalsとか使えなくて大変だったけど、
そこで師匠が「もはやGulpとBabelJsを入れるといいんですね」と言ってました笑

・BabelJsはソースコードを「書き換えて」くれるので本当に便利ですよ😳

・そして今回はライブラリーが使えなくて自力でフィルタリング・ページングの実装をやるしなかったが
すごくいい勉強になりました😊

Next Steps

次のステップはですね🤓
・Reduxの勉強

・シンプルでかっこいいUI/UXデザインを作りたい

・React nativeの勉強

・Dribbleに何か載せる

Tagbangers

is fun😁
・面白い環境にしてくれる仲間たちがいる

・オフィスに卓球台、switchもある。
最近誰もやっていないけど一回始めたら絶対に誰かがジョインしてくれると思う👀

has free coffee☕️
・ここ重要だよ🤤
・ミルク派なので自分でミルク買って、カフェラテとかカフェモカっぽくして飲んでる

has free lunch every Friday🍔🍱🍝
・みんなで楽しく美味しいものが食べれる😋
・仕事中は普段喋らないから、他の仲間たちのことをより知るようになるチャンス

has access to baybike🚲
・あのオシャレなベイバイクが乗れるよ👀

has a nice view🌄
・晴れている時は、「今日もいい天気だなー」と思わせてくれる

Summary

自分がやってきたことをこうやって振り返ってみると、こんな素晴らしい環境に恵まれて、
一年もないというスパンで新しいスキルをどんどん身につくことができて、
自分はとてもラッキーだと思います😊

そして最後に読んでくれるあなた、ありがとう😊
ぜひオフィスに遊びに来てください！