独学で個人開発を始めて5年が経ちました。これまでには収益化に成功したサービスもあれば、鳴かず飛ばずでお蔵入りになったサービスも数多くあります。それらの経験から、成功したサービスはなぜ上手くいったのか、マーケティングや収益化において押さえておくべきことは何か、その要点が少しずつ見えるようになりました。 今回は私が開発〜集客〜収益化を行うプロセスと、各工程で気をつけているポイントを順を追って書き出してみます。上手く言語化できているか分かりませんが、暖かい目でお付き合いください。 収益化した3つのサービス 私はこれまでにWebサービスを20個以上開発しており、現在はポモドーロタイマー（月間100万ユーザー）やYouTubeのループ再生ツール（月間10万ユーザー）などを運営し、そこからの収入で生活しています。 基本は海外向けのBtoCで、以下のようなツール系が中心です： 収益化済みサービス： Po
こんにちは、トレタ VPoEの北川です。 今回は弊社でフロントエンドアプリケーションを新しく構築する際の開発環境として、何のライブラリを入れるかという開発環境初期セットを紹介しようと思います。 Web Framework / CSS Framework / Tesing Framework / Linter / Formatter、それぞれ定番で使うデファクトが大体ありましたが、近年では新しいライブラリも登場したので、2024年現在・最新版を、今回は直近で作られた実際のリポジトリを例にご紹介します。 今回紹介するリポジトリのアプリケーションはtoB向けの管理画面のアプリケーションで、特質した部分も特にない一般的なWebアプリケーションです。 それでは早速、package.jsonの内容はを見ていきましょう。 "dependencies": { "next": "14.2.13", "rea
小規模プロダクトにおける React 状態管理ライブラリ選定 in 2024 - バイセル Tech Blog
はじめに こんにちは！ テクノロジー戦略本部24年新卒の高橋です。 2023年の10月から内定者インターンを経験し、現在は開発3部CRMチームでフロントエンド(以後、FE)エンジニアとして働いております。 チーム内でFEの状態管理ライブラリを選定する機会があり、調査していく中で得た知見を共有したく、執筆に至りました。 少しでも状態管理ライブラリの選定に困っているFEエンジニアの参考になればと考えています。 はじめに 概要 前提 課題感 Context APIの思想とのズレ Context APIの記述量の多さ 状態管理ライブラリに求める要素 小さい単位で取り扱い可能 ボイラーテンプレートが少なく、APIが直感的で書き方の自由度が高くない 軽量 Reactアプリケーション内外での状態管理が可能 最終決定 検討候補 Redux Zustand Jotai Valtio 評価表 移行設計 既存C
HotwireとNext.jsをちゃんと見て比較しよう#本サイトでは、React/Next.jsに詳しいフロントエンドエンジニアを対象に、実際に動くコードと実際に動くデモを体感しながら HotwireとReact/Next.jsを比較します。 各技術でのUIの作り方を伝えるだけでなく、さまざまな状況での動きを確認していただくために、仕組みや限界も紹介します。そのため、かなり細部の議論もしています。 HotwireでもNext.jsと同等か、それ以上のUI/UXが実現できます。「Hotwireは簡単だけど、React/Next.jsの方が優れたUI/UXが作れる」というのは、かなり特殊なものでない限りは誤解ですHotwireはバックエンド非依存です。Rails, Laravel, Django, Go, Nodeでも関係なく動きます。実際、本サイトのHotwireコードはNext.js AP
自己紹介 山崎啓太郎 / Twitter: @tyage GMOサイバーセキュリティ byイエラエ アプリケーションセキュリティ課 - 元々はWebサービスの開発をしていてセキュリティの職種は6年目。 JavaScriptが好き。授業中に電子辞書でjQueryのソースを読み耽っていた。 - その他 - セキュリティ・キャンプ全国大会 2022, 2023 講師 - Bug Bounty Rewarded: Google GitHub, Twitter, etc - [ブログ] サーバサイドレンダリングの導入から生じるSSRF - [ブログ] 危険なCookieのキャッシュとRailsの脆弱性CVE-2024-26144
Next.jsと比較しながらHotwireを理解するサイト: "Hotwire for Frontend Developers"
ここ３ヶ月間ほど、"Hotwire for Frontend Developers"「フロントエンドエンジニアのためのHotwire入門」というウェブサイトを作っていました。（ベータ版として公開していました） HotwireとNext.jsをちゃんと見てから比較してもらいたいというのが最大の目的で、同じUIをHotwireのとNext.jsで作成し、デモを動かしたり、コードを見たりしながら比較してもらおうというのが主旨です。同じUIをNext.jsのPages RouterとApp Routerで作っているものもありますので、この比較もできます。 結構コンテンツが多いので、Zennではこれから少しずつ内容も紹介していきたいと思います。 まずはご覧ください！ "Hotwire for Frontend Developers"
Rewrite it in Rails
01 Nov, 2024 In 2022 I started building an application for creating Customs declarations. After evaluating some options and writing code in various programming languages and frameworks such as .NET/F#, Go, Rust, React, I eventually decided to write it in Ruby on Rails. Why? Because I was already familiar with Rails and because of that I could literally go 10x faster than I was with any of the afor
go.mod、DockerfileやCI設定に分散しがちなGoのバージョンをまとめて管理する / Go Connect #3
カナダのバンクーバーでエンジニアとして内定をGETすることに成功したので、就活に関してやったことをまとめました。 (就活の振り返りを音声で聞きたい方はポッドキャスト(ITトリオ)の方もどうぞ！) その前に: 古い情報に気をつけろネットを検索すると数年前のブログ記事がヒットしますが、それが1年以上前なら鵜呑みにせず、参考程度に留めておくのが良さそうです。 2024年6-9月の就活事情は1年前と比べてもだいぶ事情が違い、2023年冬の市場が悪くなる以前とはかなり就活の難易度が違いました。 先人の知恵や経験談に感謝しつつも、参考程度に留めておいて自分の力でリアルタイムの情報を収集することが大事だと思います。 内定をGETするまでの応募数と実績日本でのITエンジニア経歴: 5年 2023年12月末にカナダに渡航 2024年6月~9月で本格的に応募。総数は100くらい 2024年4月-6月前半: 様
テスト自動化の協業を加速する！ テックタッチのフロントエンドにおけるテストの分類 - Techtouch Developers Blog
フロントエンドエンジニアの 92thunder です。去年北海道旭川市に移住しまして、長らく打ち合わせを続けてきた家が10月にデプロイされたのでQoLが爆上がりしています。 テックタッチではデプロイ頻度を上げるためにテスト自動化に取り組んでいます。テスト自動化をQAエンジニアと進めていくためにテストの分類を策定する取り組みを始めました。この記事では、テックタッチにおけるフロントエンドのテストの分類とそれを策定するにあたって意識したポイントについて説明します。 デプロイ頻度改善のため、テスト自動化に取り組む なぜテストの分類が必要か テストの分類 コンポーネントテスト インテグレーションテスト テストの分類で意識したこと テストサイズを意識してコスパの良い自動テストへ 一般的な分類より、社内でのテストの呼び分けやすさを重視 おわりに デプロイ頻度改善のため、テスト自動化に取り組む テックタッ
Svelte 5 is alive
After almost 18 months of development, comprising thousands of commits from dozens of contributors, Svelte 5 is finally stable. It’s the most significant release in the project’s history. Svelte 5 is a ground-up rewrite: your apps will be faster, smaller and more reliable. You’ll be able to write more consistent and idiomatic code. For newcomers to the framework, there’s less stuff to learn. Despi
React NativeとExpo RouterのRSC導入に向けたアップデートが来そう - laiso
Expo Routerとは Expo Routerは、React NativeおよびWebアプリケーション用に設計されたファイルベースのルーティングライブラリ。 docs.expo.dev RSCを活用してサーバー側でコンポーネントレンダリングとストリーミングを行う新しいSDUIの構想 "Fetch Once, Render Everywhere: React Server Components in Expo Router"はReact Summit 2024におけるExpo作者のひとりEvan Baconによる講演。 gitnation.com ここでExpoを使った新しいSDUIの構想が発表され、Reactネイティブアプリにおけるサーバー側のコンポーネントレンダリングとストリーミングが提案されてXのタイムラインが盛り上がっていた。 今クライアントがWeb APIで取得して画面に適用し
WebフロントエンドにおけるGraphQL（あるいはバックエンドのAPI）との向き合い方 / #241106_plk_frontend
コンパウンドプロダクト開発の質とスピードを支える Protobuf と Connect #アーキテクチャ_findy / Boosting Compound Product Development Efficiency with Protobuf and Connect
フロントエンドエンジニアのブライアン・ブラウン氏がかつてドメインを購入した際に失敗した事について、過去を振り返るブログ記事を投稿しました。 Before you buy a domain name, first check to see if it's haunted | Bryan Braun - Frontend Developer https://www.bryanbraun.com/2024/10/25/before-you-buy-a-domain-name-first-check-to-see-if-its-haunted/ ブラウン氏はブラウザ上で動くインタラクティブなオンラインオルゴールを開発し、musicboxfun.comでホストしていました。2022年にmusicbox.funというドメインが空いている事を発見し、購入してサイトを移行したとのこと。 ブラウン氏が全ての
2024年6月30日に今の会社を退職し、翌7月1日から別の会社に入社することになった。 現職の在籍期間は大体３年弱ほどで、アーキテクチャを中心とした技術的な意思決定も色々してきた。新規構築から運用までやってきた中で感じたことや経験豊富なエンジニアからいただいたアドバイスなど、それらを含めて当時の意思決定の反省を自戒を込めてここで書いておく。 Table of Contents 留意事項 やったこと 想定効果 基盤チーム側の効果 サービス開発（基盤のクライアント）側の効果 意思決定 技術スタック コード管理 インフラ その他 所感と教訓 コンポーネントとリポジトリの粒度は別 複雑性を犠牲にする決断の重さ（マルチクラウド、マイクロサービス etc.） 共通基盤を初めから独立したサービスとしてデプロイしないのもあり サブシステムとしての共通基盤にどこまで粗結合を求めるべきか考える 結論：後から分
5つのECMAScript ProposalがStage4になど: Cybozu Frontend Weekly (2024-10-15号)
5つのECMAScript ProposalがStage4になど: Cybozu Frontend Weekly (2024-10-15号) こんにちは! サイボウズ株式会社フロントエンドエンジニアの Saji (@sajikix) です。 はじめに サイボウズでは毎週火曜日に Frontend Weekly という「一週間にあったフロントエンドニュースを共有する会」を社内で開催しています。 今回は、2024/10/15 の Frontend Weekly で取り上げた記事や話題を紹介します。 取り上げた記事・話題 PR TIMES フロントエンドの CI パイプラインを改善して、CI 処理時間と Billable Time を 50%を削減した話 | PR TIMES 開発者ブログ changed-files という github action 使って、変更があった特定のディレクトリのみ
Our Journey with Caching
Back to BlogThursday, October 24th 2024 Our Journey with CachingPosted by Frontend performance can be hard to get right. Even in highly optimized apps, the most common culprit by far is client-server waterfalls. When introducing Next.js App Router, we knew we wanted to solve this issue. To do that, we needed to move client-server REST fetches to the server using React Server Components in a single
Next.js 15 のリリースなど: Cybozu Frontend Weekly (2024-10-22号)
はじめまして！ サイボウズ株式会社 フロントエンドエンジニア（内定者バイト）の mehm8128 (@mehm8128) です。 はじめに サイボウズ社内では毎週火曜日に Frontend Weekly と題し「一週間の間にあったフロントエンドニュースを共有する会」を開催しています。 今回は、2024/10/22 の Frontend Weekly で取り上げた記事や話題を紹介します。 取り上げた記事・話題 Announcing Deno 2 Deno v2.0 がリリースされました。 v2.0 には次の内容が含まれます。 Node.js および npm との後方互換性 package.jsonとnode_modulesをネイティブでサポート Next.js、Astro、Remix、SvelteKit など多くのフレームワークをサポート deno fmtで HTML、CSS、YAML をフ
Claude AIがブラウザ内でJavaScript実行可能に！コード不要のデータ分析ツールで業務効率化へ前進 - イノベトピア
Claude AIがブラウザ内でJavaScript実行可能に！コード不要のデータ分析ツールで業務効率化へ前進 Last Updated on 2024-10-26 15:21 by admin Anthropic社は2024年10月24日、AI チャットボット「Claude」に新機能「分析ツール（analysis tool）」を実装したことを発表した。 主な特徴は以下の通り： JavaScriptのコード実行環境が統合され、ブラウザ上で直接コードを実行できる CSVファイルやPDFなどのデータファイルを分析し、インタラクティブな可視化が可能 プログラミング知識がなくても、データ分析やグラフ作成をリアルタイムで実行可能 性能面での改善： Claude 3.5 Sonnetのプログラミング性能がSWE-Bench Verifiedテストで33.4%から49.0%に向上 TAU-benchでの
はじめに 初めまして！ 2024年8月1日から 2024年10月31日の3ヶ月間、教材基盤開発セクションでインターンシップに参加していた市島功大です。 参加前のスキルレベルは以下のような状態でした。 JavaScript を使ったバックエンド開発を主に行なっていた TypeScript はプリミティブな値・オブジェクトの型等の使いそうな型定義は分かるが、Omit や Partial 等の TypeScript 独自の型定義は分からない状態 NestJS は学習経験があるが、何かしらアプリを作成する等の開発経験はない状態 参加をおすすめしたい人 ドワンゴの教育事業に興味のある方 書いてきたのは JavaScript・TypeScript だけれどバックエンド開発がしたい方 ZEN Study の教材入稿のような裏側のシステムに興味のある方 業務でのチーム開発がどのようなものか知りたい方 教材
乗りこなせ！ モダンフロントエンド Container Queries/祖先要素に応じたCSSの切り替え ［CSS Modern Features no.2］ こんにちは！サイボウズ フロントエンドエキスパートチームの麦島です。 今回のテーマはContainer Queriesです。 Container Queriesは、祖先要素として存在するコンテナのスタイルに応じてCSSを適用するための機能です。利用時は@containerで宣言します。 従来でもメディアクエリでブラウザのビューポート幅などに応じたCSS適用は可能でしたが、あくまでもブラウザやウィンドウ全体のスタイルに依存するものでした。Container Queriesでは画面の特定の範囲を「コンテナ」として定義し、コンテナのスタイルに応じたCSSを適用できる点が、従来の手法との大きな違いとなります。 Container Queri
Learn how Vercel cut build times and improved developer velocity while maintaining a smooth user experience with microfrontends. Vercel's main website, once a single large Next.js application, serves both our website visitors and logged-in dashboard. But, as Vercel grew, this setup revealed opportunities for improvement. Build times grew, dependency management became more intricate, and workflows
Why I’m skeptical of rewriting JavaScript tools in “faster” languages
I’ve written a lot of JavaScript. I like JavaScript. And more importantly, I’ve built up a set of skills in understanding, optimizing, and debugging JavaScript that I’m reluctant to give up on. So maybe it’s natural that I get a worried pit in my stomach over the current mania to rewrite every Node.js tool in a “faster” language like Rust, Zig, Go, etc. Don’t get me wrong – these languages are coo
This is a guest post from the gccrs project, at the invitation of the Rust Project, to clarify the relationship with the Rust Project and the opportunities for collaboration. gccrs is a work-in-progress alternative compiler for Rust being developed as part of the GCC project. GCC is a collection of compilers for various programming languages that all share a common compilation framework. You may h
Server-Timing というヘッダがあります。サーバーからブラウザへのレスポンスヘッダとして、リクエスト内で発生した指標を送ることができます。 Server-Timing: miss;desc="Cache Miss", hit;desc="Cache Hit", db;dur=53.2, app;dur=47.2 何に使うかというと、ブラウザの DevTools や JS API からこの値にアクセスすることができます。 (現代のブラウザサンドボックスやJSではサーバーから送られたすべてのヘッダを覗き見れるわけではありませんが、これは見える値の一つです) サーバーから Server-Timing を返す方法 実験用の hono + deno で雑なサーバーをでっち上げます。 import { Hono } from "npm:hono@4.6.9"; const wait = (m
Vue Vapor Mode をやる可能性があるので、調べることにした。 Svelteの知識があるので、自分の為のキャッチアップとして、Vue Vapor と Svelte 出力の比較を行う。SSR時の処理などは追ってない。 試した場所 https://vapor-repl.netlify.app/ の @2ed0be8 https://svelte.dev/playground 静的コンポーネント まず何もしない Static なコンポーネントで比較する。 Svelte import "svelte/internal/disclose-version"; import * as $ from "svelte/internal/client"; var root = $.template(`<h1>Hello</h1>`); export default function App($$an
乗りこなせ！ モダンフロントエンド Cascade Layers/レイヤーによる優先順位の制御 ［CSS Modern Features no.3］ こんにちは！ サイボウズ フロントエンドエキスパートチームの麦島です。 今回取り上げるCSSの機能はCascade Layersです。 Cascade Layersは、「レイヤー」と呼ばれる階層を独自に定義することで、CSS適用の優先順位をコントロールする機能です。利用時は@layerを用いて宣言します。 Cascade Layersと優先順位 CSSを適用する際、CSSセレクタを用いた詳細度での優先順位のコントロールが広く利用されています[1]。 しかし、新たにCascade Layersを組み合わせた場合には次の順番で適用されます。 Cascade Layers CSSセレクタでの詳細度指定 Cascade LayersがCSSセレクタ
CSS新機能のWorking Draft公開など: Cybozu Frontend Weekly (2024-10-08号)
CSS新機能のWorking Draft公開など: Cybozu Frontend Weekly (2024-10-08号) こんにちは！サイボウズ株式会社フロントエンドエンジニアのsaku (@sakupi01)です。 はじめに サイボウズ社内では毎週火曜日にFrontend Weeklyと題し「一週間の間にあったフロントエンドニュースを共有する会」を開催しています。 今回は、2024/10/8のFrontend Weeklyで取り上げた記事や話題を紹介します。 取り上げた記事・話題 CSS Values and Units Module Level 5 CSS Values and Units Module Level 5のWorking Draftリリースの紹介記事です。 Level 5には多くの機能が追加・拡張されており、Level4との差分仕様としてまとめられています。 attr
Recap: Next.js Conf 2024 - Vercel
A quick recap of the biggest highlights from Next.js Conf 2024 in San Fransisco. Our fifth annual Next.js Conf finished yesterday, where we shared our research and upcoming improvements to the framework, as well as what's new in the community and Next.js ecosystem. Over 1,000 people in the Next.js community gathered in San Francisco and tens of thousands around the world watched online to see what
Attacking browser extensions
Browser extensions first became mainstream in the early 2000s with their adoption by Firefox and Chromium and their popularity has been growing ever since. Nowadays, it is common for even the average user to have at least one extension installed, often an adblocker. Research into the security of browser extensions is mostly scattered around between individual bug reports and coverage on malicious
はじめに はじめまして！ 私は普段エンジニアとして仕事をしながら、趣味で個人開発者をしています。私にとってプログラミングはただの道具でしかなく、プロダクトを形にするための手段の一つでした。このように思う人は私以外にも多くいると思い、今回はそんな皆さまのために、AIを活用してwebサービスを6時間でリリースした話を書こうと思います！ 今回作ったもの 自分は趣味で VALORANT というゲームをやるのですが、このゲームのプレイヤーのマナーがとにかく酷い事が多く、自分が出会った害を為すプレイヤーを共有して被害者を増やさない仕組みを作りたいと思い、今回「Reviewant」という名前でβ版としてリリースをしました！ 実際の画面 https://www.reviewant.games/ からアクセス可能です！ 現在βテスト中で不具合が多いですが、もし報告事項などございましたらお手数ですがご報告いた
By ading2210 on 10/16/24 Introduction This blog post details how I found CVE-2024-6778 and CVE-2024-5836, which are vulnerabilities within the Chromium web browser which allowed for a sandbox escape from a browser extension (with a tiny bit of user interaction). Eventually, Google paid me $20,000 for this bug report. In short, these bugs allowed a malicious Chrome extension to run any shell comman
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Webアプリを作って収益化する、僕の個人開発ルーティン
フロントエンド開発環境スタートセット2024秋 - トレタ開発者ブログ
Hotwire for Frontend devs
Webフロントエンドの脆弱性つまみ食い 2024年版
hotwire_or_react
海外でエンジニアとして転職を成功させるためにやったこと、すべて｜yugo.spice
ドメインを購入する前には「幽霊に取りつかれていないか」を確認するべき
現職での技術的活動の振り返りと反省（自戒） | ymtdzzz.dev
ZEN Study 教材基盤開発エンジニアインターンシップ体験記 - ドワンゴ教育サービス開発者ブログ
Container Queries/祖先要素に応じたCSSの切り替え ［CSS Modern Features no.2］ | gihyo.jp
How Vercel adopted microfrontends - Vercel
gccrs: An alternative compiler for Rust | Rust Blog
Server-Timing ヘッダの情報をフロントエンド解析に使う
Svelte と Vue Vapor Mode の出力を比較する
Cascade Layers/レイヤーによる優先順位の制御 ［CSS Modern Features no.3］ | gihyo.jp
【個人開発】AIで6時間でwebサービスをリリースした話【プロンプト全文あり】
Escaping the Chrome Sandbox Through DevTools