Frontend カテゴリの記事

126
投稿
52
著者数
25522
総シェア数
15355
Twitter
3
Facebook
6171
はてブ
3993
Pocket

Vue.js連載 2025 を始めます

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

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

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

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のプラチナスポンサーとして参加し、私はプラチナスポンサーセッションに登壇させていただきました。

2024.11.28
登壇レポート Vue.js 新人研修 VueFes

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使いやすいな、よくできているなぁ。」と思うとともに、普段何気なく使っているスプレッドシートに対して、今まで感じたことのなかった不便さを感じるようになりました。

p5.jsで好きなプログラミング言語発表ドラゴンを作ろうとした

JavaScriptライブラリの1つであるp5.jsに入門します

Vue.jsでオセロ作った話

社会人1年目のIT基礎知識向上のための取り組みの1つとして、Vue.jsでオセロを使った話をしたいと思います。

Vue.jsを2から3へバージョンアップした話

Vueのバージョンアップを行って得た、所感や躓いたポイントを共有します。

Next.jsにするか他のフレームワークにするか迷っている人はNext.jsを選べばいい

タイトルで言いたいことは言ってしまっているのですが、2017年ぐらいからNext.jsを使ってきて、最新の情報のキャッチアップとかもそんなに苦労はなくて、こだわりがないならNext.jsでいいのでは？という記事です。

ダイアログもアラートも、Reactで子コンポーネントの開閉管理を実装する

Reactでは、画面に関わる表示の制御はかならず何かしらのステート管理を行いそれで行います。ダイアログの場合は開閉をuseStateで作ったフラグで管理するみたいな感じです。たとえば...

12 3 4 5 6 Next