2ヶ月でCore Web Vitals, Lighthouseスコアを大幅改善するために行ったこと - SMARTCAMP Engineer Blog
こんにちは!!！スマートキャンプでエンジニアをしている吉永です！ 自己紹介記事はこちら 前回の記事はこちら 私は現在、スマートキャンプの主力サービスであるBOXIL SaaS（以下、BOXIL）の開発にフロントエンド、バックエンド問わず携わっています。 恐らく新年一発目になる弊社テックブログの記事は私の記事ということで、今年もよろしくお願いいたします。 はじめに なぜパフォーマンス改善を行ったのか Core Web Vitals(以下: CWV), Lighthouseとは？ CWVとは Lighthouseとは CWV & Lighthouseの改善結果 サービスページ(改善前) サービスページ(改善後) レビューページ(改善前) レビューページ(改善後) 改善をするにあたってチームで行ったこと コミュニケーション的なお話 タスクの洗い出し、調査方法 優先順位付け DatadogやSea
JavaScript、TypeScriptなどで使われるコードフォーマッター 「Prettierさまに従って生きていれば楽」ではない3つのケース
「東京Node学園」は、Node.js日本ユーザグループ主催のNode.js勉強会です。36時限目の今回は、オンラインで開催されました。suzuki氏は、Node.js上で動作するコードフォーマッターであるPrettierに従わなくてよいケースについて発表しました。 「従われている」傾向があるPrettier sosukesuzuki氏（以下、suzuki）：「Prettierに従わなくてもいい場合」を話します。 suzukiといいます。筑波大学の情報科学類で学生をしていたり、サイボウズ株式会社というところで働いていたり、OSSだとPrettier Core Teamでメンテナンス全般をやっていたり、Babel TeamというところでBabelのパーサー周りを見ていたりします。 Prettier、Node.jsをよく使う人ならたぶん使ったことがあると思うのですが、Prettierは、Opi
複数リポジトリ間におけるeslint・prettierの設定共通化 - LIVESENSE ENGINEER BLOG
転職会議事業部の srkw です。 今期事業部内で利用する eslint および prettier の共通ルールを管理するパッケージを作成したので、その工程と成果物をご紹介したいと思います。 なお、今回紹介するパッケージの内容には多分に要修正箇所があり、今後他のプロジェクトとの優先順位を鑑みて、都度改善される可能性があります。その際はこちらの記事も併せて更新できればと考えています。 TL;DR 最終成果物は以下のリポジトリで公開しています。利用リポジトリ側での設定等は README に記載しております。 https://github.com/livesense-inc/eslint-config-template モチベーション 転職会議は現在ページごと・機能ごとにサーバーを別で管理するマイクロサービス構成で開発を行っています。その中で利用する静的コード分析やコードフォーマッタのルールは
日本語の折り返しをJavaScriptで制御する - LIVESENSE ENGINEER BLOG
インフラエンジニアの中野(etsxxx)です。今回はWebのフロントの話です。稚拙な部分はご容赦を。 はじめに 前提知識 解決案の候補 解決案1: 手でspanタグをつける 解決案2: サーバーサイドの処理 解決案3: クライアントサイドの処理 クライアントサイドで文節区切り 実装 結果と考察 さいごに 2024/05/16追記 はじめに 2020年12月、リブセンスにQ by Livesenseという広報ブログが誕生しました。このブログは明朝体と縦書きと長文にアイデンティティがあります。 Q by Livesenseはこういう見た目のブログです。 Q by Livesenseは縦書きということで、漢数字を使っていたり、写真やイラストを使わずに純粋な文体で記事を書いていたりと、書籍のような日本語らしさが求められるデザインとなっています。 縦書きはWebエンジニアにとっても珍しい実装ですが、
TypeScriptの表現力で自由なJavaScriptに立ち向かう 〜 Immutable.js 編 〜 | Wantedly Engineer Blog
WantedlyのDX (Developer Experience) Squadでエンジニアをしている原 将己 (qnighy) です。 Immutable.jsというライブラリを使っているJavaScriptコードをTypeScript化するにあたって、既存の型定義では不十分だった箇所を独自に修正しました。このときしたことがTypeScriptの知見として面白いと思ったので紹介します。 Immutable.js とはImmutable.js はFacebookが開発している永続データ構造 (純粋関数型データ構造、不変データ構造) のJavaScript実装です。配列 (List), Map, Set などが実装されていますが、データ構造に対する変更操作は全て「新しい状態を返す関数」の形で提供されています。 import { List } from "immutable"; const u
どう書くんだっけ？ を一発解決！コピペ用コードスニペットを集めたオススメWebサイトまとめ
この記事では、コーディング作業で迷ったときに確認したいコードスニペットを集めた便利サイトをまとめて紹介しています。 ウェブ開発において、フロントエンドやデベロッパーが悩んでしまう問題の解決方法を知ることができるだけでなく、世界中の優秀なプログラマーの作成したコードを確認、実際に動かしながら学ぶことができます。 ちなみに、2020年に人気だったコードスニペットランキングがこちら。 2020年にCodepenで話題！コピペ可なHTMLスニペット ベスト100発表 どう書くんだっけ？ を一発解決！コードスニペットを集めたオススメWebサイトまとめ CoddMyUI Javascript、HTML、CSS、jQueryプラグイン、ウェブ開発にできるデザインスニペット1200個以上が揃ったサイト。ボタンやホバーリンク、テキストアニメーションなど細かくカテゴリ分けされているので、必要なパーツごとのコー
リーダブルテストコード - Qiita
はじめに よく言われるように、ソースコードというものは書かれることよりも読まれることの方が多く、それゆえ読みやすいコードを書くということが非常に重要です。それはテストコードにおいても同様であり、プロダクトコードと同等に資産として扱う必要があります。 テストコードは具体的な値を用いて記述し、また複数の変数の値の組み合わせでテストケースを起こすため、プロダクトコードと比べて冗長になりがちです。 書籍『リーダブルコード』の14章でもテストコードの読みやすさについて触れられていますが、本稿では読みづらいテストコードをリファクタリングして読みやすくするためのテクニックを紹介したいと思います。 なおサンプルコードはJavaScriptで記述されており、そのテストコードはJest1を用いて書いています。 ソースコードはGitHubにあります。 リファクタリング(その壱) 以下の、決して読みやすいとはいえ
10 年前に JavaScript で Flash Player を開発し買収された話
この記事は、JavaScript で Flash Player の実現を頑張った（もしくは現在進行系で頑張っている）人たちの集う Flash Advent Calendar 2020 に参加しております。 私は過去に自分が設立した会社で ExGame という HTML5 実装の Flash Player（正確には Flash Runtime Engine）を開発し、その会社ごと DeNA に買収（M&A）されました。あまり出来ない体験であるのは間違いないので、Flash が終了を迎える今、改めて振り返ってみようと思います。 Flash Player の開発 今から 10 年前の 2010 年、ちょうど iPhone が普及し始めてきてガラケーのシェアが 8 割から 6 割くらいに落ちようとしていた時期に、私は Flash Player を JavaScript で実装していました。以前この
Pug を HTML に移行して .vue ファイル の template タグ内に ESLint を効かせた話 - SMARTCAMP Engineer Blog
こんにちは！スマートキャンプでインサイドセールスに特化した SaaSを作っているエンジニアの中川です。 上記プロダクトのフロントエンドは Vue.js を用いて開発しているのですが、 その中で SFC 内のtemplateタグで使用していた Pug をやめて HTML に移行した件をこの記事ではお話しようと思います。 また、実際にtemplateタグに ESLint を効かせてみて発覚したエラーや警告のなかで数が多かったものや、これから Vue 3 に移行していく上で対応する必要があったルールを紹介します。 背景 eslint-plugin-vue が効かない チームに Pug 推進派がいない Pug を HTML に移行するには Vue 3 に準拠した Lint ルールを導入する Lint を実行してみる 対応した目ぼしいルール vue-require-v-for-key vue/val
JavaScriptでの絵文字の扱われ方を知っていますか？ - SMARTCAMP Engineer Blog
スマートキャンプの20卒エンジニアの高砂です！ 皆さんは、JavaScriptにおける絵文字の扱われ方が難しい事をご存知ですか？ 本記事では、その背景と適切な方法を解説していきます！ JavaScriptにおける絵文字の問題点 問題点の再現 問題点の背景 絵文字を適切に扱う方法 まとめ JavaScriptにおける絵文字の問題点 JavaScriptで文字数カウントを実装する際、素直に考えると下記のようなコードになるかと思います。 const text = 'おはよう😊' console.log(text.length) しかし、実は「絵文字が含まれている文字列は.lengthでは適切にカウントできない」という問題点があるのをご存知でしょうか？ 実際にご覧頂くのが早いと思うので、CodePen様をお借りして文字数カウントをしてくれるアプリを簡単に作ってみました。 以下に置いておきますので
すごい技術で世界を変えることにこだわらず、誰よりも速く実装できる組織を作るようになったわけ - Findy Engineer Lab
スマートニュース株式会社でエンジニアリングマネージャを務める天野仁史（@amachang）さんは、15年ほど前にWebフロントエンドのエンジニアとしてブログやカンファレンスでのアウトプットを精力的に行ってきました。一方で、その後には友人とカクテル株式会社を立ち上げ、10年にわたるベンチャー経営も経験しています。エンジニアから経営者に転じたことで見えたこと、そして現在また企業に属してマネージャーを務める上で重要だと考えていることなどを聞きました。 「この技術がすごい」という考え方からの脱却 世界を変えるのは、技術か？ ベストプラクティスか？ エンジニアの組織でもベストプラクティスを学び、作る 最速な人がとにかく速く走れるように 「この技術がすごい」という考え方からの脱却 ── さまざまな立場を経験されてきたことで、エンジニアが自分のキャリアをどのように構築するか、天野さん自身は視点をいくつか
Talking TypeScript with the engineer who leads the team - Stack Overflow
In our 2020 Developer Survey results, one of the most tracked statistics is the Most-Loved Language. As it has for several years now, Rust is number one. But coming in at number two is TypeScript, a strongly typed superset of JavaScript, edging out Python by a hair. We wanted to find out what about TypeScript makes it so dang lovable, so we reached out to Ryan Cavanaugh, the principal engineering
A visual guide to React Mental models
I’ve learned that the biggest difference between someone that has mastered a language, framework or tool and someone who hasn’t lies in the mental models they use. One person will have a clear and advanced one and the other will not. By having a good mental model you can intuitively understand complex problems and device solutions much faster than if you had to find a solution with a step-by-step
Manage the Cost of Javascript
Manage the Cost of Javascript - by Paipo Tang (Front-end engineer @ Mercari) Tech talk given on the Mercari Global Engineers Meetup on Jan 25, 2019.
処理の共通化とコンポーネントの分割/分類/粒度について
じまぐ @nakajmg Frontend Engineer at PixelGrid Inc. + 副業 （元DMM.comラボ 7年前？
LINE Engineer Insights vol.3「UITエンジニアに聞く、最新のフロントエンド開発の裏側やアプローチ手法」
LINE株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。 LINEヤフー Tech Blog LINEで働くエンジニアに色々と話を聞いていく「LINE Engineer Insights」の第3弾です。当コーナーはインタビュアーにLINEで働くエンジニア @tokuhirom を迎え、エンジニア同士でざっくばらんにお話を伺っていくというものです。今回も、LINEのエンジニアは一体どんな人達なのか、その内面に迫っていきたいと思います。 第3弾は、開発1センター UIT室所属の喜多に、最新のフロントエンド開発の裏側やアプローチ手法などについて聞いてきました。あらかじめ説明しておきますと、UIT は User Interface Technology の略で、HTML/CSS/JavaScriptによる LINE のウェブフ
スタートアップで働くプログラマが、非プログラマの皆さんにお願いしたいこと - Line 1: Error: Invalid Blog('by Esehara' )
はじめに 自分の基本はプログラマとして、サーバーサイドのサービスをゴリゴリ書くのが仕事だ。しかし、仕事をするとなると、いろいろな人が絡んでくる。もちろんマーケティング担当や戦略担当の人もいる。そして、僕はそういう人たちが実際にやっていることはわからないけれど、それはたぶんそういう人たちが「プログラマってどういう仕事なのか？」ということがわからないのは一緒なのだろうと思う。もちろん、お互いに相手の仕事を理解して、それに合わせてどういう風なことを共有して作ってもらうか、というのを話し合う機会は重要だ。 たぶん、自分たちがどのように仕事をしていて、どのように情報を共有してもらえれば、仕事がスムーズにいくのか、ということを説明しないことには、たぶん「プログラマが理解されない」ということを嘆いても仕方ないと思う。なので、まず自分が「プログラマとしての自分」が考えていることを共有する必要があるなあとい
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
