見出し画像

Web制作コーダーがReactに挑戦してみる!!

「ゆうたろうさん、Reactやりません??」

そんな、
「一緒にコンビニ行ってアイス食いません?」
みたいなノリの一言からこの挑戦は始まった・・・


どうもこんにちは、フリーランスコーダーのゆうたろうです!


この記事がおすすめな人

=======================
・そもそもReactってなんぞ?
・Web制作のコーダーなんだけど関係ある?
=======================
って人におすすめ!

なお、僕自身のスキル感は
・HTML/CSS/JavaScriptによる静的サイトの構築
・WordPressオリジナルテーマの作成
・Liquidを使ったShopifyによるECサイトの構築
という感じで、
The Web制作者!って感じのスキルセット


僕と同じWeb制作コーダー様向けの記事になってますので
ゴリゴリの開発エンジニアさんは温かい目で見守ってくれると嬉しいです^^
(それはこうだよ!とかあればむしろ全然言ってほしいです!)


そもそもReactって・・・?

Reactってどんな言語??って最初に思うかもですが、
React自体は言語ではなくてですね、、

「ユーザーインターフェース構築のためのJavaScriptのライブラリ」

のこと!です!!

??
らいぶらり・・???

いや、ですよね。
大丈夫。僕もそうでした。

めちゃくちゃざっくり言うと、

「色々使いまわしできる機能をいい感じにまとめてくれたもの」

というイメージで大丈夫です!
コーダーの皆さんおなじみの「jQuery」パイセンとかと同じですね


なんでReactがいいのか

具体的なメリットとしては
・Webサイトだけじゃなくてアプリも作れる
・まじで動きがサックサク
・案件多い(単価も高い)
とかいくらでも挙げられますが、、

ズバリ、
「世界で一番使われてるアチいライブラリ」
だからです!

Google Trends

上記のグラフは
・React → 青
・Angular JS → 赤
・Vue.js → 黄
が世界でどれだけ検索されているかを表しています。

もはや一目瞭然ですよね

ダブルスコアどころじゃない差がついてます😂
(※日本だけで比較するとVue.jsがもっと頑張ります。
が、やっぱりReactのほうが優勢ですね)


どうやって勉強してるのか

まず初めに手を出したのが公式のチュートリアルです

ドキュメントを読みながら
「三目並べ」を実際に作っていきます

JavaScriptの中にHTMLみたいなのが書けるんだなー
JavaScriptでそれぞれのパーツを作っていくんだなー
っていうくらいの理解度でサクサク進めちゃいます


その次に手に取ったのがUdemyという動画で学べる教材


こちらも先ほどと同様に、
・ほーん、、そういう感じかあ
・へええ、こんなこともできるのね〜
と、ひとまず動画を見ながら手を動かして勉強していました

色々と書きやすいし、
WordPress構築とかでも思っていた
「これできたら楽なのに・・!」
が結構できるイメージがあり、とっても楽しい!


まあ言うてもレベル感的には初学者も初学者。

こういうのは繰り返しやっていくのが超絶重要だから
今後も理解度を高めるために繰り返し見ていく所存です🫡


実は実際に案件やってみてます

実は現在、実際に案件対応させてもらっています
(まじありがたい)

対応範囲は「マークアップ」の部分

・APIから値を取得してここに表示させる
とか、
・このボタン押したらフォームが送信されてデータを渡せる
とか

そんなゴリゴリ開発の部分は他のエンジニアさんにお願いし、
その前段階のマークアップの部分を担当させてもらっています。


そうです。これまで一生懸命やってきた
HTML/CSSのコーディングが割とメイン。

もちろん普通のサイト制作とは書き方も違うけど、
やってることはほとんど一緒。


あ、それでいいのね。
って感じのことも正直多い。

だけど単価はいつものWordPressコーディングの1.5倍くらい・・!
(Reactの単価が高いってほんとなんや・・)



開発なんて無理だよ・・・
って思っちゃう人も多いと思うけど、

意外とそうでもないよ〜!

と、思った9月の朝でした。

今後は、学んだことや詰まった所もどんどんアウトプットしていきます!

ありがとうございました!!






この記事が気に入ったらサポートをしてみませんか?