SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

基礎からはじめるReact Native入門

UIライブラリで美しいデザインを手軽に利用する

基礎からはじめるReact Native入門 第8回


  • X ポスト
  • このエントリーをはてなブックマークに追加

 前回はスタイルでコンポーネントを装飾する方法を学びましたが、見栄えするデザインのコンポーネントを自分で作るのは大変です。今回は、サードパーティ製のコンポーネントセットとして、React Native Paperというライブラリを紹介します。React Native Paperはモバイルアプリ開発に役立つ、ヘッダーやフッター、フォームといったUIを提供しています。また、AndroidとiOSによって自動で見た目が変わる機能もあり、各プラットフォームらしい見た目を作ることもできます。品質の高いアプリを作るために欠かせない、素敵なコンポーネントの使い方を学んでいきましょう。

  • X ポスト
  • このエントリーをはてなブックマークに追加

対象読者

  • JavaScriptとWeb開発の基礎に理解がある方
  • Reactを用いたJavaScriptアプリケーション開発の未経験者

前提環境

 筆者の検証環境は以下の通りです。

  • macOS Catalina 10.15
  • Node.js 12.4.0/npm 6.9.0
  • expo-cli 3.11.7
  • expo 36.0.0(React Native 0.61)
  • React 16.9.0

美しいコンポーネントを自分で作るのは大変

 前回までに、規定となるコンポーネントの振る舞いや、それらを配置・装飾するスタイルの扱い方について学んできました。これらの知識を総動員すれば、美しい画面を組み立てることも可能です。

 ここで「十分に可能です!」と言えればよかったのですが、残念ながら、少しトーンダウンしてしまう事情があります。配置に関するスタイルは自分の力でどうにかなる部分が多いのですが、装飾についてはそうもいきません。自分の力でViewTextに十分な装飾を行うのは、労力を伴うのです。自分でUIの装飾についてデザインするのも楽しいですが、そこまでオリジナリティを必要としない場面も多いはずです。

 こういった課題を解決するためのツールとして、デザインのガイドラインを公開してくれている企業や個人のデザイナーの方々がいます。それぞれのガイドラインに沿って自身のアプリを組み立てることで、まとまりのある、美しいアプリを作り上げることができるでしょう。

Material Design

 本記事では、ガイドラインの1つとして、Material Design(マテリアルデザイン)について扱います(図1)。

図1:Material Designのデザイン仕様のページ(公式ドキュメントより引用)
図1:Material Designのデザイン仕様のページ(公式ドキュメントより引用)

 Material Designは、Google社が自社のサービスに統一的なデザインを与えるために作成した、デザインのガイドラインであり、仕様書です。

 プログラマーも読みやすいように配慮されており、「こういった場合はマージンを16pxにして、こちらの場合では72pxにする」や「こういった部品を作る際は高さを56pxにする」といった具合で、定性的な基準よりも定量的な基準を重視した仕様書となっています。

 また、用意すべきUI部品(コンポーネント)の種類や名前、どのようなカスタマイズを実施すべきかといった項目についても言及されています(図2)。

図2:Material Designのコンポーネント仕様のページ(公式ドキュメントより引用)
図2:Material Designのコンポーネント仕様のページ(公式ドキュメントより引用)

 アプリやWebサービスを作っていく中で、多くの場合、必要になるUI部品が定義されています。なかなか面白いので、興味があれば眺めてみてください。

会員登録無料すると、続きをお読みいただけます

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

次のページ
Material DesignをReactコンポーネントとして使う

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
基礎からはじめるReact Native入門連載記事一覧

もっと読む

この記事の著者

WINGSプロジェクト 中川幸哉(ナカガワユキヤ)

WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS Twitter: @yyamada(公式)、@yyamada/wings(メンバーリスト) Facebook

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

山田 祥寛(ヤマダ ヨシヒロ)

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/12087 2020/04/03 16:37

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング