Blog - LINE ENGINEERING

TAG ARCHIVES: JavaScript

UIT Meetup vol.20『これがぼくらのスタンダード』を開催しました
Takuma HANATANI2023-09-12
Engineering Manager at LINE Corp. @potato4d
9月8日に、フロントエンドコミュニティ UIT の20回目となるミートアップ UIT Meetup vol.20『これがぼくらのスタンダード』を開催しました。本記事では、イベントの内容について振り返っていきます。なお、本編のアーカイブについては以下の YouTube 動画より閲覧が可能となっております。まだ見ていないかた、見逃したかたはぜひ視聴いただければと思います。本記事では、各セッション紹介でチャプターへのリンクを貼り付けているため、特定のトークから再生を始めることも可能です。 YouTube: https://www.youtube.com/watch?v=kNvXW2gqOfA UITとは？ UIT は、 LINE のメンバーが中心となって発足した、「User Interface × Technology」を掲げるコミュニティです。 LINE の東京オフィスのメンバーからはじまったコミュニティですが、現在では外部コミュニティの方々との Podcast での交流、福岡でのミートアップ開催や、その他のフロントエンドイベン
2023年にパララックスをCSS、JS、Vue3で実装！LINEポイント10周年記念サイトの実装例
Shoyo Kyo2023-07-04
Front-end Engineer
LINE株式会社 UIT3室 Front-end Dev3チームに所属しているキョウショウヨウです。 2023年6月20日に「LINEポイント10周年記念サイト」を公開しました。このサイトはパララックスデザインが採用されたLPです。今回はライブラリを使わずにパララックスデザインをCSS、JS、Vue3で実装する作り方について説明します。 LINEポイント10周年記念サイト※ 期間限定公開のため、2023年8月以降は見れない可能性があります。 LINEポイント10周年記念サイトでは3つの大きな取り組みをしています。 SNSシェア時に利用する、OGP画像の大量生成ツール & 生成APIの作成 Nuxt3を利用した、SSR、SSGハイブリットアプリの開発パララックスデザインの実装今回は3番の、Vue3（Nuxt3）で作成したLPにパララックスデザインを導入するための作り方についてお話します。私、個人としては7年ぶりにLP開発をおこないました。今回改めてパララックスデザインの実装方法について調査をおこなったのですが、フロントエンド技術の進化を感じる事ができました
アプリケーションコードに変更を加えないNode.js Native ESMへの移行
Konosu Kazushi2023-05-25
Front-end Engineer
はじめにこんにちは。フロントエンド開発センター(UIT) Front-end Dev.9チームの鴻巣(@kazushikonosu)です。LINEスキマニおよびLINE Creators Marketのフロントエンド開発を担当しています。 LINEスキマニのフロントエンドチームでは、React/TypeScript製のWebアプリを開発しています。主にクライアントサイド向けのコードを扱っていますが、SSRのため同じリポジトリ内でNode.jsを使って実行されるTypeScriptコードも扱っています。クライアントサイドのモジュールバンドラとして長らくwebpackが使われていましたが、webpackを使い続けることでチームのパフォーマンスに影響する二つの問題に直面していました。ひとつめは、開発環境におけるビルドパフォーマンスの問題です。webpackが差分が発生するたびに全体のビルドとバンドルを行うアプローチを採用している以上、開発時のビルド時間は遅くなってしまいます。ふたつめは、ビルド環境の設定のメンテナンスコストの問題です。さまざまな要件に対応するため、これまでの開発を通して長
UIT Meetup vol.19『デザインシステムのリアル』を開催しました
odan2023-03-24
Front-end Dev2チーム
3月15日に、フロントエンドコミュニティ UIT の19回目となるミートアップ UIT Meetup vol.19『デザインシステムのリアル』を開催しました。本記事では、イベントの内容について振り返っていきます。なお、本編のアーカイブについては以下の YouTube 動画より閲覧が可能となっております。まだ見ていないかた、見逃したかたはぜひ視聴いただければと思います。本記事では、各セッション紹介でチャプターへのリンクを貼り付けているため、特定のトークから再生を始めることも可能です。 YouTube: https://www.youtube.com/watch?v=poMrzn_2wLY UITとは？ UIT は、 LINE のメンバーが中心となって発足した、「User Interface × Technology」を掲げるコミュニティです。 LINE の東京オフィスのメンバーからはじまったコミュニティですが、現在では外部コミュニティの方々との Podcast での交流、福岡でのミートアップ開催や、その他のフロントエンドイベントとの共
LINE NEWS フロントエンドの自動テストの改善
Naoto Ikuno2023-02-24
Web Front-end Engineer
この記事は UIT 新春 Tech blog 2023 4日目の記事です。こんにちは。LINEフロントエンド開発センターの幾野(ikuno)です。普段は LINE NEWS のフロントエンド開発をしています。 LINE NEWS では昨年テストをたくさん書いた昨年 LINE NEWS ではたくさんテストを書きました。当初 78 ファイルだったテストファイルは半年で 150 ファイルに倍増しました。テストカバレッジも statements 33.6% から 64.4% まで改善しました。昨年当初のテストカバレッジ現在のテストカバレッジ今回はどういったテストを書いたらうまくいったかについて書いていきます。テストは意図しない breaking changes を防ぐために書くそもそも、なぜテストを書くのでしょうか? 筆者は、テストは意図しない breaking changes を防ぐために書くと思っています。もし意図しない breaking changes が起きたら一番に影響を受けるのはユーザーです。また、
- frontend
- UIT
- JavaScript
- test
LINEドクターフロントエンド開発の流れ
Youngjin Jang2023-02-21
Web Front-end Engineer
こんにちは。LINEフロントエンド開発センターのYoungjin Jangです。この記事ではオンライン診療サービスLINEドクターの概要と、フロントエンド開発の流れについて紹介します。LINEドクターは2020年リリースし、医師と患者の距離を縮めることを目指してサービスを展開しています。多くのユーザーのコミュニケーションを支えるLINEだからこそできるオンライン診療サービスの特徴と、その開発の様子を、この機会に是非知っていただければと思います。こちらがLINEドクターの入口となる画面です。ここからエンドユーザーはオンライン診療を申し込んだり、薬の配送を申し込んだりします。オンライン診療の予約が確定すると、ユーザーはLINEでのビデオ通話を使って診療を受けます。予約し、受診し、薬を受け取るまでをLINEを通して完結することができるサービスです。 LINEドクターのフロントエンド開発は、概ね下記のような流れになります。バージョンごとに企画からデプロイまでをワンサイクルで開発します。各段階でフロントエンドエンジニアが何をしているのか、今からお話しします。企画・デザイン新規機能に
UIT Meetup vol.18 『俺たちが考える最強のパフォーマンス・チューニング』を開催しました
LINE Engineering2022-12-23
12月14日に、フロントエンドコミュニティ UIT の 18 回目となるミートアップ UIT Meetup vol.18『俺たちが考える最強のパフォーマンス・チューニング』を開催しました。本記事では、イベントの内容について振り返っていきます。なお、本編のアーカイブについては以下の YouTube 動画より閲覧が可能となっております。まだ見ていないかた、見逃したかたはぜひ視聴いただければと思います。本記事では、各セッション紹介でチャプターへのリンクを貼り付けているため、特定のトークから再生を始めることも可能です。 YouTube: https://youtube.com/live/M8TeRB_DT0E UITとは？ UIT は、 LINE のメンバーが中心となって発足した、「User Interface × Technology」を掲げるコミュニティです。 LINE の東京オフィスのメンバーからはじまったコミュニティですが、現在では外部コミュニティの方々との Podcast での交流、福岡でのミートアップ開催や、その他のフロン
- frontend
- UIT
- JavaScript
LINE MUSIC のパフォーマンスを向上させた Vue3 マイグレーション
Shibasaka Hiroyuki2022-08-09
Front-end Engineer at LINE KYOTO
こんにちは、LINEの京都開発室でフロントエンド開発を担当している柴坂浩行です。みなさんは仕事中などにパソコンで音楽を聴くことはありますか？ LINE MUSIC にはスマホアプリだけではなくWeb版アプリがあります。私たちが開発しているWeb版アプリでは、JSフレームワークとして Vue.js を使用しています。 https://music.line.me/webapp/ これまでこのWeb版アプリには Vue2 が使われてきましたが、2022年6月、私たちは Vue3 にアップグレードしたバージョンをリリースしました。私たちのチームではWeb版アプリの機能開発と平行して、パフォーマンスの改善にも取り組んでいます。パフォーマンスといっても様々な側面がありますが、その中でもバンドルサイズの肥大化が大きな課題でした。アプリを構成する js と css のバンドルサイズは6MB。Sentry というモニタリングツールでWeb版アプリへのアクセスを計測すると、表示に2秒以上かかっているアクセスが約半数に達していました。私たちはリファクタリングを進め、依存パッケージの整理を行うなどサイ
UIT Meetup vol.16 『ちゃんとやってる？アクセシビリティ』を開催しました
Amon Keishima2022-07-19
Front-End engineer at LINE Growth Technology
7月1日に、フロントエンドコミュニティ UIT の 16 回目となるミートアップUIT Meetup vol.16 『ちゃんとやってる？アクセシビリティ』を開催しました。本記事では、イベントの内容について振り返っていきます。なお、本編のアーカイブについては以下の YouTube 動画より閲覧が可能となっております。まだ見ていないかた、見逃したかたはぜひ視聴いただければと思います。本記事では、各セッション紹介でチャプターへのリンクを貼り付けているため、特定のトークから再生を始めることも可能です。 UITとは？ UIT は、 LINE のメンバーが中心となって発足した、「User Interface × Technology」を掲げるコミュニティです。 LINE の東京オフィスのメンバーからはじまったコミュニティですが、現在では外部コミュニティの方々との Podcast での交流、福岡でのミートアップ開催や、その他のフロントエンドイベントとの共催など、LINE に限らない枠組みでフロントエンドコミュニティの活発化を目的として活動しています。ユーザーの目
UIT Meetup vol.15 『Relearn Modern Web Standard』を開催しました
Takuma HANATANI2022-03-31
Engineering Manager at LINE Corp. @potato4d
3月25日に、フロントエンドコミュニティ UIT の 15 回目となるミートアップ「UIT Meetup vol.15 『Relearn Modern Web Standard』」を開催しました。本記事では、イベントの内容について振り返っていきます。なお、本編のアーカイブについては以下の YouTube 動画より閲覧が可能となっております。まだ見ていないかた、見逃したかたはぜひ視聴いただければと思います。本記事では、各セッション紹介でチャプターへのリンクを貼り付けているため、特定のトークから再生を始めることも可能です。 UITとは？ UIT は、 LINE のメンバーが中心となって発足した、「User Interface × Technology」を掲げるコミュニティです。 LINE の東京オフィスのメンバーからはじまったコミュニティですが、現在では外部コミュニティの方々との Podcast での交流、福岡でのミートアップ開催や、その他のフロントエンドイベントとの共催など、LINE に限らない枠組みでフロントエンドコミュニティの活発化を目的として活動

1 2