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

Frontend カテゴリ

全134本のうち 51 ～ 75 本目を表示

記事一覧

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

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

Recoilドキュメント入門

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

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

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

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アプリを作ってみた

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もみんなそうなので、今時のウェブフロントエンドのフレームワークを触ったことがあれば難しくはない気がします。

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で開催しているオンライン競技プログラミングコンテストで、全国から高度なプログラミングスキルを持つユース世代を発掘し、交流を図り切磋琢磨し合う場を提供することを目的として開催しています。

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から利用するためのラッパーを実装してみる

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