PlaywrightのVSCode拡張を使って効率的にテストを書く
この記事では、Playwright の VSCode 拡張を使って GUI 操作のみでテストの記録や実行する方法について紹介します。 Playwright の VSCode 拡張とは？ Playwright の VSCode 拡張は、Playwright の作成元である Microsoft が公式に提供している拡張機能で、VSCode 内で直接ブラウザテストの記録や実行を支援するための便利なツールです。 GUI 操作を中心に、テストの記録や実行を手軽に行うことが可能となります。 VSCode 拡張のインストールは、以下のリンクから行うことができます。 VSCode 拡張を活用してテストを書く 本記事では、シンプルな ToDo アプリを例にテストの作成方法を説明します。Playwright のインストール方法は、公式ドキュメントをご参照ください。その後、VSCode に Playwright
やる気出ないんだが
個人開発勢、やる気が全然出ない。 とにかくめんどくさい。 そんなときにどう開発するか、アイデアを綴る。 場所を変えてみる 最も気軽かつ効果的な対処法。 主にこんな所がオススメ。 ファミレス 安定である 隣駅のカフェ ちょっと遠出してみよう 部屋の端っこ 環境が変わればなんでもいい 台所 もうやけくそだ 環境が変わればリフレッシュにもなる。 PCだけ持って出かければ作業せざるを得ないため、最もハードルの高いはじめの一歩を踏み出せる。 簡単な命令を自分に出す 作業を始める第一段階、この壁を越えればその後の集中を持続させることは容易だ。 しかし怠惰マンにとって大概、この段階が最もめんどくさい。 オフトンからでる。 Twitterを閉じる。 机に向かうなどなど。 めんどくせーのだ。 問題を正確に把握しよう。 第一段階がめんどくせーのが問題である。 だからまずNOTめんどくせーを実施することで作業を
openai apiを使ってdiscordのbotを作る。
おのれTwitter（X) Twitterの仕様がどんどん悪くなりDMが一日20件程度しか送れなくなりました。さらに凍結までされてしまってこれまでフォローしていた人が分からなくなり、結構混乱した。 twitterのDMで友人とやり取りをしていたのでこの仕様変更から主にdiscordでやりとりすることになり、 せっかくなら何かbot作りたいな～と思っていたので、試しに昔一度手を付けていたopenaiのapiを使った、 「わからないことを相手に聞かれたときに私がggrksと返信する前に答えてくれるbot」 を制作してみました。 使ったもの discordのbot openaiのapi(gpt-3.5-turbo) GCP：無料枠（らしい） python:3.9.2 pythonライブラリ(追加分) - openai_api: 0.27.8 - discord.py: 2.3.1 やったこと b
ChatGPT が回答する Discord Bot をほぼ0円運用できるように作った
こういう個人開発する時って限りなく0円に近い価格で運用したくありませんか？ 特にDiscordBotは色々制約がある上意外と作るのが難しかったので、知見を共有します あとChatGPTの話はあんまり出てきません ※この記事にはオーバーエンジニアリングを含みます DiscordBotの制約を知っておく 結論 WebSocketを常時Listenするのが一番簡単に作れるがサーバー費用がかさむ InteractionをHTTPで受け取るようにすればWebSocketほど自由度はないがFaaSの載せられる HTTPのInteractionは大体3秒以内に返答しないとタイムアウトになってしまうため、重めの処理は工夫する必要がある 作り方の制約 まず第一に、DiscordBotを作るならEC2なりVPSなりでサーバーを建ててそこで実行するのが一番簡単に作れます これはDiscordの仕様によるもので、
My first Cloudflare Workers AI
ワークショップ 来週というか今週の金曜日、名古屋でCloudflare Workers + Honoのワークショップをやるのですが、先日Birthday Weekで発表された「Workers AI (AIアプリがGPUで動く！)」が楽しいので、それを使ったアプリを作ろうということになりました。 先日もServerlessDays Tokyo 2023というイベントでCloudflare Workers + Honoのワークショップをやったのですが（4時間！）、その時にドタバタしちゃったんで、今回はもうやることを全部ここに書こうと思います。とはいえ「Cloudflare Workersとは」とか「Honoの特徴は？」とか書き出すとキリがないので、参考文献を参考にしてください。 準備してもらうこと まず、Cloudflareのアカウントを作って、Dashboardに入れることを確認してください
Hono + htmx + Cloudflareは新しいスタック
この記事は以前7月に自分で書いた「Hono + htmx + Cloudflare is a new stack」という記事を一部修正し、訳したものです。 Hono + htmx + Cloudflareは新しいスタック 以前、バックエンドエンジニアだった身からすれば、Reactは複雑だと感じることがあります。さらに（私はフレームワーク開発者なのですが）フレームワーク開発者にとってはハイドレーションの仕組みを作ることは厄介です。しかし、しばしばReactを使うことになります。 Reactの優位な点の一つは「JSX」です。最初見た時、JSXは奇妙に思えました。「なんでJavaScriptの中にHTMLのタグが入っているんだ！」。しかし、一度慣れると、JSXは柔軟で、書きやすいことに気づきました。 今日はこれから、JSXをサーバーサイドのテンプレートとして使う技術スタックを紹介します。これはつ
【Next.js 13.5】ローカル環境でHTTPSが使用できるようになった！
"scripts": { "dev": "next dev --experimental-https", "build": "next build", "start": "next start", "lint": "next lint" }, npm run dev > project-name0.1.0 dev > next dev --experimental-https ⚠ Self-signed certificates are currently an experimental feature, use at your own risk. Downloading mkcert package... Download response was successful, writing to disk Attempting to generate self signed certifi
CHANGELOGの悩みを一発解決！git-cliffの使い方からカスタマイズまで📚
はじめに CHANGELOGを自動生成するツールは多種多様です。Conventional Commitsに対応したコミットメッセージから生成するもの、GitHub上でのリリースやタグ付けまで行うものなどがあります。 CHANGELOGを自動生成する際には、バージョンタグに対応したコミットメッセージを基にしてくれると便利です。コミットメッセージを適切に付けるだけで、後はツールにお任せできます。ただし、いくつかの懸念点が存在します。 懸念点 1: チキンエッグプロブレム CHANGELOG自動生成ツールは便利ですが、一つの大きな問題があります。それは、Gitのタグとコミットメッセージを基にCHANGELOGを生成するため、タグを作成する前にはCHANGELOGが存在しないという点です。この状況は「チキンエッグプロブレム」に類似しています。具体的には、新しいバージョン（卵）がリリースされる際には
もう初回コードレビューはAIに任せる時代になった - CodeRabbit -
どんな人向けの記事？ レビューによって心理的なダメージを受けやすい方 非エンジニアだが、エンジニアチームがどんな機能を作っているか知りたい方 業務が溜まっていて、レビューに割く時間を捻出するのに苦労している方 コピペできるコードも公開します 初回レビューをAIに任せると、いろんなロールの人の役に立つ レビューは得意ですか？ 優秀なエンジニアしかいないチームであれば、PRは1トピックに絞って小さく明確なコミットによって作成され、適切な要約とともに提供されることでしょう。 しかし、実際にはいろいろな制約から、PRが想定よりずっと大きくなってしまったり、関連トピックと異なるコードが混じってしまうこともあります。 実際のところ、大きなPRを適切にレビューするのは難しいことです。また、自分が詳しくない領域のレビューを行わなければいけない機会もあります。 今回の記事は、レビューを作成してくれるAI C
LINEのインターンで好き勝手やって成長した話
これは何？ LINEのインターンに参加してめっちゃ楽しく成長できた！、という思いを書き綴っているポエムです。よしよし頑張ったねみたいな暖かい心で読んでいただけると良いと思います。 何をしたか 2023年の夏に、LINEで13日間インターンをしてきました。 LINEのインターンと言っても様々あって、技術職、企画職、デザイン職など職種ごとに分かれていて、さらに技術職の中にも就業型とハッカソン形式のインターンに分かれていたりします。ボクが参加したのは技術職のハッカソン形式のインターン（京都）です。 なぜ応募したか 今自分は大学1年生（B1）で、世間的に見ればインターンに参加するには早い年齢だと思っています。それでも応募したのは、高校生の時から周り（ついっただったもので観測する範囲も含む）が結構インターンに行っていて、自分も行きたいな〜と思いながら受験生していたという経験があり、大学入ったらインタ
225行のコードでGPTの仕組みを理解する
概要 LLMに関心があり、ChatGPTやtransformerの仕組みを理解したいと思っていたところ、雰囲気を掴むのにこちらの動画がとても参考になりました。 動画の内容としては、以下のコーパスを学習して、直前の数文字から次の1文字（単語ではないことに注意）予測機を作成するというものです。 この動画で完成するコードは以下で、225行しかなくとても読みやすいです。 また短いですがtransformerのエッセンスが詰まっていて勉強になりそうです。 このコードを読み解くことでGPTやtransformerがどのように動いているのか、ざっくり理解してみようと思います。 ちなみに完成するとこんな感じの文字列が生成されます。ぱっと見文章っぽいですね。 first Scitizen: He's enough; but he cannot give his friends. MARCIUS: Do yo
ChatGPT の Fine-tuning を試したけど上手くいかなかった話
これはなに？ 新しくリリースされた ChatGPT (GPT-3.5 Turbo) の Fine-tuning を試してみたメモ。 ChatGPTに最新の知識や専門知識を注入できるかどうかをテストしてみた。 結局、自分が想定した動きにはできなかったので記事にして供養します🙏 tl;dr 一晩試してみた程度では、ChatGPTに最新の知識を教え込む目的での Fine-tuning はうまく動かなかった。 OpenAIが提示している想定のユースケースとずれている利用方法なので、もう少しトライしても上手くいかないんじゃないかなと思う。 学習データに入れた質問をそのまま投げてあげると回答できることもある程度だった。(このままでは到底使えない…) 出力のトーンや言語の指示にプロンプトの文字数を大量に使っていて、それを大幅に削減したい、という時には使えそうだなという印象だった。 学習データの自動生成
CSSのSubgridが全ブラウザ対応。Gridの入れ子の基本から応用までを完全理解する
2023/9/12にChrome 117、9/15にEdge 117がリリースされ、CSSのSubgridが全ブラウザに対応しました。 Subgridとは、CSS Gridで新しく使えるようになった機能の一つ。行列（グリッド）を入れ子にして、親行列の行や列に子行列を整列させることが可能です。 この記事では、Subgridの基本から応用までを具体的なデモを交えて詳しく解説します。CSS Gridが初めての人でもわかりやすいよう、CSS Grid自体の解説も盛り込んでいます。 前提知識: CSS Gridとは CSS Gridとは、行と列を使ったレイアウトのことです。行・列とは、次の方向を指します。 CSS Gridを使うと、次のようなことができます。 ■ エリア名を指定して配置できる ■ 行列を繰り返したり、隙間をつくる ■ 行・列数の自動変更、敷き詰め 複雑な行列の入れ子と、subgrid
ReactのコンポーネントからStorybookのファイルを自動生成してみた
はじめに フロントエンドのプロジェクトでは、UIコンポーネントのカタログとしてStorybookが用いられるケースがあると思います。 StorybookはコンポーネントベースのUI開発の助けとなるツールで、Reactのコンポーネントを独立して視覚的に確認できます。 しかしながら繁忙時や規模の大きいプロジェクトになると、メンバーの増減や開発工数等でStorybookの開発コストが高く感じられる状況があると思います。 そこで本記事では、なるべくStorybookの開発コストを軽減して、Storybookのファイルを自動生成する仕組みを考案してみました。 Storybookとは Storybookは、UIコンポーネントを独立して開発・表示するためのツールです。 React, Vue, Angularなど、様々なフレームワークに対応しており、各コンポーネントの異なる状態やバリエーションを一覧で見る
強い思想: Go を Web 開発に採用する上で
Go は Web 開発に向いているか？ 最も向いている領域は「CLI ツール」「ミドルウェア」「マイクロサービス」だと思っている。なぜならそれらはコードベースを比較的小さく抑えることを前提としているからだ。 Go は大きなコードベースを抱えやすい設計の言語になっていない。 ミドルウェアとマイクロサービスに関しては小さく作ることが正義。 CLI ツールに関しては単一責務なツールであれば小さくなるが，複数を束ねるツールであっても Web サービス開発に比べれば考えることは少なくて済む。 Web 業界における「一般的な Web 開発」，すなわちモノリスを基本とした中規模以上の開発にははっきりと 向いていない と言うべきだろう。 フラットパッケージは正義か？ 私が SNS で何度か言及した以下の記事がある。 フラットパッケージ戦略は，確かに Go の文化圏においては一定の支持を集めている。Go の
SvelteはなぜReactよりも優れているのか
Svelte は比較的新しいフレームワークです。主に、仮想 DOM の課題が浮き彫りになってきた後で、それを解消しようというモチベーションで開発されています。なぜ Svelte が React や Vue などのように仮想 DOM を採用していにないのかについて、この記事でまとめてみようと思います。 読み書きしやすい：リアクティブなコンポーネントを実装するための"高級言語" 高速：仮想 DOM を利用しない 1. 読み書きしやすい：リアクティブなコンポーネントを実装するための"高級言語[1]" Svelte はリアクティブなコンポーネントを実装するためのコードを記述する上で一般的な UI フレームワークよりも人間が扱いやすい設計になっています。具体的に言うと、記述量が少なく、理解しやすい構文を実現しています。 例えば、React で以下のようなコンポーネントがあった場合を想定します。 im
Reactで再レンダリングを抑えるシンプルな方法
はじめに 「React で再レンダリングを抑えたい...」となった場合、多くの人が React.memo や useMemo、useCallback などのいわゆる 「メモ化」 を思い浮かべることでしょう。 しかし、そういった「メモ化」を用いなくても再レンダリングを抑える方法が実は存在しています。 今回はその代表的な例を２つ紹介していきたいと思います。 よくある例 まず例として、以下のような 「パフォーマンスに問題を抱えたコンポーネント」 を考えてみましょう。 import { useState } from "react"; export default function App() { let [color, setColor] = useState("red"); return ( <div> <input value={color} onChange={(e) => setColo
【入門】要件定義
はじめに 最近プロジェクトマネジメント関連の仕事をする機会が増え、(駆け出しですが)要件定義や設計関連の業務もするようになったので、私の経験を基に要件定義の具体的なプロセスや考え方について、まとめていきます。 この記事の対象者 要件定義の基本や思考プロセスを学びたい人 エンジニアからプロジェクトマネジメントをやりたい人 ビジネスサイドとエンジニアサイドのコミニュケーション能力を向上させたい人 具体的な事例を通して要件定義を学びたい人 前提 紹介する内容はあくまで一例であり、プロジェクトやチームの状況に応じて調整が必要 あくまで自分(駆け出しPM)の経験に基づいた内容を言語化しています プロジェクト規模は10名〜20名のWebアプリ開発を想定しています システム開発の全体像 一般的なシステム開発のプロジェクトは下記のフェーズで進んでいきます。 ※ コンサルの領域だと要件定義の前に企画構想とい
つくりながら学ぶ！AIアプリ開発入門 - LangChain & Streamlit による ChatGPT API 徹底活用
つくりながら学ぶ！AIアプリ開発入門 - LangChain & Streamlit による ChatGPT API 徹底活用 この本では、LangChain と Streamlit を用いて、ChatGPT APIを活用するAIアプリを開発していきます。つくりながら学ぶことを重視し、簡単なチャットアプリ開発から始めて、Embeddingを活用するアプリ開発まで、ステップバイステップで学べます。 AIアプリをローカル環境で開発した後は、WEB上にデプロイする方法も学びます。クラウドの知識もほぼ必要なく、ランニングコストも掛からない方法で行うため、ぜひ作ったアプリを公開することにチャレンジしてみましょう。 500円と設定していますが投げ銭用です。本文は全て無料で読めます。
シェルってなにしてるの
はじめに 先日シェルについてのオンライン勉強会に参加しました。 スライドも非常にわかりやすく、動画もアップされているので、ぜひ見てみて下さい。 何度勉強してもついつい忘れてしますシェルについて、忘れないうちにアウトプットしておきたいと思います。 私の解釈が混ざっているので、詳しく知りたい方は上のURLへどうぞ 前提 記事内で実行しているコマンドは全てawsのEC2(Amazon Linux2023)のbashで実行したものです。 シェルってなあに みなさん「シェル」使ってますか？ 使ってますよね？ sh, bash, zsh, csh,etc... いろんなシェルがありますね。 この「シェル」ってなんでしょうか？ シェルはユーザーが命令したことをカーネルに伝えてくれるやつ。です。 でも面倒じゃないですか？ なぜユーザーの命令がそのままカーネルではなく、わざわざシェルを通す必要があるのでしょ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
