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

Frontend カテゴリの記事

131記事中の 76 ～ 100 を表示

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

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

Svelteに入門した

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

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

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

ES2021／ES2022を知ろう

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

Vue CLIのデフォルト設定からESLintのベストプラクティスを検討する

TIGの伊藤真彦です。この記事はフロントエンド連載の3記事目です。今回は愛用しているVue CLIを利用して、フロントエンドアプリケーションの詳細な設定について調査してみました。

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

フロントエンド連載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のサーバーの管理画面をFlutter Webで作ってみるための調査

Flutter連載の3本目はFlutter Webを紹介します。Flutter 2になって、Web向けに出力する機能もStableになりました。Flutter for Webは標準のHTMLにするHTMLレンダラーと、CanvasKitレンダラーと2種類あります。後者はSkiaという2DグラフィックスのライブラリをWebAssembly化したものを使います。Skiaは...

Cypress - 書きやすいテストの秘密と独自コマンドの実装

@testing-library/cypressの存在を知らずに、それっぽいものを作ろうとしたときにいろいろ調査した記録です。Cypressにはテストコードが縦と横に短くなる工夫がされており、そのメカニズムにしたがった独自コマンドを実装するにはコツが必要です。実装は次のところにありますが、@testing-library/cypressの方がメンテされているので、こちらは実際には使わないのをお勧めします。https://gitlab.com/osaki-lab/cypress-aria

保守・拡張をしやすいカプセル化したCypress

Future Tech Night #8というイベントで、E2EテストをCypressで快適に行う方法を紹介しました。文字起こし兼補足として投稿します。壊れやすい上に読みにくくなりがちなE2Eテストは、cypressのCustom Commandsなどでカプセル化すると読みやすくなおしやすい。

Cypress - 設定編

Cypressの設定周りについて紹介します。何も手を加えないデフォルトでも動作はする

Cypress入門～初心者でも簡単にE2Eテストが作れる～

皆さんは普段どのようにE2Eテストを行っていますか？忍耐強く手動でポチポチ画面を触って...というのはなかなかにしんどいですよね。自動化ツールを使って楽したいけど難しくてよくわからない、という方もいらっしゃると思います。本記事では、テスト自動化ツールを全く使ったことのなかった私が、テスト自動化ツールである[Cypress]の導入から基本的な使い方までをご紹介していきます。

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

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

OpenAPIからモックサーバを建てられるPrismを実際のプロジェクトに導入してみた

参加しているプロジェクトで、OpenAPI定義ファイルからモックサーバを建てることができるOSSツール「Prism」を導入することになりました。この記事では、Prism導入の手順や、躓いた点などを紹介します。

シェルスクリプトでもGUI

僕が大学に入ったときに買ったパソコンは、Celeron 300AMHzというやつで、300MHzのパッケージ違いの2モデル目みたいな今見ると変なモデル名のやつでした。ちょっといじると450MHzで動くいいやつでした。BeOS 4.0が付属しているショップブランドの自作PCでした。BeOSはPOSIX対応のOSではあるものの、カーネルからGUIから大部分がオリジナルで楽しいOSでした。いくつか独自コマンドがインストールされていて、その中にダイアログを出すコマンドがありました。

k6の使い方 シンプル&軽快な負荷試験ツールを試す

TIGの伊藤真彦です。業務で行っている開発がいよいよリリースを視野に入れたフェーズに入り、E2Eテストや各種性能試験を行いました。

Auth0 Rulesのユニットテストを書きたい

案件で認証プラットフォームである[Auth0]を利用していますが、Auth0の機能の中でもRulesと呼ばれるユーザ認証時にJavaScriptの関数を走らせる事が出来る機能は非常に強力で様々なニーズに対応することが可能になります。その中でJavaScriptの関数で書けるRulesに対して、ユニットテストを書く事が出来れば、Ruleの質も担保出来ます。

mxGraphで階層グラフを可視化する

前回の記事では、JavaScript製のグラフ可視化ライブラリについて概観しました。また、その1つであるVis Networkについて紹介し、階層グラフの可視化を行いました。Vis Networkはcanvasでの高速な描画が可能で、階層グラフをライトに表示・加工する場合は非常に有用ですが、大きな階層グラフを表示する場合にエッジの交差が多くなってしまうという課題があることを見てきました。

Vis Networkで階層グラフを可視化する

業務で階層グラフを可視化する機会があったので、階層グラフの可視化について共有させていただこうと思います。グラフとは関係を抽象化したもので、線グラフや棒グラフなどのチャートとは異なる概念です。

アクセシビリティ情報を使った壊れにくいE2Eテスト

E2Eテストはみんなしていますか？正直言うと、僕はあんまり好きじゃなかったです。お仕事では他の人が入れてくれたものが回っていたりしますが。前職で、SikuliXを使って社内向けのデスクトップアプリケーションのE2Eテストにトライしたことがあるんですが、すぐに壊れて動かなくなるので、費用対効果が出せなくてあきらめました（一人プロジェクトだったのもあります）。* 絵でマッチングを行うのでボタン画像をいっぱいスクショをとっていく必要がある

Auth0で認証成功後に任意のWebページを表示させたい

とある案件で、ユーザがログインした後に任意のページを表示させたいニーズがありました。こういった時はアプリ側でやってあげれなくもないのですが、複数のアプリが Auth0 で認証している場合には、アプリの数だけ改修が発生してしまいます。今回は context.redirect という Auth0 のユニークな機能を使って、改修を最小限に抑える方法を紹介します。

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

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

WEB+DB PRESS Vol.120 最新Vue.js3入門を読んで

私はフロントエンドエンジニアとして約1年くらいVue2でのフロントエンド開発を行っています。そんなVue3を全く触ったことにのないエンジニアが読んだ｢WEB+DB PRESS Vol.120｣に掲載されている｢最新Vue.js3入門｣の記事感想文となります｡

July Tech Festa 2021 winterで発表しました

先日July Tech Festa 2021 winterに登壇させていただきました。一足先にElectronの使い方 Web開発の技術でデスクトップアプリを作ろうというタイトルで入門記事を技術ブログでも書きました。その内容と重複する部分も...