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

Frontend カテゴリの記事

131記事中の 26 ～ 50 を表示

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で作ったフラグで管理するみたいな感じです。たとえば...

React Server ComponentでもContextで状態を共有する

Next.jsの最近の大きな目玉機能はReact Server Componentです。パフォーマンスアップに有効だったり、gRPCだRESTだGraphQLだ論争を終わりにするServer Actionsなど盛りだくさんです。一方で、サーバーコンポーネントはコーディング上の制約がいろいろあります。

Next.jsのServer Actionsは、サーバー側のバリデーションは不要なのか？

Next.jsの新機能でTwitter上でも少しバズったのがServer Actionsです。クライアントコンポーネント上にサーバー上で行うロジックを直接書き込むことが可能です。

data-testidはいつ使うべきか？そもそも使うべきなのか？

Playwrightあるいはそのロケーターの元ネタとなっているTesting Libraryでは、DOMを指定する方法として data-testid 属性を扱ったクエリーを提供しています。

アクセシビリティに考慮した出力値のHTMLマークアップ

以前書いたCypressの記事で、アクセシビリティ情報を使うことで壊れにくくなるよ、と（今では当たり前のようにみんな言っていますが）いう記事を書きました。この時は出力に使うべきロールが何か？というのがわかっていませんでした。> サーバーからとってきた動的な値を表示するテキスト

ChatGPTでE2Eテストコード自動作成

9/7に行われた技育CAMPアカデミアというイベントでPlaywrightについて話をしてきました。テストというと、設計手法であるところのテスト駆動開発は別としてちょっと業務っぽい感じがして学生さんにはちょっと響かないかな、というのも心配でしたが

クライアント/サーバ構成でみるPlaywright

Playwrightはさまざまな言語でテストを記述することが可能です。このような他言語展開を可能にしているPlaywrightのアーキテクチャについて調べてみました。

Playwrightのテストランナーを他のテストライブラリと比較する

テスティングフレームワークには大きく2つの流派があります。ひとつはJUnit、あるいはその祖先の　SUnitをベースにしたTDDスタイルものです。TDDスタイルはテスト関数、もしくはメソッドを実行します。

イチ押し。Playwrightの快適機能

Playwright連載3日目の今回は、その便利機能たちをCypressと比較しながら紹介します。Cypressで馴染みの便利機能がPlaywrightではどう実現されているのか、E2Eテストに関わる関係者の悩みを解決するどんな便利機能が備わっているのか、詳しく見てみましょう。

Playwrightの環境構築（VSCode Dev Containers編）

VSCode Dev Containersを利用してPlaywrightの実行環境をコンテナ上に構築する手順を説明します。

Playwrightのインストール方法と使い方

Playwrightは、Microsoftが開発したE2Eテストフレームワークです。Cypressと同様に、Chromium、Firefox、Safariなどのブラウザ上でE2Eテストの実行を自動化できます。

Playwright連載始まります

現在人気が高まりつつあって、Cypressを追い抜こうとしているのがPlaywrightです。かなりCypressを意識して機能追加を行なってきている印象があります。現時点では...

Angularをがんばらないで書く

他のフレームワークをいろいろ触ると、Angularはかなり独特な雰囲気があります。隠しきれないJava感というか、他のフレームワークでは存在しない様々な概念が見え隠れして、それをキャッチアップするだけでも結構重いです。もちろん、それぞれ意味があって...

リアクティブプログラミングについて考える

前回のエントリーで、コンポーネント単位のステートをがちゃがちゃ更新していくという、オブジェクト指向型（オブジェクトの境界がコンポーネント）の考え方から、より小さな状態のインタラクションになっていくよ、という話を紹介しました。ビジネスロジックのアーキテクチャとしては、DDD本には以下の2つが書かれています。

RFC閲覧補助ツールを作りました + リアクティブプログラミング

お仕事をしていて、たまにRFCを読みたくなることってよくあると思うのですが、読む対象のRFCがたくさんあると、どれから読めばいいのかな？読み落としたのはないのか？みたいなところが脳のワーキングメモリーから溢れて収集がつかなくなりがちなので、Graphvizで出力してRFCの関連を簡単に確認できるツールを作ってみました。

技育CAMPアカデミアで「ウェブ技術のトレンド」というタイトルで発表しました

技育CAMPアカデミアというイベントで発表をさせていただきました。勉強会で、手っ取り早く学んで役立ててもらえるものはなんだろうか、ということでウェブアプリケーションの構造について説明してきました

管理画面等でNext.jsをBetter Reactとして使う

最近、Next.jsが複雑になりすぎて、単なるウェブ画面を作る用途にはNext.jsは重すぎるので別のものが良いとか、Vercel統合のための機能が多いんでしょ、みたいな感想を見かけることが増えた気がします。特に管理画面とか社内システムとかですね。B2Cでも設定画面系とかは当てはまるかもしれません。

WebAssemblyとEmscriptenに入門した

EmscriptenはC/C++をWebAssemblyにコンパイルするツールである、Emscriptenに入門した際の流れや気付きについて紹介します。

JSパッケージ管理ツールpnpmの概要と内部構造を眺める

Vercelに触れてみようVercel CLIのインストール方法を調べていたところ、パッケージ管理ツールを用いたインストール方法としてnpm, Yarnと並んでpnpmが書かれていました。pnpmではどのようにパッケージを管理しているかなどの特徴を調べました。

Recoilドキュメント入門

RecoilはFacebookのMeta社製のReact用状態管理ライブラリです。この分野はFacebook自体がFluxという概念を発表してから、さまざまなライブラリが開発されてきました。特に広く利用されたのがReduxです。

対応ブラウザバージョンを考える

新しいウェブベースのシステムを開発する場合、あるいは更新する場合に問題になるのがブラウザのバージョンです。アプリケーションを実装する場合、場合によっては最新の機能を利用したいと思うかもしれませんが、場合によってはその機能を実装したブラウザのシェアが高くないかも？ということが考えられます。どの機能が使えるのかを選択するには、まずはブラウザのバージョンを決めなければなりません。