$30 off During Our Annual Pro Sale. View Details »

社内管理システムのための技術選定

 社内管理システムのための技術選定

Keywords

- architect
- Component Oriented
- Atomic Design
- React.js
- GraphQL
- Bootstrap
- Styled Component

Ken Wagatsuma

February 21, 2019
Tweet

More Decks by Ken Wagatsuma

Other Decks in Programming

Transcript

  1. TOC ・社内管理システム開発の「目的と制約」「戦略と戦術」「裏目的」 ・なぜコンポーネント指向か ・なぜ Atomic Design か ・なぜ React.js か(なぜ

    Vue.js / jQuery ではないか) ・なぜ GraphQL か(なぜ REST ではないか) ・なぜ Bootstrap & Styled Components か(なぜ Antd / Material Design ではないか) ・品質を維持するために ・開発に最小限必要なスキル
  2. 正しい技術選定をするために(超重要) !!!超重要!!! ・あくまで「事業の成果に貢献すること」 が目的 ・適材適所で REST / haml / jQuery

    / Bootstrap など慣れたツールを使うことも正しい判断の一つ 技術選定の難しさ ・品質コントロールのために、あえて枯れた技術を使うことが選定者に求められること ・チャレンジする領域の取捨選択も判断の内
  3. Atomic Design Guideline Component Definition Example Atoms minimum components button

    / input / toast / label / panel Molecules have side effects (useState / useEffect / useContext) input / pagination / selector / popup Organisms handle multiple events / use GraphQL chart / form / list / table Templates wireframe level header / footer Pages per #index or #show actions -
  4. なぜ React.js か コンポーネント指向が実質的な制約となるため ・Vue.js でない強い理由はない( React.js か Vue.js か

    Ember.js か... フレームワークは関係ない) ・jQuery でもコンポーネント指向は可能だが、設計力とメンバー全員の技術力が必要  ・参考)M3 Tech Blog “React.js, Vue.jsが使えない状況でメンテナンス性の高いJavaScriptを書く3つのポイント” ・ライブラリや知見も十分に揃ってきており、仕様を満たすために必要十分  ・「jQuery にしかできない」がほぼない
  5. なぜ GraphQL か 仕様の変更に柔軟に対応できる可能性を極大化させるから ・Controller からは疎結合な Single Endpoint ・Apollo Client

    を用いて「データ」を「機能」と同じコンポーネントに配置する Schema がチーム開発における品質担保のための強力なツールとなるから ・レガシーバージョンからの移行作業を抽象化するためでもある  ・参考:Speakerdeck “Frontend Re-architecture of a decade-old Rails App』”
  6. なぜ Bootstrap & Styled Components か 学習コストの調整 ・社内でも広く使われ、開発者も慣れた API がおおい

    SFD-Component を実現するために ・Styled Components の考え方を用いてスコープを閉じていきましょう ・直接 class を使うのではなく、<Row> や <Panel> など抽象化していきましょう ・Bootstrap 自体のアップデートや別のフレームワークへの切替時の 抽象レイヤーとしても機能
  7. 品質を維持するために Unit Testing / E2E Testing ・開発環境および本番環境での確認は開発者で担保すること GraphQL ・GraphQL は可能な限り薄く。テストがほしいと感じたら

    fat になっている証拠 ・Model および Service class 側できちんとテストを書く React.js ・見た目のテストは Snapshot Testing(Jest)を使ってコスパよく書く
  8. React.js 開発に最小限必要なスキル ・ECMAScript 6 の基本的な文法(Class / Arrow Function / let&const

    / Template Strings / Promise / destructuring / Rest parameters / Spread syntax / Module system) ・JSX の基礎文法 ・props / state の使い方、もしくは Hooks API ・Lifecycle (componentDidUpdate / componentDidMount, etc.) ・HTML Events の処理方法