Web フォントを使って contenteditable から脱出する - LINE ENGINEERING
LINE株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。 LINEヤフー Tech Blog こんにちは、LINE フロントエンド開発センターの玉田です。突然ですが、本日よりフロントエンド開発に携わる UIT のエンジニアが持ち回りで記事を公開する「UIT 新春 Tech blog」を開催します。 UIT のメンバーが普段の業務で得た知識や、年末年始でたまった知見などを共有していきます。本記事の公開から 1 月 28 日 (金) まで、平日の毎日違うメンバーが記事を公開していきます。ぜひ最後まで見に来てください！ トップバッターは私から、フロントエンドエンジニアを悩ませる contenteditable からの脱却についてです。 contenteditable の呪い みなさんは contenteditable につい
ep.95 Front-End Tooling 実践！最新のツールチェインで長大なビルド時間の改善に挑む | UIT INSIDE
@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
ep.94『もうアップデートをサボらない！On-premise Renovate 構築のススメ』 | UIT INSIDE
@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 を発行 更新作業 アップ
ep.91 『今さら聞けないモブプログラミングのはじめかた・続けかた』 | UIT INSIDE
@potato4d が @aloerina_ に、 LINE NEWS でのモブプログラミングの取り組みについて話を聞いてみました。 LINE NEWS のモブ状況紹介 3年前くらい前からスタート モブレビューという形で、みんなでコードをレビューするところから始まった その後モブプロという概念を知ったことで適用、今ではプログラミングに限らず広く実施 規模感 いわゆる「モブプロ」は週イチくらい それとは別に、一緒にモブ的に仕事をすることは頻繁にある 取り組む人数は3~10人 モブプロの概要はこちらの記事 を参照 モブ導入のモチベーション レビューコストが高い レビュー内でコミュニケーションが多くなってきた みんなでレビューすると意図をその場で知れて良いのではないだろうか だんだんコーディングにも落とし込まれていった 運用しての所管 良かったこと モブが手段として定着した 「ちょっとモブいいで
ep.82 Vue 3のためのTSXという新しい選択肢 | UIT INSIDE
新規プロジェクトで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 vol.12「リニューアル戦略発表会」を開催しました
今回の UIT meetup では、『リニューアル・リプレース』をテーマに、3名の登壇者によるセッションをお送りしました。 UITとは？ UIT は、 LINE のメンバーが中心となって発足した、「User Interface × Technology」を掲げるコミュニティです。 LINE の東京オフィスのメンバーからはじまったコミュニティですが、現在では外部コミュニティの方々との Podcast での交流、福岡でのミートアップ開催や、その他のフロントエンドイベントとの共催など、LINE に限らない枠組みでフロントエンドコミュニティの活発化を目的として活動しています。 ユーザーの目に見える部分を技術で解決する開発者のための、実践的なコミュニティとして活動。現在は UIT meetup の開催以外にも、LINE Engineer Blog での記事の公開や、Podcast「UIT INSID
UIT Meetup vol.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三昧」、昨今のワークスタ
ep.68 Web Standard な Modular CSS - 現場で使ってみてわかる Shadow DOM の嬉しさ | UIT INSIDE
@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
ep.67 新規開発から DX 改善まで！画面越しでも活躍するリモート時代の新卒座談会 | UIT INSIDE
@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
ep.65 好きな技術では妥協しない！LINEのフロントエンドエンジニアの技術選定 | UIT INSIDE
@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 で記述できる
ep.59 Twitter で再生できる音声プレイヤーの作り方 | UIT INSIDE
@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
ep.54 UIT Playbook - これが私たちのコーディングスタイル | UIT INSIDE
@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ベー
ep.53 Vue 3 Study 『Vue.js にもやってくる Fragment』 | UIT INSIDE
@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
ep.52 UIT meetup 『The new normal for frontend』After show | UIT INSIDE
@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」について コロナ禍で引き起こされた仕事の変化について 国や地域ごとの変化、コミ
All TypeScript で開発したLINEで動くリアルタイムクイズアプリの裏側
LINE株式会社フロントエンド開発センター(通称: UIT)の折原です。 先日、6月17日に開催した UIT meetup vol.9 で、本編の前にウォームアップとして、フロントエンドに関するクイズ企画を開催しました。そこで使うことを目的として、UIT App という名前で LIFF のアプリを作成しました。 UIT App は LIFF で動作するクイズアプリです。現状クイズだけですが、今後はいろんな取り組みをこのアプリ上で動作させることができるようになっていく予定です。 この UIT App を実装するにあたって、フロントエンドでは StencilJS を、サーバーサイドでは NestJS を採用しました。これらを使ってみての所感や、こだわった箇所などを紹介したいと思います！ フロントエンドの技術スタックと運用 Stencil Stencil は Web Component・Web
ep.51 Vue 3 Study『Teleport でキレイに解消するモーダルの z-index 問題』 | UIT INSIDE
@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 の取り扱いの悩みを解消 頻出するのはモーダル 子孫ではスタックコンテキストが分けられてしまっているため被り順で問題が起こる しかしモーダルの呼び出し元は子孫の
ep.50 AngularJSからVue.js - 大型リニューアルの学び | UIT INSIDE
ゲスト紹介 @kimulacoさん フロントエンド開発センター UIT 1室 LINE GIFTのフロントエンドをメインに担当 リニューアルの背景 LINE GIFT 友達や自分宛てに、Eギフトやお取り寄せギフトを贈れるサービス 住所を知らない友達にギフトを送ることも可能 LINE アンケート ユーザーにアンケートを配信し、回答を受け付けるサービス リニューアル企画の進め方 GIFTとアンケートのリニューアル 似たような状況からのリニューアル AngularJS (Angular v1.x)からVue.js Grunt から Webpackやコードスプリットなどのビルド改善 リニューアルを始めたきっかけ GIFT リソースに余裕ができていた フロントエンドエンジニアから他のチームに推薦 アンケート 元々計画はあったがなかなか始められなかった はるさめさんが入ったことなどをきっかけに企画が動
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
UIT Front-end Tooling Survey 2020
LINE DEVELOPER DAY 2020 フロントエンドまとめ
ep.60 UIリニューアルは技術的負債改善のチャンス！LINE LIVEのリニューアルの裏話 | UIT INSIDE