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

Frontend カテゴリの記事

  • 131
    投稿
  • 55
    著者数
  • 25525
    総シェア数
  • 15355
    Twitter
  • 3
    Facebook
  • 6174
    はてブ
  • 3993
    Pocket

【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アプリの自動テストから良いテストの書き方まで をフューチャーの有志と共に出版いたしました。

package.json dependencies メンテの仕方 最短ルート

package.json の dependencies をメンテナンスするにはどこから手を付ければいいか、を解説します。

Vue3でモーダルダイアログの起動をいい感じに実装する

Reactでのダイアログの開閉制御については以前、別のエントリーで書きました。Vue3でも、何か簡単に書ける方法はないかと試行錯誤して、ちょっといい感じかな？という方針を見つけたので...

ZodでJSONのオブジェクトを実行時に都合の良い型に変換する

いろんなJavaScriptの統計を見ると、今時のウェブフロントエンドの新規開発は80%はTypeScriptになっているということです。また、TypeScript自身を使わなくても、TypeScriptで培われた型推論のパワーで、JavaScriptであってもVSCode上で補完とか思いの外うまくいったりしちゃうので...

Cloudflare C3で始めるCloudflare Pages入門

Cloudflareが提供するCLIツール「Cloudflare C3」を利用して、Cloudflare Pagesへ簡単に入門する方法について、ハンズオンを中心に紹介します。

GASでGoogleTasksとスプレッドシートを擬似的に双方向バインディングさせてみた

フロントエンドの開発をする際にはVueを使用しています。Vueでの開発に慣れていくにつれて、「Vue使いやすいな、よくできているなぁ。」と思うとともに、普段何気なく使っているスプレッドシートに対して、今まで感じたことのなかった不便さを感じるようになりました。