Vue Fes Japan Online 2022のBASE株式会社のスポンサーセッションで登壇した資料です。 https://vuefes.jp/2022/sponsor-sessions/base 2020年9月に公開されたテックブログ「BASEにおけるVue.jsのこれまでとこれから」( …
現行のプロジェクトをVue CLIからVite化したのでその作業メモ。 from @vue/cli-service@4.5.9 (webpack@4.46.0) Vue@2 Vuex to vite@2.8.4 (esbuild@0.14.21, rollup@2.67.2) Vue@3(予定) Pinia なぜvite化するか devServerやHMRに時間がかかり開発体験が悪くなってきた モダンなライブラリを導入しようとしてもエラーになってしまった(piniaが導入できなかった) viteにすれば解決する問題なのかは分からなかったが、webpack@1の頃から5年以上開発してきたプロジェクトのせいでいろいろしがらみが増えてしまい、まずは足回りをシンプルにしたかった 結果的にpiniaが導入できるようになった これまでも改善したい要望はあったが、その場その場では「更新するコスト>そのま
TypeScript の型チェックを厳格化したいが既存の型エラーが多すぎて、やむなく緩い型チェックにしている方へ改善の助けになりそうなツールを作ったので紹介です。 🔧 作ったもの プロジェクトのコードベースを走査して、型エラーがあるコードすべてに@ts-expect-error or @ts-ignoreのコメントを追加する suppress-ts-errors という CLI ツールを作りました。 以下の GIF のように npx 経由で簡単に利用できます。 さらに、ts、tsx だけでなくVue SFC のスクリプト部分へのコメント追加にも対応しています。 コードはこちらです。⭐ を貰えると泣いて喜びます。 なぜ作った? 現職のプロジェクトにて型チェックを厳格化できていない(strict: trueにできていない)という状況を改善したいと思ったからです。 型チェックのルールを修正する
はじめに この記事はBASE Advent Calendar 2021の15日目の記事です。 BASE株式会社 Owners Experience Frontend チームのパンダ(@Panda_Program)です。 2021年の5月に入社してから、アサインされるプロジェクトの仕事以外に社内 UI コンポーネントライブラリ「BBQ」のメンテナンスに取り組んでいました。 その中でも特に Storybook 周りの整理をする過程、Storybook の v5 から v6 へのバージョンアップとその自動化のプロセスを以下の記事にまとめました。 Vue2 + Storybook v5 のコンポーネントを v6 向けに書き換える TypeScript Compiler API で40の Storybook コンポーネントを storiesOf から CSF(Component Story Form
あの日見たaxiosの機能を僕達はまだ知らない。 2021.08.28 axiosは、JavaScriptにおけるHTTPクライアントのデファクトスタンダードといえるでしょう。 Promiseベースで非同期通信を行えるHTTPクライアントとして、ブラウザ標準のfatchやjQuery.ajaxなどがありますが、特にaxiosがよく使われているのには豊富なオプションや設定に理由付けられるでしょう。 axiosの機能について私のように詳しくなくても直感的にHTTPリクエストを送れるのも良い点の1つですが、せっかくなのでaxiosでどのようなことができるのがを見ていきましょう。 axiosは、JavaScript における HTTP クライアントのデファクトスタンダードといえるでしょう。 Promise ベースで非同期通信を行える HTTP クライアントとして、ブラウザ標準のfatchやjQue
概要 本記事は、HTTP クライアントライブラリである axios の v1.0.0 が満を持してリリースされたため、何がどう変わったのか、マイグレーションしても良いのかについて個人的に調べてまとめた結果になります。 TL;DR axios の v1.0.0 は、パッケージのモダン化に向けた節目としてのバージョンともいえる v1.0.0 では多数のバグ修正と、いくつかの小規模の機能追加がまとめて取り込まれた 破壊的変更や非推奨化は少なからずあるが、基本的な使い方や挙動を大きく変える規模の変更はない 一方で劇的に良くなる変化もないので、急いであげる理由もない 公式マイグレーションガイドは記事執筆時点では提供されていない axios について axios は、JavaScript 向けの HTTP クライアントライブラリの一種で、この種のパッケージとしては比較的古くから普及している老舗ライブラ
ユーザーの直帰率や離脱率とパフォーマンスの関係から、コンテンツを表示する速度や応答性(ページがユーザー入力に応答する速度)がいかに重要であるかは、既によく知られるようになってきています。 ではコンテンツを表示する速度や応答性を上げるにはどうしたらいいでしょう。 結論から述べるとパフォーマンスを客観的な指標に基づいて正確かつ定量的に測定し、そこから課題を見つけて解決することが必要になります。 GoogleはChrome User Experience Reportに新しく応答性指標INPを導入しました。 INPとは INP(Interaction to Next Paint)は、ページの読み込みを開始してからユーザーがページを離れるまでの間に発生するユーザー入力の応答性(インタラクション)を評価する測定基準で、遅延時間を計測します。 計測対象のインタラクションは、以下となります。 ユーザー入
Token CSS is a work-in-progress. Bugs, missing features, and breaking changes are expected! Token CSS is a new tool that seamlessly integrates Design Tokens into your development workflow. Conceptually, it is inspired by tools like Tailwind, Styled System, and many CSS-in-JS libraries that provide tokenized constraints for your styles—but there's one big difference. Token CSS embraces .css files a
はじめに 自分は2021年に新卒でWeb系の開発会社にフロントエンジニアとして入社し2022年で2年目になります。 実務ではReact×TypeScriptを利用したフロント周りの開発をメインで行なっていなす。 今回は、現場で後輩に質問されたReactの技術質問をまとめていきます。 なお質問に対しては一問一答形式で答えるのではなく、深ぼって解説をしていきます。 この記事の対象者 フロントエンジニアを目指している人 React初心者から中級者 Reactの質問をされた時にうまく言語化できない人 この記事の目標 Reactでよく使われている技術を言語化できるようになる 何となくの理解から脱却する おことわり 本記事は面接等で聞かれる質問テンプレート集ではありません 現場で後輩に聞かれた質問を深ぼって解説をするノリで書いてます Reactフックとは何か? Reactフックは公式ドキュメントにおい
基盤チームの右京です。 昨今はフロントエンドのアプリケーションもリッチになり、ブラウザ上で実行されるコードが行うことの範囲も増えてきました。一方で多くのことを実装できてしまうのはリスクでもあり、BASE でも問題となることがあります。 その中でも「開発環境の URL」や「デバッグ機能の存在」ような環境毎に異なる情報は、特に意図せずに漏れやすいものだと考えています。これらはコードを記述する際に、実装方法を知識として知っていればその多くが回避可能です。この記事ではその実装例を解説しています。 コードから漏れる情報 例えば、次のようなコードがあるとします。 function debug() { // 開発環境の host であればデバッグ機能を有効にする return location.host === 'dev.example.com'; } なんの変哲もないようなコードに見えますが、ブラウザ
すでに知られているように、Webページの表示速度は重要です。利用者はいつでもどこでも素早くページが表示されて欲しいと思うでしょう。Core Web Vitalsの指標でも表されているように、表示速度は一時的に速いだけでなく、安定していることが求められます。 本記事では、安定した表示速度を実現する手段の一つとして考えられるPrerenderingをオリジン・トライアルで試してみた結果をご紹介します。 Prerenderingとは Prerendering実装前に注意すること Quicklinkを使ったPrerenderingの実装 Prerenderingのヒット率を計算する Prerenderingの結果 Prerenderingとは Prerenderingは次に表示されると思われるページを事前にレンダリングします。レンダリングが完了している場合には、利用者がそのページに遷移するリンクを
こんにちは、@nerusanです。 皆さんは、状態管理ツールなどは使っておられますでしょうか。 例えば、有名なところでは、Redux, Recoilなどがあります。 今回は、Reactにおける状態管理についての動向を知ることで、なぜ、Reduxが使われるようになったのか?何をReduxなどのグローバルな状態管理ライブラリで扱えばいいのか?現状どうなっているのか?を調べたので、記事にしたいと思います! 自身の解釈なので、もしかしたら、誤ったことを言っている可能性もあるので、その際はご指摘いただければと思います m(- -)m SPAの流行り SPAとはSingle Page Applicationの略であり、新しいページに移動する際、サーバからページを再読み込みするのではなく、JavaScriptを使って、クライアント側のブラウザで動的にページを書き換えるアプリケーションを指します。ページご
at #ワインと鍋js なぜフロントエンドに Edge Worker が必要なのか、Cloudflare Workers をどう使っていくかみたいな話をしました
目まぐるしい変化への対応を求められるウェブ従事者にとって、制作をより快適にする便利な最新オンラインツールをまとめてご紹介します。 いままで時間のかかっていた面倒な作業がワンクリックで完了の時短ツールから、そのまま使えるウェブテンプレート、シンプルで使いやすいアイコン素材など、ウェブ制作のお悩みをまとめて解決できる、無料のツールや素材を中心にセレクト。 さいごは、「こんなツール、あったんだ」と思える、クリエイティブ全開なツールが控えます。暇なときの時間つぶしにもいかがでしょう。 カテゴリごとに整理しているので、目的にあったお気に入りツールを探してみましょう。 コンテンツ目次 1. Webデザイン便利ツール 2. デザインツール 3. プロトタイプ・アイコンツール 4. クリエイティブ・面白ツール Web制作の効率、生産性アップ!話題の最新オンラインツールまとめ Webデザイン便利ツール Ho
webpack を使って Sass をコンパイルする方法 Sass を webpack を使ってコンパイルする方法の覚書です。webpack は JavaScript だけではなく、CSS や Sass をバンドルすることができます。 webpack 5 で新しく導入された Asset Modules など内容を version 5 に合わせて書き換えました。また、PostCSS Preset Env の使い方も追加しました(2022年1月5日)。 以下は Node.js がインストールされていることを前提にしています。また、主なパッケージのバージョンは以下になります(環境は Mac での例になります)。 sass(dart-sass):1.45.2 webpack:5.65.0 webpack-cli:4.9.1 webpack-dev-server:4.7.2 node: 16.13.
Storybook Webpack builder is the default builder for Storybook. This builder enables you to create a seamless development and testing experience for your components and provides an efficient way to develop UI components in isolation allowing you to leverage your existing Webpack configuration with Storybook. Configure By default, Storybook provides zero-config support for Webpack and automatically
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く