Front-End

UIT Meetup vol. 13『知っておきたい Front-end Tooling の今』を開催しました

7 月 7 日、LINE のフロントエンドコミュニティ UIT が主催するミートアップイベント UIT Meetup vol. 13『知っておきたい Front-end Tooling の今』を開催しました。この記事では、イベントの内容について振り返っていきます。

【インターンレポート】LINE FukuokaでのLINE Creators Marketのフロントエンド実装

はじめまして、九州大学経済学部3年の菊井無双と申します。2月1日から5ヶ月間、LINE Fukuokaで長期インターンをさせていただきました。

業務としては、UIT Aチームに所属しLINE Creators Marketのフロントエンドを担当しました。この記事では、インターン期間に僕が実装した機能や学んだことを紹介します。

【LINE証券 FrontEnd】Recoilを使って安全快適な状態管理を手に入れた話

こんにちは。LINEフィナンシャル開発センター フロントエンドエンジニアの峯です。

先日新卒としてLINE証券プロジェクトに配属となり、最初のタスクとしてRecoilによる状態管理の導入に取り組みました。

その際、なぜRecoilにしたのか、また本番開発にRecoilを使うにあたって設計に気をつけたことなどを本記事でご紹介しようと思います。

Bootstrap5がリリースされました!

はじめに

こんにちは。フロントエンド開発センター(UIT) 岡崎です。

LINEはBootstrapを応援しており、2021年5月からはSponsorも行っています。また、OSS貢献の一環としてBootstrap日本語リファレンスの翻訳・運営も担当しています。

Bootstrap4正式公開から3年4ヶ月、2021年5月5日に待望のBootstrap5正式版がリリースされました!

今回はバージョン4からの変更点をチェック、公式Blog記事(英語)を日本語に翻訳して紹介していきます。

UIT Meetup vol.12「リニューアル戦略発表会」を開催しました

3月10日に、フロントエンドコミュニティ UIT の 12 回目となるミートアップ「UIT meetup vol.12『リニューアル戦略発表会(一部から全部まで)』」を開催しました。

今回の UIT meetup では、『リニューアル・リプレース』をテーマに、3名の登壇者によるセッションをお送りしました。

【LINE証券 Frontend】requestIdleCallbackを活用して初期レンダリング時間を約14%削減した話

こんにちは。フィナンシャル開発センターの鈴木です。LINE証券のフロントエンドを担当しています。この記事は【LINE証券 FrontEnd】シリーズの4番目の記事です。

最近のWeb Vitalsの隆盛を受けて、LINE証券のフロントエンドでもパフォーマンスの改善に取り組み始めました。およそ2週間ほど改善に取り組んだ結果として、開発環境での計測ではLighthouseのperformanceスコアが従来より30点ほど上昇しました。

パフォーマンス改善のためにさまざまな施策を行いましたが、この記事ではその中でも興味深かったものとして、requestIdleCallbackを活用してLazy Loadingされるコンポーネントの読み込みを遅延し、その結果初期レンダリングにかかる時間を約14%削減できた事例をご紹介します。

【LINE証券 FrontEnd】コンポーネントをカスタムフックで提供してみた

こんにちは。フィナンシャル開発センターの鈴木です。LINE証券のフロントエンドを担当しています。

以前の記事でご紹介した通り、LINE証券ではReactを使用しています。React 16.8で導入されたフックの機能は非常に革新的で、特にカスタムフックの概念によってReactにおけるコンポーネント設計は大きく様変わりしました。我々もフック時代のコンポーネント設計を試行錯誤しており、その結果はLINE証券にも反映されています。

この記事では、その中でも我々が最近ハマっている「カスタムフックを通じてコンポーネントを提供する」という、いわば“render hooks”とも言うべき設計パターンを紹介します。

【LINE証券 FrontEnd】Page Stack の進化と課題

こんにちは、sunderlsです。2年前Page Stackについての記事「LINEマンガ:Page Stackを使ってサクサクなページ遷移を実現できました」を出しました。LINE証券でもこのアプローチをとっています。

この記事ではPage Stackはどう進化したのか、どんな課題を抱えているのかを説明します。

【LINE証券 FrontEnd】LINE証券フロントエンドの全体像

こんにちは。フィナンシャル開発センターWeb開発室の鈴木です。Web開発室は現在「LINE証券」のフロントエンドを担当しています。【LINE証券 FrontEnd】シリーズでは、Web開発室メンバーがLINE証券のフロントエンドにまつわる様々なトピックや、LINE証券の開発中に得た知見をお届けします。今回は第1回ということで、LINE証券フロントエンドの全体像を説明します。LINE証券というアプリがどんな技術で動いているのか、そして技術に対する考え方を知ることで、LINE証券をより身近に感じていただけると幸いです。