フロントエンド開発の魅力
日本最大級のエンジニアコミュニティQiita プロダクトマネージャーの清野 俊文です。
この番組では、日本で活躍するエンジニアをゲストに向かい、キャリアやモチベーションの話を深掘りしながら、エンジニアの皆さんに役立つ話題を発信していきます。
前回に引き続き、ゲストはUbie株式会社プロダクトエンジニアの鹿野 壮さんです。よろしくお願いします。
よろしくお願いします。
よろしくお願いします。鹿野さんとお送りする2回目のテーマは、CSS書くのって辛くない?です。
今回は、フロントエンド開発含めた開発周りの面白さを、鹿野さんからお伺いしていきたいなと思っています。
今、フロントだけじゃなくていろんなこともされていると思うので、そこら辺のお話も伺えると嬉しいです。
まずは、やっぱり鹿野さんといえばフロントエンドの印象が僕は結構あったりするので、フロントエンドのところをいろいろお伺いしていきたいと思うんですけど、
そもそもまた改めてになっちゃうかもしれないんですけど、フロントエンド開発にハマったきっかけみたいなところをお伺いしていいですか?
はい。ハマったきっかけは、当時はFlashが流行ってて、私はFlashをやりたくてこの業界に入ったんですね。
でも、Flashがスマートフォンの登場によってなくなってきて、Flashみたいなリッチコンテンツを最初作ろうみたいなところから、フロントエンドのキャリアをスタートさせたっていうふうなところですね。
なので、いわゆるHTML、CSS、JavaScriptを使った開発ってところを結構最初は、Flashがなくなったタイミングからやり始めてっていうような感じなんですかね。
そうですね。
そうなんですね。結構Flashと比べると、多分書き心地とかは全然違うわけじゃないですか。
はい。
それでもやっぱりそういうのを作るのは面白いなって感じだったんですか。
そうですね。面白かったし、Flash繋がりで言うと、当時TypeScriptが出始めたかなぐらいの時だったんですね、確か。
私はそのFlashをずっと書いていて、語って素晴らしいなって思いながら生きてきて、初めてJavaScriptを触ったときに、なんて危険な言語なんだっていうふうに思ってしまって、
これが主流だったら、私はもうキャリアを辞めて、実家に帰ってラーメン屋を開こうみたいに思ってたんですけど、
でもちょうどTypeScriptが出てきて、JavaScriptに型をつけようみたいなことが言われたので、
そうですね。それを使うと、Flashで書いてたときみたいな型の書き心地でJavaScriptを書くことができたので、それは結構良かったな、面白く始められたなっていうふうなところですね。
そうなんですね。じゃあ、かなり最初の初期の頃からTypeScriptにハマって書いていたっていう感じなんですかね。
そうですね。もう少し前だと生のJQueryをどんどん書いてたりをしたんですけれども、生のJQueryからTypeScriptへみたいな形でやってましたね。
そうなんですね。当時の、僕もTypeScriptが派遣を取ってからしか帰れなかったりするんですけど、当時のTypeScript界隈というかコミュニティの雰囲気とかってどういう感じだったんですか。
私もそんなに詳しく覚えてないんですけれども、CacheでTypeScriptが確か一番じゃなかったみたいな記憶がありますね。
そうなんですね。
Alt.jsと呼ばれているJavaScriptの代わりみたいなところがあって、CoffeescriptとかTypeScriptがあって、あと何かあったのかな。
そういうのがあって、TypeScriptはその中の一つみたいな形でしたね。確かCoffeescriptのほうが人気だったんじゃないかな。
私はそのCoffeescriptの書き方が全然気に入らなくて、絶対触るもんかと思いながら触らなかったんですけど。
なるほど。当時のTypeScript、魅力ってお話しあったと思うんですけど、もともとはそこら辺の周辺のライブラリとかが全部TypeScriptに対応しているような感じではなかったと思うんですけど、
その当時のTypeScriptを使った開発って、いわゆる結構全体的にフルスクラッチで作っていくみたいな、そんな感じのイメージだったんですかね。
結構今ってTypeScriptベースでそもそもライブラリとかって最初から書かれてたりとか、型定義ファイルとかがあったりして、割かしパッケージもボンボン追加してどんどん再利用していくことができると思うんですけど、
当時って多分そんなにそこまで流行ってなかったということは、あんまり型定義ファイルもなければ、実装自体も生のJSで書かれてるみたいなことが主流だったんじゃないかなと思うんですけど、
その当時の開発の雰囲気みたいなところがちょっと気になったというような感じでした。
そうですね。TypeScriptに対応していないライブラリみたいなのがやっぱり多かった印象ですね。
ただ私は正直そんなにライブラリも使ってなくて、私がライブラリ使い始めたのはAngular 2かな。それぐらいからライブラリプラスTypeScriptを使うようになりましたね。
TypeScriptとライブラリの変遷
で、Angular 2は結構いち早くTypeScriptを採用してて、結構ガチガチの型を使ったものだったので、結構書き味は良くて気に入って書いてましたね。
そうなんですね。結構TypeScriptが流行りだしたのって、そういう大きいフレームワークみたいなのが出てきてからって感じなんですかね。
あんまり私は歴史に暮らしないで気づいたら流行ってたぐらいなんですけどね。
でもあれですよね、Vueとかも最初はTypeScript確か対応してなかったし。
そうですね。
逆にあれですよね、VueをTypeScriptに対応させようとすると結構いろいろ大変だったりしますよね。
で、ReactがTypeScriptに対応して、すごい書きやすくなったりしてたって形ですね。
すいません、あんまり歴史の話は得意じゃないですけど。
ありがとうございます。なるほど。
じゃあそういう本当に過渡期の中で、KANOさんはずっとTypeScriptを始めるとするフロントエンド周りをずっと書いてらっしゃったって感じなんですね。
そうですね。JQueryからTypeScriptに行って、正直一回私Flashをまた挟んだんですよね。
Flashを挟んだんですかね。
フラッシュってもうほぼ使われてなかったんですけど、当時作ってたのが、フラッシュの技術を使ってアプリをビルドするみたいなことをやってて。
それだと対象がWebじゃないアプリなので、Adobe Airっていう技術があって、それを使ってフラッシュをどんどん作っていきましたね。
フラッシュ挟んで、もう一回Webに戻るかってなったときに、Angular 2でTypeScriptをもりもり書き始めて、その後、ViewとかNextとかをやって、今リアクトに至るっていうふうなところですね。
そのViewとかNextのときも、結構TypeScriptのサポートが弱かったりして、結構書き味があんまり良くないなと、Angularのほうが好きだなと思いながら書いてたって形ですね。
じゃあ、Angular、View、リアクト全部触っているって感じなんですね。
一応触ってましたね。
そうなんですか。
私はAngularが流行ってくれって当時は願ってたんですけど、今はリアクトが派金を取ってしまってって形で。
Kanoさん的には、その3つのライブラリだとどれが一番好きとかあるんですか。
当時はAngularでしたけど、やっぱり今はリアクトが一番好きですね。
最初はViewも、最初はリアクト触ったことなくて、Viewばっかり触ってたんですけど、View最高って思ってたんですけど、リアクト触った瞬間に、もうこれだわって思ってしまって、もうリアクトじゃないとっていうふうに思っちゃいましたね。
僕、リアクト、Kiitaもフロントリアクトなので、リアクトを書くことが多かったりするんですけど、リアクト、View、Angularで書き心地の違いってどういうところなんですか。
ちょっとAngularとViewの知識は若干古いので、今と違ってたらすごい恐縮なんですけど、
Angularは本当にオールインパッケージで、いろんな必要なライブラリがガッチガチに入っているんですね。
今はちょっとわからないんですけど、当時はRxJSとか、デコレーションとか、TypeScriptのクラスを使った書き方をしてますとか、
なので、Angularさえインストールしておけば、基本的には必要なライブラリはいりませんみたいな世界観でした。
Viewは、ユーザーが書きやすい、HTML、CSSを生で書いていた人が比較的すんなり入りやすいような、いろんな記法が揃っているみたいなイメージがありまして、
ただ、書くまでに覚えることが個人的には多くて、結構キャッチアップが大変だったかなというふうに思いますし、
TypeScriptのサポートが結構いまいちだったところがあって、型安全じゃなかったので、大規模なプロジェクトとか作っていくときはすごい怖かったなというふうなのはあります。
リアクトはやはりシンプル。リアクトの知識って、結局JavaScriptとTypeScriptの知識を覚えておけば、とりあえず入れるっていうふうなところはあるんですけど、もちろんフックスとかそういう追加の知識は必要なんですけど、
非常にシンプルで、記法も明確で、覚えやすくてシンプルで書きやすかったっていうのがありますね。
なるほど。ありがとうございます。それぞれのライブラリーで、これはこういう人におすすめとかあります?
CSSとプログラミングの好み
これはこういう人におすすめ。これもVueの知識が古いかもしれないですけど、デザイナーさんとか、HTML、CSSをやってるコーダーさんとか、
そういう人たちがもう少しリッチなサイトを作りたいとか、データを連携させたものを作りたいみたいなのであれば、Vueをおすすめするかなっていうふうなところがありますし、
今後そのフロントエンドキャリアを進めていきたいっていうふうな人であれば、もちろんリアクト一択かなっていうふうなのは思っていますね。
ありがとうございます。そこら辺は書き味のところで、それぞれやりたいことにマッチするかどうかで、そこで選んでいくと良さそうって感じですかね。
はい。
なるほど。ありがとうございます。ちょっと話変わるんですけど、KANOさんってCSSのマークアップみたいなところもすごいアウトプットされてますし、
タイプスクリプトみたいなフロントエンドのプログラミングのところのアウトプットもすごいされてるじゃないですか。どっちのほうが好きとかあるんですか。
CSSとタイプスクリプトとかそういう話ですか。
そうです。そのマークアップ、CSSを使ってマークアップするのが好きなのか、いわゆるロジック的なところをタイプスクリプト使って作っていくほうが好きなのかというと、どういう感じなんだろうなと思って。
正直どっちも好きで、私はどっちかっていうと、ライブラリとかフレームワークとかいうよりも、もうちょっとコアといいますか、HTML、CSSそのものとか、JavaScript、タイプスクリプトそのものみたいな、そっちのほうを追っていくのが好きなんですね。
で、CSSとJavaScript正直どっちも好きで、もともとすごいJavaScriptとかActionScriptとかが好きだったんですけど、なんだろう、そのCSSが好きなところって、そのJavaScriptとかを一生懸命いっぱい書いてしか作れなかったような見た目の表現をCSS数行でできるみたいなところがすごく好きで、
そういったところでCSSとかも結構追い始めたっていうふうなところがありますね。あとは手軽じゃないですかCSSって、実行環境も別に準備しなくていいし、ちょっとコード書いたらすぐ楽しい見た目が作れるので、どっちも好きですね。
そうなんです。でも本当にCSSも書くこと自体が結構好きだし、プログラミング自体も好きっていうような感じですね。
そうですね。
CSSを書く苦労
そうなんですね。だからこれは結構僕の周りの話にも閉じている話のちょっと偏りがあるかもしれないですけど、結構エンジニアの方ってCSS書くの苦手な人多い気がしていて。
すごく分かります。なんでなのかなと思って。
そこがなんでなんだろうなっていうのと、あとこういう感じでCSSみたいなものを追ったりとか勉強したりとか書いたりすると面白いよみたいな、その面白さの楽しむコツみたいなものを伺えると嬉しいなと思っていて。
楽しむコツ、いかに楽をしたいかを考えることですかね。
楽をしたいこと。
私はいつもできるだけ楽をしたいと思いながら生きているので、CSSって結構長ったらしいコードを書かないと目的のレイアウトができなかったりするじゃないですか。
でもそれCSSの最新情報とか追っていくと、昔はたくさんの行を書かないと実現できなかったことが、今では1行でできますとか2行でできますみたいなことが結構ざらにあるんですね。
そういうのを見ていくとすごい楽しいですね。
新しい情報を手に入れると長ったらしいコードを書かなくてよくなってすぐに家に帰れてみたいなことがありますと。
直近で言うと、私が最近勉強会でちょいちょい取り上げているサブグリットとかハズセレクターとかああいうのがあるんですけれども、ああいうのもあれを覚えとかないと目的のレイアウトを実現するためにJavaScriptコードをいっぱい書かなきゃいけないんですね。
コードって人間がコードを書けば書くほどバグって起こり得るものだし、見た目の処理をそもそもJavaScriptに任せるべきではない。
見た目は全部CSSに任せるのが健康的な世界だと思っているので、そういう新しいCSSを覚えると楽ができてJSも少なくなってハッピーだよみたいなことを何回か経験するともう止められなくなると思いますね。
なるほど。じゃあ、いわゆる言い方が難しいんですけど、古めかしいCSSの書き方みたいなのを頑張って書けるように勉強するというよりも、いかに新しい情報をキャッチアップしてスマートにスタイルを当てていくかみたいなところを勉強していったりすると結構ワクワクしたりするって感じなんですかね。
そうですね。ワクワクしますね。
なるほど。結構プログラミング言語とかだと、いわゆる作ってるリポジトリとかがあって、そこのリリースノートとか読めば新しいバージョンの新機能とか分かったりする気がするんですけど、CSSってそういう新しいアップデートの情報でどうやってキャッチアップしていくんですか?
新しいCSS技術のキャッチアップ
私がよくやってるのは、ブラウザのリリース情報を追うことですね。
ブラウザの。
例えば、SafariとかChromeが最新版がリリースされましたと。そこで新しいCSS機能がこういうのが実装されましたっていうふうに出るんで、それを追う。
私が結構注力してるのは、新しく実装されたCSSが全ブラウザで使えるかどうかっていうのをすごく重要視してて、
例えば、Chromeでサブグリッドが使えるようになりましたって言われたときに、あれ、そういえばサブグリッドって今どのブラウザが対応してたっけっていうふうなのを見て、
Can I Useみたいなサイトが、Can I UseとかMDNみたいなサイトがあるんですけど、ああいうところで見て、全部ブラウザで対応している。
そして、ユーザー数も結構浸透しているであろうっていうふうに判断したら、現場に投入していくっていうふうなところですね。
なるほど。今の話だとプロパティとか、そういう新しい機能の話は、確かにそういう感じで終えるなと思ったんですけど、
それをどう使うかっていうところは、どうキャッチアップしていくといいんですかね。こういうユースケースだと使えるねとか。
それも結構ブログに書いてあることが多かったりとか、名前と忘れしたんですけど、
ウェブデブとかにこういうユースケースで使えますよみたいなのを結構書いてるんで、やっぱり素振りしてみることが大事だなというふうに思いますね。
読むだけじゃなくて実際に自分で動かして、じゃあこの値こう変えたらどうなるんだろうとか、じゃあこのプロパティ消したらどうなるんだろうみたいなのを素振りしておいて、
そうすると自分のものになっていくんで、全ブラウザ対応したときにプロタクザに入れることができるっていうのがありますね。
あとはアウトプットの話にもつながるんですけど、この機能面白いっていうふうにTwitterという名の自分のメモ帳に書いて、
どんな形でもいいのにアウトプットしておくと、やっぱりアウトプットすると定着するので、そういうことをやっていくとキャッチアップできていくかなって形ですね。
新しい情報を追っていくのって実は結構楽で、1年とか2年分の情報を一気にインプットするよりは、新しい情報の差分だけをちょいちょいちょいちょいゲットしていく方が楽なんですね。
そういったことをやって、キャッチアップしていくっていうふうなところかなと思いますね。
実践的なCSS学習法
ありがとうございます。
もし今日からCSS、いろいろインプットして頑張っていくぞって思っている方に対して、一歩目としてどういうアドバイスされますか。
一歩目として、私がアウトプットした最近のCSS 2024まとめみたいなのを見ていただくっていう手前味噌はありつつも、先ほど伝えたようなWebDevみたいな記事を見たりとか、
あと私がよくやっているおすすめの手法としては、Can I Useのサイトに行って、ブラウザのバージョンごとにこの機能が対応しましたのを見ることができるんですね。
あれでポチポチポチポチ数バージョン前から未来のバージョンまでの、例えばFirefox 101、102、103みたいなのをポチポチ押すと、
このブラウザでこの機能ができましたみたいなのが一覧で表示されますと。
Firefoxのバージョン103でこういう新しい機能が使えるようになったって書いてて、これってどういうものなんだろうとか、ブラウザ全部対応してるのかなとか、
そういうのを見始めることから始めていくと面白いんじゃないかなと思いますね。
あとは私がよくやってるのは、CSSとかJavaScriptを書くときもそうなんですけれども、書き始める前に一歩、一瞬立ち止まるんですね。
これってすごい面倒くさいコードを私は今書こうとしているんだけど、これってもっと楽な書き方ないのかなみたいなことを一瞬立ち止まって、
検索するなり今だとチャットGPTに聞くでもいいんですけど、そういうことをやって一瞬立ち止まって新しい情報を探すみたいなことから始めると、
結構楽にキャッチアップしていけるんじゃないかなと思いますね。
ありがとうございます。本当にまずはインプットをちっちゃいところからやってみるっていうのと、それを実際使ってみるっていうところもそうですし、
日々の中でそれが使えないかみたいな釘を探すみたいな。文化庁を持って釘を探すみたいなことをやっていくと、だんだんCSSみたいなものの面白さみたいなところがわかってくるみたいな感じなんですかね。
楽をしたいかっていつも考え続けることですね。だって早く帰りたくないですか、家に。
はい、帰りたいです。
早く帰りたいですよね。早く帰りたい。皆さん忙しいじゃないですか。絶対皆さん早く帰りたいはずなんですよ。
早く帰るためにはどうするかっていうと、目の前の仕事を早く終わらせると。
この目の前のやろうとしている仕事をどうやって楽にするかっていうのを常にアンテナを張っておくっていうのが、回り回って早く帰ることにつながると思ってるんで。
なるほど。ありがとうございます。参考にします。
ということで、今回はKANOさんのフロントエンド開発についていろいろお伺いをしてきました。
本当はフロントエンド以外のところもいろいろ聞きたいなと思ったんですけど、あまりにもフロントエンド周りのお話が面白すぎて、ちょっとそれだけでお時間が過ぎてしまいました。
正直僕も結構CSS書くの苦手で、いつも苦しみながら調べながら書いてたりするんですけど、
今日のお話聞いたら、ちゃんとキャッチアップとかしたら面白いんだろうなっていうのはすごい感じたので、
僕も今回いただいたアドバイス参考にいろいろ実践していきたいなというふうに思いました。ありがとうございました。
さて、この番組では感想や次回ゲストへの質問、リクエストなどをお待ちしております。
番組詳細欄にあるリンクよりお気軽にご投稿ください。
XではハッシュタグKITAFMをつけてポストしてください。表記は番組名と一緒でQFMが大文字、残りは小文字です。
そしてApple PodcastやSpotifyのPodcastではレビューもできますので、こちらにも感想を書いてもらえると嬉しいです。
KITA株式会社は、エンジニアを最高に幸せにするというミッションのもと、
エンジニアに関する知識を記録・共有するためのサービスKITA、社内向け情報共有サービスKITAチームを運営しています。
ぜひカタカナでKITAと検索してチェックしてみてください。
来週も火曜日の朝6時に最新話が更新されます。番組のフォローをして最新話もお聞きください。
お相手はKITAプロダクトマネージャーの清野俊文と、
UBIプロダクトエンジニア加野たけしでした。
