Blog - LINE ENGINEERING

TAG ARCHIVES: frontend

Bootstrap5がリリースされました！
Akihiko Okazaki2021-05-12
Front-end Engineer
はじめにこんにちは。フロントエンド開発センター(UIT) 岡崎です。 LINEはBootstrapを応援しており、2021年5月からはSponsorも行っています。また、OSS貢献の一環としてBootstrap日本語リファレンスの翻訳・運営も担当しています。 Bootstrap4正式公開から3年4ヶ月、2021年5月5日に待望のBootstrap5正式版がリリースされました！今回はバージョン4からの変更点をチェック、公式Blog記事(英語)を日本語に翻訳して紹介していきます。関連する過去の記事 Bootstrap5 alpha1 vs beta1 UIT Front-end Tooling Survey 2020 UIT Front-end Tooling Survey 2019 LINEはなぜデザインシステムを取り入れたのか？ LINEのフロントエンド開発を支える「UIT」の仕事バージョン4から5への変更点 v4とv5の比較比較項目 v4.x v5.x RTL対応非対応対応 RFS(標準) 無効有効 JSライブラリ jQuery 3.x なし
- frontend
- UIT
- CSS
UIT Meetup vol.12「リニューアル戦略発表会」を開催しました
Takuma HANATANI2021-03-19
Engineering Manager at LINE Corp. @potato4d
3月10日に、フロントエンドコミュニティ UIT の 12 回目となるミートアップ「UIT meetup vol.12『リニューアル戦略発表会(一部から全部まで)』」を開催しました。今回の UIT meetup では、『リニューアル・リプレース』をテーマに、3名の登壇者によるセッションをお送りしました。 UITとは？ UIT は、 LINE のメンバーが中心となって発足した、「User Interface × Technology」を掲げるコミュニティです。 LINE の東京オフィスのメンバーからはじまったコミュニティですが、現在では外部コミュニティの方々との Podcast での交流、福岡でのミートアップ開催や、その他のフロントエンドイベントとの共催など、LINE に限らない枠組みでフロントエンドコミュニティの活発化を目的として活動しています。ユーザーの目に見える部分を技術で解決する開発者のための、実践的なコミュニティとして活動。現在は UIT meetup の開催以外にも、LINE Engineer Blog での記事の公開や、Podcas
【LINE証券 Frontend】requestIdleCallbackを活用して初期レンダリング時間を約14%削減した話
LINE Engineering2021-02-17
こんにちは。フィナンシャル開発センターの鈴木です。LINE証券のフロントエンドを担当しています。この記事は【LINE証券 FrontEnd】シリーズの4番目の記事です。最近のWeb Vitalsの隆盛を受けて、LINE証券のフロントエンドでもパフォーマンスの改善に取り組み始めました。およそ2週間ほど改善に取り組んだ結果として、開発環境での計測ではLighthouseのperformanceスコアが従来より30点ほど上昇しました。パフォーマンス改善のためにさまざまな施策を行いましたが、この記事ではその中でも興味深かったものとして、requestIdleCallbackを活用してLazy Loadingされるコンポーネントの読み込みを遅延し、その結果初期レンダリングにかかる時間を約14%削減できた事例をご紹介します。環境以前の記事でご紹介したとおり、LINE証券のフロントエンドはTypeScript + Reactで作られています。また、JavaScriptバンドルをwebpackで生成しています。今回の話で関連が深いのはReactとwebpackです。実際の環境はReact
TypeScriptの導入にあたって考慮すべきメリットとコスト
Ting-Shu Lin2021-01-26
皆さんこんにちは。京都開発室のLinです。仕事と個人的なプロジェクトでTypeScriptによる開発を始めて約2年が経ちましたので、 TypeScript導入時の経験を皆さんにお話ししたいと思います。近年、TypeScriptはフロントエンド分野で最も注目を集める技術となっています。The State of JavaScriptの資料によれば、TypeScriptの使用を選択する開発者は増加を続けており、その評価も肯定的なものが多いようです。「次のプロジェクトではTypeScriptにより開発を行うべきだ」「今あるJavaScriptプロジェクトをTypeScript仕様に変更すれば、プロジェクト品質の向上につながる」と考えているチームは数多くあるでしょう。しかしながら、TypeScript導入のコストおよびメリットについては、極めて慎重に評価を行う必要があると、私は考えています。 TypeScriptの導入に必要なコストを軽視してはならないこれまでの個人的な経験からすれば、TypeScriptに習熟した後の開発効率は、JavaScriptを使用する場合とほとんど変
- frontend
- UIT
- TypeScript
Bootstrap5 alpha1 vs beta1
JuYoung Lee2021-01-21
はじめにみなさん、こんにちは。UIT室DEV8チームで、フロントエンド開発を担当しているイジュヨンと申します。 2020年6月17日 Bootstrap5 alpha1 版が公開されてからついに、2020年12月７日、Bootstrap5 beta1 が公開されました！！！ LINE では Bootstrap4 をベースとした管理画面向けの koromo と Bootstrap5 をベースとした社内プロダクト向けの UIT Toolkit "Astro" を開発しています。今回は alpha1 と beta1(alpha2, alpha3含め) の差についてざっくり紹介します。alpha1 から beta1 への変更点としては下記のようです。 RTL(right-to-left) Renamed classes for logical properties Color system States in the utilities API JavaScript Evolution of Position utilities Added
- frontend
- UIT
- Bootstrap5
UIT Front-end Tooling Survey 2020
Akihiko Okazaki2021-01-13
Front-end Engineer
はじめにこんにちは。フロントエンド開発センター(UIT) 岡崎です。 UITでは毎年、フロントエンド周辺のツールに関する社内向けアンケート『UIT Front-end Tooling Survey』を行っています。Ashley Nolanさんが実施しているFront-end Tooling Surveyをベースにアレンジしたものです。2018年から実施して今回で3回目、2020年の結果を2019年と比較する形で紹介します。 2020年・調査結果 0.Voters 2019 2020 55 66 対象はフロントエンドエンジニア LINE(東京・京都), LINE Fukuoka, LINE Growth Technology, LINE Plus 日本, 韓国, 台湾, ベトナム 2020年8月時点 1.General Front-end Experience Roughly how long have you been working with front-end technologies? 開発経験年数のボリュームゾーンが「2
- frontend
- UIT
- Survey
UIT Meetup vol.11「フロントエンド紅白LT合戦」を開催しました
Hiroki Sueishi2021-01-05
12月18日に、フロントエンドコミュニティ UIT の 11 回目となるミートアップ「フロントエンド紅白LT合戦」を開催しました。今回の UIT meetup では、紅組としてUITのメンバー3名と、白組としてゲストスピーカー3名をお招きして、3つのテーマについて10分間ずつのLTを行っていただきました。その後、視聴いただいた皆様に、2021年で使ってみたい技術は紅組白組どっち？という投票を行っていただくインタラクティブな会となりました。 UITとは？ UIT は、 LINE のメンバーが中心となって発足した、「User Interface × Technology」を掲げるコミュニティです。ユーザーの目に見える部分を技術で解決する開発者のための、実践的なコミュニティとして活動。現在は UIT meetup の開催以外にも、Engineering Blog での記事の公開や、Podcast「UIT INSIDE」を配信しています。過去にはVue.jsの最新情報をキャッチアップする「Vue三昧」、昨今のワークスタイルの変化とエンジニアとの関係について考える「Th
【インターンレポート】LINE証券アプリのパフォーマンス改善
LINE Engineering2020-10-30
こんにちは。京都大学工学部情報学科の太田(@ten986)です。技術職就業型コースのインターンシップに参加しました。インターンでは、フィナンシャル開発センターWeb開発室Front-endチームに所属し、LINE証券アプリのパフォーマンス改善をしました。この記事ではインターン期間中の成果を紹介します。 LINE証券のパフォーマンス改善 LINE証券について LINE証券は、LINEアプリ内にあるネット証券サービスです。このアプリは React + TypeScript で実装されています。計測方法パフォーマンスの計測にはChromeのDevtoolを用います。Performanceタブにて、遅い端末を想定したスロットリングを適用して動作させたり、Profileを取ったりすることができます。今回の計測では、以下の設定を用いました。CPUスロットリング:6x slowdownNetworkスロットリング:なし遅い端末を想定したCPUスロットリングをしますが、通信速度はすでに優秀で、改善点が見当たらないため気にしないものとします。問題点 LINE証券のサービス内に、ポートフ
- frontend
- line-intern-ja
UIT Meetup vol.10「Vue 三昧」を開催しました
Akihiro Tamada (spring-raining)2020-09-30
Engineer at Front-End Development Center
9 月 18 日、フロントエンドコミュニティ UIT の 10 回目となるミートアップ「Vue 三昧」を開催しました。今回の UIT meetup のテーマでもある Vue.js は、メジャーアップデートとなる Vue 3 のリリースに向けておよそ 2 年間開発が続けられていました。そんなフロントエンドエンジニア注目の Vue 3 期待の新機能について、Vue.js コアチームメンバーでもある kazupon さんをお呼びして、文字通り Vue 三昧の内容をお送りしました。このイベント自体の日程は 1 ヶ月以上前から決まっていたものですが、偶然にもこのイベントのおよそ3時間後には、Vue 3 の正式リリースが発表されました！結果的には、このイベントが Vue 3 リリース前で最も新しい情報を発信していたのかもしれません。 UIT とは？ UIT は、 LINE のメンバーが中心となって発足した、「User Interface × Technology」を掲げるコミュニティです。ユーザーの目に見える部分を技術で解決する開発者のための、実践的なコミュニティとして活動。
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

1 2 3 4 5