インタラクティブなUIデザイン・開発に対する苦手意識克服への挑戦

昔からフロントエンド開発に苦手意識を持っている。理由は色々あるが、デザインセンスがないのとJavaScriptを普段使わないのが大きな理由かも知れない。
実は１年前のこの日、留学中に一度だけフロントエンド開発に挑戦した事があるが、チームメンバーに「絶望的にセンスがない」と言われてからずっとフロントエンド周りを避けてきた。１年経った今、「恐怖心を克服しなきゃ」という気持ちが強まったので、１から勉強する事にした。この記事はインタラクティブなUIデザイン・開発（フロントエンド）が苦手な私が克服のために実践している事に関する紹介です。

初めまして、Kenです。この記事は Money Forward Kyoto Advent Calendar 2020の24日目の記事です。

現状分析

「なんで苦手なんだろう？　」「何が足りないのだろう？」と一度ステップバックして自分自身を考察した時に

・Javascriptが書けない
・フレームワークの使い方を正しく理解していなかった
・デザインセンスがない

という結論に辿り着きました。

そこで、次の事を実践しました。

JavaScript

下記の書籍を購読してみた。ミーハーなので、30,000部突破のベストセラーって書いてたら大丈夫なはずというノリです。読んでみた感想として、もう少し易しめの本でも良かったかも（笑）ですね。

改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで

Tools

フレームワークとして、Vue.js・React・Anguler等があります。厳密に言うとReactはライブラリです。私はweb上で色々な解説動画やチュートリアル、技術ブログがあるReactを選び公式サイトからチュートリアルを黙々と、それはもう本当に無言でモクモクとこなしました。

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

Design

昔から美術の成績は合格点ギリギリなほどセンスがないです。そこで、センスのいい友達に「どうやったらデザインとか上手くなるかな？」と冗談で聞いてみたら「有名サイトを模倣すればいいじゃん」と言わました。言われて見れば、Web上には似たデザインのSPA（Single Page Application）が溢れているし、守破離という考えがあるように、武道や芸術も最初は模倣する事から始めるのが普通のようです。だから、勉強という名目で有名サイトを模倣する事にしました。

実践 - Dev the UI - 

この記事を投稿するのは12月24日です。そう、日本では、リア充達が幸せな息吹を街中にもたらすと同時に一部の方々が必死にマッチングアプリをスワイプしている日でもあります。私もいつかTechnologyで幸せを提供したい！そんな思いで、Tinderを模倣しようと思います(笑)。Tinderはあまりにも有名すぎるアプリであるため、世界中の様々なdeveloperがTinderを模倣するための技術Blogや動画を公開しており、躓いた時にGoogle先生に頼めば突破口が開かれるというTinderを題材にする素晴らしいメリットがあります。

成果 - Progress and Results -

写真では分かりづらいのですが、スワイプ機能が組み込まれています。

JavaScriptで開発した事がある方にお馴染みのnpmにreact-tinder-cardと呼ばれるpackageがあります。こちらを採択しております。

react-tinder-card

また、チャット機能も組み込んでみました。ちゃんと入力ができてブラウザ上で保存されている事が確認できた時は感動しました(笑)。

所感と抱負

UI模倣プロジェクトに取り組んでみて、ちょっとはフロントエンド開発が楽しいと感じる様になりました。また今回はUIの部分に着目して開発して行ったので、サーバーサイドをMicro Serviceで開発して連結させる等はしなかったし(一応Firebase使って一部の画像データを読み込ませてみた)、24日公開に間に合わせるために一部ハードコーディングしちゃいましたが、余裕がある時にこれらの技術課題をクリアしていきたい思いです。

UI/UX、少しできますよと言えるレベルまではまだまだ到達していないのですが、今後は、模倣する既存のプロダクトの数をこなす事で、デザインパターンを学習して、成長していきたいです。デザインパターンといえば、次の書籍が面白そうです。1998年に出版され、未だ愛され続けられている名著みたいです。

ノンデザイナーズ・デザインブック [第4版]

次は何を模倣しようかな....、 Code書くのってやっぱ楽しいな

ちょっと早いですが皆様、🎄Merry Christmas🎄

-----------------------------------------------------------------------
明日は Sugiura さんの 記事の予定です！お楽しみに！
今年も本家アドベントカレンダーもやっています！
https://adventar.org/calendars/5401
京都アドベントカレンダーはこちらです。
https://adventar.org/calendars/5425
京都開発拠点では引き続き積極的に採用を行っております。ご応募お待ちしております！
[マネーフォワード京都開発拠点](https://kyoto.moneyforward.com/)
[中途採用 \| 株式会社マネーフォワード京都開発拠点](https://kyoto.moneyforward.com/mid_career/)
[インターン \| 株式会社マネーフォワード京都開発拠点](https://kyoto.moneyforward.com/intern/)