00:02
ManaのWebクリエイターカフェからのお知らせです。現在、リスナーの皆さんへ、番組に関するアンケートを期間限定で実施しています。
回答していただいた方の中から、抽選で10名様にAmazonギフト券1000円分をプレゼント。
詳細は番組概要欄のアンケートはこちらをご覧ください。
今回のテーマは、Reactについて学ぼう、です。
ちょうど私も今、Reactを勉強中ですので、いろんなReactの勉強の仕方、そしてReactとは、というところも聞いてみたいと思います。
というわけで、ゲストには前回に続いて、株式会社リーチスクリプト代表でUDEMYのReact入門講座でベストセラーを獲得したJackyさんにお越しいただきました。
今日もよろしくお願いします。
お願いします。
さあ、私はすごく楽しみにしていたこの回なんですけど、現在私、Reactの勉強をしているので
されてますね。
はい。聞きたいことは山ほどあるんですけど、ちょっと一つずつですね、聞いていこうと思います。
マナのWebクリエイターカフェ
Jackyさん、ReactについてUDEMY、学習サービスですね。UDEMYで入門講座をリリースしていたり、あと書籍とかも書いているので、Reactマスターと勝手に思っておりますが
いやいやいや
まずReactって何だろうという方もいると思いますので、まずReactって何ですかと聞かれたら何と答えますか。
公式サイトの言葉を借りるのであれば、ユーザーインターフェース構築のためのJavaScriptライブラリと言われているということで
要はユーザーがWebとかで見る画面の見た目の部分とかを作れるものですね。JavaScriptのライブラリなので、JavaScriptは使いやすくなったようなものが提供されているようなイメージになります。
なるほど。よく聞かれるんじゃないかなと思うんですけど、素のJavaScriptじゃダメなんですかとか聞かれたら何と答えますか。
そうですね。今やっぱりパフォーマンスっていうのがかなり世の中で大事と言われていて、ユーザーがいかに快適にサクサク画面を見れるか操作できるかっていうところが大事なんですけど
そういったものが普通のHTMLとJavaScriptを組み合わせるだけではできないようなことができるようになっているのがReactの特徴ですよね。
そういったものでいうと、例えば昔からあるJQueryとか、最近だったらVueとか、そういったライブラリとの違いは何になるんでしょう。
そうですね。JQueryに関してはもう全然別物というか、使い方というか操作の仕方が違ったりとかはするんですけど、よく比べられるのはVueとかと比べられたりするんですけど
正直もう数年前まではReactとVueって比較されてたりとかしたんですけど、もう今になってくるとこれからおそらくもう比べるものでもなくなってくるぐらいReactの未来というか世界観がかなり素晴らしいので
03:13
何が素晴らしいんです?
かなり世の中のウェブを変えるぐらいの仕組みが今React、最近出たReactの18とかそうなんですけど、裏側がすごいことをしようとしてたりとか、本当に普通に誰もかけないようなパフォーマンス最適化のための仕組みが全部Reactが提供しようとしてたりとかするので、もう本当にフロントエンドって枠を超え出してる感じですね。
私が始めたきっかけももともとVueをやっていて、Vueのバージョンが2から3に変わるっていうタイミングで、Vue3がReactみたいな動きになってきてると。
でもReactみたいな動きになってるんだったら、Reactでいいんじゃないかと思ったのと、あとは周りからですね、同じようにReactなんでやらんのやみたいな声も結構大きくなってきたので、Reactを勉強するっていうことにしました。
リアクト以外にも別の言語をされてたりしたんですかね。
そうですね。これまではいろんなJavaとかPHPとかGoとかもやりましたし、それこそVueの仕事もやったことありますし、JQueryとかもやってましたしって感じですね。
その中でReactに出会って、もうこれだと。
そうですね。自分が勉強し始めたときはまだ日本でそこまでReactってなってなかったので、まだVueの方が勢いがあったときで。
公式サイトとかもまだ英語で書かれてたときとかだったので、ちょっと半分不安はありつつ、でも世界ではReactっていう情報があったので、やっといた方が将来できないかなみたいなところで始めたのがきっかけだったんですけど。
そうですよね。ライブラリーの歴史で言うと、多分最初にアンギュラーがVueVue言ってて、Reactが来てからのVueみたいな流れが世界的にあったんじゃないかと思うんですが、React出だしの頃から目をつけてたと。
そうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそうそ
なんか結構みんな同じところで詰まってるなみたいなものがあったりとかしたので
なんかそれを毎回勉強会とかで伝えてたりはしたんですけど
あとはなんかもっと広い多くの人に伝えたりしたら
もしかしたら喜んでもらえるんじゃないかなっていうのがきっかけで
最初UDEMYを作ったっていう経緯です
06:01
なるほどなるほど
なんか話を聞いてたら
つまづきポイントみたいなのが出てきたんですかね
皆さんの共通
そうですね
うんうんうん
じゃあもうまとめておくと
みんな見てくれるだろうと
そういうところでやってみようってなったんですね
でUDEMYの方だったらベストセラーになってると
ベストセラーはいまあそうですね
はいあの私も見てみたんですけど
やっぱりわかりやすいですよね
こういう流れでやるんだなっていうのがざっくりわかるっていうところと
あと細かいところ
こういうところは気をつけようとか
そういうポイントもあのちょこちょこと解説されてますので
すごくわかりやすかったです
ありがとうございます
はいであとは書籍の方もですね
モダンJavaScriptの基本から始めるリアクト実践の教科書
はい消えました
長い長い
はいこちらの方も私も読んでみて
すごくわかりやすくてですね
ありがとうございます
あの本当に一番最初の一行目
前書きの一番最初にリアクトの習得に苦戦する理由は
JavaScriptへの理解不足ですと
いうふうに書かれてるんですが
これはこの書籍通してずっと言われてるようなことで
リアクトをやろうと思うよりも
JavaScriptの基礎ができてないと
ちょっと難しいよっていうのが
言いたかったとこだなと思うんですけど
そういう方がやっぱたくさんいたんですかね
そうですね
なんか詰まってる話を聞くと
それはリアクトがわかってないんじゃなくて
JavaScriptがわかってないんだよっていうことが
結構多かったりとかしました
なるほどなるんでそれをまとめてたら
一冊の本になりましたと
なっちゃいましたと
なっちゃいましたね
そうなんです
私も読んでてすごく
あ、これこういうことやったんや
っていうのがすごく出てきて
あの謎の括弧
この括弧って何だったんだろうとか
謎の点々とか括弧で
謎の点々そうそうそう
これこういうことだったんですね
便利やんみたいな
わかったら便利だなとか
わかったらすごい
効率いいなっていうのが出てくるんですけど
そうじゃないと記号がね多いですよね
そうなんですよ
また記号ってね検索しづらいんで
そうなんです
あの本書籍とか見てても
最後の作品とかでもないんですよね
記号だけとか
棒だけ
棒だけで探せない
&だけで探せないとかいうのがあって
そこをまとめてくださったので
すごくわかりやすかったんですけど
この辺もですね
最初やけいさんがリアクトを勉強する時も
やっぱりこういうところで
つまづいたなっていうのもあったんですかね
そうですね
全然わかってなかったですね
自分も最初
なんかリアクトの公式サイトで
わりと説明もなく
そういう文法とか出てきたりするんで
リアクトはこう書くんだとかっていう
理解の仕方をしちゃってて
よく考えたら
近年に出たJavaScriptの新しい文法だったり
09:02
みたいなとこ
後々わかってきた感じですね
そのリアクトもなんですけど
JavaScriptも年々
新しい書き方が出てきたりするじゃないですか
その辺のキャッチアップってどういうふうにされてます
今JavaScriptは
ESなんとかES2021とか2022とか
毎年仕様を更新していくっていうルールになってるので
それが出たタイミングで
結構Twitterとかでね
出ましたとかそれをまとめてくれたり
聞いたとか全でまとめてくれたりしてる人とかも
毎回いるので
1年に1回新しい文法が出るっていうのを
頭に入れつつ
それが出たってなった時は
一通り目を通すみたいなことは
しておいたほうがいいかなと思います
なるほど
新しいのが出たよってなったら
ご自身でもちょっと書いて試したりとかも
するんですかね
そうですね
実際に見てみて
その次にするのは
どのブラウザーがどのバージョンで対応してるか
っていうのを見て
今のプロジェクトで使えるかどうかとかを判断して
使えそうなものはもうその書き方に変えたりとか
いいものはどんどん取り入れていったほうが
いいかなとは思います
じゃあ今リアクト
世界的に見たら需要があるとか
たくさんの方が使ってるっていうふうに
あったんですが
今日本でもですね
リアクトの経験者の需要っていうのは
高まってるんでしょうか
そうです
かなり上がってきてると思います
もう世界的にじゃなくて
日本の中でもリアクトがかなり主流には
なってる状態なので
そうなんですね
多くの企業さんで不足しているとは思います
そうなんですね
じゃあ私今リアクト勉強してるので
需要のある人間になってきてますからね
需要のある人間になってるかもしれない
よく言われるのは
リアクトだけできてもなかなか難しいよね
みたいなのはやっぱあったりするので
システム開発なので
バックエンド側の知識もあるとより良いとか
リアクトを軸にどこが自分の強みとして
さらに深めていくかみたいなところは
意識するといいかもしれないですね
バックエンドで戦うのか
デザイン面で戦うのかとか
なるほど
私もデザインの経験が長いので
その方面で
フロント特化型のリアクトエンジニアで
需要を高めてきますね
はい じゃああと駆け出しの方ですね
今まさに勉強しようとしてるとか
していますっていう方でも
リアクトは学ぶべきと言えるんですかね
そうですね
エンジニアとしてやっていこうと思ってる方とかであれば
フロントエンドを勉強するのであれば
JavaScriptの先にリアクトをやっておいた方が
いいかなとは思います
ただフロントエンドだけではないので
バックエンド側で自分のスキルを軸に
やっていきたいって方は別に
必ずしもリアクトを最初にやらなくても
バックエンドのスキルを基盤に置きつつ
フロントエンドのキャッチアップで
リアクトもちょっと見ていったりとか
先ほどからこのバックエンドのスキルっていう風に
あったんですけど
具体的にどういう流れが大切なんですかね
そうです バックエンド側は
やっぱ見た目に出てこないところで
12:01
裏側のサーバーの処理とか
データベースからデータを取ってきたりとか
っていうことをするものになるので
それがないとシステムは作れなかったりはするので
PHPだったりJavaだったりGoだったりNodeとか
そこら辺の裏側で動く言語っていうのを
一つやっておいたりすると
それでフロントエンドとつなげて
一個サービスができるみたいな感じなので
やっぱどっちもしておくといいかなと
なるほど わかりました
IT インターネット業界に強い転職アプリGreenは
今話題のテック企業 プロダクト開発 DX案件など
Greenだけの良質な求人を数多く揃えています
正式応募前に企業の中の人とカジュアル面談ができるので
仕事内容やメンバーのことを
しっかり理解した後に先行に進めます
カジュアルに始める転職活動にGreenをご活用ください
ちょっと私も今 React の勉強をしているので
聞きたいことがたくさんあってですね
React 教えてくださいと言いたい感じなんですけど
今私が悩んでいることで言うと
React でプロジェクトを作っていると
どのコンポーネントでどの値が
どう渡っているのかが分からなくなってきまして
ぐっちゃぐちゃにここの値はどこを経由して
ここにおるんやみたいなことになってきてるんですよ
今まさに それってやっぱりプロジェクトを開始する前に
ウェブサイトで言うとワイヤーフレームみたいなのを書いたりして
情報の流れとかをまとめてたりするものなんです?
いやそれはしないですね
最初にそこを洗い出すのってかなり難しいと思います
そうなんですね じゃあここファイル作りながら
コンポーネント作りながら考えて
結構実際の開発 うちでやってる開発とかプロジェクトとかでも
作りながら定期的にリファクタリングって言って
このコンポーネントこう分けようかとか
このステートこっちに持たせようか
この値こっちの方が良かったとかっていう
改善を結構繰り返しながら作っていくっていうのがあるので
最初の想定通りに全部コンポーネントと
値を持たせれるかっていうとそんなことはないので
やりながらこれ複雑になってきたなってなったら
そこが多分リファクタリングポイントで
もうちょっと綺麗な持たせ方できるかなっていうので
改善していったりみたいな
なるほど そうしている段階で今ごちゃごちゃになってるんですけど
どうすればいいですか?助けてほしいです
多分複雑になってるってことは
ステートを親の方に持たせすぎてるとか
本当はコンポーネントに渡さなくていいものを渡しちゃってるとか
はいはい あると思います
っていうのがあったりするかもしれません
15:01
そういうのをじゃあ
まあ俯瞰で見るじゃないですけど
親が何を持ってて子が何を持っててっていうのを
一旦ご整理して
で そこから切り詰めれるものだったら切り詰めてとか
分けれるものは分けてとか
そういう感じで考えていけばいいんですかね
そうですね
持つべきコンポーネントが持つようにって考えていくと
多少はシンプルにしやすい
で 私今本当に個人でお勉強としてやってるので
その辺が気づけなかったりするんですけど
そういう時勉強してる段階だったら
誰かにやっぱちょっと見てもらったりした方がいいんですかね
してもらった方が絶対いいと思いますね
実際のプロジェクトに入れれば
そこでレビューしてもらえたりとかがあるので
もう一気にスキル伸びると思うんですけど
まだ自分一人で勉強してますみたいな時は
今自分がその状況に置かれたとしたら
おそらく一つある程度のものを作った後に
お金払って現役の人にレビューしてもらいます
なるほど
レビューしてくださいっていうので依頼して
メンターさんとか探して
え じゃあ私がお金払ったら
ジャケさん見てくれるんですか
まあまあお金なしでも多少見ますよ
わかります じゃあそのごっちゃごちゃになったのを
そのうちお金払って見ていただければ助かります
他にもですねリアクトじゃなくても最近なんかスベルト
スベルト
はい 新しいフレームワークが出てきてると思うんですけど
この辺もなんか海外で人気だなーっていうのが出てきたら
ちょこちょこチェックされてるんです
あ そうですね
なんか社内で情報交換したりとか
毎月発表会みたいなのを社内でしてるんですけど
そこでなんとなくこんな感じかみたいな
これで目をつけておきつつ
まあ動向を見ておく感じはあります
そうなんですね
あの今リアクト世界的にもすごく人気だけど
それがいつまで続くかって
結構わからなかったりするじゃないですか
その辺不安はないです
まあリアクトよく言われてるの
まあ昔言われてたのは
ビューからリアクトやると難しいけど
リアクトからビューをやると
イージーに習得できるっていうのがあったりすると思うんですけど
結構リアクトが今もやろうとしてることが
なんですかねフロントエンドを作る上では
大事な考え方とかっていうのが全部入ってたりはするので
そこから新しいこうスベルトだったり
ソリッドだったりとかっていうのを勉強したとしても
リアクトで言うこんな感じかみたいな
習得なんか理解の仕方が結構できるところがあるので
リアクトが仮にこう
伝れて別のものが出てきたとしても
リアクトでつけた知識っていうのは
かなり応用が効くと思っています
なるほどなるほど
なんか私もあの最初リアクトを勉強しようってなるまでに
決心がつかなかったのが
18:00
新しい技術学んでもこれいつまで続くかなっていう
不安もあったりしたんですけど
そうじゃなくて一つ何かこうちゃんと
根本的なところから理解してれば
応用も効きやすいので
無駄にはならないよということですかね
そうですね
じゃあ私も安心して
リアクトを勉強していって大丈夫ですかね
そうです数年は安泰ですね
本当ですか
よかったです
まあ私がしたいことで言うと
アプリを作りたいというよりは
SSGと呼ばれてるウェブサイトを
ちょっと高速で表示したいなというのがあって
既存のCMSではなくて
スタティックサイトとして
ウェブサイトを作っていきたいというのがあって
その中の選択肢でNext.jsを使いたい
となるとリアクトが必要
っていう感じで
逆算していくとリアクトにたどり着いて
今やってる感じなんですが
その辺もですね
結局Nextを使おうと思ったらリアクトが必要
リアクトを使おうと思ったら
JavaScriptが必要とか
すごく果てしない旅になっていて
大変ですよね
大変なんですよ
大変なんですけど
まあ目標があるので
今一生頑張っているんですが
ある程度できるようになったら
何を目標にすればいいとかあります?
目標
例えばリアクト最初勉強してて
わからないことたくさんあるんですが
やってたらできるようになった
わかるようになった
これ作ろう
できたってなって
いろいろできることが増えていくと
次にじゃあ何をやろうっていう
目標を探す段階にも
なってくるんじゃないかなと思うんですね
そうなってきた場合
どういう目標の設定があるんですかね
やっぱり勉強だけだと
どうしてもモチベーション続かないと思うので
普通の人は
やっぱり誰かに使ってもらうものを作るっていうのを
目標にして
その過程で新しいリアクトの文法だったり
ネクストの機能とかを試してみたりとか
っていうのを並行してやるのが
一番いいかなと思いますね
なるほどなるほど
そうです
自分のためだけに最初は勉強するのもいいけど
最終的には誰かに提供するのが目標になると
そこで出てくる
そうですよね
楽しみながら
みんなが使ってもらうっていうことを
考えながらやるといいかなっていう感じですかね
そうですね
それがものづくりの醍醐味だと思うので
うんうんうんうん
新しい技術が出てきても
めんどくさがらずに
楽しみながらっていう感じですね
はい
ジャキーさん2回にわたり
ありがとうございました
最後にお知らせなどあればお願いします
はい
そうですね
ゆうでみ
もしリアクトとか興味ある方は
ゆうでみ見ていただければ
多分リアクトって検索すると
一番上に黄色いのとか青いのとか出てくると思うので
見ていただきつつ
最近リアクトの18が出たんですけど
そのリアクトの18の機能を解説するっていう
ゆうでみも今まさに作成中なので
21:00
おそらく今後数ヶ月
1、2ヶ月以内には出せるかなと思うので
ツイッターとかで
ジャケーとかで調べていただけると
出ると思うので
ご覧でフォローして
ちょっと動向を見ておいていただければと思います
あとは犬猫
もし好きな方いれば
10円犬猫募金で調べていただいて
皆さんの1日10円を
ばんちゃん猫ちゃんのために使っていただければと思います
はい
わかりました
ありがとうございました
リアクトに限らず
このウェブ制作の業界は
本当に毎日毎日更新されているようなものなので
勉強するのも大変かなと思うんですが
新しい技術更新されたタイミングを見計らってですね
勉強を続けて
ただ勉強するだけじゃなくて
最終的には誰かに使ってもらうっていうのを
目標にしていくと
勉強にもなるというふうなお話でした
私も今リアクトを使って
いろんなサービスを作っているところなので
勉強するだけじゃなくて
最終的には誰かの手に届くというところを目標に
頑張っていこうと思います
さてこの番組では
感想や質問リクエストなどお待ちしております
番組詳細欄にあるリンクより
お気軽にご投稿ください
ツイッターでは
カタカナでハッシュタグ
ウェブカフェをつけてツイートしてください
そしてアップルポッドキャストや
スポッティファイのポッドキャストでは
レビューもできますので
こちらにも感想を書いてもらえると嬉しいです
ここで私がメンターをしている
テックアカデミーについてのご紹介です
テックアカデミーは
ウェブデザインやプログラミングを
オンラインで学べるスクールです
現役エンジニアや現役デザイナーから
マンツーマンで学ぶことができます
学習した後に実案系に挑戦できる
テックアカデミーワークスもあるので
ぜひテックアカデミーと検索して
チェックしてみてください
またお会いしましょう
Webクリエイターボックスマナでした
