この記事は、フィードフォースグループAdvent Calendar2022の10日目です。
昨日は杉野眞珠さんの「自分の好きを見つけた話。」でした。「好き」や「夢中」に出会えたことそのものが人生における財産ではないかと思います。チーム愛も感じる素敵な記事でした！

みなさん、こんにちは。
10日目の今日は私、新潟市在住のソーシャルPLUSデザイナーおやなぎが社内の「技術勉強会」で発表した内容をお話します。
「技術勉強会」はフィードフォースとソーシャルPLUSのエンジニア・デザイナーが毎週行っている勉強会で、回数は2022年12月時点で500回を超えており約10年間つづく勉強会です。スゴいっ！
詳しくは下記のnote記事をご覧ください！

運良く！？キリの良い500回目に発表した「デザインチームでReactを学んだ話」が今日のお話の内容になります。
ところでキリ番って何か貰えたりしませんかね〜？人事のinowayさん。
えっ、、2008年もののspacer.gifを私に？・・・結構です。

なぜデザイナーが React を学ぶの？

デザイナーがReact（プログラミング）を学ぶ理由は大きく分けて2つあります。1つめは「React（プログラミング）を学ぶことで開発チームの一員としてエンジニアさんとの連携を深めたい」、2つめは「React（プログラミング）を学ばないとUIを扱うデザイナーとして生き残れない危機感」です。

まずは1つめの「React（プログラミング）を学ぶことで開発チームの一員としてエンジニアさんとの連携を深めたい」。ソーシャルPLUSではデザイナーとエンジニアが同じ開発チームに所属し日々の業務を行っています。
デザイナーとしては「どのようなユーザーインターフェース（以降UI）にすればお客様が迷わず操作していただけるだろうか？」とお客様の思考に近づきデザインを行っているのですが、共に働く社内メンバーに対しても似た感覚があり、可能な限りエンジニアの思考に近づいてデザイン上・仕組み上のベストプラクティスを目指したい。と考えています。
実現不可能な「絵に描いた餅」をデザインしても誰も幸せになりません。
React（プログラミング）の知識や技術を身につけエンジニアの思考に近づくことで、UIのクオリティの向上・プロトタイプの精度を上げデザイナーとしての付加価値を高めていく。これが1つめの理由です。

2つめの理由は「React（プログラミング）を学ばないとUIを扱うデザイナーとして生き残れない危機感」。
いや〜2022年びっくりしましたね AdobeのFigma買収。もうすぐ40歳の私は思い出しました 2005年 AdobeのMacromedia買収を。でも思い出したのは私だけじゃないようで。買収発表後「Fireworks」がTwitterトレンド入り。
Twitterに綺麗に打ち上がりましたね。Fireworksが。。
はい。本題戻りますー。
Figma は非常に優れたデザインツールです。ソーシャルPLUSでもFigmaを使い業務を行っています。
そんなFigmaが2022年の5月にリリースした機能「Component Properties」。Component内の表示の制御（Boolean property）や、Component内のテキストをプロパティとして定義（Text property）、Component内のアイコン等のInstanceを定義・変更（Instance swap property）する機能なのですが、2022年のFigmaはエンジニアライクな機能のリリースが目立った実感があります。
従来の「Variant properties」との使い分けなど、エンジニアの思考とスキルを最低限理解した上でComponentを設計する技量がUIを扱うデザイナーにも求められてきています。エンジニアの記述を先読みしComponentを設計しないと、エンジニアとの連携が悪くなるばかりかデザイナー起因で記述が汚れる原因にもなりかねない。
このデザイナーとしての危機感が2つ目の理由です。

あとは、弁護士ドットコムさんのブログ「CREATOR'S BLOG」内の記事「デザインチーム内でJavaScript勉強会を開催した話」も今回の実習実施の後押しになったことは間違いありません。
デザインチームが行おうとしていることは絶対間違ってない。そう感じさせてくれる素晴らしい記事・取り組みでした。

何を学んだの？

実習の目標として以下の3つを定め、目標を元に計画を作成しました。

1. 何が書いてあるのか理解できる【連携強化】

2. プロトタイプが作れるようになる【効率強化】

3. 簡易な修正ができるようになる【負荷軽減】

私一人で最適な計画が立てられるはずもなく。。
こうした実習などの取り組みに対し、応援してくれる環境や文化がソーシャルPLUS・フィードフォースにはあります。
今回の計画にあたりソーシャルPLUSのCTOやフロントエンドエンジニア、共に実習を行うデザイナーなど多くの方々に相談やサポートをしていただきながら計画を具体化していきました。

具体化した計画

今回の実習で「開発の開始から終了まで構築・開発できるスキル」が得られる内容というわけではありませんが、まずはデザイナーとして「着実であり大事な一歩」が踏める内容になっているのではないかと思っています。

以上の計画を元に、デザインチームで3ヶ月間の実習を行いました。

実習を通して何を知った？何を得た？

そもそも私自身、JavaScriptの知識が無いことに気づけた

計画を具体化していく際にCTOから書籍を薦めていただいたのですが、この書籍がReactの実習を作成するにあたり最適で必読と感じる書籍でした。

書籍の表紙に「JavaScript」への理解不足が苦戦の理由だった！と書いてある言葉の通りで、最初の一歩目はJavaScriptの学習だと気づけました。私自身JavaScriptとjQueryの境界も曖昧なレベルで、この本を計画時に読み進め知識をアップデートでき、計画内容に反映することができました。

フロントエンドエンジニア（現スクラムマスター）のzomyさんから薦めていただいた電子書籍もとても参考になり面白かったです。

学習計画時はどの領域をどの位の深さで学ぶべきか見えない部分が多かったのですが、この書籍のお陰でbundleやbabelなど現段階では「こういうものと知っておけばいい」など実習の割り切りをすることができました。
実習時この部分は手を動かして理解を深めることはせず、YouTube視聴を通して理解を深めました。
また、zomyさんには3ヶ月目の開発環境構築時に多大なサポートをしていただきました。ありがとうございました。

公式ドキュメントが（本当に）わかりやすすぎた

Reactの公式ドキュメントを知ったきっかけは、鹿野壮さんのTweet。

これ、本当にわかりやすすぎです。実際に記述を試すブロックがあったり、ジャンルごとに深堀りできたり。これからReactを触れていく方にとって必読なドキュメントではないかと思っています。

実習中、悪魔のささやきがReactの理解力を上げた

実習当初、JavaScriptの拡張構文「JSX」の独特な記述ルールにかなり苦戦しました。HTMLと似てるような似てないような記述で少し間違えるとエラーに（泣）。。
先程ご紹介したReact公式ドキュメント内で「HTML → JSX」に変換してくれるコンバーターの存在を知り一気にJSXの理解力が深まりました。（今ではXHTMLの親戚みたいなイメージを持っています）

ここで、悪魔のささやきが、、

＜悪魔のささやき＞HeaderからFooterまでコーディングしたHTMLをJSXに変換してそのまま表示すれば良いじゃん！

・・・たしかに。。いやいや、さすがにそれは良くない方法でしょう！
と思いつつ、なぜ悪魔のささやきが良くない方法なのか考えました。

そうか！HeaderからFooterまで全部まとめて出力すると Reactの「仮想DOMによる高速レンダリング」が意味をなさなくなるから、Reactを使う必要がそもそも無くなるのか。じゃあコンポーネント（部品）を小さく分解して記述しなきゃいけないよね！
悪魔のささやきのお陰でReactの理解が深まりました。

ナイス悪魔！

デザインチームの業務に変化が現れた

日々のデザイン業務でShopifyのデザインシステム「Polaris」に触れる機会が多いのですが、実習進行中、デザインツール「Figma」ではなくPolaris上にリンクされた「CodeSandBox」内でComponentの記述を確認しながら、デザインや実装についてデザインチーム内で話し合う機会が増えました。実習目標で掲げた3項目のうちの2つ、何が書いてあるのか理解できる【連携強化】、プロトタイプが作れるようになる【効率強化】が少しずつですが成果として表れていると感じています。

Reactは初学者にも門が開かれたライブラリだと感じた

実習前のReactの印象は「プログラミングスキルや開発知識を高いレベルでマスターしていないと触れてさえいけないライブラリ」だと感じていましたが実習後、その印象は大きく変わりました。現在の印象は「広く門が開かれた誰でも（初学者）入れるライブラリ。ただある程度先は装備（技術）が無いと進むのが厳しいよ。」です。

実習の制作物を作成したものの。。

やりたいことを広げると、次なる壁が必ず現れますよね。

Reactの実習成果と冒頭でお話した「技術勉強会」の発表を兼ねて、「SNS広告の表示イメージを確認する簡易ビューワ」を実習の制作物として作成しました。
デザイナー自身、Figma上やPhotoshop上で作ったバナーの良し悪しがデザインツール上では客観的に判断できない時があります。今回の実習の制作物はSNS上で実際に表示されるイメージでバナーや広告文を確認できるWebアプリになります。
表示上はイメージ通りなのですが。。。

スタートに戻り、今ココ感。

実習ではコンポーネント（部品）を小さく分解して記述することを学んだのですが、制作物を作ってみると実習のようにスムーズにいかない！（泣）
静的なパーツを分解するのは理解できたのですが、動的なパーツをどのように分解すべきかわからず完全に頓挫。結果、間に合せでごちゃ混ぜな記述のまま「技術勉強会」の発表を迎え強い挫折感。
やりたいことを広げると次なる壁が必ず待ち受けてますよね。
「スタートに戻る」←正しく今ココです。
また1からの気持ちで学びを広げていきたいと思います。

終わりに

私、エリック・クラプトンが大好きなんですよねー。
ギターの音色から感情がダイレクトに伝わる感じと、簡単そうに気持ちよく弾くギタープレイ。実際に私が弾いてみると早すぎて難しすぎて聞けたもんじゃありません。。
その領域に触れるからこそ、その技術の凄さを知り、更に尊敬できる。私はそう思っています。
今回のReact実習も同様で、エンジニア領域に触れることで日々一緒に働く開発メンバーを改めて尊敬する良い機会になったことは間違いありません。学びを広げエンジニアの思考に近づくことで、これからもお客様にとって良いUIをお届けしたいと考えています。

さて、フィードフォースグループAdvent Calendar2022 明日11日目は、ソーシャルPLUSの人事 inoway さん！

「ソーシャルPLUS社に入社してからやった仕事の振り返り」をお話するのことです！楽しみですね！

inowayさんに応援の言葉と2008年もののspacer.gifを贈りまーす！

ではまた。