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 に限らない枠組みでフロントエンドコミュニティの活発化を目的として活動しています。 ユーザーの目
こんにちは!LINE Growth Technology UITチームの keishima です。普段はフロントエンドエンジニアとして LINEポイントクラブの開発に携わっています。本記事では、 UIT 新春 Tech blog 5日目として、社内向けに作った Figma プラグインの技術的な面にフォーカスした記事をお届けします。Figma プラグインを作った背景や、プラグインの機能紹介は、同時に公開したこちらの記事をご覧ください。(先にそちらを読むのがおすすめです!) Figma プラグインとは?どうやって作るの? みなさんは Figma を使ったことはありますか? Figma とは UI デザインを行うためのツールで、類似のものに Adobe XD や Sketch などがあります。Figma はWeb ベースで作られたツールであるため、アプリをインストールしなくてもブラウザから利用することができます。また、ユーザー自身でプラグインを作成することも可能で、コミュニティでも多くの プラグインが公開されています。 Figma 自身と同じように、プラグインも Web ベースで構
こんにちは、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デザインを作り上げていきます。
こんにちは。LINE Growth Technology UITチームの慶島(@pittanko_pta)です。この記事では、TypeScriptのenumを使わないほうがいい理由を、Tree-shakingの観点で紹介します。 検証環境 TypeScriptからJavaScriptへのトランスパイルは https://www.typescriptlang.org/play (TypeScript 3.9.2 / targetはESNext) で行いました。 Tree-shaking の挙動については https://rollupjs.org/repl/ にトランスパイルしたJavaScriptコードを貼り付けて検証しました。 Babelを使用したトランスパイルを検証する際には https://babeljs.io/repl (Babel 7.10.3) で行いました。 Tree-shakingとは? 本題に入る前に、まずはTree-shakingについて説明します。Tree-shakingとはひとことで言うと、使われてい