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

Frontend カテゴリの記事

131記事中の 51 ～ 75 を表示

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

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

Language Server Protocolを用いたVSCode拡張機能開発 (後編)

こんにちは、Futureでアルバイトをしている川渕です。[前編]ではLSPを用いたVSCode拡張機能開発チュートリアルとサンプルコードの解説を行いました。後編では前編で解説した[lsp-sample]に機能を追加する方法について説明します。

Language Server Protocolを用いたVSCode拡張機能開発 (前編)

SQLフォーマッタをVSCodeの拡張機能にする作業を行っており、そのための方法を学んでいます。本記事ではLanguage Server Protocolを用いたVSCode拡張機能開発について説明します。。

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プロトコルの存在や、今までの公式実装ととどのように開発のスタイルが変わるか、みたいな話を絵つきで説明したりしました。

React + Goで簡素な掲示板アプリを作ってみた

夏の自由研究ブログ連載2022の 5日目の記事です。今回は勉強中のReact、TypeScript、Goを使って掲示板アプリを作りました。

「業務を通じて学ぶ」vs「業務外で学ぶ」Vue.jsで人気曲ランキングを当てるWebアプリを作ってみた

フューチャー夏休みの自由研究連載の3本目です。はじめまして。TIG DXユニットの佐々木です。2022年4月に新卒入社し、7月からプロジェクトに参画しています。未経験の技術が採用されている開発にも携わっているのですが、技術のキャッチアップ方法には試行錯誤の毎日です...!!

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がわりのコンポーネントカタログを作るのに便利そうという話になったので、ちょっと試してみました。

ファイルダウンロード完全マスター

Real World HTTPでも紹介したネタですが、お仕事で受けている技術コンサル中に質問をいただいた時に整理のためにブログ記事にしてみました。サーバーx2、ブラウザx2と、ダウンロードするかどうかを制御する方法を合計4つと、絶対にダウンロードさせたいとか、S3を使う場合とか、サーバー側のファイルを閲覧するというケースについて紹介します。

SvelteKitのデフォルトプロジェクトから学ぶ

ウェブアプリケーションフレームワークとして最近注目度が少しずつ上がっているのがSvelteです。以前、Svelteをちょびっとサンプルを触ってみた感じ、コードの雰囲気はscript setup版のVue 3っぽいなー、という感じです。あとはプロパティ入力のあるコンポーネントでHTMLを生成するという基本構成はReactもAngularもみんなそうなので、今時のウェブフロントエンドのフレームワークを触ったことがあれば難しくはない気がします。1コンポーネントでおさまる範囲では[ちょっと前に]かんたんなアプリの試作をしてみましたが、じゃあ、一本分のアプリを作るときはどうなんだ、ということでSvelteKitでプロジェクトを新規で作ってみたけど、いろいろな未知の要素がでてきて、これはどうなんだ？というのをドキュメントから探す、という学び方もまあ悪くないな、ということでブログにしてみました。

Blazor WebAssembly入門

WebおよびモバイルインターフェースのプロトタイプアプリをBlazor WebAssemblyを用いて開発した経験を通して感じたことなどを簡単に紹介したいと思います。Blazor WebAssemblyとは...

CORSエラーのトラブルシューティング入門

業務でのフロントエンド開発時に、おなじみCORSエラーでハマってしまったのでそこで学んだ切り分け方法を共有したいと思います。

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

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

HACK TO THE FUTURE 2022本選のビジュアライザ作成しました

HACK TO THE FUTURE 2022本選のビジュアライザ開発担当したのでその体験記を残しておきます。HACK TO THE FUTUREはフューチャーグループが2018年からAtCoderで開催しているオンライン競技プログラミングコンテストで、全国から高度なプログラミングスキルを持つユース世代を発掘し、交流を図り切磋琢磨し合う場を提供することを目的として開催しています[^1]。

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

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

Software Design 2022年1月号に短期連載「Cypressで作る"消耗しない"E2Eテスト環境」を寄稿しました

[Software Design 2022年1月号]に短期連載「Cypressで作る消耗しないE2Eテスト環境」を寄稿しました！

画面の解像度の要件定義の話

最近、企業内システムのウェブサービス開発や、B2B2B案件とかでウェブの画面を作るケース、Flutterでスマートフォンアプリを開発するときに、画面の要件をどうしましょう、という話が出てくることが多く、毎回似たような説明をしている気がするので、時間節約のためにまとめておきます。単にパソコンやモニターのカタログスペックを持ってくるだけじゃだめだということがお分かりいただければ大丈夫です。AppleがRetinaを世に出すまでは...

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版が欲しいなとずっと思っていたので、今回作ってみました。

MONETマーケットプレイス × OSS活用でさっくりデモアプリ開発

MONET Technologies Inc. の竹内です。このたび、フューチャー技術ブログに寄稿させていただいています。今回は、弊社のMONETマーケットプレイス上のプロダクトを使って、MaaSアプリをイメージしたデモアプリを作ってみました。今回イメージしたデモアプリは「イベント会場へのマルチモーダル移動経路検索&予約&搭乗Webアプリ」です。

CypressでAPIの実行、異常系のテストを行う

フューチャー技術ブログでも何度か取り上げているCypressですが、私も最近触り始めました。今回取り上げたいテーマは、フロントエンドアプリケーションで、特定の画面に表示する情報をサーバーから取得する機能や、ボタンを押すとバックエンドサーバーなどにHTTPリクエストを送信するような機能が実装されている場合の話です。

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

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