【GIG勉強会Vol.23】「スマートフォンアプリ開発におけるディレクション」と「React.jsでサービスを作った話」

こんにちは！GIG社員で編集の松竹（しょうちく）です。2018年12月からジョインした、ピッチピチの新入社員です！GIGの一大勢力「華の93年組」の一員なのですが、老けているので誰も信じてくれません。

今は先輩のもとで、編集とは何たるかをイチから学んでいます。このGIGブログこそ一流Web編集者への登竜門だと信じて、全力で取り組みます！

それでは、第23回社内勉強会として行われたライトニングトークの様子をお届けします。

前半のテーマは「スマートフォンアプリ開発におけるディレクション」

最初の登壇者は、ディレクターの菅原靖之さん。

菅原 靖之（すがわら やすゆき）：ディレクター。アプリ紹介サイト運営会社に勤務したのち、2018年5月にGIGにジョイン。委託元の兼松グランクスでは、『Clipbox QR』をはじめとした新規事業の競合調査・企画・ディレクション・外注管理などに従事。

現在は業務委託元の兼松グランクス株式会社でiOSアプリの開発を行なっています。

今回はその経験を踏まえ、スマートフォンアプリ開発のディレクションを「Web制作のディレクションとどう違うのか」という視点から解説してくれました。

当日使用したスライドは以下からご覧いただけます。

まずはアプリ開発の流れ

まずはアプリ開発の一般的な流れを説明。それぞれの段階で大切なことを教えてくださいました。

1. 企画
2. 要件定義
3. デザイン
4. 開発
5. 検証
6. 申請
7. リリース

1. 企画段階で大切なこと

企画段階でディレクターがすることは、

・企画背景の理解、整理
・競合調査
・特徴の検討
・マネタイズ方法の検討
・企画書作成（できれば簡単に画面遷移図とワイヤーフレームも作る）

の5つ。

企画書を作成する際には、

・どのような目的のアプリか
・どのようなターゲットを狙うのか
・どのような機能にするのか

といった要素を細かく決定し、要件定義に落とし込むことが大切です。

2. 要件定義で大切なこと

要件定義段階ですることは、

・企画内容の要約
・機能・仕様の決定
・担当者振り分け
・開発、制作スケジュールの決定
・使用ツールの選定〜決定

の5つ。

機能や仕様、バナー広告を入れる位置などはデザインに大きく影響するので、要件定義の段階でほぼ確定させておく必要があります。

3. デザインで大切なこと

デザイン段階ですることは、

・機能のデザイン化
・細かな仕様の決定〜仕様書の作成
・チュートリアルのデザイン制作
・申請用素材の制作

の4つ。

細かな仕様が決まったら、各画面のレイアウト・機能・画面遷移などを指定する「画面仕様書」を作成します。デザインが確定すると、ようやく開発に入ります。

菅原さんはデザインサンプルの共有に、デザインツールのFigmaを利用しているそうです。

アプリの本機能だけでなく、チュートリアルのデザインやApp Storeに申請するための素材も同時に作っていきます。

4. 開発で大切なこと

開発段階ですることは、

・機能の開発
・仕様の最終調整

の2つ。

菅原さんいわく、開発にプロジェクト全体の工数の半分以上が費やされるそうです。

5. 検証で大切なこと

検証段階ですることは、

・DeployGateを使って検証端末へインストール
・デバッグ・修正
・ヘルプ内容の決定
・翻訳

の4つ。

検証段階では、DeployGateを使って検証用端末にインストールし、デバッグしていきます。

シンプルな動画撮影・加工用アプリでも、検証項目は400を超えるそう！気の遠くなる作業です。

6. 申請で大切なこと

申請段階ですることは、

・申請用素材（ストアキャプチャ、詳細テキスト）の用意
・ストア担当者対応

の2つ。

検証して問題がないことが確認できたら、ようやくApp Storeに申請を行います。

一般的には審査に2〜3日かかるそうですが、場合によっては1週間〜1ヶ月かかったり、逆に1日で審査が通ったりと、一概には言えません。

App Storeの対応は全て英語で行われるため、英語が苦手だとここで苦労します。

7. リリースで大切なこと

リリース段階ですることは、

・問い合わせ対応
・次回アップデート内容の検討

の2つ。

申請が通って、念願のリリース！しかしリリースはゴールではなく、あくまでスタートラインに立っただけです。問い合わせ対応と、次回アップデート内容の検討が始まります。

Webディレクションとの違い

次に「iOSアプリとWebでのディレクションの違い」を説明してくれました。それが次の5点です。

・App Storeの存在
・ASO（App Store Optimization）
・スマホアプリだけであればPC版を作る必要がない
・OS更新時の対応など、細かなアップデートが必要
・実機での確認・検証が必要

菅原：「工程上の大きな違いは、『App Storeに申請しなければいけない』というところです。審査基準が明らかになっていないのが厄介なポイントです」「

菅原：「逆に似ているところがASO。WebサイトにおけるSEO（Search Engine Optimization）と同じように、App Storeでも検索上位をめざしてタイトルや説明文に入れるキーワードを考える必要があります」

ディレクションをする上で気をつけていること

最後に、ディレクションをする上で気をつけていることを聞いてみると…

菅原：「とにかくわかりやすい言葉で伝えることを心がけています」

と言って、菅原さんが紹介したスライドがこちら。あれ、どこかで見たことある気が……？

菅原：「このように、ビジネスやITの業界では横文字やカタカナ語が多用されがちです。それで伝わりやすくなればいいですが、そういうわけではありません。共有できる言葉を選んでディレクションするようにしています」

ディレクションについて非常にわかりやすい講義となりました。

後半のテーマは「React.jsでサービスを作ってみた話」

次の登壇者は、フロントエンジニアの秋津辰弥（あきつたつや）さん。

秋津 辰弥（あきつ たつや）：フロントエンドエンジニア。総合学園ヒューマンアカデミーを卒業後、職業支援学校にてWeb制作を習得。その後イベント・映像制作系企業に入社し、およそ1年半自社企画のイベント告知サイトを中心に構築と運用を担当。2017年10月末、GIGにジョイン。

当日のスライドは以下でご覧いただけます。

前回登壇時はSPA（Single Page Application）のフレームワーク3種（Angular.js、React.js、Vue.js）を比較しながら紹介してくれました。今回は、React.jsを実際に使ってサービスを試作しての所感を話してくれました。

React.jsの特徴をおさらい

まずはReact.jsの特徴をおさらい。内容は以下の通りです。

・Vue.jsと比較するとJSで記述していく感覚が強い
・JSの拡張言語である「JSX」を使用
・他のSPAフレームワークと比べて、書き方の作法が厳しい
・サードパーティ製のライブラリが豊富

秋津：「Vue.jsなどはフレームワーク色が強いですが、React.jsはあくまでライブラリという立ち位置です。React.jsはゴリゴリJSを書いていく感覚があって楽しいです」

社員リストを作ってみた

秋津さんはReact.jsを使って「GIGメンバー全員が所属しているSlackの日報用チャンネルから、アカウントを一覧で表示する」サービスを試作しました。

秋津：「日報を出してない人がわかる、といった機能もつけられるかもしれません。スタッフリストとしての機能を充実させていきたいです」

実際に作ってみて感じたこと

秋津さんがReact.jsでサービスを作ってみた感想は、

・初期の環境構築が手間
・日本語で書かれている参考記事が少ない
・Routerの定義が手間
・Reduxを導入する場合はRedux-loggerがかなり便利
・JSを書くのが楽しい、JSの技術も高められる

という点でした。

また、React.jsをVue.jsと比較した時にハードルになりそうなのが、

・環境構築の手間
・初期学習の難しさ

の2点。

秋津：「SPA開発で必要な最低限のパッケージが簡単に手に入るVue.jsに比べ、React.jsではサードパーティ系のプラグインを自分で調査して、適応するバージョンかどうかを確認しながらStoreやRouter周りのパッケージを実装していく必要があります」

秋津：「調査に当たって問題になるのが、React.jsの公式ドキュメントが全文英語で書かれていること。Vue.jsは日本語ホームページもあるし、StoreやRouterも含んだパッケージを本家が用意しています」

一方で、データのやり取りが多い大規模サービスに適している印象もあるそうです。

秋津：「パッケージ化されていないということは、裏を返せばActionやRouterに関してはこちらがコントロールできるということです。データの処理やStoreとの接続をハンドリングできるので、ユーザーアクションが多いサービスを開発する上では向いているのではないでしょうか」

まとめ

秋津さんは、React.jsを使用してみての所感を以下のようにまとめてくれました。

・Reduxの理解が深まるとReactの開発が楽しくなる。Reduxは慣れると書きやすいし、React.jsのコンポーネントの中身がシンプルになる
・Vue.jsの勉強をすると、React-Reduxの勉強も深まる気がする
・引き続き、社内ツールの制作と合わせてReact.jsの大規模開発をしていきながら知見を深めたい

React.jsについての知識が深まった講義となりました。

最後にQ&A

エンジニアから、数々の質問が寄せられました。

Q1：スタッフリストの表示順はどうなってるの？

秋津：「今はランダム。ソートできないか試してみる予定。日報のジェネレータ化やSlackへの自動投稿の機能も付けたい」

Q2：フロントエンジニアがReact.jsを使っていく上で気をつけたほうが良いことは？

秋津：「スタイルの書き方がいくつかあること。コンポーネントごとに細かく切って書いていくことになるので、複数人で設計する場合はルールを統一したほうがよい」

Q3：SPAをはじめて設計する場合、Vue.jsから入るべき？それともReact.jsから？

秋津：「Vue.jsからの方が良いのではないか。導入からはじめて動かせるようになるまでの工数はVue.jsの方が短いので、達成感を得ながら理解していくことができる。Vue.jsに慣れてからReact.jsに触れることで、React.jsの構成も掴みやすくなる」

このほか「アニメーションをつけるようなリッチなUIをReact.js単体で作るのは難しい」という意見も寄せられました。

勉強会のあとは……お待ちかねの食事会！

勉強会のあとは参加者で食事を囲むのがGIG流。もはや恒例となった、シェフによる出張料理が振舞われました！（私は今回初参加なのでワクワク！）

トナカイの格好で現れたシェフ。すっかりGIG社員とも顔なじみです。

用意された料理はローストチキン。おいしそうな写真ですよね。もちろんおいしかったです。こんなおいしいものが食べられるなら毎日勉強会でもいいですね。

新入社員から見て、勉強会からの食事会という流れの中でフラットに情報を共有でき、かつ食事にも手を抜かないGIGは素晴らしい環境だと感じました。