Blog - LINE ENGINEERING

TAG ARCHIVES: frontend

UIT Meetup vol.17 『もっと好きになる Vue.js』を開催しました
Narumi Koki2022-11-07
Front-End engineer at LINE Growth Technology
10月19日に、フロントエンドコミュニティ UIT の 17 回目となるミートアップ UIT Meetup vol.17『もっと好きになるVue.js』を開催しました。本記事では、イベントの内容について振り返っていきます。なお、本編のアーカイブについては以下の YouTube 動画より閲覧が可能となっております。まだ見ていないかた、見逃したかたはぜひ視聴いただければと思います。本記事では、各セッション紹介でチャプターへのリンクを貼り付けているため、特定のトークから再生を始めることも可能です。 UITとは？ UIT は、 LINE のメンバーが中心となって発足した、「User Interface × Technology」を掲げるコミュニティです。 LINE の東京オフィスのメンバーからはじまったコミュニティですが、現在では外部コミュニティの方々との Podcast での交流、福岡でのミートアップ開催や、その他のフロントエンドイベントとの共催など、LINE に限らない枠組みでフロントエンドコミュニティの活発化を目的として活動しています。ユ
【インターンレポート】Recoilを使った「パフォーマンスランキング」のキャッシュ化
Tomoaki Hirabayashi2022-10-31
Frontendチーム
こんにちは、日本大学工学部2年の平林知明です。8月8日から6週間、LINEの就業型インターンに参加させていただきました。この記事では、今回私が実装した機能と、インターン期間を通じて学んだことについて紹介します。 LINE証券とは？今回、私はLINE証券の開発をしているフィナンシャル開発センター開発1室に所属させていただきました。LINE証券は、LINE証券が提供するスマホ投資サービスです。個人的なおすすめポイントは株を一株単位から購入できて、高額な投資がなかなかできない学生でも始めやすいところです！（私も使っています！！）Frontendチームでは、技術スタックとしてReact+TypeScriptが採用されています。今回行ったこと今回、私はインターンシップの期間で、APIから取得した「運用パフォーマンスの高いユーザのランキング（以下、パフォーマンスランキング）」のデータをブラウザ上に一定期間保存（キャッシュ）することで、読み込みを最適化する機能を実装しました。パフォーマンスランキングとは？パフォーマンスランキングとは、マイページ(ユーザーの運用成績やリアルタイムの取引履歴
- frontend
- line-intern-ja
【登壇・協賛情報】Vue Fes Japan Online 2022
LINE Engineering2022-10-14
LINE Engineering Blog official account
2022年10月16日(日)に開催される、Vue Fes Japan Online 2022にて、LINEはゴールドスポンサーを務めます。本ブログでは、スポンサーセッションの詳細や過去に公開したVueに関連する記事、アフターイベントについてご紹介いたします。ぜひご覧ください。スポンサーセッション紹介 LINE MUSIC のパフォーマンスを向上させた Vue3 マイグレーションみなさんは仕事中などにパソコンで音楽を聴くことはありますか？ LINE MUSIC はスマホアプリだけではなくWeb版アプリがあります。Vue.js を使用している LINE MUSIC のWeb版アプリでは、パフォーマンスの向上を目的に Vue3 へのマイグレーションを行いました。その結果、アプリの読込時間が半分に減少するなど大きな成果が得られました。このセッションでは Vue2 で実装されたプロジェクトを運用されている方に向けて、どういった経緯で Vue3 へのマイグレーションを行う事にし、どのようにして進めたか、そしてマイグレーション前後のパフォーマンスの変化をご紹介します。発表日時：2022
- frontend
- UIT
- Vue.js
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 に限らない枠組みでフロントエンドコミュニティの活発化を目的として活動
2021 LINE NEWS UIT Workshop レポート
Takuya Abe2022-03-09
こんにちは。 LINE フロントエンド開発センターの安部です。私が所属するフロントエンドチームでは月間154億PV(2021年8月時点)の大規模サービスであるLINE NEWSの機能追加・改善に日々取り組んでいます。 LINE NEWSの開発を継続していく中で改善のアイデアや要求は日々蓄積していきます。エンジニアもそれぞれ理想やモチベーションを持って開発を続けていますが稼働中のサービスに対しアーキテクチャやフレームワークの刷新といった大きな変更を伴う改善に着手できる機会はそう多くありません。またLINE NEWSは企画・開発・QAが分業体制になっているため開発側の都合だけでは作業の優先順位付けができず技術的負債が放置されてしまうこともあります。その少ない機会への備えや現実的な制約へのフラストレーション発散の場としてLINE NEWSのフロントエンドエンジニア全員で「LINE NEWSを作り直すなら？」というテーマで各メンバーが抱いている理想や、その理想の実現を阻害する原因について話し合うWorkshopを実施しました。今回の記事ではそのWorkshopの様子を紹介します。多人数チ
- frontend
- UIT
続 LINE 社内用 NPMパッケージの管理戦略
Takayuki Yoshizawa2022-01-28
みなさんこんにちは。UIT Front-end Dev7チームの吉澤です。主にUITが扱う社内サービスやミドルウェアの開発/運用などを行っています。またDev7チームにはLIFF（LINE Front-end Framework）というLINEが使っているフレームワークの開発をしているメンバもいます。他のUITのチームとは一風変わった特徴的なチームです。このチームの業務の1つにUITが管理しているPrivate npm registryの拡張、関連機能開発/運用があります。実はこれに関連した全社的にnpmが使えなくなるという障害が2021/2/15にLINE社内で発生していました。今回はその障害について話しながら私たちUITが管理しているPrivate npm registryについての話を書きます。 Private npm registryについて npm(node package manager)に関して改めて説明の必要はない気がしますが、Private npm registryって何だろう？という疑問は浮かぶかもしれません。文字通りnpm, incが管理している公式のregis
- frontend
- UIT
- npm
2022年におけるフロントエンド開発のベースライン
Alan Davalos2022-01-25
Front-end Engineer - @AlanGDavalos
TL;DR:2022にフロントエンド開発で最も考慮すべきユーザー環境は、パフォーマンスでは低スペックのAndroid端末、標準仕様では2年前のSafari、そしてネットワークでは４Gです。それに対してはJSへの過剰依存などが原因で主にパフォーマンスの面でのウェブ全体の対応がよくありません。こんにちは！LINEフロントエンド開発室のダバロスアランです。この記事のタイトルを見て「釣りタイトルですね〜」と考えている方がいると思いますが今回に限ってはそれを大目に見てください。それはなぜかと言いますと、2021年から2022年にかけて私たちフロントエンドエンジニアが全体的に考え方を改める必要が出るほど大きな変化がありました。その変化とそれに対して私たちフロントエンドエンジニアがちゃんと応えられているかを色々なデータを見て分析したいと思います。 2021年にあった最大の変化 ~ Internet Explorerのリタイア 2021年には色々な変化はありましたがInternet Explorer(以下 IE)がついにリタイアされることになりました。それは2021年5月にMicrosoftが正
- frontend
- UIT
- JavaScript
- CSS
社内のデザイナーの業務をサポートする LDSG Figma Plugin の工夫したところ、ハマりどころ
Amon Keishima2022-01-25
Front-End engineer at LINE Growth Technology
こんにちは！LINE Growth Technology UITチームの keishima です。普段はフロントエンドエンジニアとして LINEポイントクラブの開発に携わっています。本記事では、 UIT 新春 Tech blog 5日目として、社内向けに作った Figma プラグインの技術的な面にフォーカスした記事をお届けします。Figma プラグインを作った背景や、プラグインの機能紹介は、同時に公開したこちらの記事をご覧ください。（先にそちらを読むのがおすすめです！） Figma プラグインとは？どうやって作るの？みなさんは Figma を使ったことはありますか？ Figma とは UI デザインを行うためのツールで、類似のものに Adobe XD や Sketch などがあります。Figma はWeb ベースで作られたツールであるため、アプリをインストールしなくてもブラウザから利用することができます。また、ユーザー自身でプラグインを作成することも可能で、コミュニティでも多くのプラグインが公開されています。 Figma 自身と同じように、プラグインも Web ベースで構

1 2 3 4 5