Blog - LINE ENGINEERING

TAG ARCHIVES: frontend

【LINE証券 FrontEnd】コンポーネントをカスタムフックで提供してみた
LINE Engineering2020-07-08
こんにちは。フィナンシャル開発センターの鈴木です。LINE証券のフロントエンドを担当しています。以前の記事でご紹介した通り、LINE証券ではReactを使用しています。React 16.8で導入されたフックの機能は非常に革新的で、特にカスタムフックの概念によってReactにおけるコンポーネント設計は大きく様変わりしました。我々もフック時代のコンポーネント設計を試行錯誤しており、その結果はLINE証券にも反映されています。この記事では、その中でも我々が最近ハマっている「カスタムフックを通じてコンポーネントを提供する」という、いわば“render hooks”とも言うべき設計パターンを紹介します。今回のお題今回は、「いくつかのチェックボックスがあり、全部チェックを入れると次に進める」という典型的なパターンを題材にしましょう。次の画像では3つのチェックボックスと「次へ」ボタンが並んでおり、チェックボックスは2つしかチェックされていないため「次へ」ボタンは非活性化されています。このボタンは、チェックを全て入れると押せるようになります。これを最も
TypeScriptのenumを使わないほうがいい理由を、Tree-shakingの観点で紹介します
Amon Keishima2020-07-03
Front-End engineer at LINE Growth Technology
こんにちは。LINE Growth Technology UITチームの慶島(@pittanko_pta)です。この記事では、TypeScriptのenumを使わないほうがいい理由を、Tree-shakingの観点で紹介します。検証環境 TypeScriptからJavaScriptへのトランスパイルは https://www.typescriptlang.org/play (TypeScript 3.9.2 / targetはESNext) で行いました。 Tree-shaking の挙動については https://rollupjs.org/repl/ にトランスパイルしたJavaScriptコードを貼り付けて検証しました。 Babelを使用したトランスパイルを検証する際には https://babeljs.io/repl (Babel 7.10.3) で行いました。 Tree-shakingとは？本題に入る前に、まずはTree-shakingについて説明します。Tree-shakingとはひとことで言うと、使われてい
All TypeScript で開発したLINEで動くリアルタイムクイズアプリの裏側
LINE Engineering2020-07-01
LINE株式会社フロントエンド開発センター(通称: UIT)の折原です。先日、6月17日に開催した UIT meetup vol.9 で、本編の前にウォームアップとして、フロントエンドに関するクイズ企画を開催しました。そこで使うことを目的として、UIT App という名前で LIFF のアプリを作成しました。 UIT App は LIFF で動作するクイズアプリです。現状クイズだけですが、今後はいろんな取り組みをこのアプリ上で動作させることができるようになっていく予定です。この UIT App を実装するにあたって、フロントエンドでは StencilJS を、サーバーサイドでは NestJS を採用しました。これらを使ってみての所感や、こだわった箇所などを紹介したいと思います！フロントエンドの技術スタックと運用 Stencil Stencil は Web Component・Web アプリを生成するためのコンパイラです。開発をしている Ionic チームではフレームワークではないと強く主張していますが、React や Vue
- frontend
- UIT
UIT meetup vol.9 「The new normal frontend」を開催しました
LINE Engineering2020-06-22
フロントエンドコミュニティ UIT のミートアップ 9 回目は「The new normal frontend」というテーマで 6 月 17 日に開催しました。オンラインで開催する UIT meetup はこれで 2 回目になります。昨今の状況で皆さんの中にも、働き方や生活様式が大きく変わった人も多いんじゃないでしょうか。そんな中、UIT meetup vol.9 ではこの状況下で新しいプロジェクトを完成させた Changhee Kim さん、リモートワークが当たり前な会社で働くための基盤を構築した Lena Morita をゲストにお呼びしてお話していただきました！ UIT とは？ UIT は、 LINE のメンバーが中心となって発足した、「User Interface × Technology」を掲げるコミュニティです。ユーザーの目に見える部分を技術で解決する開発者のための、実践的なコミュニティとして活動。JavaScript だけでなく、また、ユーザーインターフェースだけでもなく、多面的なテーマ設定が特徴となっています。過去には BFF(Backend for
【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を採用しています（プロジェクトによって異なります）。プログラミング言語の選定に関
【Team & Project】LINEのユーザ向けサービスのWebフロントエンドを開発しているチームを紹介します
LINE Engineering2020-05-21
LINE Engineering Blog official account
LINEの開発組織のそれぞれの部門やプロジェクトについて、その役割や体制、技術スタック、今後の課題やロードマップなどを具体的に紹介していく「Team & Project」シリーズ。今回は、フロントエンド開発組織の中で、ユーザ向けサービスのWebフロントエンドを担当しているチームについて紹介します。フロントエンド開発センターの清水大輔、縣亮太、折原レオナルド賢に話を聞きました。ユーザ向けサービスのWebフロントエンドを担当しているチームのzoom会議の様子 ―― まず、自己紹介をお願いします。清水：システム開発会社で図書館システムや金融・物流の開発などを担当した後、2009年5月にネイバージャパン（現LINE）にフロントエンドエンジニアとして入社しました。検索サービスのフロントエンド開発に関わり、LINEアプリの立ち上げ以降は様々なWebサービスのフロントエンド開発や、JavaScript SDKなどのプラットフォーム向けプロダクト開発を担当していました。現在は、フロントエンド開発センターの中にあるUIT1室の室長を務めています。縣：2010年4月に当時のネイバージ
なぜ default export を使うべきではないのか？
Takuma HANATANI2020-05-20
Engineering Manager at LINE Corp. @potato4d
フロントエンド開発センター(通称: UIT)の花谷(@potato4d)です。この記事では、 ESModule の仕様であり、現在の JavaScript を用いた開発で必須である import / export 構文について、 default export ではなく named export を利用すべきである理由について紹介します。前提知識についてなお、本記事は以下を前提知識として、詳細の説明を省きます。 ESModule と import / export についての基本 CommonJS module との違い esModuleInterop 周り(CJS → ESM の import については扱わないため) プロジェクトで使われている技術と ESModule の状況について UIT では、 SPA 開発のプロジェクトにおいて Vue.js と React が多く利用されており、既存の多くは Babel を利用した JavaScript で、新規のプロジェクトでは TypeScript を利用して開発が行われています。 FYI: 【
- frontend
- UIT
- JavaScript
生放送 Podcast「UIT INSIDE Live! vol.1」を配信しました
Akihiro Tamada (spring-raining)2020-05-15
Engineer at Front-End Development Center
5 月 13 日、フロントエンドコミュニティ「UIT」が発信する生放送 Podcast「UIT INSIDE Live! vol.1」を公開しました。この企画は、UIT のメンバーが出演する Podcast「UIT INSIDE」の生配信版として、普段音声だけで公開していたものを発展させ、YouTube Live にてお送りしました。生放送という今まで私たちが取り組んだことのない試みではありましたが、最終的な総視聴者数は 200 人を超え、想定以上の反響をいただきました。今回の配信は、Discord上でパーソナリティーが会話・画面共有を行い、Streamlabs OBSを介してYoutube Liveに配信する、という方式を採用しました。オープニング動画を流したりと、いつものUIT INSIDEと比較するとリッチな演出をできたのでは、と思っています。また、配信スタッフ含めて関係者全員がリモート環境にて参加・運営しました。無事トラブルもなく終えることができ、関係者一同、胸を撫で下ろしています。当日配信した YouTube Live のアーカイブは以下よりご覧いただけます。 U
- frontend
- UIT
UIT meetup vol.8 online 「We Are TypeScripters!」を cluster にてオンライン開催しました
Takuma HANATANI2020-03-24
Engineering Manager at LINE Corp. @potato4d
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 の事例など、トレンドを追いながら

1 2 3 4 5