Blog - LINE ENGINEERING

TAG ARCHIVES: frontend

制作現場におけるビジュアルリグレッションテストの導入 - 「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
デコレータ使わない Vue.js + TypeScript で進んだ「LINEのお年玉」キャンペーン
LINE Engineering2020-01-20
皆さん、こんにちは。LINEでフロントエンド開発を担当しているUIT1室のシュウと申します。今回、年に一度の企画「LINEのお年玉」キャンペーンにて JavaScript の部分を担当させていただきました。LINEのお年玉は多くのトラフィックが流れる大規模かつ短期間の企画となります。技術的な挑戦をするためのプロジェクトとしてもちょうど良いサイズ感であったため、今回多くの挑戦を行いましたので、連載形式で紹介していければと思います。初回である今回は、Vue.js と TypeScript を併用した開発についてです。なぜ TypeScript を使うのか？これまで LINE のプロジェクトでは、JavaScript をメインの言語としてフロントエンド開発を行ってきました。ですが、時代の流れもあり、現在では新規プロジェクトの多くが TypeScript を採用しています。月並みですが、今回 Vue + TypeScript を採用した理由としては以下となります。 LINE の UIT では Vue.js が最も多く使われている(参考: LINE
- frontend
- UIT
- TypeScript
LINE×DeNAによるフロントエンドイベント「FROKAN × UIT #2 年忘れLTバトル」を開催しました
Takuma HANATANI2020-01-07
Engineering Manager at LINE Corp. @potato4d
12月18日、LINE新宿オフィスにて、「FROKAN × UIT #2」を開催いたしました。本イベントは、DeNA 主催のフロントエンドイベント「Frontend de KANPAI!(FROKAN)」と、弊社メンバーが中心となっているフロントエンドイベント「UIT」のコラボレーション企画です。第二回は UIT が主辞となり、FROKAN の運営メンバーを招待する形で開催いたしました。前回のブログ: https://engineering.linecorp.com/ja/blog/frokan-uit-1-report/ UIT とは？ UIT は、 LINE のメンバーが中心となって発足した、「User Interface × Technology」を掲げるコミュニティです。ユーザーの目に見える部分を技術で解決する開発者のための、実践的なコミュニティとして活動。JavaScript だけでなく、また、ユーザーインターフェースだけでもなく、多面的なテーマ設定が特徴となっています。過去には BFF(Backend for Frontend) の
- frontend
- UIT
- meetup
【LINE DEV DAY 2019 番外編】UIT Front-end Tooling Survey 2019
Akihiko Okazaki2019-12-16
Front-end Engineer
こんにちは。UIT1室 Front-end Standardization Team 岡崎です。LINE DEV DAY 2019ではデザインシステムにおけるフロントエンドについて発表させて頂きました。今回は番外編として、セッションの冒頭で一部紹介したフロントエンド開発組織UITにおけるFront-end Tooling Survey 2019の結果を全て公開します。 DEV DAYで発表したデザインシステムに関する話題ではありませんのでご了承ください。登壇資料 Front-end Tooling Survey とは？ Ashley Nolanさんが毎年開催しているフロントエンド周辺のツールに関するアンケート調査です。グローバルで毎年3,000-5,000人規模のエンジニアが、この調査に参加しています。同じ内容の調査をLINEのフロントエンドエンジニアに対して行ったのが、UIT Front-end Tooling Surveyです。2018年から実施して今年で2回目になります。メンバーとプロジェクトが増えるにつれ多様化するスキルと開発環境、これらを把握する良い機会と捉え
- frontend
- UIT
Vue.jsコアメンバーとの社内交流会を開催しました
Teppei Miki2019-11-06
Developer Relations Team, LINE Corporation.
Developer Relations室の三木です。 10月11日に、LINEの新宿オフィスにVue.jsのコアメンバーの方々をゲストとしてお招きして、LINEのフロントエンドエンジニアとの簡単な交流会（meet-and-greet）を行いました。その様子を写真を中心にご紹介します。 LINEのフロントエンド組織について LINEには、各サービスのUIやアプリ内のWebViewを含めたフロントエンド全般の実装を担当している、フロントエンド開発センター(通称: UIT)という開発組織があります。東京をはじめ、福岡、京都、韓国、台湾など多くの拠点で、たくさんのエンジニアで構成されています。常に新しいフロントエンド技術と接点を持ちながら働いており、Vue.js、React、AngularJSなどのフレームワークをサービスに合わせて自由に選定して使っています。今回のVue.jsコアメンバーの来訪は、先方からの希望で実現することができたのですが、普段からVue.jsを業務で活用しておりその動向に関心が高いLINEのフロントエンドエンジニアにとって、非常に刺激的な機会となりました。当日の模様
- frontend
- UIT
- Vue.js
【インターンレポート】LINEクーポンの新機能対応 & UIT Global Workshop
Kuramoto Ryo2019-10-17
こんにちは、倉本涼です。サマーインターンシップのエンジニア職就業コースに、8/13~9/13の一ヶ月間参加しました。今回、フロントエンドエンジニアとしてチームに所属し、実際の社員と同様に業務に取り組みました。また、インターン期間中に開催された、UIT Global Workshopにも参加しました。ここでは、それらの内容を紹介します。業務概要私は実際に利用されているBtoCのサービスの開発を希望し、その結果「LINEウォレット」のフロントエンドチームに配属され、「LINEクーポン」の新機能対応を行いました。 LINEウォレットは、LINEアプリを開いて下部メニューの一番右のタブをタップすると開きます。さらに、クーポンボタンを押すとLINEクーポンを利用できます。LINEクーポンでは、全国のファストフードやレストランなど、様々なお店のクーポンを簡単に利用できます。今回は、以下のLINEクーポンで今後リリースされる予定の新機能について、フロントエンド側の対応を行いました。 * LINE カタリナクーポン* お気に入り機能 - LINE カタリナ
株式会社ディー・エヌ・エーとの共催イベント「FROKAN × UIT #1」を開催しました
Takuma HANATANI2019-10-07
Engineering Manager at LINE Corp. @potato4d
9月27日、渋谷ヒカリエ DeNA オフィスにて「FROKAN × UIT #1」を開催いたしました。本イベントは、DeNA 主催のフロントエンドイベント「Frontend de KANPAI!(FROKAN)」と、弊社メンバーが中心となっているフロントエンドイベント「UIT」のコラボレーションイベントです。記念すべき第一回は Frontend de KANPAI! に招かれる形で、UIT がゲストとして登壇しました。 UIT とは？ UIT は、 LINE のメンバーが中心となって発足した、「User Interface × Technology」を掲げるコミュニティです。ユーザーの目に見える部分を技術で解決する開発者のための、実践的なコミュニティとして活動。JavaScript だけでなく、また、ユーザーインターフェースだけでもなく、多面的なテーマ設定が特徴となっています。過去には BFF(Backend for Frontend) のような技術にフォーカスした勉強会や、「わたしたちにとってのVue.js」と題した様々な現場での V
- frontend
- UIT
- meetup
Front-end開発組織によるUIT Global Workshop 2019 レポート編
Akinori Inoue2019-10-04
こんにちは、フロントエンド開発センターUIT1室 Dev1チームの井上です。私たちのチームはLINE NEWSのフロントエンド開発を担当しています。LINE NEWSを含めLINEでは多くのサービスを提供していますが、それに伴い開発者やチームも多くなります。よくある質問に「LINEはどういった技術を利用して開発をしていますか？」というものがありますが、開発環境や開発フローなどはチームによって千差万別です。また、チームによって所属するオフィスや国も異なります。そのためチーム内で十分な情報共有ができない場合もあります。そのような中、9月に社内の情報共有を目的として「UIT Global Workshop 2019」が開催されました。本イベントには日本、韓国、台湾、ベトナムといった様々な拠点に所属するフロントエンジニア130名が一同に会し、各セッションを通じてプロジェクトの開発内容やノウハウなどを共有しました。そこで本ブログでは、日本と韓国のエンジニアが2回に渡ってイベントの様子をレポートしたいと思います。会場は韓国にあるNAVERが保有する施設Connect Oneで、自然豊かな環境で
- frontend
- UIT
LINE新卒エンジニアのしごと〜5月のフロントエンドエンジニア編〜
Taiga Nishiyama Akihiro Tamada2019-06-28
LINEには、今年33名の新卒エンジニアが入社しています。この連載では、新卒で入社したエンジニアがどのように働き始め、どのような仕事をしているのかを月に1回程度の持ち回りで紹介してもらいたいと思います。2019年入社の1回目は、LINEのフロントエンド部門であるUIT室に所属している西山さんと玉田さんに、UIT室での仕事の始め方や最初にやった仕事、普段の業務を紹介してもらいました。新卒フロントエンドエンジニアがチームに配属されてから仕事をするまでこんにちは。私はLINEのフロントエンド開発を行うUIT室に所属している2019年新卒の西山です。私はUIT室の中でもFront-End Dev3チームという主にLINE NEWSやLINE LIVEのフロントエンド開発を行っているチームに所属し、今はLINE NEWSの開発を行っています。この記事では、約2ヶ月の研修を終えたLINEの新卒エンジニアが実際に部署・チームに配属されてから、最初にどういった仕事に取り組んできたのかについてご紹介します。本当に配属されて間もなく、現在進行系の内容となりますが、少しでも雰囲気を伝えられればと思いま
- frontend
- UIT
- newgrads