Category Archives: Front-End

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

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

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

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

All TypeScript で開発したLINEで動くリアルタイムクイズアプリの裏側

LINE株式会社フロントエンド開発センター(通称: UIT)の折原です。

先日、6月17日に開催した UIT meetup vol.9 で、本編の前にウォームアップとして、フロントエンドに関するクイズ企画を開催しました。そこで使うことを目的として、UIT App という名前で LIFF のアプリを作成しました。

UIT App は LIFF で動作するクイズアプリです。
現状クイズだけですが、今後はいろんな取り組みをこのアプリ上で動作させることができるようになっていく予定です。

この UIT App を実装するにあたって、フロントエンドでは StencilJS を、サーバーサイドでは NestJS を採用しました。
これらを使ってみての所感や、こだわった箇所などを紹介したいと思います!

UIT meetup vol.9 「The new normal frontend」を開催しました

フロントエンドコミュニティ UIT のミートアップ 9 回目は「The new normal frontend」というテーマで 6 月 17 日に開催しました。

オンラインで開催する UIT meetup はこれで 2 回目になります。昨今の状況で皆さんの中にも、働き方や生活様式が大きく変わった人も多いんじゃないでしょうか。そんな中、UIT meetup vol.9 ではこの状況下で新しいプロジェクトを完成させた Changhee Kim さん、リモートワークが当たり前な会社で働くための基盤を構築した Lena Morita をゲストにお呼びしてお話していただきました!

【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証券をより身近に感じていただけると幸いです。

【Team & Project】LINEのユーザ向けサービスのWebフロントエンドを開発しているチームを紹介します

LINEの開発組織のそれぞれの部門やプロジェクトについて、その役割や体制、技術スタック、今後の課題やロードマップなどを具体的に紹介していく「Team & Project」シリーズ。

今回は、フロントエンド開発組織の中で、ユーザ向けサービスのWebフロントエンドを担当しているチームについて紹介します。フロントエンド開発センターの清水大輔、縣亮太、折原レオナルド賢に話を聞きました。

ユーザ向けサービスのWebフロントエンドを担当しているチームのzoom会議の様子

なぜ default export を使うべきではないのか?

フロントエンド開発センター(通称: UIT)の花谷(@potato4d)です。

この記事では、 ESModule の仕様であり、現在の JavaScript を用いた開発で必須である import / export 構文について、 default export ではなく named export を利用すべきである理由について紹介します。

生放送 Podcast「UIT INSIDE Live! vol.1」を配信しました

5 月 13 日、フロントエンドコミュニティ「UIT」が発信する生放送 Podcast「UIT INSIDE Live! vol.1」を公開しました。

この企画は、UIT のメンバーが出演する Podcast「UIT INSIDE」の生配信版として、普段音声だけで公開していたものを発展させ、YouTube Live にてお送りしました。生放送という今まで私たちが取り組んだことのない試みではありましたが、最終的な総視聴者数は 200 人を超え、想定以上の反響をいただきました。

UIT meetup vol.8 online 「We Are TypeScripters!」を cluster にてオンライン開催しました

3 月 18 日に フロントエンドのコミュニティ「UIT」のミートアップ第 8 弾である、「UIT meetup vol.8 online We Are TypeScritpers!」を開催しました。

今回は UIT meetup としては初となるオンラインでの開催。クラスター株式会社支援のもと、cluster / YouTube Live の 2 つのチャネルにて参加可能となりました。

UIT とは?

UIT は、 LINE のメンバーが中心となって発足した、「User Interface × Technology」を掲げるコミュニティです。 ユーザーの目に見える部分を技術で解決する開発者のための、実践的なコミュニティとして活動。JavaScript だけでなく、また、ユーザーインターフェースだけでもなく、多面的なテーマ設定が特徴となっています。 過去には BFF(Backend for Frontend) のような技術にフォーカスした勉強会や、「わたしたちにとってのVue.js」と題した様々な現場での Vue.js の事例など、トレンドを追いながらも地に足の着いたテーマを多く取り扱っている点も魅力の一つです。