最後にこんにちは!フロントエンドエンジニアの小澤です。画像のにっこり笑ってる人です。この記事は「エディトルブログキャンペーン」1日目の記事です。本記事ではエディトル開発チームのフロントエンド技術について取り組んできたことを紹介します。エディトルブログキャンペーンエディトルブログキャンペーンは、ウィルゲートで開発中のサービス「エディトル」について各チームメンバーからの視点で取り組みを紹介していくキャンペーンです。本日2020年2月10日(月)から2月14日にかけて1日1記事を投稿していきます。上記の日程で記事を投稿していきます。開発に着手してから1年弱経ちましたが、それまでやってきたことや学びなどを紹介していきます。エディトルとは私が開発に携わっているエディトルはコンテンツ制作に特化したオンラインの編集チームを構築するサービスです。2018年から開発が始まった新しいサービスです。client.editoru.jpエディトルのシステムは大きく分けると編集者などの情報や支払情報を持つバックエンドと、バックエンドからデータを取得し表示するフロントエンドの2つに分けられます。この記事では主にフロントエンド技術について説明していきます。エディトルのフロントエンド事情エディトルはSPAのアプリケーションです。React×TypeScriptで構築されており、ウィルゲートのプロダクトでは比較的新しい技術を導入しています。コンポーネントベースで開発することができますし、StorybookやJestを使えばデザインや挙動、テストの確認なども簡単にできます。主要ライブラリエディトルで使用している主要ライブラリを紹介します。releaseまで対応しており、常に最新の環境を適用するようにしています。破壊的な変更を伴うメジャーバージョンアップデートはまだしも、後方互換が保証されているマイナー、パッチアップデートなら積極的にアップデートするべきだと思います。最新のアップデートを取り込むことでいつでも新しい技術を導入、検証できるような環境を整えています。このあたりの話はこちらで詳しくしていますので、ぜひご覧ください。tech.willgate.co.jpTSLintは非推奨になりましたね。エディトルでは2020年4月からESLintに以降する予定です。github.com技術選定の背景なぜ上記のような技術を選定したのかについて説明します。Applicationの略で、単一のwebページでコンテンツ切り替えを行うことでページ遷移の必要がなく、ブラウザの挙動に縛られないUIの実現やパフォーマンスの向上が可能になります。有名なサービスだとFacebookなどが例として挙げられます。当初の機能要件としてプロジェクトの状態を見やすく、操作しやすいものにするためにカンバンボードのような機能や、ユーザ間でやり取りをするチャット機能を実装する必要があったのでSPAの導入に至りました。ちなみにカンバンボードとはプロジェクトなどの進捗を見える化するツールの総称です。有名なサービスだとJIRAなどが挙げられます。en.wikipedia.orgja.wikipedia.orgReactSPAを実現するためのフレームワーク、ライブラリとして代表的なものがいくつかあると思います。You氏が作者であるVue、そしてエディトルに採用されたFacebook社がOSSとして公開しているReactなどが例として挙げられます。ライブラリこの中でなぜReactなのかというとコミュニティが活発であるTypeScriptで書くことを公式が推奨している小さく始められるが主に理由として挙げられます。AngularはReact、Vueと比較すると小さく始めることが難しいです。Vueは選定当時はTypeScriptとの相性が良いとは言えず、VueプロジェクトでTypeScriptを使うにはひと工夫が必要でした。新規技術を取り入れることで組織としても技術に秀でた会社にしていきたい、といった狙いもありました。以上のことから、Reactを導入することになりました。コンポーネント粒度エディトルでは以下のようなディレクトリ構成で開発しています。Designをベースにコンポーネントの粒度を分けていますが、独自に拡張している部分もあります。DesigntとはUIパーツ・コンポーネント単位で定義していくUIデザイン手法です。Designと相性がいいです。bradfrost.comAtoms最小限単位のコンポーネントで、IconやButtonなどが該当します。「ボタン」「テキストの表示」などの単一の機能を提供します。基本的にstateは持たず、親コンポーネントから渡されたpropsを元にHTMLを返却します。ドメインは持ちません。(独自定義)レイアウトを組むためのコンポーネントです。DesignでいうAtomsくらいの粒度です。各ページをラップするコンポーネントで未ログイン時、ログイン時などにそれぞれのレイアウトを適用しています。ドメインは持ちません。Molecules複数のAtomsから構成され、複数の機能を提供します。thumbnailなどが該当します。複数の機能を持つコンポーネントで複数のAtomsを組み合わせて作られます。well(小さな一つのことをうまくやる)」に基づいています。Moleculesはユーザへ何かのタスクを完了させることができます。基本的にstateは持たず、親コンポーネントから渡されたpropsを元にHTMLを返却します。ドメインは持ちません。Stateとconnectし、状態を保持することができます。コンポーネントにも引き継がれます。複数ページに渡って共通化したいコンポーネントを配置します。ButtonやCheckboxなどの一般的な汎用コンポーネントはこちらには配置しません。Pages寄りの、共通化したいコンポーネントを配置します。Templates2ペイン構造などページの根幹となるレイアウトを提供します。ヘッダーやフッター、サイドバーなどはレイアウトともにTemplatesで配置します。ドメインを持つ場合があります。Pagesページのコンポーネントです。ページ独自のコンポーネントはこの中に子コンポーネントに切りつつ配置します。基本的には渡されたthis.props.childrenをそのまま表示します。各ルーティング毎に1つずつ存在します。Stateとconnectし、状態を保持することができます。このように、コンポーネントを決められた粒度ごとに分けることでそれぞれのコンポーネントの役割が定まり、見通しが良くなります。テスト事情エディトルではJestを使ってコンポーネントのテストを行っています。このあたりの話はこちらで詳しくしていますので、ぜひご覧ください。tech.willgate.co.jp今後はStoryShotsを使ってStorybookと連携してコストを最小限に抑えつつ品質を向上させていけたらなと思います。今後の展望エディトルは今後、さらにリアルタイム性が求められるようなSPAアプリケーションになっていきます。Workerなどの導入を検討している段階です。フロントエンド技術の流れはとても早いので常に最新の技術を取り入れ、プロダクトを技術的なアプローチでも成長させていけたらなと思います。いった取り組みがナレッジとして自社に還元され「フロントエンド技術が優れている会社」になっていくと思います。最後に明日はエディトルのバックエンドを担当しているバックエンドエンジニア三島さんの記事で「LaravelでレイヤードアーキテクチャとCQRSの導入事例」です。tra...2019-05-28新卒1年目のエンジニアが技術広報を立ち上げた話こんにちは!新卒2年目の小澤です。SEOスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。