Future Tech Blog
フューチャー技術ブログ
Home
Tags
フロントエンド
フロントエンド
タグの記事
54
投稿
21
著者数
22139
総シェア数
14867
Twitter
1
Facebook
4419
はてブ
2852
Pocket
フロントエンドフレームワークからサーバーにアクセスするパターン
僕が触り始めた頃のウェブフロントエンド開発はデバッガーもなく、ダイナミックHTMLと呼ばれて文字をチカチカさせたりするようなものでした。IE6という超安定ブラウザが出てきたり
2024.11.11
フロントエンド
React
Next.js
サーバーアクション
サーバーコンポーネント
ツイート
シェア
395
153
Playwrightでなぜかボタンにヒットしない
getByRoleでボタンがヒットしないです、という相談を受けて調べた内容のメモです。次のようなHTMLになっていました。
2024.10.24
Playwright
E2Eテスト
フロントエンド
accessibility
ツイート
シェア
1
2
ZodでJSONのオブジェクトを実行時に都合の良い型に変換する
いろんなJavaScriptの統計を見ると、今時のウェブフロントエンドの新規開発は80%はTypeScriptになっているということです。また、TypeScript自身を使わなくても、TypeScriptで培われた型推論のパワーで、JavaScriptであってもVSCode上で補完とか思いの外うまくいったりしちゃうので...
2024.05.14
TypeScript
フロントエンド
バリデーション
Zod
JSON
ツイート
シェア
20
27
Next.jsにするか他のフレームワークにするか迷っている人はNext.jsを選べばいい
タイトルで言いたいことは言ってしまっているのですが、2017年ぐらいからNext.jsを使ってきて、最新の情報のキャッチアップとかもそんなに苦労はなくて、こだわりがないならNext.jsでいいのでは?という記事です。
2024.02.28
フロントエンド
React
Next.js
技術選定
ツイート
シェア
64
28
ダイアログもアラートも、Reactで子コンポーネントの開閉管理を実装する
Reactでは、画面に関わる表示の制御はかならず何かしらのステート管理を行いそれで行います。ダイアログの場合は開閉をuseStateで作ったフラグで管理するみたいな感じです。たとえば...
2024.02.08
TypeScript
フロントエンド
React
ツイート
シェア
26
30
React Server ComponentでもContextで状態を共有する
Next.jsの最近の大きな目玉機能はReact Server Componentです。パフォーマンスアップに有効だったり、gRPCだRESTだGraphQLだ論争を終わりにするServer Actionsなど盛りだくさんです。一方で、サーバーコンポーネントはコーディング上の制約がいろいろあります。
2023.12.14
フロントエンド
React
Next.js
RSC
ツイート
シェア
11
8
Next.jsのServer Actionsは、サーバー側のバリデーションは不要なのか?
Next.jsの新機能でTwitter上でも少しバズったのがServer Actionsです。クライアントコンポーネント上にサーバー上で行うロジックを直接書き込むことが可能です。
2023.11.30
フロントエンド
React
Next.js
Web
バリデーション
ツイート
シェア
6
17
イチ押し。Playwrightの快適機能
Playwright連載3日目の今回は、その便利機能たちをCypressと比較しながら紹介します。Cypressで馴染みの便利機能がPlaywrightではどう実現されているのか、E2Eテストに関わる関係者の悩みを解決するどんな便利機能が備わっているのか、詳しく見てみましょう。
2023.08.24
Playwright
E2Eテスト
フロントエンド
ツイート
シェア
5
13
Playwright連載始まります
現在人気が高まりつつあって、Cypressを追い抜こうとしているのがPlaywrightです。かなりCypressを意識して機能追加を行なってきている印象があります。現時点では...
2023.08.21
Playwright
E2Eテスト
フロントエンド
Cypress
ツイート
1
40
29
Angularをがんばらないで書く
他のフレームワークをいろいろ触ると、Angularはかなり独特な雰囲気があります。隠しきれないJava感というか、他のフレームワークでは存在しない様々な概念が見え隠れして、それをキャッチアップするだけでも結構重いです。もちろん、それぞれ意味があって...
2023.07.24
フロントエンド
DI
Angular
RxJS
ツイート
シェア
3
9
技育CAMPアカデミアで「ウェブ技術のトレンド」というタイトルで発表しました
技育CAMPアカデミアというイベントで発表をさせていただきました。勉強会で、手っ取り早く学んで役立ててもらえるものはなんだろうか、ということでウェブアプリケーションの構造について説明してきました
2023.06.15
登壇レポート
フロントエンド
Web
外部登壇
技育CAMPアカデミア
ツイート
シェア
はてな
2
管理画面等でNext.jsをBetter Reactとして使う
最近、Next.jsが複雑になりすぎて、単なるウェブ画面を作る用途にはNext.jsは重すぎるので別のものが良いとか、Vercel統合のための機能が多いんでしょ、みたいな感想を見かけることが増えた気がします。特に管理画面とか社内システムとかですね。B2Cでも設定画面系とかは当てはまるかもしれません。
2023.05.30
フロントエンド
React
Next.js
ツイート
シェア
74
57
JSパッケージ管理ツールpnpmの概要と内部構造を眺める
Vercelに触れてみようVercel CLIのインストール方法を調べていたところ、パッケージ管理ツールを用いたインストール方法としてnpm, Yarnと並んでpnpmが書かれていました。pnpmではどのようにパッケージを管理しているかなどの特徴を調べました。
2023.05.16
コアテク
フロントエンド
npm
pnpm
パッケージ管理
ツイート
シェア
1
8
Recoilドキュメント入門
RecoilはFacebookのMeta社製のReact用状態管理ライブラリです。この分野はFacebook自体がFluxという概念を発表してから、さまざまなライブラリが開発されてきました。特に広く利用されたのがReduxです。
2023.02.15
フロントエンド
React
Recoil
19
シェア
15
18
Reactで決められた候補から選択させるコンボボックスを実装する(サーバーアクセスつき)
技術コンサルを行っているお客様から質問があったのですが、なかなかドンピシャな情報がなく、試行錯誤したのでその検討結果をまとめてみました。
2022.12.13
フロントエンド
React
4
シェア
1
6
PlantUMLをReact上でレンダリングする
前回の記事ではMermaid.jsをレンダリングしましたが、次はPlantUMLをレンダリングしてみます。こちらも、前回のMermaid.js同様、メンテナンスされているPlantUML対応コンポーネントはありません。PlantUMLもMermaid.js同様、多様なダイアグラムをサポートしています。
2022.10.28
フロントエンド
React
PlantUML
UML
10
シェア
2
9
Mermaid.jsをReact上でレンダリングする
Mermaid.jsをReactで表示しようとしたものの、Reactラッパーとしてnpmに公開されているものがどれも古くてメンテナンスされていなそうという問題がありました。この手のアダプター系のライブラリはどうしてもメンテナンスがされなくて放置されるのが早くなりがちです。脆弱性が残り続けたりします。そこで自前でやったところ、思ったよりも簡単だったのでそのやり方を紹介します。
2022.10.27
フロントエンド
React
UML
Mermaid.js
15
シェア
3
8
Goで作ったロジックにWebUIをつけてGitHubページに公開する
ちょっとしたツールをGoで作ってみたのですが、わざわざインストールしなくてもいいようにWebのUIをつけてブラウザで使えるようにしてみました。ウェブフロントエンド部分はNext.jsの静的サイトで、GoはWASMにしてロードして実行しています。WASMを使うのは初めてなのであえて選んでみました。
2022.10.24
Go言語
フロントエンド
Next.js
wasm
25
シェア
67
48
東京Node学園40時限目で話をしてきました
オンライン開催された東京Node学園40時限目で発表してきました。内容としてはこのブログに書いた、gRPCがフロントエンド通信の第一の選択肢になる時代がやってきたかも?という記事をベースにして、gRPCとは何かとか、Connectプロトコルの存在や、今までの公式実装ととどのように開発のスタイルが変わるか、みたいな話を絵つきで説明したりしました。
2022.09.13
登壇レポート
フロントエンド
Node.js
Node学園
Connect
24
シェア
54
13
gRPCがフロントエンド通信の第一の選択肢になる時代がやってきたかも?
サービス間通信とIDL(インタフェース記述言語)連載の中でご紹介したgRPCのGo実装の新星、Connectのアップデートについて紹介します。Go 1.19が出たらconnect-goは1.0にして以後後方互換性を守るよ、connect-webを出すよという2点です。
2022.08.19
フロントエンド
gRPC
Connect
872
シェア
338
201
Next.js公式のMDXプラグインで、Markdownでページを作る機能を試してみた
お客様と一緒にNext.jsのドキュメントの輪読会をやっているのですが、その中で初めて知った機能がMDXというマークダウンでページを作成する機能です。https://nextjs.org/docs/advanced-features/using-mdx利用規約とか、プライバシーポリシーのページ、ヘルプページの作成とか、Reactコンポーネントも表示できるので、Storybookがわりのコンポーネントカタログを作るのに便利そうという話になったので、ちょっと試してみました。
2022.08.16
Markdown
フロントエンド
Next.js
MDX
25
シェア
8
10
オンライン勉強会の発表順を決めるサービスを作ってみた
オンライン勉強会をする上で、ちょっと悩むポイントは発表順を決めることです。meetなどで表示されるユーザー一覧は、人によって表示順序が異なるため「画面上の右上の人から順番に」という技が使えなかったりします。
2022.02.07
フロントエンド
OSS
勉強会
運営
Svelte
daisyUI
1
シェア
1
2
DatoCMSでポートフォリオをサクッとつくる
Headless CMSサービスであるDatoCMSをつかってポートフォリオをサクッと作成する方法をご紹介します
2022.01.19
フロントエンド
Vue.js
CMS
HeadlessCMS
DatoCMS
5
シェア
はてな
3
画面の解像度の要件定義の話
最近、企業内システムのウェブサービス開発や、B2B2B案件とかでウェブの画面を作るケース、Flutterでスマートフォンアプリを開発するときに、画面の要件をどうしましょう、という話が出てくることが多く、毎回似たような説明をしている気がするので、時間節約のためにまとめておきます。単にパソコンやモニターのカタログスペックを持ってくるだけじゃだめだということがお分かりいただければ大丈夫です。AppleがRetinaを世に出すまでは...
2021.12.07
フロントエンド
要件定義
Flutter
画面
19
シェア
41
27
JSレスBootstrapなdaisyUIの秘密
最近、趣味開発でフロントエンドをいじる場合とか、Reactの技術サポートで手っ取り早く使い捨ての環境を作る場合は次の組み合わせで作っています。[Vite.jsでReact + TypeScriptプロジェクト作成。Tailwind CSS。これにESLintとPrettierを入れて完了です。。
2021.11.24
フロントエンド
TailwindCSS
CSS
daisyUI
135
シェア
57
60
1
2
3
Next