フロントエンドスペシャリストに聞いた！フロントエンドの技術を突き詰めていくための勉強法

2021年5月27日（木）、Findyが主催するエンジニア向けイベント「フリーランスエンジニア会議〜フロントエンド開発案件の最新トレンド編」がオンライン上にて開催されました。

使いやすく魅力的なアプリケーションやWebサイトのUIを実装できるフロントエンドエンジニアのニーズは、業界を問わず増加傾向にあります。 しかし、サーバーサイドと比較すると業務委託の案件数においてはまだまだ数としては少なく見えます。 サーバーレスなどの普及で、主にスタートアップ企業からのフロントエンド完結型の開発が増えてくると予想されます。

今回は、あしたのチームでフロントエンドのテックリードを担当し、フリーランスエンジニア経験もある塩野様と、デザイン・フロントエンド開発領域においてご活躍されているフリーランスエンジニア山根様にご登壇いただき、今後のフロントエンド開発における業務委託案件の推移と傾向を語っていただきました。その内容を、前編と後編の二部構成でお届けします。

後編では、「トレンドチェックの情報源」や「セルフコントロールの方法」など参加者からいただいた質問へ回答していきます。

登壇者プロフィール

山根 翔
VALLIS, LLC. 代表社員


フリーランス歴9年目。文字を聴くテキストプレイヤー https://nine.app や、ツリー状に書くドキュメントサービス https://tree.md （Product Huntデイリー2位）を運営。委託ではNOWROOM (https://nowroom.jp) のiOS/Androidアプリ開発担当。1人法人フリーランスのデザイナー兼エンジニア。

塩野 吉秀
株式会社あしたチーム テックリード

独学からSIerを数年経験した後、フルリモートで正社員としてフロントエンド開発を行いながら余暇をフリーランスとして活動。 現在もあしたのチームでフロントエンドのリード役をつとめつつ、余暇を利用して個人プロダクトの開発を行っています。

モデレーター

田頭 一真
ファインディ株式会社 ユーザーサクセス

ファインディ株式会社 ユーザーサクセスエバンジェリスト。株式会社ドリコムでIP系ゲームアプリの開発ディレクターを経験後、2018年6月にジョイン。 Findy Freelanceの事業立ち上げ〜グロースを経て、現在FindyFreelance部門のTLを担当。

トレンドチェックのための情報源

ーー残りはいただいた質問にご回答させていただければと思います。まずは前半にお答えできてなかった部分を中心に進めさせていただきます。まず来ているのが、「トレンドチェックや情報のアンテナを高める上でウォッチしておくべきサイトや情報源があれば教えていただきたいです」とのことです。先程、これが必要だなって思った時に公式サイトを見にいくなどのお話があったと思いますが、逆に受動的に情報を取り込むとか、このページを見に行けば 基本的には大体わかるな、などありますか？ これはお一人ずつ伺っていきます。塩野さんからお願いします。

塩野：
たいした回答になってないんですけど、Twitter を結構よく使いますね。Webサイトはそのサイトの運営者が良かれと思った内容しか投稿されないので、サイトウォッチはあまりしていないです。Twitterの場合、開発者の人は Twitter アカウントをなんだかんだで持っていますし、持ってなかったとしてもその周りの人が持ってたりとかするので……自分が気になる技術者の方の Twitter をフォローして、暇な時にスクロールしてみるといった情報収集を受動的におこなったりしますね。半分、受動的に。

塩野：
例えば自分の例ですと、TypeScript 周りが好きなので、TypeScript周りでよく発言をしてる人とか、いい感じの発言をしてる人とかをフォローしたりします。すると、その人をフォローしたためにそれと似通った人達が出てきてくれるので、その他の人とかも見て、あ、この人は有益な情報を沢山つぶやいているなと思ったらフォローをしたりして……なので、そうですね、トレンドを掴むってところですと Twitter が結構分かりやすくていいかな、と。知りたい人のことをフォローするっていうだけで、Twitterを使えば情報源としては十分かなって思っています。そこで得られたヒントを元に、どこかのWebサイトを Google 検索とかでより詳細に調べていくようなことを僕はやっていたりします。

ーーありがとうございます。その技術の第一人者のような方をフォローして、そこからその方が「いいね」とかリツイートをしている記事を見に行ったり、その人がフォローしてる人を見に行くみたいな……。

塩野：
そうですね。そうすると最新の情報はだいたい手に入るような感じがしますね 。

ーーありがとうございます。山根さん、Twitter以外だとこの辺りも見ているなどありますか？


山根：
はてなブックマークのテクノロジータブを観てたりしますね。朝イチとかに。技術技術したところだけではなくテクノロジーとビジネス系も混じってきたりするんで、トレンドとかもわかっていいですね。

いいインプット方法とは？

ーーでは続いての質問です。「Web 制作会社で働いていて、独学で React、TypeScriptを学んでいるところなんですけども、独学での限界を感じています。アウトプットが一番だと思うものの、一番いいインプット方法はなんでしょうか」という質問です。山根さん、いかがですかね？

山根：
どの辺でお困りかがちょっとわからないんですけども、コードのちょっといい感じの書き方とかその辺りでお困りだったら、上手な方のコードを見つけてきて写経するのがおすすめですかね。デザインの実装の場合でも、いいデザインを写経するっていう……結局写経になるかな。

ーー今いただいているコメントでも、「GitHubの公開リポジトリを眺めたりしてます」とありました。良質なコードかはわかりませんが、そこを見るみたいなところが一つの近道なのかなと思いました。

フロントエンドでのデータビジュアライゼーション

ーーでは続いて次の質問にいきます。「JavaScript におけるフロンエンドのデータビジュアライゼーションのツールとかライブラリーは何が人気ですか」というものです。使ってるものとかってあったりしますか？

山根：
D3.jsが一般的で。D3.jsはカスタマイズが大変なんですけど、結局それを使うってことが多いですね。

ーーありがとうございます。塩野さんもそうですし、参加者の方からも同意があるところでした。

今後のフリーランス案件数

ーー続いての質問です。「フリーランスエンジニア向けの案件は今後増えていくのでしょうか、 または今後供給過多になって大変になっていくんでしょうか」ですね。ここは専売特許みたいなところがあるので、僕の方からお答えしたいと思います。

ーー基本的には増えてくるかな、というところがあってですね、やっぱりハイスキルなエンジニアを中心に、結構フリーランスになられてきてる方が増えてるな、というのが僕らの足元の観測でもあったりします。かつミニマムで新規事業開発を進めていくとなった時に、正社員ではなくてスキルが高い方にフリーランスで週3とかで入ってもらうような開発スタイルも増えてきてるなとも。おそらくそういったところが増えてくるんじゃないかなという気がしております。

勉強してみるといい言語

ーー続いて、デザインとコーディングが好きでフロントエンドエンジニアを目指しているのですが、フロントエンド技術だけで良いのかという不安を抱いてるという方から。「勉強してみるといい言語はありますか」ということなんですが、これに関してはデザインとコーディングってところもあるので、山根さんに是非お答えいただければと思います。

山根：
サーバー要素について学ぼうと考えておられるようですが、ここに関しては特におすすめはなくて……でも、フロントエンドをやってるのであれば JavaScript 系になりますかね。Node.js 系をやるとそこまで新しい言語を覚える必要がないので学習コストは低いかなと思います。データベースの設計周りとかをやっておくと、デザインを考える時のいわゆる要件定義フェーズなどで、ここのデータがこうなってるからデザイン上ではここのデータ持ってこれるとか、そういう話ができるようになるので割とおすすめですかね。

ーーありがとうございます。先ほどのトピックにもありましたけど、フロントエンドの領域だけでなく他のポジションとの連携が必須になるので、そこの部分もわかってるとより最適化していけるところがあるのかなと、今のコメントで感じました。

フリーランスで自由時間がないとき

ーー続々と質問が来ています。「フリーランスとして働いていると自由時間がなくて休日も何もないってなった時にどうすればいいですか」という質問も来ています。これは正社員もフリーランスもやられていた塩野さんがイメージしやすいんじゃないかと思うので是非お答えいただければ。

塩野：
どうすればいいか…… いや、実はどうしようもないんですよね。あるあるのパターンとしては、やるぞって時にはたくさん案件を入れたくなるわけです。ところが実際にやってみて、お金がもらえるまでの最後の3,4週間ぐらいの時とかって、多分めちゃめちゃ忙しくて、休日も何もへったくれもないって感じになってきてしまうと思うんです。そう言う時でも、やっぱりその案件を取ってしまったからにはやらなきゃいけないってところがありますよね。だからそこまではどうしても頑張るしかなくて。

塩野：
でも、人生の経験として何個か案件がおじゃんになってしまったとか、そういうのは全然アリだと思うんです。アリだと思うと言ってしまうとこの場の発言としてどうかと思うんですけど……。

塩野：
やるからにはやったほうがいいというのは、まず辛い前提としてあるんですが、もしそういう感情が生まれてしまうのであれば、やっぱり根本的に「何のためにいくら稼ぐのか」とか「何のためにフリーランスとして働くのか」などの部分で、最初に自分が持ってた理想像と実際の現実が違ったところがあるんですよね。そこに関しては繰り返さないように、軌道修正していくことがまず必要だと思いますね。起動修正していくにあたって、自分にとって一番の幸せの在り方を模索していく必要があるので……ちょっと話が長くなってしまいそうなのでこの辺りまでになってしまうのですが、少なくともフリーランスとしての理想像と実際の現実がどうなったのか、見つめ直す時間が必要なのかなと思いました。

ーーありがとうございます。コメントのなかにもこの日は絶対仕事をしないというのをスケジュールに組み込むしかない、というものも。

TypeScriptのメリット

ーー「TypeScriptのおかげで最近だと生の JS を書くことがほとんどなくなった」みたいなコメントもあったんですが、TypeScriptのメリット、山根さんはいかがでしょうか？

山根：
コードの補完入力がすごく楽というのと、メリットがあり過ぎてわからないですけども……。あと、バグも見つけやすくなるので、 安全性が高まるっていうところもですかね。今のバグに関して、コメントでも「コンパイル前にエラーを出してくれるところ」というのも来ています。

塩野：
コンパイルエラーと実行時エラーの2段階構えになってくれるので。

山根：
覚えるのが大変かもしれないですけど、覚えるとTypeScriptで書いたほうが早くなるかなという印象です。

フリーランスの稼働日数や報酬の交渉のやり方

ーーここまで技術周りの話が来ていたので、ちょっと切り口を変えて伺えればと思います。「長期のフリーランスの案件で、稼働日数とか報酬の交渉などをする際のおすすめのやり方を教えてください」とのことです。山根さんいかがでしょうか？

山根：
こういうのって今はFindyさんとかエージェント経由で頼むと先に聞いていただけますもんね。どういう稼働時間でどのくらいの報酬でやりますか、などは先に聞いていただけます。まずはエージェントさんにしっかり伝えることですね。直接交渉になったら胸を張っていくしかないですよね。こういう条件じゃないとやりませんってはっきり言うしかないと思います。

ーーありがとうございます。稼働日数や報酬の交渉などはエージェントのほうが比較的やりやすいところはあるかなと思います。

山根：
そうですね。苦手だったら、エージェントさんに間に入ってもらうほうがいいかもしれないですね。 

ーー宣伝じゃないですが、その際は Findy Freelance をご活用いただけると嬉しいです。

山根：
僕もわりと高い単価でやらさせてもらうんですけど、時間が空いた時にFindyさんにお声がけしたら、言った単価でサクッと取ってきてくれるんでおすすめです。

セルフコントロールについて

ーー技術とはまた違う質問なのですが、「セルフコントロールや自制心を育むために実践している方法はありますか」とのことです。

山根：
習慣をどう作るかという話になってくるかなと思います。僕も最初そうだったんですが、好きな時間に起きて好きな時間に寝てたりすると昼夜逆転してしまいますよね。そうならないために、朝何時にこれを絶対やらなきゃダメみたいなルールをどんどん作っていって、習慣化を意識していやっていくと良いと思います。

ーーありがとうございます。お時間が来てしまったので、最後にお二人に一つずつ質問を選んでいただいてお答えいただいて締めさせていただければと思います。塩野さんいかがでしょうか。

塩野：
「今後、フリーランスのフロントエンドエンジニアとして働いていく上で効率よく市場価値を高められるスキルはどういったものがあるでしょうか」について回答します。これに関しては、私は市場価値は掛け算だと思っています。フロントエンドは良くも悪くもやらなければならないことが増えてきてくれたおかげで掛け算がしやすくなっているなと考えています。具体的に言うと、例えばGoogleのFirebaseと Firestoreを使ってフロントエンドだけでアプリケーションをまるっと全部一個作れますみたいな感じですね。

塩野：
また、0から100まで全部フロントエンドだけで作ってみる経験をたくさん積んでいくと、効率よく市場価値を高められます。そういったプロトタイプを作るニーズなどはたくさんあるので、サーバーレスフレームワークなどを使ってフロントエンドだけでアプリケーションをガッツリと作れるのも大切かなと思います。

ーー続いて山根さん気になる質問はありますか？

山根：
「新規技術を学ぶ瞬発力を鍛えるために必要なことや、実践してることがあれば教えていただけますでしょうか」という質問に回答します。例えば最近 React かNext.js が流行っているからと言って、React などの書き方だけ覚えちゃう人が結構いるなと思っていて。もっと根本的に JavaScript とかがどういうものなのか、どういうロジックでプロラミング言語は動いているのか、ブラウザにどういう形でレンダリングされてビジュアルが表現されてるのかとか、その辺の基礎知識を身につけておくと新しい技術がポンと出てきても分かるようになるんじゃないかなと思います。ちょっと退屈な回答になるんですけども、そう思います。数式の公式だけを覚えちゃうと応用は効かないみたいな感じですかね。

山根さんから塩野さんへの質問

ーーちなみにちょっとここで伺いたいのですが、パネリスト同士でお互いに質問はありますか？ 

山根：
あしたのチームさんでのテックリードってどういう仕事されています？

塩野：
そうですね。あまり仰々しいことは特にやってはいないんですが……チームの開発体制がスクラム体制になったというのもありまして、テックリードらしいお仕事はほぼ皆無に等しかったりしますね。なので、実際のところは肩書きだけいただいている感じに等しいところもあるのですが……いざというときに意思決定を柔軟に、スムーズに進めるためにみんなで合意を取るところで、なるべく良い意見出しをするなどがメインになってきている感じはありますね。

山根：
テックリードになれた経緯というか、こういうことをしていたのでなれました、みたいなのはありますか？

塩野：
私の場合は OSS にソースコードのコミットをたくさんしていたってのは結構大きかったんですよね。FindyさんもGitHubのリポジトリを解析して数値化して下さってるところがあると思うんですけど、そういった形で自分が OSS に積み上げていたコミット達が勝手に自分の評価を多少上げてくれていたところがありまして。それが半分くらいですかね。で、もう半分は社内に入ってからのパフォーマンスの発揮によって、少しずつ信頼をいただけるようになったっていうところですかね。

山根：
テックリードっていう肩書をいただいていると、社内の仕事のやりやすさも上がりそうですよね。

塩野：
そうですね。普段はそういうところを全然意識してないのですが……でも本当にお陰様で スムーズにお仕事させていただいいますね。今、ふと我に返って、もうちょっとちゃんとしないとと思いました。

塩野さんから山根さんへの質問

ーーそれでは、塩野さんから山根さんに聞いておきたいことありますか？

塩野：
山根さんはフリーランスになってもう10年目ですよね。10年目ということを考えると、最初のスタートが早かったと思うんですよね。そこに踏み出す力はなんだったのかなって。わりと経験もあまりない中でフリーランスとしてスタートし始めた、そこに至るまでのモチベーションって何だったのかなというのがちょっと気になりましたね。

山根：
そうですね。完全に若気の至りというか若さですよね。なんかあるじゃないですか、若さゆえの全能感とか自信とか。かといってフリーランスになろうって思ったわけじゃなくて、フラフラしてたら、もともと IT 会社のSIer社員だったので、 IT に詳しいやつみたいな感じで、ホームページ作ってとかそういう話がくるようになって、気がついたらって感じですかね。

塩野：
ああ、なるほど。なろうとしてなったっていうよりは、頑張り続けてきた結果として気づいたらみたいな感じですかね。

山根：
そうですね。どちらかと言うとデザインのほうをやりたかったので最初はデザイナーを名乗っていました。でもコードを書く人を探してコードを書いてもらうと、自分の取り分がちょっと減るじゃないですか。自分はコードを書けたので、じゃあ自分で書くかってなって、それを続けていて周りを見ていたらどうやらエンジニアと名乗ったほうが商売やりやすそうやぞ、って思って……それでエンジニアを名乗り始めたみたいな流れで。

塩野：
じゃあもともとデザイナーだったんですね。かなり珍しいタイプ。そういったタイプのスタートなのかもしれないですね。なるほどありがとうございます。

ノーコードに関して

ーー僕のほうで気になった質問があって、是非伺えればと思います。最近ノーコードが流行っていますが、ノーコードに関してのお二人の印象について伺えればと思います。

山根：
ノーコードを学ぶ学ばないという点だと、ノーコードの定義がちょっと難しいんですけれど……要はスプレッドシートを使いこなすとか Google Docs を使いこなす方もそうですよね。最近日本でノーコード系のサービスって言うと STUDIO さんですかね。ホームページを簡単に作れる。まあそういうもんだと思うんで。エンジニアがこれでコードを書かなくていいようになるみたいな話だったら分かるんですけど。どういうサービスを使うかによるかなって思いました。

ーー塩野さんもご回答いただいてもよろしいですか。

塩野：
僕もノーコードのサービスにあまり詳しくないんでわからないですけど、b→dashとかですかね。最近フェイスブックの広告かなんかでよく見るんですけど。そうですね、夢としては結構面白そうかなと思うんですけど、エンジニアが今まで出来てたことをノーコードでできたらすごいよねっていう話だと思うので、エンジニアがわざわざ学ぶものではないのかなという気がしていました。

塩野：
ただ、今まで自分たちがこんなに頑張ってきたことをこれだけのことに縮小できるんだってところは、知っておくが必要あるかなと思いますね。学ぶというよりも、今まで自分たちが頑張ってこうやって書いてきたところについて、ノーコードだとここまでの領域はカバーできて、でもノーコードだとこの領域は絶対カバーできないとか。ここら辺は自分たちエンジニアが頑張らなきゃいけないんだよねっていう、棲み分けの部分は知っておいたほうがいいのかなと思いました。

ーー僕も非常に注目していたのでご回答いただきありがとうございました。ノーコードを作る側にいくのかとか、サクッとアイデアを実現するようなモックアップだけ作るのかとか、コメントで届いたりしています。

HTMLとCSSを学ぶ意義

ーー残り時間がもうないので、最後の質問に対してお二人からご回答いただくという形で締めさせていただきます。

山根：
HTMLとCSSを今学ぶ必要がないみたいな意見も多数あります、と書いてあるんですけども、これは自分はめちゃくちゃ学ぶ必要があるかなと思ってます。ここの基礎ができてない人が書いたコードを見ると、ちょっと大丈夫かなって思っちゃったりすることが多々ありますし、ここは時間をかけてじっくりやられたらいいなと思います。

ーーありがとうございます。塩野さんいかがでしょうか？

塩野：
山根さんのおっしゃる通りで、ここはむしろ学んでいかないといけないところだと思ってますね。確かに、今は誰でも見た目を作ることができるようになっているんですけど、実際に中身のHTMLを見てみるっていう機会はやっぱりたくさんあります。しかもそのHTMLの構造が昔よりも大事になってきていたり、あるいは複雑な UI を作る時に HTMLやCSSのベースがないとフロントエンドエンジニアっていう視点でもあまりよろしくないのかなと思うので。

塩野：
むしろHTMLとCSSは今後ますます需要があると言うか、できて当たりと言うか。できて当たり前の領域がすごく広がっていく部分なので、学んでいく必要はすごくあるかなと思っています。

山根：
HTMLとCSSをわからずにReactを書き始めてしまうと、基礎がわかってない、応用がきかないなど、へんてこなものになってしまうので、めちゃくちゃ大事だと思います。

ーーありがとうございました。今回のイベントの感想をお二人からいただければと思います。先に塩野さんからよろしくお願いします。

塩野：
このような場をいただき本当にありがとうございました。人前で話すのがあまり得意ではないので申し訳なかったなと思うところもあるのですが、皆さんからの温かい反応をいただいてとても心強かったです。

塩野：
最後に本質的な話をしますと、フリーランスだろうが正社員だろうがフロントエンドエンジニアの需要は今後ますます増えていきますし、活躍できる場が増えていくと思います。なので、フロントエンドエンジニアとして頑張っていくぞというのはまず間違ってないです。

それにあたって、今後どういう風に頑張っていけばいいのかの方向性がこのイベントで示せたのであれば本当に嬉しいと思います。皆さんも一緒に頑張っていきましょう！

ーー ありがとうございます。じゃあ山根さんお願いします。

山根：
お時間ありがとうございました。フロントエンドエンジニアってところだと、今後も塩野さんがおっしゃられたようにニーズはどんどん上がっていきますし、世の中を便利にできる素敵な職業だなと思っています。もちろんお賃金的な夢もあると思いますし……皆さん、日本を良くしていきましょう。