Future Tech Blog フューチャー技術ブログ

表示テーマ

人気のタグ

タグ一覧へ

Frontend カテゴリ

主にブラウザで動作するWebフロントエンドを扱います。

よく読まれている記事

よく使われるタグ

新着記事

全135本

「👨‍👩‍👧‍👦」は何文字？ ― JavaScriptのlengthとUnicodeで文字を数える

JavaScriptの length は「👨‍👩‍👧‍👦」を11と数えます。UTF-8バイト・UTF-16コードユニット・コードポイント・書記素クラスタの4つの数え方で絵文字や結合文字を測り、「1文字」が何を指すのかを確かめます。

React Server Component時代のReactの書き方(React19/Next.js16準拠)

一番Next.jsとかReactを書いていたのはhookが出たあたりで関数コンポーネントになった近辺でだいぶ前ですが、Reactのドキュメントを一通り見ていたところ、かなり書き方が変わっていそうなので、新規プロジェクトでがっつりイマドキの書き方に寄せてみようと思って学びなおしたり、検証したのでその備忘というか整理です。

なぜ日本語入力と相性の悪いWebサイトができてしまうのか

海外製のチャットサービスとかでIMEを確定しようとしたら勝手に送信されてしまって困った！という経験をしたかは多いでしょう。日本語入力はIMEを通じて行われますが、イベントのハンドリングを間違うとこのような挙動になってしまいます。ウェブフロントエンドのIMEにまつわる2つのトピックを紹介します。* Enterで勝手に送信しちゃう* IMEの最初の文字が取れない

プロによる本気の攻略本『JavaScript/TypeScript実力強化書』で発表しました

プロによる本気の攻略本『JavaScript/TypeScript実力強化書』 - FL#115というForkwellを運営するGroovesさんのイベントで登壇してきました。

Vue Fes Japan 2025にてライトニングトークに登壇しました＆フューチャーアーキテクトがスポンサーをしました

Vue Fes Japan 2025のライトニングトークに登壇いたしました。昨年のプラチナスポンサーセッションに続き、2年連続での登壇となります。

【PoC】Vue + DuckDB-Wasm + ECharts によるセキュリティ投資判断アプリ

経営者がセキュリティ投資判断をしやすくする簡易ダッシュボードを構築しました！使用するデータ量が多くなってもブラウザで固まらず、今後の拡張性も加味した構成にしたかったため...

Vue.jsで脆弱なアプリを作って学ぶ、セキュリティ面で気をつけたいポイント

Vue.jsで実際にわざと脆弱なアプリを作り、そこからXSS・Cookie・CSRF・レート制限といった脆弱性を一気に体験してみます。

Vueのフロントエンドをセキュリティのしっかりしたコンテナにする

Next.jsやNuxt.jsなどのサーバーサイドレンダリング必須なフレームワークであれば、Node.jsと一緒にコンテナ化するか、Vercelなどにデプロイする方法があります。

【入門】Vueで始めるチャート分析

Vue.jsアプリケーションにチャート分析機能を実装するための、初心者向けの包括的なガイドを提供します。代表的な2つのライブラリ、vue-chartjsとvue-echartsを取り上げ、その概要から具体的な使い方、メリット・デメリット、そして実運用で考慮すべき点を解説していきます。

Vue製のUIをStorybook+Vitest Browser Modeでテストする

昨今では生成AIを用いたコーディング、Vibe Codingが盛んに行われていますね。人間の代わりに生成AIがコードを書いてくれるというのは非常に魅力的ですが、その過程で生み出されるコードの品質はまだまだ発展途上の段階にあります。

Vue.js + vee-validate + Zod（+ shadcn/vue + @tanstack/vue-query）での実践的なフォーム開発

私は普段Reactを触ることが多く、フォーム開発ではreact-hook-form + zodの組み合わせでの開発をよく行なっていました。今回Vueでプロジェクトを進めるにあたり、vee-validateを使ってフォーム開発を行いました。

Vue.js連載 2025 を始めます

Vue.jsの魅力と可能性をさらに深く探るべく、フューチャーの有志エンジニアたちによるブログリレーを開催します！

Webフロントエンド設計ガイドラインを公開しました

フューチャー社内の有志メンバーでWebフロントエンド設計ガイドラインを作成し公開しました！本ガイドラインではガイドライン策定の背景やガイドラインの特徴に加えて、内容の一部をピックアップしてご紹介します。

Mermaid図の調整ツールで図をさらに見やすく！〜現場の課題を解決する自作ツール〜

チーム開発でMermaid図を頻繁に利用している中で、「もっとこうなったら良いのに！」という現場の声を形にした自作ツールをご紹介します。特に、フローチャートやクラス図の矢印の長さ（ノード間の間隔）や垂直方向の間隔といった細かい調整に悩んでいる方には、きっと役立つはずです。

Tailwind CSSのドキュメントから見えてくる使い方とCSS設計のヒント

CSSをわかりやすくメンテナンス性高く書くというのは長い間試行錯誤され続けてきました。命名規則でがんばる、SCSSのようなプリプロセッサを使う、CSS in JSなどいろいろな仕組みがかつて作られたりしてきましたが...

構造化テキスト(URL)を文字列結合で作らないようにするライブラリを作ってみた

SQL、ファイルパスなどの構造化テキストを文字列結合で作ると、不正な文字列が入ってきた時に困るよ、というのはプログラミングの基本原則ですが、URLはついついやってしまいがちな部分です。だいたいの言語には

TypeScript/JavaScript Array完全攻略2024

イマドキのJavaScriptの書き方2018]というのを以前書いたのだけど、配列周りはかなり変わっているな、というのを思ったので、そこの部分だけアップデートするつもりで書いてみました。

Deno × Vueを触ってみた(2024年冬)

eno v2とVue.jsを組み合わせた公式チュートリアルの実施を通して、2024年冬時点での現状や特徴について解説していきます。

Vue Fes Japan 2024のプラチナスポンサーセッションに登壇しました

フューチャーアーキテクト株式会社は10月19日（土）に開催されたVue Fes Japan 2024のプラチナスポンサーとして参加し、私はプラチナスポンサーセッションに登壇させていただきました。

Vue3で作ったWebサイトを Vite PWA でPWA化する方法 2024年版

Vue3で作ったWebサイトをPWA(Progressive Web Apps)化する方法を紹介します。

2015年頃のフロントエンジニアだってvoid(0)のワクワクを理解したい

「void(0)」がどんなものなのか、どんなうれしみや期待があるのかなど、これを期に自分なりに調査・整理しようというのが本記事のモチベーションです

Vue.js連載始めます & Nuxtの通信パターンも見てみる

フロントエンドフレームワークからサーバーにアクセスするパターンという記事を書いたところ、ちょっとバズったので、そういえば調べきれてなかったNuxtの話でも書こうかな、と思って調べてみた記事です。

フロントエンドフレームワークからサーバーにアクセスするパターン

僕が触り始めた頃のウェブフロントエンド開発はデバッガーもなく、ダイナミックHTMLと呼ばれて文字をチカチカさせたりするようなものでした。IE6という超安定ブラウザが出てきたり

Playwrightでなぜかボタンにヒットしない

getByRoleでボタンがヒットしないです、という相談を受けて調べた内容のメモです。次のようなHTMLになっていました。

［入門］Webフロントエンド E2E テスト を出版しました

[入門］Webフロントエンド E2E テスト ――PlaywrightによるWebアプリの自動テストから良いテストの書き方まで をフューチャーの有志と共に出版いたしました。