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

フロントエンド タグの記事

  • 42
    投稿
  • 20
    著者数
  • 23666
    総シェア数
  • 14848
    Twitter
  • 2587
    Facebook
  • 3781
    はてブ
  • 2450
    Pocket

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

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

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

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

Recoilドキュメント入門

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

Reactで決められた候補から選択させるコンボボックスを実装する（サーバーアクセスつき）

技術コンサルを行っているお客様から質問があったのですが、なかなかドンピシャな情報がなく、試行錯誤したのでその検討結果をまとめてみました。

PlantUMLをReact上でレンダリングする

前回の記事ではMermaid.jsをレンダリングしましたが、次はPlantUMLをレンダリングしてみます。こちらも、前回のMermaid.js同様、メンテナンスされているPlantUML対応コンポーネントはありません。PlantUMLもMermaid.js同様、多様なダイアグラムをサポートしています。

Mermaid.jsをReact上でレンダリングする

Mermaid.jsをReactで表示しようとしたものの、Reactラッパーとしてnpmに公開されているものがどれも古くてメンテナンスされていなそうという問題がありました。この手のアダプター系のライブラリはどうしてもメンテナンスがされなくて放置されるのが早くなりがちです。脆弱性が残り続けたりします。そこで自前でやったところ、思ったよりも簡単だったのでそのやり方を紹介します。

Goで作ったロジックにWebUIをつけてGitHubページに公開する

ちょっとしたツールをGoで作ってみたのですが、わざわざインストールしなくてもいいようにWebのUIをつけてブラウザで使えるようにしてみました。ウェブフロントエンド部分はNext.jsの静的サイトで、GoはWASMにしてロードして実行しています。WASMを使うのは初めてなのであえて選んでみました。

東京Node学園40時限目で話をしてきました

オンライン開催された東京Node学園40時限目で発表してきました。内容としてはこのブログに書いた、gRPCがフロントエンド通信の第一の選択肢になる時代がやってきたかも？という記事をベースにして、gRPCとは何かとか、Connectプロトコルの存在や、今までの公式実装ととどのように開発のスタイルが変わるか、みたいな話を絵つきで説明したりしました。

gRPCがフロントエンド通信の第一の選択肢になる時代がやってきたかも？

サービス間通信とIDL（インタフェース記述言語）連載の中でご紹介したgRPCのGo実装の新星、Connectのアップデートについて紹介します。Go 1.19が出たらconnect-goは1.0にして以後後方互換性を守るよ、connect-webを出すよという2点です。

Next.js公式のMDXプラグインで、Markdownでページを作る機能を試してみた

お客様と一緒にNext.jsのドキュメントの輪読会をやっているのですが、その中で初めて知った機能がMDXというマークダウンでページを作成する機能です。https://nextjs.org/docs/advanced-features/using-mdx利用規約とか、プライバシーポリシーのページ、ヘルプページの作成とか、Reactコンポーネントも表示できるので、Storybookがわりのコンポーネントカタログを作るのに便利そうという話になったので、ちょっと試してみました。

オンライン勉強会の発表順を決めるサービスを作ってみた

オンライン勉強会をする上で、ちょっと悩むポイントは発表順を決めることです。meetなどで表示されるユーザー一覧は、人によって表示順序が異なるため「画面上の右上の人から順番に」という技が使えなかったりします。

DatoCMSでポートフォリオをサクッとつくる

Headless CMSサービスであるDatoCMSをつかってポートフォリオをサクッと作成する方法をご紹介します

JSレスBootstrapなdaisyUIの秘密

最近、趣味開発でフロントエンドをいじる場合とか、Reactの技術サポートで手っ取り早く使い捨ての環境を作る場合は次の組み合わせで作っています。[Vite.jsでReact + TypeScriptプロジェクト作成。Tailwind CSS。これにESLintとPrettierを入れて完了です。。

Cheetah Grid を Reactから利用するためのラッパーを実装してみる

秋のブログ週間連載の6本目です。FutureにはCheetah Gridという最速のウェブフロントエンド用のテーブルコンポーネントがあります。会社のお仕事コードは基本的にVue.jsが採用されることが多く、Cheetah GridもVue.js版のコンポーネントも提供されています。僕はなぜかReact案件が多くて慣れていることもあり、ちょっとしたコードもReactで書きたいと思っています。ちょっとしたツールを実装する上でかっこよくて性能が良いテーブルコンポーネントも欲しいのでCheetah GridのReact版が欲しいなとずっと思っていたので、今回作ってみました。

Cypressでテスト可能なドラッグアンドドロップ実装

お仕事コードで、「Cypressで頑張ったけどドラッグアンドドロップのテストができない」という相談を受けました。僕も試行錯誤してみたのですが、どうもうまくいかず・・・CypressとかのE2Eテストは、完全なユーザーの入力をエミュレーションするわけではなくて、ユーザーが入力したときに発生するであろうイベントを擬似的に作って投げているにすぎません。実際に発生するイベントよりも少ないです。例えば...

JavaScriptのコレクション操作入門

この記事ではこのフューチャー技術ブログを機能拡張する過程で学んだコレクション操作で利用頻度が高い順にまとめます。ブログ運営（？）の保守運用な雰囲気が少しでも伝わればなと思います。

Svelteに入門した

今年のゴールデンウィーク（STAY HOME週間）に最近話題のSvelteに入門したので紹介を書きます。Svelteは主にブラウザ上で動作するユーザーインタフェースを作るフレームワークで、ReactやVue.jsの対抗馬的な存在です。

どうしてHTML5が廃止されたのか

HTML5が2021年の1月に廃止されました。Webエンジニアとしてバリバリ活躍されてる方やエグゼクティブテックリードのような肩書きを持つ方にとっては「何をいまさら」という話題かと思います。しかしながら、今年も新人さん入ってきてくださったので、プログラミングを学習中にHTML5という文字列に悩まされないように...

ES2021／ES2022を知ろう

少し前にES2021にて変更される新機能が発表されました。JavaScriptを扱う上では知っとくべき！と意気込んだもののECMAScriptが何者なのかすら曖昧な理解だったので、この機会に学んだことをまとめてみようと思います。* ECMAScriptがJavaScriptにとってどのような役割を持つのかを知る

「リアクティブコントローラ」導入がもたらすかもしれないウェブフロントエンド設計の変化

フロントエンド連載2日目のエントリーです。あまり話題になっていないような気がしますが、Web Componentsを実装するためのフレームワークのLit-Element v3がバージョンアップして、ついでにリブランディングしてLit v2.0となりました。ロゴも変わり、ウェブサイトも新しくなりました。

Jest + TypeScript + Vue 3環境で Vue Testing Library(@testing-library／vue) を動かす

フロントエンド記事連載の1記事目です。Vue Testing LibraryはVue.js公式のライブラリであるvue-test-utilをベースとする、DOM Testing LibraryのVue.js用拡張です。Vue Testing Libraryを用いると、Vue.js公式ライブラリであるvue-test-utilと比較して内部構造を意識せずにテストを作成できます。

フロントエンド連載2021

2021の06.14～6.24にかけてフロントエンド技術をテーマにしたブログ連載を始めます。ES2021/TS/Node/Vue/Reactなどなど、ざっくりとフロントエンド界隈で話されるような技術をテーマにします。

Go 1.16のembedとgo-swaggerを組み合わせてフルスタック自動生成フレームワークを作る

Go 1.16のembedとchiとSingle Page Application、Go 1.16のgo:embedとNext.jsの相性が悪い問題と戦うに近い感じの研究記事です。

Service Worker開発で起きた不具合を振り返る

Service Worker開発で起きた不具合と対応方法を記載します。Service Workerは、ブラウザがWebページとは別にバックグラウンドで実行するJavaScriptになります。

Parcel 2.0 beta.1を試す

以前、TypeScriptのバンドラーとしてParcelの紹介をしました。* [今あえてTypeScriptのビルド＆バンドルツールを探してみる]その後、6月ぐらいに2.0のbeta.1がリリースされていましたので試してみました。ウェブサイトも公開されています。https://v2.parceljs.org/