Blog - LINE ENGINEERING

TAG ARCHIVES: frontend

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
静的リソースをCDN配信する社内サービス『Abyss』のフロントエンドを作り直した話
Shirahata Keito2023-02-22
Front-end Engineer
こんにちは、LINEフロントエンド開発センターDev7チームの白畑です。主にUITで使用している社内サービスの新規開発から運用・保守等を行なっています。この記事ではDev7チームが開発・運用しているAbyssと呼ばれる社内システムのフロントエンドを作り直した話をしたいと思います。画期的なCDNデプロイツール「Abyss」 LINEは様々なサービスを展開しており、それらのプロジェクトで個別にCDN配信を行なってしまうと以下のような問題があります。・リソースの管理がしづらい・独自の配信基盤が乱立する・独自の配信基盤を構築するための開発・運用コストがかかる・プロジェクトメンバーが参加した際や異動した際に学習コストがかかるこのような問題をなくすため、CDN配信の標準サービスとしてAbyssが誕生しました。開発者は以下の最低2つの手順のみで静的リソースをCloudFrontで配信することができます。 1. Abyssのフロントエンド(Orth)でプロジェクトを作成2. AbyssのCLI(reg)を使ってローカル環境もしくはCI上からリソースをアップロード構成 Abyssは3つの
- frontend
- UIT
LINEドクターフロントエンド開発の流れ
Youngjin Jang2023-02-21
Web Front-end Engineer
こんにちは。LINEフロントエンド開発センターのYoungjin Jangです。この記事ではオンライン診療サービスLINEドクターの概要と、フロントエンド開発の流れについて紹介します。LINEドクターは2020年リリースし、医師と患者の距離を縮めることを目指してサービスを展開しています。多くのユーザーのコミュニケーションを支えるLINEだからこそできるオンライン診療サービスの特徴と、その開発の様子を、この機会に是非知っていただければと思います。こちらがLINEドクターの入口となる画面です。ここからエンドユーザーはオンライン診療を申し込んだり、薬の配送を申し込んだりします。オンライン診療の予約が確定すると、ユーザーはLINEでのビデオ通話を使って診療を受けます。予約し、受診し、薬を受け取るまでをLINEを通して完結することができるサービスです。 LINEドクターのフロントエンド開発は、概ね下記のような流れになります。バージョンごとに企画からデプロイまでをワンサイクルで開発します。各段階でフロントエンドエンジニアが何をしているのか、今からお話しします。企画・デザイン新規機能に
Git submoduleを使ってマルチリポジトリなMonorepoを管理する
Akihiro Tamada (spring-raining)2023-02-20
Engineer at Front-End Development Center
こんにちは、LINEフロントエンド開発センターの玉田です。新春を名乗るにはすこし遅いですが、昨年開催した「UIT新春Tech blog」を今年も開催します！本日から5日間4日間、フロントエンド開発に携わるUITのエンジニアが毎日持ち回りで記事を公開します。ぜひ最後まで見に来てください。 Monorepo フロントエンドにおけるMonorepo toolは、大規模なフロントエンド開発を効率よく管理する手段として、ここ数年で普及が進みました。LernaやNx、npmやyarnのWorkspace機能など、すでに皆さんも使っている例があるかもしれません。 Monorepoを実現するツールはいくつかありますが、どのツールも共通して以下のような特徴を持っています。 package.jsonを持つnpm packageを一単位として、複数のパッケージが一つのGitリポジトリに存在する[^1] 各パッケージの依存関係を記述することで、Monorepo toolが内部で依存グラフを作成して効率よくビルドを実行する一部のMonorepo toolは、パッケージのバージョニングなどリリースのためのツ
- frontend
- UIT
UIT Survey 2022 実施レポート
Konosu Kazushi2023-01-26
Front-end Engineer
はじめにこんにちは。フロントエンド開発センター(UIT) Front-end Dev. 9チームの鴻巣です。普段はLINEスキマニおよびLINE Creators Marketのフロントエンド開発を担当しています。 UITでは社内のフロントエンドエンジニアのトレンドや周辺ツールの利用状況を調査するため、毎年社内に向けてアンケート「UIT Survey」を実施しています。Ashley Nolanさんが実施しているFront-end Tooling Surveyをベースに2018年からはじまり、今回で5回目の実施となりました。11月に実施した2022年のアンケート結果を紹介します。概要・対象: 海外拠点を含むLINEのフロントエンドエンジニア（回答者は日本、韓国、ベトナム、タイの組織に所属）・7割程度の回答者が日本を拠点とするエンジニア・質問および回答の言語: 英語・回答期間: 2022/11/22-2022/11/30・回答者数: 123名結果・LINEのフロントエンドエンジニアについて・CSS/UI Frameworkについて・JavaScriptおよび
- frontend
- UIT
- Survey
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

1 2 3 4 5