Blog - LINE ENGINEERING

TAG ARCHIVES: frontend

社内のデザイナーの業務をサポートする 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> のようにレンダリングされる当然ですが、ソースコードにはキーが書い
業務で見つけた！　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
【インターンレポート】LINEバイトのWeb最適化
Kota Arai2021-12-10
こんにちは、新井康太と申します。東京大学大学院の修士1年で、普段は音色を直感的に可視化する研究などを行っています。私はフロントエンド領域の開発が好きで、今回のLINEの夏インターンでは、フロントエンド開発センター (UIT) Frontend-Dev9チームでフロントエンド開発の業務に携わらせて頂きました。主に任せて頂いた業務は、LINEバイト (https://baito.line.me/) のWebからの流入を強化する、といった内容で、具体的には、サイトマップや構造化データの整備、ページのパフォーマンス向上など、様々な観点からWebサービスとしての品質向上に取り組みました。このブログでは、こういった施策全般を"Web最適化"と称し、まずWeb最適化に取り組む前のLINEバイトの現状及び課題を述べたのち、その課題に対する解決策をどのように検討し、実装したか、そしてその結果についてまとめたいと思います。 LINEバイトについてはじめに、LINEバイトについて、サービスの概要や使用されている技術について簡単にまとめます。 LINEバイトは、LINEが提供する求人
- frontend
- line-intern-ja
UIT Meetup vol. 14 『来年こそ使いたい！ Schema 駆動 Web API』を開催しました
Ryo Utsunomiya2021-12-02
11月24日、LINE のフロントエンドコミュニティ UIT が主催するミートアップイベント「UIT Meetup vol. 14 『来年こそ使いたい！ Schema 駆動 Web API』」を開催しました。この記事では、イベントの内容について振り返っていきます。 UIT とは？ UIT は、 LINE のメンバーが中心となって発足した、「User Interface × Technology」を掲げるコミュニティです。 LINE の東京オフィスのメンバーからはじまったコミュニティですが、現在では外部コミュニティの方々との Podcast での交流、福岡でのミートアップ開催や、その他のフロントエンドイベントとの共催など、LINE に限らない枠組みでフロントエンドコミュニティの活発化を目的として活動しています。現在は UIT Meetup 以外にも、現在閲覧されている LINE Engineering Blog での記事の公開や、毎週発信を行う技術 Podcast「UIT INSIDE」にも取り組んでいます。前回の UIT Meetup は「Front-end Too
- frontend
- UIT
UIT Meetup vol. 13『知っておきたい Front-end Tooling の今』を開催しました
Akihiro Tamada (spring-raining)2021-07-15
Engineer at Front-End Development Center
7 月 7 日、LINE のフロントエンドコミュニティ UIT が主催するミートアップイベント UIT Meetup vol. 13『知っておきたい Front-end Tooling の今』を開催しました。この記事では、イベントの内容について振り返っていきます。 UIT とは？ UIT は、 LINE のメンバーが中心となって発足した、「User Interface × Technology」を掲げるコミュニティです。 LINE の東京オフィスのメンバーからはじまったコミュニティですが、現在では外部コミュニティの方々との Podcast での交流、福岡でのミートアップ開催や、その他のフロントエンドイベントとの共催など、LINE に限らない枠組みでフロントエンドコミュニティの活発化を目的として活動しています。現在は UIT Meetup 以外にも、現在閲覧されている LINE Engineering Blog での記事の公開や、毎週発信を行う技術 Podcast「UIT INSIDE」にも取り組んでいます。前回の UIT Meetup は「リニ
【インターンレポート】LINE FukuokaでのLINE Creators Marketのフロントエンド実装
Muso Kikui2021-06-29
はじめまして、九州大学経済学部3年の菊井無双と申します。2月1日から5ヶ月間、LINE Fukuokaで長期インターンをさせていただきました。業務としては、UIT Aチームに所属しLINE Creators Marketのフロントエンドを担当しました。この記事では、インターン期間に僕が実装した機能や学んだことを紹介します。開発業務まず、担当したタスクの基本的なフローを紹介します。僕の主な業務は、プランナーの方が作った新機能の実装や、QAの方から報告していただいたバグの修正でした。その他にリファクタリングの一環としてwebpackを触りビルド環境を整えました。 LINE Creators Marketのフロントエンドでは、主にVue.jsを用いて実装しています。タスクが実装できるとコードレビューを依頼します。コードレビューはとても厳しかったです。構造から変数の命名に至るまで多くのレビューをいただきました。変数の命名などはできて当たり前かもしれませんが、これら一つ一つの積み重ねによって素早く綺麗なコードを書けるようになり、一流のエンジニアへの道につながるのだと思いました。毎回のコ
- frontend
- line-intern-ja
【LINE証券 FrontEnd】Recoilを使って安全快適な状態管理を手に入れた話
Tomoro Mine2021-06-29
こんにちは。LINEフィナンシャル開発センターフロントエンドエンジニアの峯です。先日新卒としてLINE証券プロジェクトに配属となり、最初のタスクとしてRecoilによる状態管理の導入に取り組みました。その際、なぜRecoilにしたのか、また本番開発にRecoilを使うにあたって設計に気をつけたことなどを本記事でご紹介しようと思います。技術選定いままでの状態と課題 LINE証券フロントエンドではReact+Typescriptによる開発を採用しており、いままでのグローバルな状態管理にはUnstated を用いていました。 Unstatedでは Container classを状態の単位とし、その内部の stateを setState によって更新します。状態を使用したいコンポーネント側では、<Subscribe> コンポーネントによって情報を読み出すことができます。一方ご存知の通り、React 16.8以降ではhooksという概念が導入され、コンポーネント内の状態管理は class compone

1 2 3 4 5