Blog - LINE ENGINEERING

TAG ARCHIVES: Fintech

【LINE証券 FrontEnd】Recoilを使って安全快適な状態管理を手に入れた話
Tomoro Mine2021-06-29
こんにちは。LINEフィナンシャル開発センターフロントエンドエンジニアの峯です。先日新卒としてLINE証券プロジェクトに配属となり、最初のタスクとしてRecoilによる状態管理の導入に取り組みました。その際、なぜRecoilにしたのか、また本番開発にRecoilを使うにあたって設計に気をつけたことなどを本記事でご紹介しようと思います。技術選定いままでの状態と課題 LINE証券フロントエンドではReact+Typescriptによる開発を採用しており、いままでのグローバルな状態管理にはUnstated を用いていました。 Unstatedでは Container classを状態の単位とし、その内部の stateを setState によって更新します。状態を使用したいコンポーネント側では、<Subscribe> コンポーネントによって情報を読み出すことができます。一方ご存知の通り、React 16.8以降ではhooksという概念が導入され、コンポーネント内の状態管理は class compone
【LINE証券 Frontend】requestIdleCallbackを活用して初期レンダリング時間を約14%削減した話
LINE Engineering2021-02-17
こんにちは。フィナンシャル開発センターの鈴木です。LINE証券のフロントエンドを担当しています。この記事は【LINE証券 FrontEnd】シリーズの4番目の記事です。最近のWeb Vitalsの隆盛を受けて、LINE証券のフロントエンドでもパフォーマンスの改善に取り組み始めました。およそ2週間ほど改善に取り組んだ結果として、開発環境での計測ではLighthouseのperformanceスコアが従来より30点ほど上昇しました。パフォーマンス改善のためにさまざまな施策を行いましたが、この記事ではその中でも興味深かったものとして、requestIdleCallbackを活用してLazy Loadingされるコンポーネントの読み込みを遅延し、その結果初期レンダリングにかかる時間を約14%削減できた事例をご紹介します。環境以前の記事でご紹介したとおり、LINE証券のフロントエンドはTypeScript + Reactで作られています。また、JavaScriptバンドルをwebpackで生成しています。今回の話で関連が深いのはReactとwebpackです。実際の環境はReact
【LINE証券 FrontEnd】コンポーネントをカスタムフックで提供してみた
LINE Engineering2020-07-08
こんにちは。フィナンシャル開発センターの鈴木です。LINE証券のフロントエンドを担当しています。以前の記事でご紹介した通り、LINE証券ではReactを使用しています。React 16.8で導入されたフックの機能は非常に革新的で、特にカスタムフックの概念によってReactにおけるコンポーネント設計は大きく様変わりしました。我々もフック時代のコンポーネント設計を試行錯誤しており、その結果はLINE証券にも反映されています。この記事では、その中でも我々が最近ハマっている「カスタムフックを通じてコンポーネントを提供する」という、いわば“render hooks”とも言うべき設計パターンを紹介します。今回のお題今回は、「いくつかのチェックボックスがあり、全部チェックを入れると次に進める」という典型的なパターンを題材にしましょう。次の画像では3つのチェックボックスと「次へ」ボタンが並んでおり、チェックボックスは2つしかチェックされていないため「次へ」ボタンは非活性化されています。このボタンは、チェックを全て入れると押せるようになります。これを最も
【LINE証券 FrontEnd】Page Stack の進化と課題
sunderls2020-06-19
sunderls is a front-end engineer
Header Parallax Transition swipe gestureの改善 componentCanSwipe componentWillExit Page Stackは膨大化になるのでは？ BrowserのNative Swipe Gestureとコンフリクトしない？ブラウザー環境ではPage Stackを使う意味あるのか？ Functional Componentでは動けるか？結論この記事は、LINE証券の開発メンバーが、LINE証券のフロントエンドにまつわる様々なトピックや、開発中に得た知見を共有する【LINE証券 FrontEnd】シリーズの2記事目です。はじめにこんにちは、sunderlsです。2年前Page Stackについての記事「LINEマンガ：Page Stackを使ってサクサクなページ遷移を実現できました」を出しました。LINE証券でもこのアプローチをとっています。この記事ではPage Stackはどう進化したのか、どんな課題を抱えているのかを説明します。 Header Parallax Transition P
【LINE証券 FrontEnd】LINE証券フロントエンドの全体像
LINE Engineering2020-06-08
こんにちは。フィナンシャル開発センターWeb開発室の鈴木です。Web開発室は現在「LINE証券」のフロントエンドを担当しています。【LINE証券 FrontEnd】シリーズでは、Web開発室メンバーがLINE証券のフロントエンドにまつわる様々なトピックや、LINE証券の開発中に得た知見をお届けします。今回は第1回ということで、LINE証券のフロントエンドの全体像を説明します。LINE証券というアプリがどんな技術で動いているのか、そして技術に対する考え方を知ることで、LINE証券をより身近に感じていただけると幸いです。 TypeScript + React LINE証券は、いわゆるSPAとして作られています。最近のSPA開発で最初に決めることといえば、1に言語、2にViewライブラリですね。見出しにすでに出ていますが、LINE証券ではプログラミング言語としてTypeScriptを、ライブラリはReactを使用しています。CSSに関しては、いわゆるCSS Modulesとstyled-componentsを採用しています（プロジェクトによって異なります）。プログラミング言語の選定に関

1