WebP（ウェッピー）という画像形式をご存知でしょうか？ 長い間、webの静止画は大部分がJPEG/GIF/PNGのいずれかでした。WebPはこのすべてを置き換えることができる次世代のフォーマットです。2020年9月リリースのiOS 14がWebPをサポートしたことで、主要なモダンブラウザーの足並みがようやく揃いました。 この記事では、新しい技術の恩恵を最大限に受けつつ、変わり続ける画像形式に対応していくための最適解を探ります。 ※ この記事の初版は2020年10月の公開ですが、各ブラウザーの対応状況等は2022年11月に最新の内容に更新しています。 SafariがWebPをサポート。フォーマット戦争ついに終結か？ 2020年現在、webで主流の画像形式はJPEG/GIF/PNGの3つでしょう。 2006年リリースのIE7で透過PNGがサポートされたことで、静止画に関しては「写真のJPEG
わずか数行のJavaScriptで機械学習をフル活用できる無料Webサービス「StackML」を使ってみた！ - paiza times
どうも、まさとらん（@0310lan）です！ 今回は、誰でも簡単に機械学習を活用したプログラムをJavaScriptで構築できる無料のWebサービスをご紹介します！ 画像解析、顔検出、表情分析、骨格・姿勢解析、特徴分析…など、さまざまな用途において機械学習を活用したプログラムをJavaScriptで実現できるので、とてもユニークなWebコンテンツを簡単に開発することができます。 これまで漠然と機械学習に興味を持っていた方も含めて、ぜひ参考にしてみてください！ なお、paizaラーニングでも機械学習を学べる「Python×AI・機械学習入門編」を公開していますので、合わせてチェックしてみてください。 Python×AI・機械学習入門編について詳しくはこちら 【 StackML 】 ■「StackML」の使い方 それでは、StackMLを使いながらどのようなことができるのかを見ていきましょう！
TypeScript開発にRailway Orientedを持ち込み、より型安全なエラーハンドリングへ - Sansan Tech Blog
Digitization部 Bill One Entry*1グループの秋山です。 はじめに Domain Modeling Made Functionalというスゴ本 補講：Make Illegal States Unrepresentable バックエンドの処理を抽象化する 手続き型プログラミングの典型例 課題1：制約のないエラーハンドリング 課題2：低い可読性 課題3：エラーハンドリングの低い網羅性 Railway Oriented Programming TypeScriptで型安全にエラーハンドリングする ステップ1：サブ関数の出力はResult型で表現する ステップ2：サブ関数にResult型を入力できるようにする ステップ3：サブ関数を連結する ステップ4：網羅的にエラーハンドリングする おわりに 付録 TypeScriptの全文サンプル はじめに エラーハンドリングは重要な処
通常、ReactやTypeScriptを使って開発する場合は、ローカル環境で開発して、ビルドして、ブラウザーで表示するという流れになります。 ただ、昨今のブラウザーの性能はかなり高くなっており、ES Modulesをうまく使うことで、ノーバンドルでReactやTypeScriptをリアルタイムにブラウザー上で反映させることができるのではないかと考えました。 この案をもとに、何番煎じかわかりませんが、ブラウザー上でリアルタイムにReactやTypeScriptをバンドルするライブラリを作成しました。 以下のようにコードを書くだけで、ブラウザーで実行可能なJavaScriptコードが生成されます。 import { browserBundle } from "browser-bundler"; const code = ` import React from "react"; import R
気になったので調べてみました。 tsconfig.jsonと普通のJSONの大きな違い tsconfig.jsonには、コメントが書けます。 tsc --init した時に生成されるtsconfig.jsonに、大量にコメントが付けられているので、すぐに気付くことと思います。 例) { "compilerOptions": { "target": "es5" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */, "module": "commonjs" /* Specify module code generation: 'none', 'commonjs', 'amd
Merpay Advent Calendar 2021 の 8 日目はメルペイフロントエンドチーム の @tanakaworld がお送りします。 はじめに メルペイは金融サービスであり、品質の維持・向上に日々取り組んでいます。フロントエンドチームでは、約 2 年前からリグレッションテストの自動化に取り組み始め、直近の 1 年間はインテグレーションテストの自動化にもチャレンジしてきました。本記事ではメルペイフロントエンドチームに於けるテスト自動化の方針とその全体像について振り返ってみたいと思います。 フロントエンドプロダクトに関わるテストは次のものが挙げられます。これらをひとつずつ順番に見ていきたいと思います。 ユニットテスト インテグレーションテスト シナリオテスト リグレッションテスト テストの種類とそのカバレッジ対象 1. ユニットテスト ユニットテストは Jest を用いて、主に
はじめに JavaScriptで非同期処理を書くシーンは数多くあると思います。 なのに、今までなんとなく使用してきました。これを機会にちゃんと勉強したいと思い体系化してまとめました。 それだけだとタダのメモになってしまうので、なるべく初学者の人が理解しやすいように書きました。 自分はこの記事を書くことで、JavaScriptの躓きポイントの代表格である非同期処理（Promise や async/await ）についても理解が深まったのでいい内容だと思ってます。長いけど。 主に初学者の方に読んでいただけたら幸いです。 JavaScript上級者の方は。何か間違っている記載があれば是非コメントください。 同期処理と非同期処理 まずは用語の定義からです。 同期処理は、最初のコードから次のコードへと順次処理（実行）されていくことです。 対して、非同期処理とは、ある処理が終了するのを待たずに、別の処
はじめに みなさん様々な言語でAPIサーバーを立てて負荷試験を実施したことはありますか。 私自身、業務でPythonのアプリケーションに対して負荷試験を実施した経験があります。 その際にPythonの速度観点の不安定さを目の当たりにしたと同時に、別の言語ではどのような違いが生まれるのだろうか、という疑問を持ちました。 そこで今回は、簡単ではありますがGoとRustとPythonでそれぞれAPIサーバーを立てて負荷試験をしてみます。 負荷試験対象のAPIサーバー 今回は(1) Hello, World!を返すAPI(2) ファイル読み込みAPI(3)1秒待ってから応答するAPIの3つを実装します。 (1)はAPIサーバー自体の応答速度の計測、(2)はメモリを消費する処理が生じた場合のAPIの応答速度の計測、(3)は待ち時間発生している時のAPIの応答速度の計測することが目的です。 (2)につ
ニッチすぎる！？知られざる広告JavaScriptの世界 - CARTA TECH BLOG
こんにちは。雨宮(@rail44)です。 普段はヨーヨーやポケモンに興じるかたわら、株式会社fluctで広告配信システムの開発を担当しています。 fluctは広告業界ではSSP(Supply-Side Platform)と呼ばれる立ち位置で、インターネットメディアの収益の最大化にフォーカスした事業を行っています。 私たちのシステムを使うと、広告によるマネタイズが面倒な運用無しに出来る。といったイメージです。 この記事では、自分が直近で担当をしている広告の配信スクリプトと、普段注目されづらいその裏側について書いていきたいと思います！ 広告タグの構造 さて、webページに広告を表示したい場合、アプリケーションはHTMLで記述されているため、広告もHTMLタグの形でお渡しすることになります。 (※fluctではモバイルアプリや動画プレイヤーへの広告配信も行っており、それらの場合はHTMLではない
非同期プログラミングについて、イメージだけを超速で掴むための記事を書きました。非同期プログラミングが全くわからない人、具体的には、「async await ってなに……？」「for 文で実行していくのと何が違うの……？」レベルの人を想定しています。 非同期プログラングって何？ 同期的じゃないプログラミングです。同期的ということは、プログラムが上から下に順々に実行されるということです。つまり、普通のプログラムはだいたい同期的です。言い換えれば、非同期プログラミングは順番が入れ替わる（可能性）のあるプログラムです。なぜそんなことをするかについては後述します。 ペペロンチーノを作りたい あなたはペペロンチーノを作りたいとします。以下のタスクが必要です。 パスタを茹でる（5 分） ニンニクを切る（1 分） ソースを作る（4 分）、ただしニンニクを切っている必要がある 盛り付けをする（0 分）、ただ
最近はプログラマ向けの技術書を読んでもムカついたりがっかりしたりばかりで、読みたい技術書を探すにも良い技術書評家はいないし、もうプログラマ向け技術書というジャンルは終わってしまったのだろうか。それはなぜか。 ・・・というような不満をもっていたが、考えているうちにこれは概ね濡れ衣に思えてきた。端的にいうと、一線を退いた元おたくが「最近のアニメ（などの得意だったおたく分野）はつまらん」というのと同じ現象が自分に起きているだけな気がする。 キャリアの停滞 まずマンネリ化。自分はキャリア初期のたくさん学ぶことのある時期は終わってしまった。これは雇用という点では良いことだが、学びのある本に出会う確率を下げてはいる。多くの人が「これは必要」と思う話題ほどたくさんの本が書かれる。中身はどれも似通ってくる。新しい読者が必要なものに出会う確率はあがるが、必要なものを読み終えた読者は同じものの繰り返し、すなわ
[{ "teamName": "チームA", "players": ["Aさん", "Bさん", "Cさん", "Dさん"] }] スプレッドシートの内容を Node.js で取得 スプレッドシートの内容を Node.js で取得するために @googleapis/sheets を使用しました。 認証情報は Application Default Credentials (以下 ADC) が設定されていることを前提にしました。事前に認証情報に紐付いているメールアドレスに対して、スプレッドシートを閲覧できる権限を与えておく必要があります。 これにより以下のコードでスプレッドシートの内容を取得することができます。 const sheetId = ""; const auth = new GoogleAuth({ scopes: [ "https://www.googleapis.com/aut
先月、Node.jsバージョン14がリリースされたこともあり、改めて最新のJavaScriptの書き方を調べてみました。その中でも特に便利だと感じたJavaScriptの書き方や普段の開発でよく利用している記法をまとめています。 アロー関数式 アロー関数式は関数を定義するための構文です。function式よりもアロー関数式の方が記述が短いので読みやすくなります。また、function式で度々問題になるthisが固定されるので混乱を避けることができます。メソッドでない関数はアロー関数式で定義するのがよいと思います。 function式 function name(arg) { return 'foo'; } アロー関数式 const name = (arg) => { return 'foo'; }; async/await async/awaitは非同期処理の構文です。また、asyncは非
![[2020年版] JavaScriptの便利な書き方まとめ | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/c6082d053d0b1940e3a9c4d81bf031a09b51ab0c/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2020%2F04%2Fjavascript.png)
RustのgRPCがGoよりも遅い？
夏のある日、GoのgRPCが、Rustよりも2倍早いという記事を見つけました。「おいおい、測定ミスだろ」と強がっていましたが、日々、不安は高まっていきます。真実の愛であれば、疑うことは許されませんが、エンジニアの言語への愛など、所詮、状況に応じて使い分けるような打算的な愛。確認してみました。 性能測定結果上記の記事と同じく、gRPCのサーバソフトウェアは、Goはgrpc-go、Rustはtonicのgreeterの性能を、gRPCのクライアントソフトウェアghzを使って、測定しました。ハードウェアは、AWSを利用し、サーバはc5a.8xlarge(32 vCPU/64 GiB)インスタンス、クライアントはc5a.16xlarge(64 vCPU/128 GiB)インスタンスを使いました。 1台のクライアントインスタンスは、同時に3,000個のgRPCクライアントを立ち上げ、合計で6,000
あなたの window.open はなぜ開かないのか，Chrome で - マンガ〜ノ伊藤ノ〜ト
先日 window.open をしようとしたらポップアップブロッカーに阻まれて open することができなかった． Blocked まあ，これならよくあることなのだが，いかんせん自分の記憶では onClick のようなユーザーのアクション内で開かれた window.open は阻まれないことになってると思っていた．だからそのときも onClick のイベントハンドラ内で window.open したから大丈夫だろう，と思っていたら，見事にブロックされてしまったのでなぜだろう，となっていた． 検証 なので，検証するために 3 つのケースを用意してみた: 検証ページを用意したのであなたの環境でも試してみてね♥ 今回試すブラウザは Google Chrome を前提にしてます ケース1 const immediate = () => { window.open('https://www.goog
JavaScriptのややこしい機能としてよく槍玉に挙げられるのがthisです。その特徴のひとつは状況によって意味（thisの値）が違うことであり、これを指して「JavaScriptのthisは4種類」とする説も見られます。 そこで、この記事ではthisが何種類あるのか、ECMAScript仕様書を頼りに調べます。ECMAScript仕様書とはJavaScriptという言語を定義する文書であり、JavaScriptのthisがどのような挙動をするのかも当然定義されています。今回は仕様書の2020年5月26日版ドラフトを参照します。 https://tc39.es/ecma262/結論としては、最も大ざっぱに分けると3種類、最も細かく分けると157種類です。この記事では全種類漏れなくサンプルコード付きで説明します（似たようなやつはまとめて説明します。また、一部観測不能なものがあります）。 ス
Reactハンズオンラーニング 第2版
Facebookが開発したJavaScriptライブラリ「React」の解説書。2013年にオープンソース化されたReactですが、ここ数年で大きな変更が加えられ、またReactを取り巻くエコシステムも大きく変化しました。本書では実際に動くコンポーネントを作りながら、最新のReactの記法について解説しつつ、最新のツールやライブラリも紹介します。初心者から中上級者まで、Reactの今をすばやく学習することができます。 賞賛の声 まえがき 1章 Reactの世界へようこそ 1.1 本書のねらい 1.2 Reactの過去と未来 1.2.1 第2版の変更点 1.3 環境の構築 1.3.1 GitHubリポジトリ 1.3.2 React Developer Tools 1.3.3 Node.jsのインストール 2章 React学習に必要なJavaScriptの知識 2.1 変数の定義 2.1.1
Blueskyのフォローお願いします！ はじめに まずはこちらをご覧ください。 これは私のApple Watchで計測されたヘルスケアデータです。Apple Watchをつけていると、心拍数や歩数、睡眠時間などのデータが自動的にiPhone内に記録されます。 SREなら健康を維持するためにもSLIとSLOを設定して可視化するべきですよね？ SREなら健康エラーバジェットが無くなりそうだったら「今すぐ寝ましょう！」と架電が来て欲しいですよね？ 普通にやるとiOSアプリを用いて直接ヘルスケアデータを確認することになりますが、Web系のSRE的なエンジニアとしてはやはり業界標準の技術で可視化したいところです。 また、iOSアプリを開発するのは専門知識が必要となり非常に骨が折れる作業です。そもそもMacがないとできないですし。 そこで、今回は Apple Watchのヘルスケアデータを 全自動で良
この記事はTSKaigi2024での以下の私の発表内容を書き下ろしたものです。 なぜAPIに型をつけたいのか 現代のWebのシステム開発において、クライアント・サーバーともに型のある言語で開発されることが増えてきました。静的な型検査はコードの堅牢性やよりよいメンテナンス性の向上をもたらします。 プログラミング内部だけで型検査をするだけでも十分メリットはありますが、外部I/Oに対する型付けが不十分だとそのメリットを最大限に発揮してるとは言えません。外部I/Oとは、例えばWebフロントエンドだとLocalStorageやDOMからの入力値、それからネットワーク通信（今回はこれをAPIと呼びます[1]）などですね。サーバー側でいうとAPIからの入力・レスポンスやデータベースへの読み書きが該当します。 個人的な経験から言うと、Webシステムの開発におけるエラーの多くはAPIやデータベースとのやり取
元々は社内向けとして書いたものですが、転載許可が出たので Qiita 向けに加筆・修正した文章です。 僕は普段ペチパーバックエンド領域を担当することが多いのですが、フロントエンド領域を含めて社内の技術アップデートを一緒に頑張っていきたい、という思いから書きました。 なんせペチパーバックエンドエンジニアの拙い知識なので一部情報が古かったり間違っているかもしれません。 フロントエンドガチ勢の皆様、間違い等ございましたら温かく指摘して頂ければと思います。 前書き JavaScript は一応書けるけど、将来心配。なんかすごく進化してるって聞くけど、調べてみても訳が分からない。 僕も勉強し始めは同じことを何度も思いました。 そこで、僕の仕事環境を想定し、導入すべきツールを役割ごとに選定してみました。 上から順に読んで、インストールして、使えるようになるとそれなりにモダンなフロントエンドの知識を手に
Welcome to Comprehensive Rust 🦀 This is a free Rust course developed by the Android team at Google. The course covers the full spectrum of Rust, from basic syntax to advanced topics like generics and error handling. The latest version of the course can be found at https://google.github.io/comprehensive-rust/. If you are reading somewhere else, please check there for updates. The course is also av
<script nonce="xxxxx" id="initial-data" type="text/plain" data-json="${preloadedState}" ></script> このpreloadedStateはエスケープ処理が必要なので注意してください。 クライアント側の読み込み方 const initialData = JSON.parse( document.getElementById("initial-data")!.getAttribute("data-json")!, ); const { store } = configureStore(initialData); https://github.com/hiroppy/ssr-sample/blob/master/src/client/index.tsx#L21-L22 useEffect SSR では、
皆さん、こんにちは。かろっくです。 現在は情報系の大学に通っています。 さて、大学生といったら、趣味に時間を費やしてなんぼです。 自分は大学の図書館を本当に頻繁に利用しています。 見ての通り図書館のヘビーユーザなのですが、そうなってくるとやはり図書館の操作の自動化をしてしまいたいという欲求が出てきます。 というわけで、今回は大学のシステムを解析して自動化した話をしたいと思います。 ひとまず完成形 先に、実装したコードのリポジトリを掲載します。 動作例として、discord にメッセージを送信している様子を以下に示します。 現在は延長する書籍が存在していないため終了していますが、延長の必要な書籍が存在する場合は、延長を行います。 方針 大学のシステムを自動化するにあたって、単に Selenium 等のブラウザを使うのは少し癪です。出来ることならば、ブラウザ等を利用せず、HTTP リクエストか
先日の ua-parse-js のハイジャックの件 を受けて、業務の中で毎日動かしている On-premise Renovate の cron を土日祝に停止させたいという話が上がった。 業務の合間に書く時間がちょっと捻出できそうになかったこと、加えて汎用的なコードということもあり、プライベートでも使えそうだったので一般化した範囲でコードを書いてしまって、業務で社内用に調整する形で決着させたので、せっかくなので共有しておく。 社内が基本的に CircleCI なので特化したものと、一般的に使えるものでバリエーションごとに2つのパターンを用意した。 祝日に停止させるアプローチ ひとまず今回は内製の Bot の運用のため、以下のような特徴があった。 土日の設定自体は cron で曜日指定ができるため祝日にフォーカスして良い 厳密性を重視しない ミッションクリティカルな領域の話ではない 以上を考
Introcusion つい先日、「Rust版のRails」ともいわれている、 Locoというフレームワークを教えてもらいました。 Railsは昔ちょっとさわった程度なのですが、 Rustで手軽にRailsライクなアプリ開発はおもしろそうなので、 試してみました。 Loco? Locoについて簡単に説明します。 このblog記事で、Locoって何？ なんでRustなの？とか誰のためのフレームワーク？みたいなことが書いてあります。 軽く説明すると、↓です。 Locoって何？ Loco は、Rails からインスピレーションを得た Rust用のWebフレームワーク ほぼすべての Rails 機能が含まれている Controllerとaxum経由のルーティング ActiveRecordライクにSeaORMでモデル操作 rrgenでコード生成 その他いろいろ。詳しくは元記事で RubyでいいならR
その他詳細の料金プランページはこちら 今回はホビー用途となっているFreeプランを使います。無料でプロジェクトを2つ作ることができますが、APIを1週間未使用の場合はデータベースが一時停止となるようで再開する場合はダッシュボードから起動し直す必要があるようです。 サービスへの登録 では、早速Supabaseのサービスに登録を行っていきます。 Supabase.io Supabase.ioへの登録はGitHubアカウントを利用するようです。 「New Project」から新規プロジェクトを作成します。 プロジェクト名とデータベースのパスワード、リージョンを指定します。今回は「Tokyo」リージョンを選択しました。 「Create new project」を押下後、数分待つとプロジェクトが作成されます。 完了後に画面に表示されるProject API keyとURLを後ほど利用するのでメモして
Next.js + React Server Component のリファレンス実装が出たので、手元で動かしながら理解したメモ。 vercel/next-server-components: Experimental demo of React Server Components with Next.js. Deployed serverlessly on Vercel. これを書いてるモチベーションとして、Twitter を見る限り React Server Component のことを 「ただのサーバーサイドへの先祖返り」とか「SSR 結果を dangerouslySetInnerHtml してるだけでは？」みたいな反応があったので、そのへんの誤解を解きたい。 Introducing Zero-Bundle-Size React Server Components – React Bl
TL;DR 本記事で紹介するのは、Redux や React Router を使った React アプリケーション構築時のベストプラクティスを Next.js に適用した考え方です。 Next.js を外部モジュールと考え、Container/Presentation の Container を Adapter 層と見なす考え方 next/router などの Next.js の組み込みモジュール、Store、SWR（React Query） は Container（Pages） 層で利用する Storybook でコンポーネントを表示する際、Next.js 等のモックをできるだけ作らない 但し、Template 層以下の next/link や next/image への依存は制御できない なお本記事では、Next.js の依存層、Pages 層とTemplate 層という言葉は以下のこ
// let 論駁可能パターン = 値 else { never型を返す処理 }; let Ok(val) = reqwest::get(url).await else { return }; このコードの意味としてはreqwest::get(url).awaitがOk(結果)を返してきたらvalに束縛し、ダメだったら関数を抜ける、になります。 if-let式 let-else文の詳細を説明する前に、まずはRustのif-let式について説明いたします。 Rustは式指向言語のためifも標準で式になっています。よく他言語では三項演算子使用で宗教戦争が起きていますが「if"式"があれば争いなんて起きないのに...(ﾄｵｲﾒ」といつも思っています。
next.js + vercel + firebase authentication で JWT の検証を行う + Graphql
今個人で作ってるアプリの 認証 + Graphql の部分を抜き出して GitHub に公開した。 mizchi/next-boilerplate-20200727 next.js + vercel + firebase は (パーツを良く選べば) 最高 next.js はルーティングを持つページを作るには最高で、サーバー、静的サイト、JAM スタック、AMP と必要に応じて選択できる。React ベースならこれ一択。 認証サーバーの実装は毎度疲れるし、Firebase Athunetication はこの点においては OAuth Secret を置くだけ + Custom Provider も作れるので、最高。 それと比べて firestore は、ちょっと前に firestore べったりでアプリを試作したことがあったのだが、型がないためにかなり扱いづらく、また読み書きの速度が遅くパフ
using (var client = new HttpClient()) { var response = await client.GetAsync(url); .... } これは間違いです。HttpClientオブジェクトは dispose してはいけません！ Stackoverflowにも沢山この間違いがあります。 (追記: 正確に言うとdisposeしてはいけないわけではなく、生成と破壊を繰り返すのが誤りです) 正しい使い方はAPIの公式ドキュメントに書いてある通りです。 public class GoodController : ApiController { private static readonly HttpClient HttpClient; static GoodController() { HttpClient = new HttpClient(); } } 上
超モダンな技術で開発をしている話
はじめに 修正や追加等はコメントまたはGitHubで編集リクエストをお待ちしております。 本題 現在、私は社内唯一のエンジニアです。(会社の規模は10人程度で、資金がない) そんな訳で、全ての工程と裁量を持って開発をしています。 今回はその中で使っている技術について紹介します。 TypeScript Next.js Supabase TailwindCSS Material-UI Rome Zod Recoil Jest GitHub Actions Notion TypeScript これはもう言うまでもないですね。 型があることで、コードの品質が上がります。 使ってないプロジェクトは、今すぐにでもTypeScriptに移行してください。 Next.js Next.jsはReactのフレームワークです。 Reactの開発を楽にするために作られたフレームワークです。 コンポーネント単位での
Stripe & Next.js + AWS Amplify で会員 + 定期課金機能 / JP_Stripes20210903
Stripe & Next.js + AWS Amplify で会員 + 定期課金機能 / JP_Stripes20210903
この記事では約6,000万円（2,800 SOL）の利益をあげた、「NFT高速MINT bot」のソースコードを公開します。 NFTをmintした当時、実際に使用したソースコードです。 また、当時私がどんなことをして利益を上げたのかが分かる内容にもなっています。 botter志望でソースコードを見たいという人だけではなく、NFTの波に乗って利益を上げてみたいけど何をすればいいのかわからない人にもヒントになる...かもしれないので、何らかの形でこの記事を役立ててもらえたら嬉しいです。 注意 筆者はプログラミング歴1年未満の初心者です。 ソースコードには重大な欠陥等が存在する可能性があります。 この記事に掲載された内容によって生じた損害等について、筆者は一切責任を負いません。 何をするbotなのか このbotは、「Aurory」というゲームプロジェクトがNFTを販売開始するタイミングに合わせて
Vue.jsは昨今よく使われるモダンなJavaScriptフレームワークの1つです。Node.jsで環境構築し、サイト全体をVue.jsベースで開発することもあります。しかし、フロントエンド開発に慣れていない方やデザイナーにはNode.jsでの環境は少し参入障壁が高いです。 実は、Vue.jsは<script>タグから読み込こめばNode.jsを用いずとも使えます。この方法ならばLP（ランディング・ページ）やWordPressサイトといったHTMLベースのサイトでもVue.jsを活用できるでしょう。本記事ではそのようなちょい足しVue.jsの活用例を、最新のVue Composition APIとESモジュールを使って紹介します。 Vue.jsをちょい足す HTMLに下記のようなコードを足すことで、Vue.jsを<div id="app">の要素内に導入できます。 <div id="app
WebTransport と WebCodecs そして Web はどこまで "ゲーム化" するか | blog.jxck.io
Alternatives 結局 WebSocket が TCP に縛られていなければ良いのではという点に注目すると、 WebSocket over HTTP/3 が実現できれば HoLB などの問題は解決しそうだ。 しかし、仮にそこに複数のストリームを束ねようとしても、 WS の特徴上ストリームごとに 1RTT のハンドシェイクが必要となる。また、サーバから Stream を開始することができない(本当にそれが必要なのかは疑問だが)という問題があげられている。 また、 WebRTC の文脈で進んでいる RTCQuicTransport が、非常にというかあるケースではほぼ同じことを提供することになる点が指摘される。(策定者も同じ) これもやはり、 WebRTC が P2P 前提の仕様でスタートした点と Client-Server ユースケースとの乖離をベースに説明されており、すでに RTC
NextAuth (Auth.js) で認証させているWebアプリをPlaywrightなどでE2Eテストする際に、認証をどうやってさせるか、あるいは回避するかが悩ましい部分です。 もし採用している認証方式が、単純なID/パスワード認証であればテストユーザを作成し、Playwrightにパスワードを入力させれば認証できるので問題はありません。 しかし、Google認証などの外部のプロバイダを経由するような場合は、E2Eテストをすることが難しくなります。そこでこの記事では、NextAuthの認証済み状態をPlaywrightで再現させる方法を紹介します。 やり方は大きく2つ NextAuthの設定に依存してやり方は大きく2つあります。 セッションデータを database で管理している場合 セッションデータを jwt で管理している場合 データベースの場合 セッションデータをデータベースに
DDDで開発しようと思って、入門書を勉強して理解した気になっても、いざコードを書こうとすると、なかなか実装のイメージがつかなくて手が止まる、といったケースはあるかと思います。少なくとも、私はそうでした。 この記事では、一旦、DDDのモデリングの部分は置いておいて、コードを実装する上で知っておいた方が良さそうなことをいくつかピックアップして紹介していきたいと思います。いずれも基本的な内容のため、DDDを習得している方にはあまり新しい発見はないかもしれません。 なお、例として用いる言語はTypeScriptです。 DDDで実装してみてなにが良かったか 本題に入る前に、まずはDDDで実装するモチベーションを上げていただくために、実際にDDDで実装してみてよかった点をいくつかあげます。 ロジックを書く場所に悩まない・チームで統一できる 例えばMVCなど、ドメイン層を用意しないアーキテクチャで実装し
はじめに こんにちは。 都内在住のフロントンドエンジニアです。 僕はとある会社にて約 1 年半ほど React と WebRTC を用いて映像配信のアプリケーション開発を行ってきました。 そこでは開発をスムーズに進める為に WebRTC の SDK を利用していて、 本来学習コストが高いとされている WebRTC をカジュアルに利用することができています。 しかし、より入り組んだ実装をしたり映像配信特有の問題（後述） を解決するとなると以下 3 つの WebAPI の理解は避けて通れません。 MediaStream RTCPeerConnection WebSocket 詳しくは文中に記載しますがこれらの理解を深めないと開発の進行に大きな影響があると思ったので、WebRTC 関連のライブラリ等を利用せずに映像配信のアプリケーションを作って学習しようという考えになり、実際に作ってみました。
GraphQL Code Generator で TypeScript の型を自動生成する - クックパッド開発者ブログ
技術部の外村（@hokaccha）です。 レシピサービスのフロントエンドを Next.js と GraphQL のシステムに置き換えている話 - クックパッド開発者ブログ という記事を書きましたが、この中で詳しく説明しなかった GraphQL のスキーマやクエリから TypeScript の型定義を自動生成する仕組みについて紹介します。 なお、今回紹介したコードは以下で試せます。 https://github.com/hokaccha/graphql-codegen-example-for-techlife GraphQL Code Generator を使った型生成 GraphQL のスキーマから TypeScript の型を生成するためのライブラリはいくつかあります。 Apollo GraphQL Code Generator などが有名どころです。今回はシンプルさや拡張性を考えて G
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
次世代画像形式のWebP、そしてAVIFへ。変わり続ける技術に対応するweb制作の黄金解 - ICS MEDIA
ブラウザー上でReactやTypeScriptのコードをコンパイルして動かすツールを作った
tsconfig.jsonはJSONじゃないと言う話 - 焼売飯店
メルペイフロントエンドのテスト自動化方針 | メルカリエンジニアリング
【図解】1から学ぶ JavaScript の 非同期処理 - Qiita
Go、Rust、Pythonで実装したAPIサーバーの負荷試験比較 - Qiita
ペペロンチーノで学ぶ非同期プログラミングによる並行処理 - Qiita
技術書への不満という濡れ衣 - steps to phantasien
スプレッドシートの内容を GitHub のリポジトリに自動的に同期する仕組みを作った
[2020年版] JavaScriptの便利な書き方まとめ | DevelopersIO
JavaScriptのthisは結局何種類あるのか - uhyo/blog
ヘルスケアデータをGrafanaで見たくない…？〜健康 Reliability Engineering〜
TypeScriptとGraphQLで実現する型安全なAPI実装
モダン JavaScript プログラミングを始めるために知っておきたい技術セット - Qiita
Welcome to Comprehensive Rust 🦀 - Comprehensive Rust 🦀
SPA + SSR + PWA の作り方とセキュリティについて - hiroppy's site
大学図書館システムを解析して自動化した話(技術メイン)
CircleCI や GitHub Actions の cron を祝日だけ停止させたい
RailsライクなRustのWebフレームワーク 「Loco」 | DevelopersIO
オープンソースで話題のBaaS「Supabase」を使ってみた | DevelopersIO
React Server Component の Isomorphism について解説する
Next.jsに「できるだけ」依存しないReactアプリケーションの構成
Rustのlet-else文気持ち良すぎだろ - Qiita
HttpClientをusingで囲わないでください - Qiita
10秒で6,000万円稼いだ「NFT高速MINT bot」 - Qiita
HTMLにちょい足しでできる！ Vue.jsでサクッと動きをつける方法 - ICS MEDIA
E2EテストでNextAuth認証(OAuthなど)を突破する方法
DDDで開発する際におさえておきたい4つの基本事項
ReactとWebRTCでZoomのようなビデオチャットアプリを作ってデータフローを図解してみた