Blog - LINE ENGINEERING

TAG ARCHIVES: UIT

UIT 発の OSS コンポーネント glitch-image を公開しました
LINE Engineering2020-09-16
LINE株式会社フロントエンド開発センター(通称: UIT)の折原です。先日 glitch-image という画像にオシャレなエフェクトをかけられる Web Component を公開しました。今回は使い方はもちろんのこと、このようなコンポーネントができるまでを紹介していきます。 glitch-image とは glitch-image は src="..." に画像の URL を指定することによって、画像にグリッチエフェクトをかけることができる Web Component です。もともと UIT App のためだけに作成されたコンポーネントでした。UIT App についての詳細はこちらの記事をご覧ください。ですが、開発後に <img> タグと同じインターフェースで利用できて気軽におしゃれなエフェクトをかけることができること。そして UIT App が StencilJS を採用していることで、ローコストで切り出してパッケージ化できることから、単体で OSS として提供することとしました。https://www.npmjs.com/package
- frontend
- UIT
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
【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 の事例など、トレンドを追いながら
制作現場におけるビジュアルリグレッションテストの導入 - 「LINEのお年玉」4年目の挑戦
LINE Engineering2020-03-05
はじめにみなさんこんにちは。LINEのフロントエンドエンジニアの藤井です。年末年始に実施した「LINEのお年玉」キャンペーンも今年で４回目の実施となりました。今年は過去４年で経験した様々な反省点を振り返り、様々な改善を行いました。今回はそのなかの一つである「ビジュアルレグレッションテスト」の実施についてご紹介します。この記事では、ビジュアルレグレッションテストを運用していく上で工夫したことや、得られた知見などを共有したいと思います。案件の特徴を紹介まずは「LINEのお年玉」キャンペーンの特徴をご紹介します。デコレータ使わない Vue.js + TypeScript で進んだ「LINEのお年玉」キャンペーンや「LINEのお年玉」におけるフロントエンドでの UX へのこだわりでも紹介されていますが、毎年年末年始に行われるキャンペーンとして、トラフィックが多いアプリケーションを、短期間で制作することが求められる案件となります。 LINE のフロントエンドでは一つの Web サービスとして成り立つ SPA を組むことが多いです。それに加えてこのプロジェクトでは以下のような特徴がありま
- frontend
- UIT
「LINEのお年玉」におけるフロントエンドでの UX へのこだわり
LINE Engineering2020-01-31
皆さん、こんにちは。LINEでフロントエンド開発を担当しているシュウと申します。昨年末に、年に一度の企画「LINEのお年玉」キャンペーンにて JavaScript の部分を担当させていただきました。そこで、今回は、前回の記事に引き続き、「LINEのお年玉」での実装の裏側について紹介いたします。今回は、小さいながらもアプリケーションの品質を大きく上げる、こまかな UX 向上施策について紹介したいと思います。ローディングのストレス低減施策初期ローディング時の Splash Screen の実装今回はプロジェクト発足の段階で Progessive Loading の考えを取り入れ、コンテンツを段階的に読み込むすることを前提として設計しました。しかし、UI 上どうしてもまとめて表示する必要のあるコンテンツもあります。今回でいうと、お年玉のメイン画面がそれにあたります。通常、 Progressive Loading を取り入れることで、段階的な表示を踏んで読み込みのストレスを軽減できますが、まとめて表示する場合にはそうはいきません。今回は、この問題の対処方法と
- frontend
- UIT

1 2 3 4 5