LINE株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。 LINEヤフー Tech Blog こんにちは、LINE フロントエンド開発センターの玉田です。突然ですが、本日よりフロントエンド開発に携わる UIT のエンジニアが持ち回りで記事を公開する「UIT 新春 Tech blog」を開催します。 UIT のメンバーが普段の業務で得た知識や、年末年始でたまった知見などを共有していきます。本記事の公開から 1 月 28 日 (金) まで、平日の毎日違うメンバーが記事を公開していきます。ぜひ最後まで見に来てください！ トップバッターは私から、フロントエンドエンジニアを悩ませる contenteditable からの脱却についてです。 contenteditable の呪い みなさんは contenteditable につい

@potato4d が @spring_raining に、 LINE公式アカウントの管理画面開発で行っている webpack のチューニングについて話を聞いてみました。 チューニングの経緯 7月末ごろから久々にLINE公式アカウントの管理画面開発を行っている 開発環境を久しぶりに立ち上げたところ、尋常ではない重さになっていた dev serverの立ち上げに6〜8分ほど ちょうど急ぎではないタイミングだったので、ビルド速度改善を試みた build/dev serverの高速化のためにやったこと esbuild-loaderの導入 https://github.com/privatenumber/esbuild-loader 体感1分ほど短縮。大きな差とは言えなかった thread-loaderの導入 https://webpack.js.org/loaders/thread-loader

@potato4d が @sunecosuri と @jacksmam0 に、オンプレミス環境で構築・運用している Self Hosted 版 Renovate について話を聞きました。 ゲスト紹介 @sunecosuri LINE Growth Technology (LINE GT)のフロントエンドエンジニア LINE NEWS の toB 向けの CMS などの開発を担当 @jacksmam0 LINE Growth Technology (LINE GT)のフロントエンドエンジニア Official Sticker Manager の開発を担当 パッケージの更新管理支援ツール 更新チェック・更新作業をどちらも大きく支援する 更新チェック 一定の間隔で依存関係のバージョンアップデートを調査 更新があった場合、リリースノートを集約して Pull Request を発行 更新作業 アップ

@potato4d が @aloerina_ に、 LINE NEWS でのモブプログラミングの取り組みについて話を聞いてみました。 LINE NEWS のモブ状況紹介 3年前くらい前からスタート モブレビューという形で、みんなでコードをレビューするところから始まった その後モブプロという概念を知ったことで適用、今ではプログラミングに限らず広く実施 規模感 いわゆる「モブプロ」は週イチくらい それとは別に、一緒にモブ的に仕事をすることは頻繁にある 取り組む人数は3~10人 モブプロの概要はこちらの記事 を参照 モブ導入のモチベーション レビューコストが高い レビュー内でコミュニケーションが多くなってきた みんなでレビューすると意図をその場で知れて良いのではないだろうか だんだんコーディングにも落とし込まれていった 運用しての所管 良かったこと モブが手段として定着した 「ちょっとモブいいで

新規プロジェクトでVue 3とTSXを導入した感想について、@spring_raining が @changhee.kim と @daisuke.yamamoto に聞きました。 Vue 3にTSXを導入した経緯 TSXとは？ TypeScript + JSX Vue 3では特に追加のプラグイン無くTSXが利用できる Composition APIのsetupで、TSXで書いたRender functionを返す 参考: ep.39 Vue 3 Study 『Render function で React の世界を覗いてみる』 templateに対するTypeScriptの型補完に不満を感じていた UIデザインに対するフロントエンドエンジニアの裁量が大きく、templateを利用するメリットが少なかった もしかしてただ使ってみたかっただけ？ Vue 3+TSXの開発体験/Vue 2やtem

今回の UIT meetup では、『リニューアル・リプレース』をテーマに、3名の登壇者によるセッションをお送りしました。 UITとは？ UIT は、 LINE のメンバーが中心となって発足した、「User Interface × Technology」を掲げるコミュニティです。 LINE の東京オフィスのメンバーからはじまったコミュニティですが、現在では外部コミュニティの方々との Podcast での交流、福岡でのミートアップ開催や、その他のフロントエンドイベントとの共催など、LINE に限らない枠組みでフロントエンドコミュニティの活発化を目的として活動しています。 ユーザーの目に見える部分を技術で解決する開発者のための、実践的なコミュニティとして活動。現在は UIT meetup の開催以外にも、LINE Engineer Blog での記事の公開や、Podcast「UIT INSID

はじめに こんにちは。フロントエンド開発センター(UIT) 岡崎です。 UITでは毎年、フロントエンド周辺のツールに関する社内向けアンケート『UIT Front-end Tooling Survey』を行っています。Ashley Nolanさんが実施しているFront-end Tooling Surveyをベースにアレンジしたものです。2018年から実施して今回で3回目、2020年の結果を2019年と比較する形で紹介します。

今回の 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三昧」、昨今のワークスタ

2020/11/25-27にて開催された LINE DEVELOPER DAY 2020 のフロントエンド情報をまとめています。 まとめられているセッションはすべてアーカイブ視聴が可能となっているため、こたつでゆっくり見てみませんか？

@AlanGDavalos が Web Platform Study Group Organizer の @takanoripe, LINE 証券フロントエンドエンジニアの @uhyo_ と共に、 Shadow DOM について語りました。 ゲスト紹介 @takanoripe https://twitter.com/takanoripe UI Designer / Front-End Engineer Web Platform Study Group Organizer 言及した Shadow DOM 関連の資料 https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM https://javascript.info/shadow-dom https://qiita.com/alangdm/it

@G4RDS が、20新卒の @yuji.kurihara, @kengo.miyamae, @naoto.ikuno に、大学時代の活動内容、今携わっている業務、リモートワークやアプリケーション設計について語りました。 今回のゲスト naoto.ikuno Front-End Dev 1 Team 主に LINE NEWS yuji.kurihara Front-End Dev 3 Team 主に LINE LIVE や LINE Mileage kengo.miyamae Front-End Dev 6 Team 新サービス「LINEで予約」の開発 Show Note LINEの在宅制度 古くから続く LINE クローン開発研修 新サービス『LINE で予約』 UIT の技術選定の傾向 Refs LINE 新卒採用 2022 https://linecorp.com/ja/career

@g4rds が、 @daisuke.yamamoto と @uhyo_ に、Vue 3 や React / TypeScript の技術選定とその理由について聞いてみました。 ゲスト紹介 @daisuke.yamamoto Data Visualization チーム フロントエンドエンジニア チームでは、Vue.js を主に利用しており、 RC から Vue 3 を開発に投入している @uhyo_ LINE 証券フロントエンドエンジニア TypeScript コントリビューター LINE 証券では React/TypeScript を利用しており、 React 17 や Recoil を Production 導入している React/Vue と TypeScript 対応 React の TypeScript 対応 React はご存知 TypeScript-First で記述できる

@potato4d が @AlanGDavalos と @nhayashida に、 LINE LIVE のリニューアルについて話を聞きました。 ゲスト @AlanGDavalos Front-End Engineer LINE LIVE の開発 Web Components が好き @nhayashida Front-End Engineer LINE LIVE の開発 LINE LIVE とリニューアル LINE のライブ配信サービス https://live.line.me/ Web / ネイティブアプリ両方で展開 長らくアプリ優先で開発が進められていた 古い状態のデザインが続いているなど、アプリの進化に追従できていなかった Web 側も UI リニューアルが入ったので、開発環境もまとめてアップデートすることに 規模感 フロントエンドエンジニア: JS 2, Markup 1 開発期

@potato4d が UIT INSIDE の Twitter 埋め込みプレイヤー対応について、 @kengo-miyamae に話を聞いてみました。 ゲスト紹介 kengo.miyamae '20 New Graduate Front-End Dev 6 Team LINE 公式アカウントのフロントエンド開発 UIT INSIDE の埋め込みプレイヤーを開発 UIT INSIDE の埋め込みプレイヤー対応 【PR】 UIT INSIDE が Twitter 埋め込みでの再生に対応しました！ エピソードの URL をツイートすることで、 Twitter の埋め込み内で再生が可能に https://uit-inside.linecorp.com/episode/59 などを呟くとプレビューされる Twitter で再生できる Web ページの作り方 HTML の meta タグ twitt

@spring_raining が @potato4d @jaycompsci @T28_tatsuyaに、現在 UIT で策定中のコーディングスタイルについて聞いてみました。 自己紹介 @jaytype UIT フロントエンドエンジニア LINE NEWS のフロントエンド開発を担当 @T28_tatsuya UIT フロントエンドエンジニア LINE Survey, ショップカードを担当 UIT Playbookについて プロジェクトの概要 コーディングガイドラインを決めるまでの背景 元々コーディングガイドラインがあったが、長年メンテされておらず最近はほとんど守られていない状態だった UIT Playbookが定めるコーディングスタイル UIT Playbookはまだ始まったばかりだが、ルールの策定や整備はどのような手順で進めているか？ 基本はGitHubのPull Requestベー

@spring_raining が @potato4d に、 Vue 3 の Fragment について聞いてみました。 ゲスト @potato4d フロントエンド開発センター フロントエンドエンジニア UIT で行っている Vue 3 についての勉強会 Vue 3 の RFC を読みながら新しい機能を紹介 Vue 3 Fragment Vue 3 で導入される、実際には描画されない DOM 要素のようなもの Web 標準に DocumentFragment があり、それを Vue で表現している https://developer.mozilla.org/ja/docs/Web/API/DocumentFragment React には React.Fragment あるいは <></> として既に導入されている https://ja.reactjs.org/docs/fragments

@leonardo_engr が @mirka と Kim Changhee に UIT meetup vol.9 「The new normal for frontend」の内容を振り返りつつ、詳しく話を聞きました。 当日のUIT Meetup: UIT meetup vol.9「The new normal for frontend」 - connpass YouTube Live URL: https://youtu.be/JZ9-ef5Oq9g ゲスト紹介 Kim Changheeさん LINE UIT フロントエンドエンジニア LINE公式アカウントの管理画面開発を担当 Lena Morita さん Automattic ソフトウェアエンジニア 「The new normal for Frontend」について コロナ禍で引き起こされた仕事の変化について 国や地域ごとの変化、コミ

LINE株式会社フロントエンド開発センター(通称: UIT)の折原です。 先日、6月17日に開催した UIT meetup vol.9 で、本編の前にウォームアップとして、フロントエンドに関するクイズ企画を開催しました。そこで使うことを目的として、UIT App という名前で LIFF のアプリを作成しました。 UIT App は LIFF で動作するクイズアプリです。現状クイズだけですが、今後はいろんな取り組みをこのアプリ上で動作させることができるようになっていく予定です。 この UIT App を実装するにあたって、フロントエンドでは StencilJS を、サーバーサイドでは NestJS を採用しました。これらを使ってみての所感や、こだわった箇所などを紹介したいと思います！ フロントエンドの技術スタックと運用 Stencil Stencil は Web Component・Web

@spring_raining が @potato4d に Vue 3 で追加される Teleport (Portal) について話を聴きました。 About Vue 3 Study 社内勉強会で開催している Vue 3 の勉強会企画 RFC を一つずつ追っていく 今は Vuex, Vue Router の新バージョンのウォッチも継続中 Guest @potato4d Teleport いわゆる “Portal” の機能の Vue.js 版 仮想 DOM 上の親子関係を飛び越えて、別の場所にある DOM に対して要素をマウントする機能 Portal の必要性と嬉しさ 実 DOM 操作する時代が終わった開発環境における z-index の取り扱いの悩みを解消 頻出するのはモーダル 子孫ではスタックコンテキストが分けられてしまっているため被り順で問題が起こる しかしモーダルの呼び出し元は子孫の

ゲスト紹介 @kimulacoさん フロントエンド開発センター UIT 1室 LINE GIFTのフロントエンドをメインに担当 リニューアルの背景 LINE GIFT 友達や自分宛てに、Eギフトやお取り寄せギフトを贈れるサービス 住所を知らない友達にギフトを送ることも可能 LINE アンケート ユーザーにアンケートを配信し、回答を受け付けるサービス リニューアル企画の進め方 GIFTとアンケートのリニューアル 似たような状況からのリニューアル AngularJS (Angular v1.x)からVue.js Grunt から Webpackやコードスプリットなどのビルド改善 リニューアルを始めたきっかけ GIFT リソースに余裕ができていた フロントエンドエンジニアから他のチームに推薦 アンケート 元々計画はあったがなかなか始められなかった はるさめさんが入ったことなどをきっかけに企画が動