Catch on to a trend

IT・Web業界のトレンド

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

2022.01.27

コーダーやWebデザイナーからフロントエンドエンジニアを目指したい。そう考えていても、何を勉強して何を制作すればよいかわからない…そんな方は少なくありません。

大手ポータルサイト運営企業でフロントエンドエンジニアとしての第一歩を踏み出した小林裕和さん。セパタクローの選手でもある小林さんは、競技の普及を目指してフロントエンド開発のスキルを身につけられました。

そこで、作りたいものからスキルを広げていった、小林さんのキャリアの踏み出し方についてお話を伺いました。


セパタクローを広めたいという想いから勉強をスタート

―― 小林さんがWeb業界を目指したきっかけは?

学生時代にセパタクローという競技に出会い、以来、選手として活動を続けています。ネットをはさんで籐を編んだボールを相手コートに返し合う競技で、足のバレーボールとも呼ばれるものです。2018年のアジア大会では日本代表として試合に出場し、銀メダルを獲得しました。

長く競技を続けていくうちに、セパタクローの魅力を世の中に伝えていきたいという想いを持つようになって。所属する一般社団法人 セパタクロー協会の広報業務なども手伝うようになりました。

そんな中、新型コロナウイルスの流行により、セパタクローも無観客試合となりました。試合を見てもらえない中で、セパタクローの魅力をもっと広めるためにどうすればよいか?それを考えたときに、Webサイトを作ってみたい!と思ったのが、Web業界を目指したきっかけです。

―― 最初はどのように勉強されたんですか?

コロナ禍で時間ができたので、遊び感覚で無料のオンライン学習サイトを利用していました。コロナ禍で人と会えなくなり、時間的な余裕もあったので、勉強もはかどりましたね(笑)

当時勤めていた企業では、家庭用医療機器の販売宣伝業務に携わっていて、業務の一環としてCMSを使ったサイト運用も行っていたんです。そこで、学んだばかりのHTMLやCSSを使って、運用を任されていたコーポレートサイトのデザインの追加や修正を行うようになりました。

―― 実際に勉強してみて、いかがでしたか?

自分で実際にコードを書いてみて、「ふわっと出てきてふわっと消える」といった動きのある表現が実現できて、すごく面白くて。そこでWeb制作の中でも、フロントエンド開発の方面に興味が向くようになりました。

―― Vue.jsを勉強し始めたのはなぜ?

最初はHTML・CSS・JavaScriptだけを勉強していたのですが、その後、JavaScriptのフレームワークに興味を持ちました。市場のニーズを調べてみると、今からjQueryを勉強するのはちょっと違うな、と思って。

勉強するならReact、Vue.js、Angularのどれかだろうと思ったときに、Vue.jsが一番JavaScriptと同じように扱える感覚を持ちました。またいろいろと調べていく中で、国内でVue.jsを使っている企業が多いという情報にも出会ったので、Vue.jsを勉強することにしたんです。

セパタクローの大会サイトを自分で制作

―― 勉強して次に取り組んだことは?

勉強するだけではわからないことも多かったので、まずは手を動かそうと思い、サイトを制作しようと思いました。

そこで、セパタクロー協会の担当者に「サイトを作ってもいいですか?」と聞いてみたんです。「いいよ」とお返事をいただいたので、全日本大会のサイトを作ってみることにしました。

―― どんなサイトですか?

最初に作ったのが、2020年9月に行われた第27回全日本セパタクローオープン選手権大会の特設サイトです。デザイン作成からコーディングまですべてを自分で行い、保守運用しました。

次に作ったのが、2020年12月に行われた第31回全日本セパタクローオープン選手権大会の特設サイトです。このときは、JavaScriptでスクロール検知やアニメーションを実装しただけでなく、一部でVue.jsを利用してマークアップを効率化し、対戦結果のデータ反映を行いやすくしてみました。

―― ポートフォリオサイトも制作されたんですよね!

制作実績ができたので、ポートフォリオサイトを作成しました。セパタクローの大会サイトのほか、前職で担当したバナー制作や動画制作などの実績をまとめたものです。ポートフォリオサイト自体にも、Vue Routerのプラグインを利用してコンポーネントのルーティングを実装するなど、フロントエンドの技術を取り入れています。

Vue.jsを使える職場に狙いを定めた転職活動

―― 転職活動はどのように始めたんですか?

最初は、転職サイトなどを経由して自分で求人に応募していました。転職に関する情報を集めているうちに、ウェブスタッフにたどり着き、会員登録。登録後にキャリアカウンセラーの方に面談をしていただき、そこからはウェブスタッフに転職のサポートをしてもらいました。

―― 転職活動で重視した点は?

Vue.jsを勉強していたこともあって、Vue.jsを使った開発をしている企業で働きたいと思っていました。フロントエンドエンジニアとしての実務経験がない状態からの転職ですので、周囲に先輩エンジニアがいる環境で、Vue.jsを実務で使いながら学べるというのが、重視していたポイントですね。

―― 具体的には、どのような企業を受けたんですか?

Webサービスを提供している事業会社を中心に受けていました。そういう企業であれば、周囲にWebエンジニアの方がたくさんいらっしゃるので、エンジニアとしてのスキルアップにもつながるかなと思ったんです。

また、制作会社の場合は受託案件を担当することになるため、自分の勉強していきたい技術を実務の中で磨けるとは限らないですよね。それもあって、Vue.jsを使える事業会社を考えていました。

今回は周囲の先輩エンジニアから学べる環境というのを重視していたので、客先常駐ではなく自社内勤務ができるというのも重視していたポイントです。

―― フロントエンドエンジニアとして転職活動を進めてみて、いかがでしたか?

前職でWebサイト運営に関わっていたとはいえ、フロントエンドエンジニアとしては未経験からのチャレンジです。やはり、希望する技術レベルの企業の選考は、思うように進みませんでした。

そんなときに紹介されたのが、大手ポータルサイトを運営する企業にウェブスタッフの契約社員として常駐する、今の仕事です。

最初は正社員での就職を考えていましたが、フロントエンド開発にチャレンジできる環境であれば、今は雇用形態にこだわる必要もないと気付きました。

―― 現在のお仕事を選ばれた理由は?

まずはVue.jsを使った開発をしたいという、最も重視していた部分に合っていたこと。大手企業で社内にエンジニアが多く、学べる環境が整っていること。この2点ですね。雇用形態は当初考えていた正社員とは違いますが、そのほかの点においては理想的な環境でした。

35歳という年齢的にも、チャレンジするのなら自分が納得できるチャレンジをしたいと考え、今の職場とのご縁を活かすことにしたんです。

実務経験の中でコードの意図を理解

―― 実際に今の職場で働き始めて、どうですか?

フロントエンドエンジニアとしては未経験で入って、チーム開発も初めてで、右も左もわからない状態。そんな中、ちょうどコロナ禍でフルリモート勤務という体制だったので、最初は大変でした。

対面でのコミュニケーションが取れないので、先輩にもなかなか質問もできなくて。最初1ヶ月くらいは、プロジェクトの中の人と、いかにコミュニケーションを取るかに注力しました。少しずつ慣れて、コードを書いたり、わからないことを先輩に聞いたりできるようになりましたね。

また、同僚のエンジニアのなかにはフロントエンドだけでなくバックエンドも担当している方が多いので、会話の中で、知らない技術、言葉が出てくるんです。フロントエンド開発を目指して入りましたが、こういったことも習得していかなければいけないと感じています。とても勉強になる環境ですが、結構大変です。

―― 実務の中で、どんなことが学べていますか?

今の職場では、先輩エンジニアに自分の書いたコードを見てもらえます。最初のころは、何かコードを書いても、指摘されてばかりでした。知識の深掘りができていなかったので、どうしてこういうコードを書くのか、意図を理解していなかったんですよね。

今振り返ると、独学でコードを書いていたときには、自分のコードが本当に正しいのかわかっていなかったなと思います。いろいろと調べながら実装してみて、コピペでも動くものの、その意味をきちんとわかっていなかったんです。

今は、だんだんと知識が深まってきたので、自分の書いたコードをチェックしてもらっても、指摘されずにOKをもらえることが増えてきました。

わからないことを先輩に質問してみて、自分なりにコードを書き換えてみて…という繰り返しの中で、自分でもスキルアップを実感できるので、やりがいにもつながっています。

新たなサイト制作を通じて、更なるスキルアップへ

―― 今後やってみたいことは?

これまで日本にはセパタクローのプロリーグがなかったのですが、2月に、セパタクローの国内リーグ『ES LEAGUE(Extreme Sepaktakraw LEAGUE)』が立ち上がることが決まりました。このES LEAGUEのサイトを作っているところです。

今年の9月には4年に1回のアジア競技大会がありますし、2026年にはアジア競技大会が名古屋で開催されることが決まっています。ひとりの選手として競技を盛り上げていくことはもちろん、サイトを通じて多くの方にセパタクローの魅力を伝えていきたいですね。

―― ES LEAGUEのサイトでは、どんなことにチャレンジしたいですか?

今回はVue.jsだけでなくNuxt.jsを使って、さらにバックエンド側ではヘッドレスCMSを使ったAPIの実装にチャレンジしたいと考えています。見た目のデザインは自分でコードを書いて整え、APIを使って記事データを呼び出すような流れを想定しています。

普段の業務ではAPIの部分は別のエンジニアの方が担当していて、自分はそれを使うだけ。今度は自分でAPIの実装の仕方を考えて使ってみるつもりなので、その部分も楽しみですね。

このように私は、やりたいことを実現するために、スキルを広げていっています。毎回思い通りに実装できない部分もありますが、それがまた面白いですね。これからも「楽しい」という気持ちを持ちながら、少しずつスキルの幅を広げていきたいと思っています。

―― 貴重なお話、ありがとうございました。

編集後記

  • セパタクローのトップ選手としての「セパタクローを広めたい」という想いから、フロントエンドエンジニアとしてのキャリアを広げられてきた小林さん。「やりたい」と思ったことを実行していく姿勢が印象的でした。
  • ウェブスタッフでは、小林さんのようにWeb業界で活躍されている方へのオンラインインタビューをはじめ、Web業界でのスキルアップを目指す方に向けたイベントを開催しています。キャリアアップ・スキルアップを考えている方は、ぜひお気軽にご参加ください。
  • イベントサイトをチェック!
  • 苦手な面接を克服!フロントエンドエンジニアのための面接対策の相談会
  • 苦手な面接を克服!Webデザイナーのための面接対策の相談会
  • 苦手な面接を克服!Webディレクターのための面接対策の相談会
  • 未経験からWeb業界への転職準備

人気の記事

フロントエンドとバックエンドとは?意味の違いとエンジニアの仕事

1

Reactとは?フレームワークとの違い・フロントエンド開発に活用するメリットや特徴を解説!

2

UI/UXとはどういう意味?それぞれの違いと特徴まとめ

3

【2022年最新】IT業界の今後の動向は?トレンド技術の将来性と課題をカンタン解説!

4

コーダーの仕事とは?コーディングに必要なスキルや年収を徹底解説!将来性を高めるためには?

5

フロントエンドとバックエンドとは?意味の違いとエンジニアの仕事

1

Reactとは?フレームワークとの違い・フロントエンド開発に活用するメリットや特徴を解説!

2

UI/UXとはどういう意味?それぞれの違いと特徴まとめ

3

【2022年最新】IT業界の今後の動向は?トレンド技術の将来性と課題をカンタン解説!

4

コーダーの仕事とは?コーディングに必要なスキルや年収を徹底解説!将来性を高めるためには?

5

あなたのライフスタイルに合わせて働きたい方は、WSハケン 1つの会社で長くはたらきたいかたは、WSキャリア

Career advice

転職のアレコレ。プロに相談したい方へオススメ!

最新のIT・Web業界動向を知るキャリアカウンセラーが行う
「キャリアアドバイス」

ある程度経験を積んだので次のステップにキャリアアップしたい、しばらくWeb業界を離れていたが再度業界に戻りたい、 未経験・経験浅めだがどのように転職活動を行っていったらいいかなど、ウェブスタッフでは様々なご要望に対応したキャリアアドバイスを行っております。

お申込みはこちら

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

同意して閉じる

確認する

WEB STAFF ウェブスタッフ株式会社

ウェブスタッフは、IT・Web業界専門の求人を取り扱う人材エージェントです。
IT・Webクリエイター・エンジニアの派遣・転職はお任せください。在宅勤務・フリーランスへのキャリアチェンジもサポート。

ページトップへ ページトップへ