今までネットでさまざまな記事を読んでAtomic Designについて何となく分かった人は多いと思います。そして原子や分子といった概念を理解すること自体もそんなに難しい事ではないと思います。ですので細かい知識はここでは割愛させていただきます。以下の記事を参考にしてください。 「アトミックデザイン」ってなんだろう 理解しておきたいコンポーネント指向 ただ、初心者にとってはその知識がいつどのように役立つかがいまいち掴めない事や、私みたいにデザインをすっ飛ばしていきなりコードを書き始めてしまう人は、コンポーネントなどの概念も掴めないまま何度も同じ作業（コード）を繰り返してしまったりします。 初心者が陥りがちな問題点 ここでは初心者の超代表格として私を例にして全てお話をさせていただきますが、最初の頃はコンポーネントとういう概念を理解できていない為に同じパーツをどのページにも何度も繰り返して作成しようとします。これは初心者あるあるですね。そこで「コンポーネント化」や「Atomic Designとは」などと検索し分かった気になります。 しかし、いざエディタ上に戻ってみるとどこをどうコンポーネント化して良いか分からなくなります。そして泣きます。 原因 これらの原因として以下の事が考えられます。 きちんとデザインを作っていない為、全てが見切り発車でアプリの全体像が見えていない。 コンポーネント化できそうなパーツをあらかじめ把握できていない。 いきなりエディタ上での作業は、他にも考えなければならない余計な要素（関数やオブジェクト、引数など）が多すぎてデザインに集中できず自力でコンポーネント化できない。 解決策 これらを解決する為に、デザインツールを使ってまずは全体のデザインをしっかりと作成することにしました。デザインツールはAdobeXdやFigma、その他何でも良いと思います。 今回私はなんとなくFigmaを使用しました。理由はありません。 プログラミング初学者がデザインツールを使用するメリットとして上記した問題点を解決することができます。 まず見切り発車だったデザインを、便利なツールを使って綺麗に最後まで仕上げ全体像を把握する事ができます。これだけでもとても大きな違いです。 いくつもページを作っているうちに、同じような部品を繰り返し書きたくない事に気づきます。一番分かりやすのはWebアプリのヘッダーの部分です。どのページにもだいたい使う事になるでしょう。そこでコンポーネント化を体験します。同じような事をボタンだったり他のことでも出来ないかと考えながらデザインを作っていきます。 最も大きなメリットとしては、デザインツール上で行う事でエラーなどの実際のアプリの挙動といった他の要素を気にしなくていいことです。とりあえず目に見える範囲でコンポーネント化出来そうな部分はやっちゃえって感じで良いと思います。 Figmaを使用していると、グループ化という機能があります。グループ化とはアトミックデザインを意識した考え方で、どこまでの範囲をひとまとまりにすると便利になるかを考えた上でグループ化します。正解はありません。最初はパーツを揃えて、必要な時が来たらグループ化します。どこら辺でグループ化すれば良いかは使っているうちにだんだん分かってきます。必要であればコンポーネント化もしてください。 注意しなければならないのは、グループ化＝コンポーネント化ではありません。（似た部分はありますが説明はここでは割愛。） 苦労した事 私のようにデザインツールの使い方も全く分からないところからのスタートの人は、まずその使い方を調べて新しい事を覚える為の時間を別で作らないといけない事は事実です。更には、きちんとしたデザイン設計は意外と時間がかかってしまう為、とても遠回りしているように感じ心配になる事がありました。しかし一旦最後まで上記してきた事を意識しながらデザインを完成させると、アトミックデザインとコンポーネントについての理解がとても上がったように感じる事ができました。 まとめ プログラミングをしていると関数などのデザイン以外もコンポーネント化できますが、デザインと違って目に見えるものではない為、最初は概念を掴みにくい部分だと思います。ですので、初心者こそデザインツールを使ってしっかりとAtomic Designを意識しながら、 使いまわせる部分はコンポーネント化する事 目に見える部分から最初に学ぶ事 が、その後の関数コンポーネントなどを理解しやすくしてくれると思います。 今回はReactなどのSPAを普段学習している人間からの観点となります。他の言語のことは分かりませんので何か当てはまらない事があったらすみません。 記事に間違いがあれば、是非ご指摘とアドバイスも宜しくお願い致します。 この記事が、少しでも同じ苦労を抱えている初学者のお役に立てれば嬉しいです。

はじめに React を学習していくにあたり、これからの成果物を掲載していくポートフォリオサイトを作成しました。Atomic Design の考え方を参考に、コンポーネントを意識しながらのサイト作成は、React の技術だけでなく、サイト設計の考え方、html、css の書き方についても改めて気づくことの多い経験となりました。 デザイン 今回は AdobeXD を利用してデザインを作成しました。 デザインをする機会はめったにないので、まずはショートカットキーを中心に操作方法から学びます。操作方法は Udemy の下記講座を参考に基本的な使い方を学習しました。 デザインのイメージについてはnicepageというテンプレートサイトからイメージにあうデザインを検索し、最終的に下記テンプレートを参考にさせていただきました。 上記デザインを参考にしながら試行錯誤を 1-2 日繰り返して出来上がったデザインがこちら。 色々と発想を切り替えようとはしましたが、デザイン時にコンポーネントを意識したり、コーディングの再現性を考えてしまうとなかなか思い切ったデザインにするのは難しいと感じました。。。早速今後の大きな課題です。 Atomic Design とコンポーネント設計 デザイナーである Brad Frost 氏の UI 設計に基づいたデザインシステムのこと。デザインパーツを 5 つの分類に分けて構造構築していくということのようです。この形が Atomic Design であるという正解を見出すことは難しいようですが、Atomic Design の思想を参考に、コンポーネント設計していこうというのが今回の目的です。 Atoms（原子）・・・ボタン、アイコン、インプットエリアなどの要素の最小単位。 Molecules（分子）・・・Atoms の集合体、アイコン付きのボタンや検索ボックスなど。 Organisms（有機体）・・・Atoms、Molecules の集合体。ヘッダーや検索エリアなど。 Templates（テンプレート）・・・Organisms の集合体。ページレイアウトなど。 Pages（ページ）・・・表示するページそのもの。 作成したデザインを Atomic Design を想定したコンポーネントに分割していきます。今回は 1 ページものということもあり最終的には Template は作成しませんでした。 Storybook をちょいかみしながら、なんとなくのコンポーネント駆動開発 コーディングにあたっては、一度使ってみたかった Storybook を利用して、コンポーネント駆動開発的なものに挑戦しました。 コンポーネントを考えてサイト制作をすることで、表示とロジック部分の分離や、パーツの流用、更新など保守に強いサービスを作っていくことができます。チーム開発でのイメージがありましたが、今回体験してみて個人開発でも当たり前のように必要な考え方なのだと知ることができました。 使用方法が全く未知数だったので、公式のチュートリアルと下記動画で触りを学習してから構築を行いました。v5 と v6 で大きく変わっていることもあり、ネットの情報も注意しながら取捨選択していきます。 途中何度も挫けそうになりながら毎日少しずつ少しずつコンポーネントを作成していきます。 部品はなんとなく出来上がっていきますが全体がどうなるかが未知数のまま進むので不安が募ります。。 その分、最後に一つの Pages に Organisms たちを設置、突然デザインのページが出来上がったときにはちょっとした感動を覚えました。 今回各コンポーネントは CSS modules を利用して設計しましたが、ロジックによって props を渡して style を変更したい時など、クラス名を当てたい時に不便さを感じました。CSSS modules だと通常のhtmlコーディングと同じような思想で書くことができるので書きやすくはありますが、今回のようにコンポーネントを小さく分けていく場合は styled-components が使いやすそうだと感じました。次の開発では styled-components または emotion を利用して試してみようと思います。 ロジックの組み込み 今回のロジックを組んでいくにあたって、あえて props drilling を経験してみるという謎のテーマで進めていきます。 React を学び始めたのが最近ということもあり、学習当初から Context や Redux、その他状態管理の情報が豊富にあるので props をバトンし渡していくということの理解がいまいち足りていないと感じていたからです。もちろん、そのおかげでこの先もたくさん苦労することとなりましたが。。 モダール部分はライブラリは使わずに、CSS と Hooks を利用して設置、CONTACT 部分は React Hook Form を使って実装を行いました。 Amplify との連携 サイトを Amplify にデプロイするにあたって、またここで新たに欲が出てきます。 PORTFOLIO 一覧部分は、制作当初は json ファイルから出力をしていたのですが、GraphQL を試してくなり、最終的に AppSync を利用して DynamoDB のデータを出力する形に。 CONTACT フォームもダミーで済ませようとしたところから、API Gateway、Lambda を利用して、SendGrid から送信と 1 日、また 1 日と、3 歩進んで 2 歩下がる日々が続きました。。。 今回初めて Amplify を使いましたが、裏で何が動いているかわからず、問題が起きても解決方法がなかなか見えない、何がわからないかわからない事態が 2 日程度続いたので、ポートフォリオサイト作成の中、この部分が一番苦労したところかもしれません。 リリース デザイン着手から 2 週間程度かかりましたが、なんとか世に公開することができそうです。 内容がまだ何もないので、これからは掲載していく作品数を増やすべくさらなるステップアップを目指します！ さいごに デザインからデプロイまでを経験することで、はまりどころたくさんあり何度も遭難しかけましたが、ひたすら調べる、試すの繰り返しでなんとかまとめきることができました。自分にとってこの 2 週間という時間以上にとても大きな経験を積むことができたと感じています。今まではインプット中心で学習を続けてきましたが、こういったアウトプットできるものを作ることで大きな一歩を踏み出すことができました。 関連記事 参考サイト Design CSS Modal Intersection Observer Form Storybook Amplify SendGrid

コンポーネントのDOMにセットしたrefをhooks内で使用する場合 hooks内でrefを作成してそれをreturnしてあげる 利用側はhooksから受けたrefをセットしてあげればOK メリット 利用側が毎回refを生成しないで済む

自分用 REACT_APP_FIREBASE_APIKEY="APIKEY" REACT_APP_FIREBASE_DOMAIN="ドメイン名.firebaseapp.com" REACT_APP_FIREBASE_DATABASE="https://ドメイン名.firebaseio.com" REACT_APP_FIREBASE_PROJECT_ID="PROJECT_ID" REACT_APP_FIREBASE_STORAGE_BUCKET="STORAGE_BUCKET" REACT_APP_FIREBASE_SENDER_ID="SENDER_ID" REACT_APP_FIREBASE_APP_ID="APP_ID"

① 最新のFirebaseのコンソールでは、databaseURLが自動生成されないので代わりに下記のdatabseURLを使用。 REACT_APP_FIREBASE_APIKEY="APIKEY" REACT_APP_FIREBASE_DOMAIN="DOMAIN" REACT_APP_FIREBASE_DATABASE="https://PROJECT_ID.firebaseio.com" REACT_APP_FIREBASE_PROJECT_ID="PROJECT_ID" REACT_APP_FIREBASE_STORAGE_BUCKET="STORAGE_BUCKET" REACT_APP_FIREBASE_SENDER_ID="SENDER_ID" REACT_APP_FIREBASE_APP_ID="APP_ID" ②.envファイルで定義した環境変数を割り当てる const firebaseConfig = { apiKey: process.env.REACT_APP_FIREBASE_APIKEY, authDomain: process.env.REACT_APP_FIREBASE_DOMAIN, databaseURL: process.env.REACT_APP_FIREBASE_DATABASE, projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID, storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET, mffessagingSenderId: process.env.REACT_APP_FIREBASE_SENDER_ID, appId: process.env.REACT_APP_FIREBASE_APP_ID, }; firebase.initializeApp(firebaseConfig);

React × Rails SPAの作成にあたりformオブジェクトを用いた実装をする必要があった。その際のレスポンスの返し方についてまとめておきます。 HTMLを返すだけなら苦労しない。 普通formオブジェクトでは以下の流れでデータを扱う コントローラーでストロングパラメータを用いてformから送信された値を受け取る formオブジェクトに定義したattr_accesorでストロングパラメータで許可したキーを受け取る saveメソッドなり保存処理を自前で実装。ActiveRecordのメソッドでDBに値を保存 コントローラーでredirectなどを用いてページをレンダリング 3で保存処理をした後はformオブジェクトの役目は終わる。 json形式のレスポンスをどう返すか？ ところがSPAでフロントエンドから非同期でAPIを動かす場合はjson形式でレスポンスを返さないといけない。 そこで以下のようにハッシュ形式で保存した複数のモデルをsaveメソッドの戻り値とする。 def save hoge = Hoge.new(some_column: some_value) fuga = Fuga.new(some_column: some_value) # 別々にレスポンスとして扱うためにハッシュ形式を採用(配列でもいけるが、なんのデータなのかわかりやすくしたい) hash = {} hash[:hoge] = hoge hash[:fuga] = fuga return hash #生成したハッシュをコントローラーに返し、レスポンスにする end こうするとコントローラーでhashから値を取り出す形でjson形式のレスポンスを定義できる。 def create @test = Test.new(test_params) if @output.valid? test_save_result = @test.save # ステータスは手動で設定する。リソース保存時のステータスは201 render status: 201, json: { hoge: test_save_result[:hoge], fuga: test_save_result[:fuga] } else render status: 422, json: { errors: @test.errors.full_messages } end end

React Native + Expo CLI開発 以前の投稿でReactNative+Expoの開発環境を整えたのでAPIデータを取り扱えるようにする React Native + Expo CLI 環境構築 Windows編 https://qiita.com/tworks_front/items/4d3c22a758cc457388a0 Axiosとは そもそもAxiosとはjavascriptやnode.jsで使用可能で、Promiseを返すライブラリ(プロトコル：HTTP)です。 ReactのプロジェクトでRestAPIを使用する際に使っていて慣れ親しんでいるので今回Expoでも使用する。 Axoisのインストール npmでインストールするだけで使用可能 npm i -g axios News API News APIは世界中のニュースを扱っていて、言語や条件で必要な情報に絞込みAPIで取得できる。 個人利用では無料のため、Expo + Axiosでニュースの表示まで実装する。 NewsAPIサイト https://newsapi.org/ サイトにアクセスしGet API KeyよりAPIのKeyを取得する。 初回は登録必要 APIのリクエストサンプルがサイトにアクセスすると載っている。 今回は日本語のヘッドラインニュースを取得する。 リクエストサンプル https://newsapi.org/v2/top-headlines?country=us&category=business&apiKey=xxxxxx countryを日本に変更しcategoryは絞らないでリクエストを行う。 実装 urlはひとまず以下のようにして取得する(取得確認して定数化する) const url = "https://newsapi.org/v2/top-headlines?country=jp&apiKey=" + (newsAPIで発行されたAPIKey) axiosをimportしあとは axios.get(リクエストURL)で取得可能。 非同期処理で、async awaitを用いることが可能。 import axios from 'axios'; useEffect(() => { getArticles(); }, []); const getArticles = async () => { try { const response = await axios.get(url); 　　　　　　 console.log("response:",response) } catch (error) { } } developlerToolsで出力したログを確認するとdataオブジェクト内にarticlesとしてニュースデータが入っている。totalResults:30など件数表示に必要なデータなども返っている。 あとは以下のようにデータを回して、Listコンポーネント(画像とタイトルを表示するコンポーネントを別途作成)でニュース画像、タイトル、本文など必要なものを表示する。 return ( <View > {_.map(articles, (value: any) => { return <List articles={value}/> })} </View> ); android端末で以下のような表示がされる まとめ 今回はAxiosを使えることの確認のためGetの実装を行った。 Axiosのインストールと実装まで迷う箇所がなく、シンプルに実装可能。 thenを用いて後続処理を行ったり、try catchの例外処理など実装すれば、expoでも使用可能であることが確認できた。