デザイナーがエンジニアリングを覚えるために、エンジニアと頑張った3つのこと

はじめに

こちらはseyaさんが立ち上げた、エンジニアリングに興味があるデザイナー、デザインに興味があるエンジニアのカレンダー19日目の記事です。
素敵なアドベントカレンダーに参加させていただき、ありがとうございました

自己紹介

事業会社でUIデザイナーとして働いています、@naomunaomuです。
自社のサービス開発、グロースハック、アニメーション、ユーザーインタビュー等を行っています。

会社のアドベントカレンダーではReactとLottie（After Effects)によるアニメーションを作成したので、ぜひ見てみてください
https://qiita.com/naomunaomu/items/0038f8c23fd5175f1205

これは何

エンジニアリング（主にフロントエンド）を覚えるため、今までエンジニアと行ってきたことを書いていきます。
もし周りに「デザイナーにコーディングを覚えてほしいけど、どうしたらいいんだ…」と嘆くエンジニアや、
独学に限界を感じるデザイナーにとって、こちらの記事が少しでもお役に立てれば幸いです。

細かいコード等、技術的なことは書きませんので、ご容赦ください。

事前準備（前提）として

自分は元々、エンジニアリングに興味と課題感を持っている人間でしたので、 これから紹介する３つのことを楽しんで挑戦することができました。

ですが、コーディングに興味のないデザイナーにとって、コードの勉強はひじょうにハードモードなので、
気持ちの準備ができていないと、時間をかけたわりに実にならなかったり、
つらいだけで終わってしまうこともあります…

学ぶ側のデザイナー自身が、頑張る気持ちが持てるよう、
まずはデザイナーのやる気スイッチを探し、思い切り押し込んでください！

私の場合、下記のケースをエンジニアや、他のデザイナーと話し合い、モチベーションの継続につなげました。

• エンジニアリングを覚えるメリットを伝える
• 本人の中で、課題感を醸成させたり、期待値を伝える
• 勉強会の題材を、本人が作りたいものに変更する
• エサで釣る（食べ物、評価等）

エンジニアと頑張った3つのこと

それでは本題である、エンジニアと頑張った3つのことを紹介します。

1. フロントエンド勉強会を定期的に実施

こちらは現在進行系で、8〜9月ごろからはじめ、週2ペースで開催しています。
今まで行った内容（抜粋）はこちら。

・　プログラミング（Javascript）の基礎スキルの習得
・　ReactでTODOアプリの作成
・　コンポーネントの設計
・　DBからの値の取得
・　プロダクトのリファクタリング

元々受託制作時代にHTML/CSS/jQuery/WordPressの開発経験はあったためマークアップは問題ありませんでしたが、プログラミングは必要なコードを都度参考コードを探して書くレベルで、プログラミングの基礎知識は全くありません。

そんな状態でReactを使用したフロントエンド開発に参加したために、なんとかuseStateは覚えたものの、基本的には理屈は分からんがとりあえず動いたという、非常に中途半端な状態でした。
当然理屈が分からないので少し修正しようとすると何もわかりません。お手上げです。
「自分、全然コード書けんやんけ…」と打ちひしがれました。

ということで、constとletの違いとは？関数って何？どう呼び出すの？からエンジニアにしっかり教えていただくことになりました。

ちなみに成果あった？

めちゃくちゃありました。
2ヶ月の勉強会の成果として、1週間のスプリントでの消化ポイントが1.5倍くらいになりました。
環境要因もありますが、今までの「雰囲気でガチャガチャさわっていたら動いたわ」状態から、
基礎を理解するだけでコーディングスピードが格段に早くなりました！すごい！🎉

勉強会で参考にした記事

開発フェーズになると一気に消化ポイントが減ってしまうとお悩みの、そこのあなた…
JavaScriptやReactは、下記の記事がわかりやすくておすすめですよ！
もちろんReactのチュートリアルもやってみてくださいね。

• JavaScript関連

  • JavaScriptのmap(), filter(), reduce()をちゃんと理解する。 - Qiita
  • JavaScriptで配列やオブジェクトをループする良い方法を真剣に検討してみた - Qiita

• ReactでTODOアプリの作成

  • こちらの本を参考に作成しました！JSの基本から解説してくださるので、とてもわかりやすくておすすめです！
  • 基礎から学ぶ React/React Hooks

• hooksをさっくり覚えたいよ、という方はこちらの記事が参考になります。

  • https://qiita.com/seira/items/f063e262b1d57d7e78b4

スペシャルサンクス！師匠エンジニアのアドベントカレンダー

@ttkさんが、私に教えてくださったTODOアプリについて、
パワーアップした記事を書いていたのでご紹介を。
師匠、いつもありがとうございます！
https://qiita.com/ttk/private/9a6ec736335c900f816a

ペアプロでリファクタリング

こちらも現在進行系ですが、プロダクトの既存コードをエンジニアと二人でリファクタリングしています。
リファクタリングの際には、下記にとくに気をつけています。

・命名規則の名付け方
　・名は体を表す…ひと目で役割が伝わるか

・コンポーネントの切り分け
　・きちんとロジック・ビュー等、役割ごとに別れているか
　・汎用的であるか
　・シンプルか

・hooksの使い方
　・他に似た関数を使っていれば更に共通化する等

既存プロダクトのコードリーディングをし、現行のロジック・構成を理解しながら、
共通化できる部分や、シンプルにできる部分を探していきます。

自分がドライバーとなりベースのコードを書きつつ、エンジニアの設計思想を解説してもらうことが多いですが、
慣れてきたら自分である程度進めてから、エンジニアにマージリクエストを送り、
レビューで答え合わせをしてもらうのもおススメです。

勉強会で覚えたコードを、リファクタリングで実践し、
わからなかった関数を再度勉強会で復習すると学習効率が良いと思います。

余談：ペアプロには、VSCodeのLiveShareを使うと便利！

VisualStudioとVSCodeのLiveShare機能を使ってみよう | ｗ２ソリューション株式会社 TECH Media

ハンズオンの開催

時期が前後してしまいますが、デザイナー・エンジニア向けハンズオンを積極的に開催してきました。

自分が覚えたことを誰かに説明したり、教えることでさらに理解が深まりませんか？
スキルをシェアすることで組織全体の底上げにもなりますので、覚えた内容はぜひ周りに共有してみましょう！

注意点として、デザイナーとエンジニアではコードへの慣れ具合が違いますので、一度に両者を対象にしたハンズオンを行うのはおすすめしません。
エンジニア向けの内容はデザイナーにはついてこれませんし、
逆の場合はエンジニアには物足りないため、うまくいきません。

デザイナー向けに行う場合は、なるべくnpm installやgit clone hogeなどのコマンドも打たない方がいいでしょう。

そんなときは、Githubのリポジトリをブラウザ上で開発できるGitpodがおすすめです。
参考
Iterate faster, innovate together|GitLab
Gitpodが最強過ぎる件について - Qiita

社内向けにSvelte勉強会を開催した際は、台本もすべてQiitaにまとめて事前共有しました。

【デザイナー向け】GitpodとSvelte+Windiでブログレイアウトを再現してみよう〜①基礎編〜（社内勉強会資料） - Qiita

おまけ：コードスプリント

エンジニアとの取り組みではありませんが、コーディングの特訓としてはコードスプリントも役に立ちました。
ざっくりした流れは、15分でお題をコーディングし、5分で書いたコードを解説し、10分でレビューをもらいます。
苦手なコードが明確に分かっていて、とにかく練習問題を説いて覚えるぞ！なケースでは、短期集中特訓できてGOODでした！
参考：　https://liginc.co.jp/222680

まとめ

いかがでしたでしょうか？

デザイナーはコードを書けるべきか？議論が定期的に話題になりますが、それだけデザイナーとエンジニアリングは隣り合わせで、これからも互いを越境し、溶け合っていくのだと思います。

これを読んだデザイナーの方は、ぜひエンジニアリングにチャレンジし、エンジニアの方は、迷えるデザイナーを優しく導いてあげてください。

素材

本編と関係あるようで関係ない、かわいい女の子のイラストはこちらの素材サイトからお借りました。ありがとうございました。
https://www.shigureni.com/