経験1年で大手ポータルのフロントエンド開発者になれた実績を限定公開!
~公開キャリアインタビュー「Web業界ハタラク名鑑」vol.4~

2021年12月3日(金)20:00より、『経験1年で大手ポータルのフロントエンド開発者になれた実績を限定公開!評価UPにつながった行動とは~公開キャリアインタビュー「Web業界ハタラク名鑑」~』を開催しました。

Web業界の先輩方の「ハタラク」を紐解き、自分らしいキャリアづくりのヒントを探る、「Web業界ハタラク名鑑」シリーズ。第4回目の今回は、Webサイト運用担当から大手ポータルサイト運営企業のフロントエンドエンジニアへのキャリアアップを果たされた小林裕和さんをゲストに迎えました。

小林さんが、JavaScriptフレームワークの実務経験がない状態から、フロントエンドエンジニアとして採用されるまでどのように行動してきたのか。ウェブスタッフのキャリアカウンセラー菅原と一緒に、ポートフォリオや制作実績のポイントや仕事の選び方について、お話を伺いました。

ゲスト

 

小林 裕和(こばやし ひろかず)さん


フロントエンドエンジニア
大手ポータルサイト運営会社に常駐
 

セパタクロー日本代表選手として国際大会を経験。メーカーでサイト運用を担当するかたわら、セパタクローの競技普及のためのWebサイト制作し、フロントエンド開発のスキルを磨く。現在は、日本最大級のポータルサイトを運営する大手インターネット企業に常駐し、キャッシュレス決済サービスに携わるフロントエンドエンジニアとして活躍中。セパタクロー競技も続け、コーチとして後進の育成に携わる。

 

菅原誠司

ウェブスタッフ キャリアカウンセラー

求職者の方の転職支援やスキルアップ支援のイベントを担当。得意領域はエンジニアのキャリア支援。ENJINのコーディネーターも担当。

Webエンジニア向けコミュニティ「ENJIN」

目次

1.実装スキルをつける勉強の仕方

前職でWebサイト運用の仕事をしていたものの、HTML・CSSに実際に触れるようになったのは2020年になってからという小林さん。今の実装スキルをつけるために、どのように勉強されたのか伺いました。

Q. どのようにWeb制作を学びましたか?

ProgateUdemyなどのオンライン学習サービスを利用。遊び感覚で学び始めました。

最初は欲張って、Ruby on Rails や React など、さまざまな言語やフレームワークに手を出してしまい、何をしたらよいのかわからなくなることも。

そのような中で、フロントエンドエンジニアを目指すために必要なスキルは何かと考え、まずはHTML、CSS、JavaScriptを学び、その後Vue.jsを学習することにしました。

また、学習するだけでなく、実際に手を動かすことが大事だと考え、自分が関わっている競技であるセパタクローの大会サイトを制作しました。

Q. Vue.jsを選んだ理由は?

JavaScriptのフレームワークで何を学ぼうかと考え、インターネットで日本で使われている技術を調べていく中で、フロントエンド開発でReactやVue.jsが人気なのを知りました。

Vue.jsであれば、今まで慣れていたマークアップを応用できる書き方が できるため学習コストが低く、未経験からでも入りやすそうだと感じたのも、選んだ理由のひとつです。

なお、Vue.jsは、Udemyのよしぴーさんの講座で学びました。

Point !

上の図は、2021年11月30日時点でのウェブスタッフのフロントエンドエンジニア求人で求められるスキルをまとめたものです。

約7割の求人で、なんらかのJavaScriptのフレームワークやライブラリのスキルが求められていることが、図からもわかります。その中でも特に、Vue.jsやReactに対するニーズが高まっています。

小林さんは、市場ニーズに合ったスキルを選ばれています!

2.ポートフォリオ&制作実績

小林さんは、学んだ技術を使ってつくったセパタクローの大会特設サイトを制作実績として、転職活動を進められました。実際に転職活動で使ったポートフォリオと制作実績のポイントを見せていただきました。

Q. ポートフォリオ制作で意識したことは?

スポーツをしていること、Web制作に携わっていることの2つの点を表現したいと考えてつくりました。

トップページは、ポートフォリオサイトで使っている技術や、更新の履歴などをパッと見てわかるようにしています。

トップページの文章を見ただけで、小林さんが何を実現したいと考え、そのためにどのような技術を利用したかが一目でわかるのがポイントですね!

Q. 実績紹介ページの制作で意識したことは?

実績紹介ページでは、どんなことを意識して作ったか、どの範囲を自分が手掛けていて、どんな技術を使ったのかをわかりやすく記述することを意識しました。

エンジニアとしてのポートフォリオなので、
制作実績を見たときに
 ・実装するために使った言語やフレームワーク
 ・それを使用した意図
が見た人に伝わることが重要です!

Q. 制作実績として掲載したWebサイトで使った技術などについても教えてください!

初めて制作したサイトでは、コピペではありますがJavaScriptでアニメーションを実装して、動きのある表現も取り入れました。ただ、対戦成績などを画像で処理していたので、結果を更新する手間がかかってしまって…。

その課題を解決するために、2つ目のサイトでは、データの処理においてVue.jsを使って、マークアップを効率化しています。

実際にサイトを制作して課題を発見。その解決のためにVue.jsを使ってみたことを、ストーリとして面接で話せるのはよいですね!

経験1年でフロントエンドエンジニアに!セパタクロー普及を目指す小林裕和さんのキャリアの踏み出し方

小林さんがWebエンジニアを目指すきっかけは、セパタクローを広めたいとの想いから。競技の普及を目指してフロントエンド開発のスキルを身につけた小林さんの、キャリアの踏み出し方を知りたい方は、インタビューをご覧ください。

+ インタビューをチェックする

3.スキルアップにつながる仕事の選び方

フロントエンドエンジニアとしては未経験からの転職活動を行った小林さん。実際の転職活動の進め方、優先順位のつけ方についてもお話しいただきました。

Q. 実際の転職活動の状況は?

フロントエンドエンジニアとしては未経験だったため、開発経験を求めらる企業にはチャレンジしにくい状況でした。

そのため、未経験でも募集している企業を探してエントリーしていました。書類が通過した企業は2社ありましたが、面接を受けると残念ながらご縁をいただけませんでしたね。

そのような中でウェブスタッフに登録。キャリアアドバイスを受けて、ポートフォリオのブラッシュアップをしたほか、転職活動で自分が大切にしたいことを改めて整理することができました。

Q. 転職活動で重視したこと・優先させたことは?

Vue.jsを使っている開発現場で働くことを重視していました。

フロントエンドエンジニアとしてWeb制作に関わるには、受託開発と自社開発の2つの選択肢があります。受託開発ではさまざまなフレームワークを使って制作スキルを上げることができますが、今回は、Vue.jsを使ってWebサービスを提供する事業会社が良いかなと考えていました。

そんなときに紹介されたのが今の職場です。もともと希望していた正社員という雇用形態ではありませんが、自分のスキルを伸ばせる良いチャンスだと考え、チャレンジすることにしました。

4.フロントエンド開発現場の魅力と学び

転職活動を終え、大手ポータルサイト運営企業である今の職場で働き始めた小林さん。実際にエンジニアとして開発現場に入ってみて感じる魅力や学びについても伺いました。

Q. 開発現場に入って大変だったことは?

入社したとき、すでにフルリモートの体制だったため、プロジェクトメンバーにも会ったことがない中で業務を進めなければならず、最初はコミュニケーションが取りづらかったです。

わからないことは素直にわからないと伝える、つまずいた部分は積極的にアドバイスを受けるといったことを心掛けながら、チームに溶け込む努力をしました。

また、初めて大きなプロジェクトに入ったので、開発環境を構築するのも大変でした。

Q. やりがいを感じるのは?

以前から自分が知っていた有名サービスにフロントエンドエンジニアとして携われていることに、やりがいを感じています。今、自分の手元にそのサービスがあるということが、純粋に嬉しいですね。

これからも、ユーザーに「いいサービスだな」と思ってもらえるよう、サービスを作っていきたいです。

Q. 開発現場ならではの学びはありますか?

入社してすぐは、コードを書いてチームの方にレビューしてもらうと、指摘を受けることばかりでした。コードの意味や可読性を意識したコードの書き方など、自分ひとりではたどり着けないようなアドバイスをもらえるので、非常に勉強になっています。

そのほかNuxt.jsを使う中で技術的な指摘をもらうなど、現場の中でしか学べない経験を積めるのがありがたいですね。また、バックエンドに携わるエンジニアの方と一緒に仕事をする中で、知らない単語・技術に出くわすことも。その度に調べてみて、新たな知識が広がるのも楽しいです。

5.さらなるスキルアップのために実践していること

小林さんの次なるステップは?今後やりたいことや目標などについてもお話しを聞きました。

Q. さらなるスキルアップのため、やりたいことは?

来年、セパタクローのリーグが立ち上がることが決まりました。そのリーグサイトを作っています。

ユーザーが使いやすく、さらに運用面でも簡単にデータの更新ができる、長く続けられるサイトを作っていきたいと思っています。

具体的には、今の職場で使っているNuxt.jsを使うほか、バックエンド側ではヘッドレスCMSを使ったサイト制作を考えています。APIやデータの流れも調べながら理解したうえで、フロントエンドに実装していくつもりです。

Q. 今後の目標やキャリアパスは?

まずは、今の現場でしっかりと実務経験を積んでいくのが目標です。

ゆくゆくは、実装に対して提案をしたり、設計のロジックを考えて良いサービスにつなげるための提案をしたりできるようになりたいですね。

最終的には、サービスを作るにあたって、リーダーとして会議やプロジェクトをまとめていける存在になりたいと思っています。

6.キャリア戦略の立て方と転職活動のポイント解説

最後に、キャリアカウンセラーの菅原より、小林さんが転職を成功させた3つのポイントについて、おさらいしました。

小林さんが転職を成功させたポイントは3つ。

1つ目は、市場ニーズに合ったスキルの選択です。Webの技術の進化により、より複雑な表現が実装できるようになってきていますが、JavaScriptをフルスクラッチで書いていては開発効率が悪い、ということで、多くの企業でJavaScriptのフレームワークを使うようになりました。以前はjQueryを使っていた企業も、最近はReactとVue.jsに移行するケースが増えています。

ReactとVue.jsのスキルを持つ人材へのニーズが高まっている中で、Vue.jsのスキルを身につけたことが評価につながっています。

2つ目は、勉強しただけでなく、実際にVue.jsを使ってみているということです。

市場ではJavaScriptのフレームワークの使用経験のある即戦力人材が求められていますが、ReactやVue.jsを使ったフロントエンド開発が主流になったのは、ここ数年のことです。そのため、実務経験がある人材が少ないのも事実です。

実務経験がなくても、ReactやVue.jsの使用経験があれば、フロントエンドエンジニアとして採用されるケースもあるので、まずはReactやVue.jsを使って何かを作ってみることをおすすめします。

3つ目が、勉強してきたスキルのアウトプットの形です。

単にJavaScriptを使って動きを再現したり、パーツを制作したりしたというだけではなく、実装意図が伝わりやすい実際のサイトを制作したというのは高く評価される点です。制作意図が伝わりやすい形でアウトプットすることで、転職活動がスムーズに進みやすくなります!

7.参加者の声

参加者からいただいた感想を一部抜粋してご紹介します。

市場価値にあったスキルの選択をしている点と、ポートフォリオを制作するにあたって自ら声をあげてWeb制作に携わることができた環境が、すばらしいと思いました。
教材で勉強するだけでなく、やはり何か作らないと仕様を理解できないのだなと思いました。
仕事探しに向けた考え方や行動、スキルアップのための活動などに小林さんとの共通点が多かったので、自分がやってきたことに自信を持てました。
リアルな転職体験が聞けて共感と感心と目指すものを再認識でき、大変良い機会でした。このような場を設けてくださり、ありがとうございました。

ご参加いただきましたみなさま、ありがとうございました!

Webエンジニア向けコミュニティ「ENJIN」

キャリアアップしたいエンジニアのための自主学習型コミュニティ。

”JavaScriptフレームワークを使用した制作物を1つ完成させること”を共通の目標として、メンバーそれぞれがJavaScriptのスキルを磨きます。

jQueryは実務経験があるけれど、JavaScriptフレームワークは学習を始めたばかり…。そのような方はこのコミュニティをご利用ください。

※ENJIN第2期は4月からスタートの予定です。


ウェブスタッフのイベント・勉強会

ウェブスタッフでは、IT・Webクリエイター・エンジニアの方向けのイベントや勉強会・セミナーを随時開催!
スキルアップしたい、仲間と一緒に勉強したいという方は、ぜひご参加ください。


+ 最新のイベント・セミナーを
チェックする

  • WSイベント・セミナー TOP
  • 開催報告
  • 経験1年で大手ポータルのフロントエンド開発者になれた実績を限定公開!~公開キャリアインタビュー「Web業界ハタラク名鑑」vol.4~

ウェブスタッフが運営するサイトでは、利便性向上・分析・広告配信等のためにCookie等のデータを使用しています。当社が取得したアクセスデータとの関連付けの削除(オプトアウト)に関しては「個人情報の取り扱いについて」をご覧ください。

同意して閉じる

確認する