はてなブックマーク

2022年11月にChatGPTがリリースされて、1年と約半年が経過しました。私はChatGPTが話題になった頃から、継続して利用しています。ChatGPTを使い続けていると、Webアプリケーションのフロントエンド開発に役立つことがありました。 そこで、本記事ではフロントエンド開発でChatGPTを活用して効率よく進める3つのパターンにまとめました。これらのパターンを紹介し、読者の皆さんの開発に役立ててもらえればと思います。 以下は、本記事で紹介するFigma、ソースコード、デプロイ先URLです。 Wireframing photo - Figma silverbirder/figma-photo-sample-app-for-ai - GitHub https://figma-photo-sample-app-for-ai.vercel.app ChatGPTを使う前に ChatGPTに

最近、ビアードパパの焼きチーズケーキシューにハマっているsilverbirderです。 文章作成が苦手な私は、AIが文章を代筆する「AI Ghostwriter」というChromeの拡張機能を開発しました。今回は、この便利なツールの紹介をします。 Chromeウェブストアで公開しています。気になる方は、以下のリンクよりダウンロードしてください! 無料です! AI Ghostwriter って？ AI Ghostwriterは、ChatGPTを活用して執筆者のライティング作業を助け、その品質を向上させるChrome拡張機能です。これはブラウザ上で選択したテキストに対して様々なアクションを実行できるツールで、ライティングにおけるあらゆる問題を解決します。 アクションは、デフォルトで以下の3つを用意しています。(後述しますがカスタマイズ可能です!) 校正(Proofreading) タイトル生成

こんにちは、テストが好きなsilverbirderと申します。Webフロントエンドのテストは実施していますか？ユニットテストやビジュアルリグレッションテストは広く知られていると思います。しかし、パフォーマンステストのためのテストコードはありますか？また、カオスエンジニアリングテストやアクセシビリティテストはありますか？ 今回、私はWebフロントエンドにおける網羅的なテストパターンを調査し、その結果をここで紹介したいと思います。これらを理解することで、読者の皆さんが適切なテスト戦略を策定する際の参考になれば幸いです。 前提 今回、テスト対象として取り上げる題材は、TodoMVCというTODOアプリです。フレームワークとしてReactを使用しますが、紹介するテストパターンはフレームワークに依存しないものです。ただし、使用するライブラリはReactに関連しているため、その点についてはご了承くださ

WikiWikiWeb というコンセプトが好きで、そのコンセプトが含まれている Obsidian や Scrapbox が好きです。Obsidian には、obsidian-git という Git 連携のプラグインがあります。こちらには、デスクトップだけでなく、モバイルからでも Git Commit できます。 そこで、私が持ってる iPhone を使って、Obsidian で Git Commit する手順を紹介します。 手順 iPhone から https://obsidian.md/ にアクセスし、アプリをダウンロード アプリを開いて、Create new vault をタップ Vault name に、適当な名前を入力 (後で変更可能)し、Create をタップ 左上のサイドバーアイコン → 設定アイコン → コミュニティプラグイン → コミュニティプラグインを有効化 の順でタップ

connect-web の記事が、はてブでトレンドになっていました。気になったので、試してみました。 サンプルコードは、次のリポジトリに置いています。 前置き: gRPC と connect-web の雑な理解 ※ このあたり理解がめちゃ浅いです RPC (Remote Procedure Call) を実現するためのプロトコルとして、gRPC があります。 このプロトコルは、ブラウザ側からは使えない(?)ため、gRPC-Web というブラウザ向けの gRPC というものを使うことになります。 その場合、ブラウザとサーバーとの間に、プロキシを建てる必要があるようです。(たぶん) そこで、Connect という gRPC 互換の HTTP API を構築するためのライブラリ群が開発されました。 これのおかげで、プロキシを建てる必要がなく、ブラウザ側から gRPC を使うことが可能になります。

ビジュアル的によく知られた物を指示してください 例. Wizard, priest, angel, emperor, necromancer, rockstar, city, queen, Zeus, house, temple, farm, car, landscape, mountain, river など 強いフィーリングや神秘的な響きのする言葉は良い結果を生みやすい “a sense of awe” “the will to endure” “cognitive resonance” “the shores of infinity” “the birth of time” “a desire for knowledge” “the notion of self”など 画風(style)を決めてみてください 例. “a cyberpunk wizard” “a surreal lan

私は、これまでプライベートでしか React を使っていませんでした。 最近、業務で React を使う機会が増えたので、学んだことを残そうと思います。 React の歴史 なんで React って生まれたんだろうって気になりました。 簡単ですが、ちょこっとだけ調べて、次の記事にまとめました。 React を学ぶ前に歴史を知る React は、次の問題を解決したかったんだと思います。 DOM ツリーが大きくなるにつれて、下位の変更によるカスケード更新の負荷が大きくなる そこで、React は、この問題を解決するために、仮想 DOM という仕組みを作ったんだと思います。 仮想 DOM、差分検出処理、そして Fiber React は、直接 DOM を操作するのではなく、仮想 DOM に対して操作します。仮想 DOM は、名前の通り仮想的な DOM です。 仮想 DOM を DOM へ反映する

BigQuery、皆さん使っていますか？ 私は、業務でBigQueryを使ったデータ構築をしています。 品質担保のため、BigQueryのSQLに対してテストをしたいと考えています。 本記事では、BigQueryだけで完結し、かつ、Mockデータを差し替え可能なユニットテスト手法について、紹介します。 動機 端的に言うと、BigQueryのSQL改修時にデグレが発生していないか確認したいです。 業務でBigQueryのSQLを書いているのですが、それに対するユニットテストがありません。 PythonやJavascriptのような言語でアプリケーション開発する場合、XUnit等のユニットテストフレームワークでユニットテストを書くのは、よくあると思います。 しかし、SQLに対するユニットテストというのは、(私の観測範囲上) あまり聞いたことがありません。 dbt(Data Build Tool

コンパイラ基盤であるLLVMについて、全く知識がない私が、 javascriptソースコードをパースしLLVMでコンパイルできるようになりました。 LLVMの記事は数多くありますが、初心者向けの記事が少なく感じたため、 本記事では、できる限り分かりやすくLLVMについて紹介できる記事を書こうと思います。 ソースコードは、こちらに置いています。 自己紹介 ふだん、javascriptやpythonなどインタプリタ言語を使うエンジニアです。 LLVMについて、全く知識がなかった人間です。 背景 過去に、おもちゃのブラウザ自作をやってみました。 HTMLとCSSを解析し、レンダリングするところを書き、基本的な動作を知ることができました。 HTMLとCSSとくれば、次はJSだと思い、JSを実行するエンジンを書いてみたくなりました。 ただし、WebブラウザのAPIとJS実行エンジンをバインディングす

TikTokへスクレイプするバッチをGCP上で構築しました。 GCP構築のシステム設計話と、その構築時に、ハマったことを共有します。 きっかけ 2020年、最もダウンロードされたアプリがFacebookを抜いてTikTokが一位になったそうです。 私もTikTokを利用しています。 ネットサーフィンをしている時に、tiktok-scraperというライブラリをcloudflareのサイトで発見しました。これを使って、TikTokの情報収集できるんじゃないかなと思い始めましたのがきっかけです。 tiktok-scraper Scrape and download useful information from TikTok. No login or password are required. This is not an official API support and etc. This

この資料は、マイクロフロントエンド入門書です。 マイクロフロントエンドへ至るまでの歴史から、マイクロフロントエンドの概要説明、実際にサンプルコードから学ぶチュートリアルを紹介します。 ## 対象読者 - フロントエンドエンジニア - マイクロフロントエンドに興味がある人 補足 ) https://intro-to-micro-frontends.netlify.app/ → MarkDownload → this book

Photo by Remotar Jobs on Unsplash Webフロントエンジニアたるもの、ブラウザの仕組みに興味を持つのは自然の摂理です。本記事では、私がブラウザの仕組みを学んでいく過程を備忘録として残します。 みんな大好きChrome Webフロントエンジニアに愛されているブラウザといえば、IEChromeですよね。 ブラウザでHTML,CSS,JSの動作確認するのは、日常茶飯事です。 ブラウザによって動作が異なることは、Webフロントエンジニアなら周知の事実です。 じゃあ、なんで動作が違うのかというと、 「レンダリングエンジンが違うから〜」 「Javascriptエンジンが違うから〜」 ぐらいは知っているんじゃないかなと思います。 じゃあ、そのレンダリングエンジンってどういう仕組みで動いているのでしょうか。 気になりますよね。 Chromiumについて Chromiumも、

Micro Frontends とは?🤔 皆さん、Micro Fronends(以下、MFE)をご存知でしょうか。説明をざっくりしますと、Microservicesの考え方をフロントエンドまで拡張した考え方です。Microservicesは、バックエンド側で適用される事例をよく耳にしますが、フロントエンドでの適用事例は、あまり聞いたことがありません。 従来、Webサービス開発ではモノリスな構成からスタートします。そこから、規模が拡大するにつれて様々な理由により、フロントエンドとバックエンドの分離、バックエンドのMicroservices化が行われます。 [翻訳記事]マイクロフロントエンド Microservices化によって、Scalability、Agility、Independency、Availabilityの大幅な向上が期待できます。しかし、依然フロントエンドはモノリスなままです