Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Issues About frontend development

Issues About frontend development

Arakaki Yuji

June 21, 2020
Tweet

More Decks by Arakaki Yuji

Other Decks in Programming

Transcript

  1. ⾃⼰紹介 u 新垣 雄志(あらかき ゆうじ) u Twitter: @arakaji u 株式会社

    Paykeに所属 u ソフトウェアエンジニア u フロントエンドエンジニアではないが、フロントエンドもやる u 過去実績 u Angular.jsで公共施設予約サイト管理画⾯ u Angular.jsで某エンジニア向けイベント情報サイト管理画⾯ u React.jsで求⼈サイトの管理画⾯開発 u Vue.jsでWebサイトの⼀部を動的に実装 u Ionic(angular/typescript)でモバイルアプリ開発
  2. 課題の定義 u 1. 与える、または、与えられる題⽬ u 2. 解決しなければならない問題 u 解決しなければならない問題とは︖ u

    進みたい⽅向に進みたい速度が進みたいが、それが出来ない障害があるので解決し ないといけない u その障害が、課題 u 課題を知るには、進みたい⽅向を知る必要がある。 u 進みたい⽅向 = ⽬的
  3. フロントエンド開発の⽬的は ユーザーに良いUXを届けること u フロントエンド = UI(User Interface) u ユーザーとの接点 u

    ユーザー体験 = UX(User Experience) u ユーザーはUIを通してシステムを利⽤し、問題を解決したい u フロントエンド(UI)は、その問題解決をより良い体験として提供することが⽬的 u 問題は解決できても、悪い体験になってはいけない u 使いづらい u バグる u どの使うかわからない u 使えるが、気分がよくない u Etc…
  4. 良いUXとは︖ UXハニカム UXの評価指標の⼀つ。UX評価軸を6つに分けて5段階で評価し、その 総合点でUXを評価する⼿法 1. Useful – 役に⽴つ 2. Desirable

    – 好ましい 3. Accessible – アクセスしやすい 4. Credible – 信頼できる 5. Findable – 探しやすい 6. Usable – 使いやすい from: https://blog.btrax.com/jp/ux-evaluation/
  5. UXを⾼めるために発⽣する課題とは︖ u 正解がわからない u そもそもUXをどうやったらUXが⾼まるのかという共通の解はない u プロダクトの性質、ユーザー層、市場の動向や環境などで変わる。 u マルチデバイス対応 u

    10数年前まではPCでのWeb利⽤だけを対応していればよかった u いまはスマホ、タブレット、Watchなどもある u さらにこれらの各OSへの対応をどうするか u ユーザーの期待値の増加 u スマホの普及によってソフトウェアの利⽤が⾝近に u かつ⼀般的に利⽤するのが世界トップレベルの洗練されたプロダクト u Instagram, Tiktok, Netflixなど u これらがユーザーのアプリのUXに対する期待値を増加させた
  6. 単位時間あたりの試⾏回数を増やすこと にどうFirebaseが貢献するのか︖ u 限られた⼈数で開発効率を上げる、コード量と開発⼈数がふえても開発効率を 落とさないのが重要 u それらを解決する最⼤の⽅法 u 「⾃分たちで作らないことを増やすこと」 u

    開発しないで要件を満たせるなら、他の開発にリソースを当てられ開発効率が上が る u コードが少なくて良いので開発効率は落ちない u 開発⼈数が増えることによる開発効率の低下は主にコミュケーションの問題 u 既存のサービスを利⽤することで、そのサービスのドキュメントを読めば仕様を把握でき るのでコミュケーションコストが増えない
  7. Firebase Authentication u Firebaseが提供するユーザー認証のサービス u ログイン/ログアウトなど u 利⽤すると u ユーザー認証を作らなくてよくなる。

    u セキュリティ対応やバグ対応なども不要になる u メンテナンスコストも最⼩ u トレードオフももちろんある u できることしかできない。 u 何が出来ないのか事前に把握しておく必要はある。 u サービス停⽌の可能性とその時の対応⽅法を考慮しておく
  8. Cloud Firestore u GCPにホストされたNoSQLデータベース u iOS、Android、WebのクライアントからSDK経由で直接DBにアクセスできる u 単純なRead/Write/Update/Deleteなコードのためにサーバーサイド開発をする必要 を無くせる可能性 u

    その他の強⼒な機能 u リアルタイムアップデート u オフラインサポート u スケーラビリティ u WebAPIやインフラ運⽤などの多くを「作らないモノ」に⼊れられる u いままでとメンタルモデルが違うため、どういうリスクがあるのかの事前調査は必 要
  9. Google Analytics u SDKを⼊れることでユーザーの属性や⾏動をトラッキングすることが可能 u iOS、Android、Webに対応 u どの画⾯を開いたか、どのボタンを押したかもカスタムイベントを⾶ばすよう にプログラムを書くことでトラッキング可能 u

    それらすべてのデータがWeb上のダッシュボードを⾒ることができる。 u 他にも類似サービスはあるが、無料であることやその他のサービス(クラッ シュレポートやパフォーマンス監視)があることを総合するとデフォルトの選 択視としては⼗分すぎる u すべてのフロントエンド開発者がマスターすべきというわけではないが、チームに おいて⼀⼈は使いこなせる⼈がいないとデータ分析をする上で⼤きなハンディ キャップになる
  10. マルチデバイスへの対応 単純化するために以下を対象とする。 u Android端末 u iOS端末 u Web このときに考えるべきは、「各プラットフォームでどれだけコードを共有する か」

    u すべてのOS⽤にそれぞれアプリを書くとその分開発リソースは増える u しかし共通化すると違う問題を抱える u コードの複雑性 u プラットフォームの機能をどう使うか u 利⽤ツールの継続性