Blog - LINE ENGINEERING

LINE株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。 LINEヤフー Tech Blog

Prettier への支援開始のお知らせと企業が OSS に対して支援するということ
Takuma HANATANI2022-01-27
Engineering Manager at LINE Corp. @potato4d
フロントエンド開発センター(通称: UIT) Front-End Dev.9 チームの花谷(@potato4d)です。『UIT 新春 Tech Blog』 1/27 の今回は、UIT が主体となって行っているフロントエンド領域の OSS のスポンサー活動についてご紹介します。 LINE のフロントエンド領域関連の OSS スポンサリング状況 LINE では、2022年1月現在以下のフロントエンドに関する OSS の支援実績があります。 Vue.js 2021年4月より支援開始し、継続中毎月500ドルを Evan You 個人の Patreon アカウント経由で支払い Husky 2021年3月より支援開始し、継続中毎月100ドルを Open Collective 経由で開発チームのアカウントへと支払い Bootstrap 2021年6月より支援開始し、継続中毎月100ドルを Open Collective 経由で開発チームのアカウントへと支払い組織としても OSS のスポンサリングへの意識が高まり、 2021 年より活発に支援している
- UIT
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 ベースで構
社内のデザイナーの業務をサポートする LDSG Figma Plugin を作りました
Amon Keishima2022-01-25
Front-End engineer at LINE Growth Technology
こんにちは、LINE Growth Technology UITチームの keishima です。普段はフロントエンドエンジニアとして LINEポイントクラブの開発に携わっています。本記事では、この半年間で LINE Growth Technology のエンジニア・プロジェクトマネージャーと、 LINE のデザイナーがタッグを組んで作成した、LDSG Figma Plugin についてご紹介します。 LDSGとは？ Figma Plugin の話に入る前に、まずは LDSG と、LDSG が提供している Figma Library についてご紹介します。LDSG とは LINE Design System for Global Family Service の略です。LINEのファミリーサービス間で、一貫したユーザーエクスペリエンス（UX)を提供するためのデザインシステムです。 LDSG は Color, Typography, Icon, Components などから構成され、ファミリーサービスを担当するデザイナーは、これらを利用してサービスのUIデザインを作り上げていきます。
フロントエンド開発の業務を支えるちょっと珍しいチームのご紹介
Kohei Maekawa2022-01-24
この記事は UIT 新春 Tech blog 4 日目の記事です。こんにちは。LINE フロントエンド開発センターの前川です。主にフロントエンド開発センターで働く方々のDX改善や、社内サービスの運用を行なっています。私の所属しているチームは、フロントエンドと名前はついているものの、実際はフロントエンドとそれ以外の業務の割合が2:8程度という珍しいチームです。そのため、技術記事というカテゴリからはやや外れてしまいますが、その業務内容をご紹介したいと思います。 LINEを支えるプラットフォーム本題に入る前に、まずはLINEのプロダクトがどのようなプラットフォームの上で動作しているか説明します。 LINEでは、Verdaというプライベートクラウド環境を運用しており、LINEのほとんどのプロダクトはこのVerdaの上で動いています。LINE NEWSやLINEギフトといった、フロントエンド開発センターのプロダクトもその例に漏れず、Verda上で稼働しています。内製のプライベートクラウドがあるということは、Verdaを運用しているバックエンド・インフラ開発者の方々とダイレクトに
- frontend
- UIT
- DevOps
業務で役に立つVS Code機能拡張を作ってみた話
Kaido Iwamoto2022-01-21
LINE FukuokaでLINE証券のフロントエンドを開発しています。
この記事は UIT 新春 Tech blog 3日目の記事です。こんにちは。LINE証券のフロントエンドを開発している岩本海童です。今日は、業務で利用できる便利なVS Codeの機能拡張を作ってみた話をします。背景 LINEでは、XLTと呼ばれるアプリケーションの多言語化のための社内ツールがあります。あるキーとなる文字列に対して、対応する日本語や英語の文字列を関連づけることができ、それをソースコードから参照します。例えば次のように、ボタンにXLTから設定した文字列を表示します。 export const ShowAllAssetsButton: FC = () => <button>{xlt('portofolio.showAllAssets')}</button> // 日本語環境の場合は <button>資産を全て表示</button> // 英語環境の場合は <button>Show all assets</button> のようにレンダリングされる当然ですが、ソースコードにはキーが書い
仮想ルータクラスタを自動でローリングアップデートする仕組みの検討と実装
Yamato Sugawara2022-01-21
はじめにこんにちは．2021年の4月からITSC Verda室のネットワーク開発チームでアルバイトをしている菅原大和(@drumato)と申します．本記事では，約半年間私が取り組んできたタスクである，｢SDNによって自動的に仮想ルータクラスタをメンテナンス，ローリングアップデートする仕組みの検討と実装｣についての成果をご紹介します．また，ここまでの活動で現在の実装が抱える問題点もわかったので，それも合わせて共有します．最後に，今後の私達のSDNシステムに必要な機能について取り上げます．背景 KloudNFVプロジェクトについて LINEのほとんどのサービスは，自社で開発/運用されているプライベートクラウドのVerda上で開発/ホスティングされています．その中には，ネットワーク的かつセキュリティ的に高い要件を持つサービスが存在します．これに対し私達は著名なパブリッククラウドにおけるVPCと同等の機能を提供する必要があります．ここでのVPCとは，隔離されたネットワークと，NATやNetwork ACLなどのNFVサービスを連携して提供するものです．このうち前者に関しては，インハウスで開
業務で見つけた！　Conditional Types
LINE Engineering2022-01-20
こんにちは。LINE証券フロントエンドエンジニアの鈴木です。この記事は「UIT 新春 Tech blog」シリーズ2日目の記事です。 LINE証券ではTypeScriptを使用しており、TypeScriptの力を最大限発揮させられるように日々取り組んでいます。そこで、この記事ではLINE証券のプロダクション用コードで実際にConditional Typesが使用された事例をご紹介します。Conditional TypesはTypeScript 2.8で追加された機能で、部分型関係に基づいた型レベルの条件分岐やパターンマッチができる機能です。TypeScriptの機能の中でも高度な部類であり、一部の型に凝ったライブラリや曲芸的な遊びを除いてはなかなか実用例を聞かないものです。我々が書いたコードでConditional Typesが使われた事例をご紹介することで、皆さんにもConditional Typesを身近に感じていただき、ぜひ自分のプロダクトでも活用機会を探していただきたいと思います。非同期処理を表すAsyncData型まずは、我々が最近導入したAsyncData型をご紹介し
Web フォントを使って contenteditable から脱出する
Akihiro Tamada (spring-raining)2022-01-19
Engineer at Front-End Development Center
こんにちは、LINE フロントエンド開発センターの玉田です。突然ですが、本日よりフロントエンド開発に携わる UIT のエンジニアが持ち回りで記事を公開する「UIT 新春 Tech blog」を開催します。 UIT のメンバーが普段の業務で得た知識や、年末年始でたまった知見などを共有していきます。本記事の公開から 1 月 28 日 (金) まで、平日の毎日違うメンバーが記事を公開していきます。ぜひ最後まで見に来てください！トップバッターは私から、フロントエンドエンジニアを悩ませる contenteditable からの脱却についてです。 contenteditable の呪いみなさんは contenteditable についてご存知でしょうか？　contenteditable 属性とは、ある要素が編集可能かどうかを示す HTML 属性で、この属性を true にすることでユーザー自身がその HTML 要素を編集できるようにするものです。<input type="text"> や <textarea> といった要素はテキストを編集す
- frontend
- UIT
【登壇・協賛情報】JANOG49 Meeting
LINE Engineering2022-01-17
LINE Engineering Blog official account
2022年1月26日(水)〜28日(金)の3日間にわたって開催される、JANOG49 Meetingにて、LINEはダイヤモンドスポンサーを務めます。また、当日はLINEのエンジニアが登壇いたします。セッション概要 LINEのネットワークオーケストレータをリニューアルした話Day2 2022年1月27日(木) 12:00～13:00(1時間00分) LINEのデータセンターネットワークは拡大を続けており、それに伴ってネットワーク設定を自動化するネットワークオーケストレータへの要求も多様化しています。LINEでは以前からネットワークオーケストレータを導入していましたが、多様化する要求に対応するために全く新しいアーキテクチャでネットワークオーケストレータをリニューアルしました。この新しいネットワークオーケストレータは、Ansible、Docker、etcd、Pyang等の一般的かつオープンなツールを活用して以下の課題を解決するよう開発されました。マルチベンダー対応管理対象機器の増加に適応するスケーラビリティ「HTTPリクエスト受信時の設定反映」、「スイッチへのサーバー接続時の設定反映」
- 登壇情報
- 協賛情報