Blog - LINE ENGINEERING

TAG ARCHIVES: 証券フロントエンド

LINE証券のフロントエンドチームでワークショップを開催しました
Katayama Tomohiro2023-02-06
UIT Aチーム（LFK）
こんにちは。LINE証券のフロントエンドを開発している片山です。先日、LINE証券のフロントエンドエンジニア全員でオフラインのワークショップを開催しました。今日はその日のことについて話したいと思います。 LINE証券のフロントエンドチームは東京と福岡のフロントエンドエンジニアで構成されているため、基本的にフルリモートで働いています。リモートワークは私たちのワークライフバランスを向上させますが、コミュニケーションはオフラインでの作業と比べると気軽に行うことができません。そのため、プロジェクトで関わっていないメンバーとのコミュニケーションが不足してメンバー間の相互理解ができていなかったり、個人が抱えている課題の共有ができていなかったりしていました。また、LINE証券はCOVID-19の歴史的大流行の少し前にリリースされたため、私たちのチームはこれまでチーム全員が集まって顔を合わせたことがありませんでした。このような経緯から、私たちはチームのエンゲージメントの強化と、チームが潜在的に抱えている課題や改善点を洗い出すために、オフラインでのワークショップを開催することにしました。ワークショッ
業務で役に立つVS Code機能拡張を作ってみた話
Kaido Iwamoto2022-01-21
LINE FukuokaでLINE証券のフロントエンドを開発しています。
この記事は UIT 新春 Tech blog 3日目の記事です。こんにちは。LINE証券のフロントエンドを開発している岩本海童です。今日は、業務で利用できる便利なVS Codeの機能拡張を作ってみた話をします。背景 LINEでは、XLTと呼ばれるアプリケーションの多言語化のための社内ツールがあります。あるキーとなる文字列に対して、対応する日本語や英語の文字列を関連づけることができ、それをソースコードから参照します。例えば次のように、ボタンにXLTから設定した文字列を表示します。 export const ShowAllAssetsButton: FC = () => <button>{xlt('portofolio.showAllAssets')}</button> // 日本語環境の場合は <button>資産を全て表示</button> // 英語環境の場合は <button>Show all assets</button> のようにレンダリングされる当然ですが、ソースコードにはキーが書い
業務で見つけた！　Conditional Types
LINE Engineering2022-01-20
こんにちは。LINE証券フロントエンドエンジニアの鈴木です。この記事は「UIT 新春 Tech blog」シリーズ2日目の記事です。 LINE証券ではTypeScriptを使用しており、TypeScriptの力を最大限発揮させられるように日々取り組んでいます。そこで、この記事ではLINE証券のプロダクション用コードで実際にConditional Typesが使用された事例をご紹介します。Conditional TypesはTypeScript 2.8で追加された機能で、部分型関係に基づいた型レベルの条件分岐やパターンマッチができる機能です。TypeScriptの機能の中でも高度な部類であり、一部の型に凝ったライブラリや曲芸的な遊びを除いてはなかなか実用例を聞かないものです。我々が書いたコードでConditional Typesが使われた事例をご紹介することで、皆さんにもConditional Typesを身近に感じていただき、ぜひ自分のプロダクトでも活用機会を探していただきたいと思います。非同期処理を表すAsyncData型まずは、我々が最近導入したAsyncData型をご紹介し
【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