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が正
Engineering Manager at LINE Corp. @potato4d
フロントエンド開発センター(通称: UIT)の花谷(@potato4d)です。 この記事では、 ESModule の仕様であり、現在の JavaScript を用いた開発で必須である import / export 構文について、 default export ではなく named export を利用すべきである理由について紹介します。 前提知識について なお、本記事は以下を前提知識として、詳細の説明を省きます。 ESModule と import / export についての基本 CommonJS module との違い esModuleInterop 周り(CJS → ESM の import については扱わないため) プロジェクトで使われている技術と ESModule の状況について UIT では、 SPA 開発のプロジェクトにおいて Vue.js と React が多く利用されており、既存の多くは Babel を利用した JavaScript で、新規のプロジェクトでは TypeScript を利用して開発が行われています。 FYI: 【
LINEでフロントエンド開発を担当しています。プログラミング言語に興味を持っています。
こんにちは、LINEでフロントエンド開発を担当しているJunです。この記事はLINE Engineering Blog「夏休みの自由研究 -Summer Homework-」の4日目の記事になります。 この記事ではJavaScript ecosystemの一つ、module bundlerについて書きたいと思います。まずmodule bundlerという概念について簡単に紹介し、その後module bundlerが実際どう動くのかについて自作module bundlerを書いた経験と共に説明します。 Module bundler? Moduleシステムは大きいコードベースをmoduleと呼ばれる単位に分割できるようにする構造のことです。JavaScriptは長い間moduleシステムを持っていませんでしたが、2009年Node.jsがCommonJSというmoduleシステムを使い始めて以来、JSでもmodule化したコードを書くのが普通になりました。そしてECMAScript 2015でJS言語仕様に新しいmoduleシステム、ES Modulesが含まれるようになり、もはやmodu
LINE Engineer
こんにちは、LINEでDeveloper Advocateをしている中嶋です。この記事はLINE Engineering Blog 「夏休みの自由研究 -Summer Homework-」の1日目の記事です。 Webを問答無用でChatbot化する スマホに対応していないWebサイトでイライラしながら入力する。 毎回ログインが必要でやる気をそがれる。 そもそもスマホでのフォーム入力画面はつらい。 そんな経験ありませんか？ LINEは当然ながらスマートフォンで最も利用されており、必然的にLINEにとってそのスマートフォンでのUXはとても重要で、多くの工夫が凝らされています。 そこで、前述のようなスマホでは使いにくいサイトをLINEから操作できるようにしたら便利になるかも？という実験をこの記事では紹介したいと思います。 WebをChatbotから操作できるHeadless Chrome Headless Chromeというツールをご存知でしょうか？ Chromeは言わずと知れたWebブラウザーですが、Headless Chromeはそれをコマンドラインで操作するための仕組みです。テスト
sunderls is a front-end engineer
はじめに こんにちは、LINEマンガJavaScript担当の@sunderlsです。 これはLINE Advent Calendar 2017の22日目の記事です。今日は、webpackローダーのgrow-loaderを紹介します。 LINE Engineering Blogの記事「LINEマンガ：Page Stackを使ってサクサクなページ遷移を実現できました」でご紹介しましたが、LINEマンガはWeb技術で実装されています。 Webでネイティブアプリに近いユーザー体験を提供するため、いろいろ工夫しています。今回は、数ある工夫の中からコード分割の実装を紹介したいと思います。 なぜコードを分割するのか LINEマンガでは、JavaScriptのソースコードをもともと1つのファイルにバンドルしていました。しかしサービスが成長するにつれて、ページ数が増え仕様も複雑になり、バンドル後のファイルサイズがどんどん大きくなってきました。将来を考えると1つにバンドルするのはやはり望ましくないと考え、コード分割の実装を始めました。 一般的な実装 最初はreact-loadableのようなHOC（Hi
フロントエンドエンジニアです。2年前に東京からIターンして福岡に来ました。
この記事はLINE Advent Calendar 2017の19日目の記事です。 JavaScriptの気持ちを知りたい こんにちは、LINE FukuokaのフロントエンドエンジニアのYoneharaです。 そろそろクリスマスですね。フロントエンドエンジニアのみなさん、苦しんでいますか？私は苦しんでいます。2017年も暮れようというのに、いまだにブラウザやJavaScriptの気持ちが分からず、ユーザーに思うような快適なUXが提供できないことがあるからです。 JavaScriptの気持ち。ただ幸いなことに、我々はかなりの程度、それを分析的に知ることができます。GoogleやMozillaが自身のJavaScriptエンジンのコードを公開し、随所でそのアーキテクチャを解説してくれており、また豊富なトレーシング・プロファイリングの手段が用意されているからです。 今回の記事では、みなさんおなじみのChromeに採用されているV8というJavaScriptエンジンの、Hidden Classという最適化のための1つの仕組みをのぞいてみたいと思います。 動的型付け言語の辞書の実装には制約があ
こんにちは、LINE Fukuoka の tarunon です。LINE BLOG iOSのリリースまで、クライアントとエディタの開発を担当していました。昨年11月に、LINE BLOG は一般開放と、iOS/Androidクライアントの公開を行いました。ほぼ1年がかりの開発だったのですが、クライアント側で最も大変だったのがエディタの開発でした。この記事では LINE BLOG のエディタの根幹を支えている Workaround について解説します。普段は Swift を書いていて、ほぼその話しかしていないのですが、今回は HTML と JavaScript の話になります。 LINE BLOG はこういったサービスです。LINE BLOG - 芸能人・有名人ブログ contenteditable LINE BLOGエディタはWebブラウザの上で動作しています。開発は iOS/Android 共通のソースコードで、 iOS と Android の担当者1人ずつで協力して開発を行いました。 HTML5 ではcontenteditableという標準化された仕様が存在するので、これを利用すれ
