Webサービス公開前のチェックリスト
個人的に「Webサービスの公開前チェックリスト」を作っていたのですが、けっこう育ってきたので公開します。このリストは、過去に自分がミスしたときや、情報収集する中で「明日は我が身…」と思ったときなどに個人的にメモしてきたものをまとめた内容になります。 セキュリティ 認証に関わるCookieの属性 HttpOnly属性が設定されていること XSSの緩和策 SameSite属性がLaxもしくはStrictになっていること 主にCSRF対策のため。Laxの場合、GETリクエストで更新処理を行っているエンドポイントがないか合わせて確認 Secure属性が設定されていること HTTPS通信でのみCookieが送られるように Domain属性が適切に設定されていること サブドメインにもCookieが送られる設定の場合、他のサブドメインのサイトに脆弱性があるとそこからインシデントに繋がるリスクを理解してお
最近はお客さんとの勉強会でDockerのドキュメントをつまみ食いして読むというのをやっていますが、改めて最新版を読んでみて、いろいろ思考が整理されました。2020年の20.10のマルチステージビルドの導入で大きく変わったのですが、それ以前の資料もweb上には多数あり「マルチステージビルドがよくわからない」という人も見かけるので過去の情報のアンラーニングに使っていただけるように改めて整理していきます。 仕事でPythonコンテナをデプロイする人向けのDockerfile (1): オールマイティ編で触れた内容もありますが改めてそちらに含む内容も含めて書き直しています。 本エントリーの執筆には@tk0miya氏から多大なフィードバックをいただきました。ありがとうございます。 基本的なメンタルモデル現代的な使い方を見ていくために「Dockerを使ってビルドする」というのはどのようなものか考えを整
クレカ情報の流出があったタリーズオンラインストアのWebアーカイブから原因を特定した猛者が現れる→集まった有識者たちにより巧妙な手口が明らかに
あらおじ @ojigunma すごい タリーズの原因発見してる人いる 確かにナンカある slick.min.js という画像をスライドするファイルの中に 難読化された悪意のあるコードが追記されてるっぽい 難読化は４段階ぐらいされてるらしい これブラウザとかセキュリティソフトで気づくのは無理なんだろか。。。 x.com/motikan2010/st… Niishi Kubo | GitLab,Limeboard @n11sh1_ クレカ情報漏洩の件、技術的な原因特定はこの投稿が一番分かりやすかった。 slick.min.js（画像切り替えのライブラリ）を改ざんされてマルウェアが仕込まれて、クレカ情報はサーバーに送信される前にフロントエンドから外部に送信されていたらしい。Content-Security-Policy がレスポンスヘッダーにきちんと設定されていれば悪意あるドメインに対しての通信
以下の公開計測会でやったものを個別に解説してみる。 細かいテクニックが多いのだが、それを可能な限りテキストとスクショで解説したい。使い方の解説が中心で、どういう意味があるかは解説しない。 Chrome131時点のスクリーンショットで、後で読む場合は頻繁にUIが変わっている点に注意。大事なのは意図。 宣伝: これを御社のサイトで解説する仕事をやっています。 デモのURL これに意味はなく、今日偶然見ていただけで意図はない。関係ないがエッジランナーズは最高のアニメ。 DevTools を開く F12 or 右クリックから「検証」 DevTools > Lighthouse この状態で計測 このとき、新しいプロファイルを作ったりして、可能な限り Chrome拡張が入ってない状態にすること。Chrome拡張による処理も計測に含まれてしまう。 Lighthouse レポートの読み方 点数部分にマウス
こんにちは。 苦しんでプログラミングを学んだ柴犬こと、くるしばです。 独学でプログラミングを学習し、Webサービス作りITベンチャーを起業しました。 その後個人開発したサービスを売却したり、また別のIT系の会社を創業したりしています。 下記のTwitterにてプログラミング学習に関して発信し、1.9万人以上の方々にフォローして頂きました。 また、最近はUdemyでReactとFlutterのプログラミング講座も出して、ベストセラーにも入っています。 初心者のうちは知らなかったが、学習を進めたり実務に入って経験が長くなってから 「こんな便利なものあったんだ...！」 となるツールってありませんか？ 僕はめちゃくちゃありました。 こういったツールは他の詳しい人から教えてもらうケースも多いので仕方がないのですが、もしこれらを初心者のうちに知ってたら色々楽だったのにな...と思うものが沢山あります
Next.jsの考え方
Next.js App Routerにおける設計やベストプラクティスを、筆者なりにまとめました。
はじめに みなさんはChromeの拡張機能を使っていますか？ 僕も使っていますが、案外Chromeの拡張機能を作るのは簡単です。 今回は、普段の業務の効率を上げるのも兼ねて自作してみました! 最低限準備するもの manifestファイル Javascriptファイル ぶっちゃけ、これだけで動きます。 実際に作ってみよう それでは実際に作成していきましょう。 今回はDとVを押すだけで、Markdownのリンクを作成する拡張機能を作成していきます。 まずは、manifestファイルから設定していきます! manifestファイル を参考にして、備忘録も兼ねて説明していきます。 今回は、最低限の設定を行います。 { "manifest_version": 3, "name": "Create markdown link", "version": "1.0.0", "icons": { "16":
新しいプログラミング言語やライブラリ、フレームワークを学ぶには、実際にそれらを試して挙動などを見てみることが大事ですが、実行環境を用意するのは手間がかかります。 そこで役立つのが、いわゆる「プレイグラウンド」と呼ばれる、Webブラウザでプログラミング言語やライブラリ、フレームワークをすぐに試すことができるサービスです。 主要なプログラミング言語の公式サイトには、実際にその言語をすぐに試せるプレイグラウンドが用意されていることも多く、また公式サイト以外にもネット上にはさまざまなプレイグラウンドがあります。 プレイグラウンドを使えば、気軽にいろんなプログラミング言語やライブラリ、フレームワークを試せます。 この記事ではそうしたプレイグラウンドをまとめてみました。ここで紹介したプレイグラウンドの他にも、あなたのお気に入りのプレイグラウンドがあればX/Twitterやブックマークのコメント、メール
「JavaScriptで要素をドラッグして移動する簡単な方法」という記事が初耳だらけだった件 - Qiita
はじめに まず↓の記事を見てない方はぜひ見てください！ 自分にとってはこの記事には「えっ、ナニコレ！」なテクニックが多く、特に解説もなかったのでいろいろ調べてたら休日が消えてました... なのでその時間の供養もかねて、自分が知らなかった部分を中心に、僭越ながら元記事の解説を書いてみたいと思います。 ちなみに、以下が元記事のコードそのままを実装したものです。たしかに掲載コードだけで要素がグリグリ動きますね。 See the Pen js-drag-move-original by www-tacos (@www-tacos) on CodePen. 初耳1: $img まずコードのここ
技術選定の失敗 2年間を振り返る TypeScript,Hono,Nest.js,React,GraphQL はじめに 新たに書きました。 MySQLを使っても会社は潰れない 久々に記事を書いたのでどうぞお手柔らかに... 私が過去2年間で行った技術選定の成功と失敗を振り返り、その学びを共有したいと思います。 文才無いので淡々と箇条書きでいきます Twitterエンジニア垢作りました。エンジニアのお友達がいません。 @uncode_jp 注意 意見を押し付けるものではありません。ただ建設的な議論は大事だと思う。 自分の意見は明確に、歯切れのよい表現を意識している。人それぞれだよねみたいな感じに逃げたくない。技術選定に結論はある（過激）。 ただし技術選定にはコンテキストがあり、例えばプロダクトのフェーズや組織の事情によって当然結論は変わる可能性がある。 OSSの開発者さん達は偉大ですごい。あ
もし世界が消滅して Visual Studio Code の設定が失われてしまった時に、この記事を見ればまた VSCode のカスタマイズが復元できる。 ここでは Visual Studio Code の見た目に影響するものについてのみ 取り上げる。 スクリーンショット Editor Terminal Zen Mode 環境 Visual Studio Code バージョン: 1.94.2 (user setup) コミット: 384ff7382de624fb94dbaf6da11977bba1ecd427 日付: 2024-10-09T16:08:44.566Z Electron: 30.5.1 ElectronBuildId: 10262041 Chromium: 124.0.6367.243 Node.js: 20.16.0 V8: 12.4.254.20-electron.0 OS
君たちはCursorを本当に使えているか
はじめに こんにちは。Builtoという会社で代表 & エンジニアをしている冨田です。 私たちはマネジメントとタスク管理を圧倒的にサポートするAIエージェントを開発しています。 開発にもAIをフル活用しており、そこで得られた知見を共有したいと思います。 具体的には、経験3年以上の現役ソフトウェアエンジニア（生成AIのない時代からコードを書いてきた方々）をターゲットに、本番運用レベルの大規模コードベースでもCursorを活用しコーディング時間を 1/3〜1/5 に縮めている手法をお伝えします。 仕様策定やアプリの機能にもLLMをフル活用していますが、今回は実装にフォーカスします！ （なお本記事は中級者以上向けのため、まだCursorに触れたことがない方はまず別の記事を参考にして、使ってみてください） なぜこの記事を書いたか 現職エンジニアが本当に使いこなす手法を共有したい すでに共有されてい
【生成AIの学習ロードマップ】最近やたら羽振りのいいやつが生成AIを極めてた件について。 - Qiita
はじめに 生成AIによって世の中は大きく変わります。単なるブームではないと確信しています。 研究者の間では数年で「あと人間の知能に匹敵するAIが出てくるだろう」と言われているほどです。 「生成AIって社内でもよく聞くけど何から始めればいいかわからない...」 「AIに興味はあるけど初期設定とか大変そう...」 この手順で学べば流石に初心者でも生成AIを使いこなせる人材になれるロードマップを整理しました。 誰も生成AIの大波に置いていかれないような記事を目指します。 対象読者 生成AIを学んでスキルアップしたい方 社内でAI活用してさらに活躍をしたい方 AIの波に乗って市場価値の高い人材を目指す方 記事の構成 本記事は入門編と発展編に分かれています。入門編では「AIを使える人材」になるためのゼロからのロードマップを記載しています。発展編では「AIアプリを作れる人材」になるためのステップアップ
はじめに VSCodeは世界で多くの人が使っているコードエディタです。 開発の際に使用している人も多いのではないでしょうか。 今回はそんなVSCodeの拡張機能を一挙に紹介していきます。 拡張機能 VSCodeは世界中で支持されているコードエディタですが、最大の魅力が「拡張機能」です。 機能を追加して、より自分が使いやすいコードエディタにすることができます。 拡張機能のインストール 拡張機能のインストール方法をご紹介します。 アクティビティバーの拡張機能マークをクリックする（四角が4つあるマークです） インストールしたい拡張機能を検索する 拡張機能を選ぶ インストールをクリックする この4ステップで簡単に拡張機能をインストールできます。 オススメ拡張機能 ここからは、オススメの拡張機能をカテゴリごとに紹介します。 これは絶対入れるべき！基本機能 Japanese Language Pack
ブラウザからDBに行き着くまでただまとめる
はじめに あなたはブラウザからデータベース(DB)に情報が行き着くまでにどんな技術が使われているか説明できますでしょうか？ どのようなプロトコルが用いられ、どの技術を駆使してサーバと通信しているのか、Webサーバでは何が行われ、どのようにして負荷が分散されているのか、トランザクションはどのように管理されているのか、そしてデータベースではシャーディングや負荷対策のためにどのような対策が取られているのか… なんとなくは理解しているものの、私は自信を持って「こうなっている！！」とは説明ができません。 そこで今回は「大規模サービス」を題材としてブラウザからデータベースに至るまでの、情報の流れとその背後にある技術について、明確かつ分かりやすく解説していきたいと思います。 対象としてはこれからエンジニアとして働き出す、WEB、バックエンド、サーバーサイド、インフラ、SREを対象としております。 1.
Intro CSRF という古の攻撃がある。この攻撃を「古(いにしえ)」のものにすることができたプラットフォームの進化の背景を、「Cookie が SameSite Lax by Default になったからだ」という解説を見ることがある。 確かに、現実的にそれによって攻撃の成立は難しくなり、救われているサービスもある。しかし、それはプラットフォームが用意した対策の本質から言うと、解釈が少しずれていると言えるだろう。 今回は、「CSRF がどうして成立していたのか」を振り返ることで、本当にプラットフォームに足りていなかったものと、それを補っていった経緯、本当にすべき対策は何であるかを解説していく。 結果として見えてくるのは、今サービスを実装する上での「ベース」(not ベスト)となるプラクティスだと筆者は考えている。 CSRF 成立の条件 例えば、攻撃者が用意した attack.examp
こんにちは、株式会社FP16で結構コードを書いている二宮です。 最近Webスクレイピングのコードを色々な方法で書いているので、そこで得た知見をここに残しておこうと思います。 ほぼ毎日なにかのWebスクレイピングコードを書いています。 Webスクレイピング手段 Webスクレイピングには色々な方法があります。 私が最近主に使っているのはこの5つの手段です。 cheerioでHTMLを解析 Playwrightなどで要素指定でデータを取得する APIを見つけて叩く（バックエンドとの通信を再現してデータを取得） LLMでサイト構造を解析してデータを取得する Next.jsからのレスポンスに含まれているデータを解析して取得する これが令和のWebスクレイピングのベストプラクティスだと思っています。 これらの方法を、目標に合わせて使い分けています。 使い分け方 CheerioでHTML解析 JavaS
2023年か2024年か記憶が怪しいものもあるが自分の中で"最近乗り換えたもの"ぐらいのノリで書いていく。レイトマジョリティの自覚あり。 JetBrains系エディタ（RubyMine etc.） → Cursor (移行中) 一番大きい移行。2024年末〜2025年始に移行を試み、今も手探り中。 www.cursor.com きちんと評価するためにPro planを契約した。 Cursor Tabの体験が圧倒的に良い コード補完は古くはTabnine、2022年からGitHub Copilotを経験してきたが段違いに感じる シンプルに補完内容が優れているだけでなく 複数行の変更、変更後の次の変更の提案などが高速で賢く "ワカっている" 感がすごい Composer (normal mode. not agent) がかなりまともなコード出力や修正提案をしてくれる 年始に新しいツールを書き
レイオフされてまじで大変でした
これは事後報告です。すでに別の会社からオファーをいただいているので、いまはおだやかな気持ちでこれを書いているのでご安心ください。 なにがあったのか？ あまり詳細な情報はここに書くつもりはないので簡単に。 10/18の朝、CEOとのミーティングが設定され、その場でレイオフをいいわたされた。 正確には、ありがたいことに、その場ではリロケーションのオファーをいただいたのでその場で即刻レイオフというわけではなく、そのオファーをうけるかどうか翌週の月曜日(21日)まで猶予をいただいた。 しかし、そのオファーはリロケーションだけでなく給与も下がってしまうというものだったのでかなり微妙だった。そうでなければもしかしたら単身赴任的な感じで受けていたかもしれない。 そんなわけでそのオファーはお断りせざるをえず、結果として10/21付けでレイオフという形になった。 まったく予期していなかった 自分は会社のシス
プライベートでMac使うのやめた
最近、自分のプライベートの開発環境を大きく変えたので紹介する。 先にまとめ プライベートではMacを使わなくなった 家にUbuntuが入ったミニPCを置いた 外からはThinkPad X1 CarbonからTailscale経由のSSHで家のミニPCに接続 購入まで まず、自分にとって最も大きな変化はプライベートでMacを使わなくなったことだ。2013年くらいにプログラミングを始めてからずっとメインのOSはMacだったので、約10年ぶり、ほぼ初めての非Mac環境である。 自分の普段の開発のユースケースは、Webアプリケーション開発とNode.js上で動くソフトウェアの開発、WebKitへのコントリビューション、たまにRustやGoやC/C++で自分専用ツールの開発、くらいなので別にMacで困っているわけではなかった。Web開発やNode.js上のソフトウェアの開発はまあ普通にMacで困らな
※月単価80万円を基準に、7ヶ月分の工数として560万円相当と換算しています。 最初に こんにちは！ 普段はIT企業でWebエンジニアとして働いています。 現在はフリーランスとして活動し、Ruby（Ruby on Rails）、TypeScript（Next.js, React）、Pythonなどを使って、フロントエンドとバックエンドの両方に携わっています。 将来はソフトウェアエンジニアとしてアーキテクチャ・設計について自ら意思決定した上、プロジェクトを推進する事が出来るようになりたいです。 そのためさらにスキルを磨いていきたいと思っており、日々技術に対して情熱を持って仕事に取り組んでいます。 以前Qiitaで 退職して560万円相当の工数をかけてお金を稼ぐサービスを開発した という事でBizRankというビジネス書籍を紹介するサービスを開発しました。 今回はその後としてのお話になります。
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに この方法を教えると誰もが早くに出会いたかったと口を揃えて言いました こんにちは。Watanabe Jin(@Sicut_study)です。 今回はエンジニアがすべき究極の勉強法について完全解説していきます。 世の中には多くの勉強法が存在したり、インプット中心、アウトプット中心など色々な考え方があります。 ここでは実際に私が運営しているプログラミングコーチングJISOUで実際に用いている科学的根拠のある最高の勉強方法について徹底的にご紹介します。 また勉強法についての一般的な理論を紹介している記事や本は多数存在しますが、エンジニ
自己紹介 https://x.com/mizchi Node.js とフロントエンドの専門家 経歴 ゲームクライアント開発 Electron アプリ開発 サードパーティスクリプト フリーランス(2回目) 現在: 1ヶ月でパフォチュする傭兵 Core Web Vitals CI/CD 今日のスコープ 話すこと 主にフロントエンド/アプリケーション視点での計測 とくにエンドユーザーから見たウェブパフォーマンス体験 話さないこと 各クラウドやDBに特化したチューニング 結果として観測できるが、最初からターゲットにはしない パフォーマンス傭兵を始めた経緯 前職でサードパーティがサイト全体に与える影響(CWV)について調査 とにかくいろんなサイトを外部から計測 真の問題を特定しても「弊社とは無関係」で打ち返す以外なく、歯痒い コスパよく直せる部分をみんな放置している！！！ 非機能要件の優先度が上がら
【AWS】 代表的なクラウドデザインパターン紹介
はじめに AWSの豊富なサービス群を活用することで、高可用性かつ高スケール性を実現するシステムを構築することが可能です。 しかし、クラウドサービスの特性を最大限に活かすためには、適切なデザインパターンを理解し、実践することが重要です。そこで今回は、AWSを利用して「高可用性」かつ「高スケール性」を実現するための代表的なクラウドデザインパターンを紹介します。 1. EC2インスタンスを利用した動的コンテンツの配信 動的コンテンツとは？ 動的コンテンツとは、ユーザーのリクエストに応じて生成されるコンテンツのことを指します。たとえば、ユーザーのログイン状況や入力内容に基づいて異なるページを表示するようなケースです。 AWSサービスの簡単な解説 Amazon EC2 (Elastic Compute Cloud): スケーラブルなコンピューティングリソースを提供するサービスです。必要に応じて、イン
とにかくケチりたい、そんな気持ちで作ったツールの話です。 元々開発にCline(Claude Dev)やAiderなどの開発ツールを駆使していました。 ただ、APIの料金が常に心配で、できる限り安く済ませたい気持ちもあり、Claude Proを契約してWeb版にファイルを1つ1つアップロードする日々を過ごしていました。 ある日それが面倒になってきて「全部1ファイルにしたらいい感じに読み込んでくれるのでは？」と思い、作ってみたら思いのほかうまくいったので公開しました。 百聞は一見にしかずということで、 こちらのデモにお気に入りのGitHubリポジトリ(例: honojs/hono)を入力してみてください。 Claudeが得意とするXMLっぽいフォーマットで出力し、そのままClaudeにアップロードすることができます。 完全にAIバブルの波に乗ったとも言えるのですが、多くの競合がいる中でスター
独力でWebサービスを開発・構築できるフルスタックエンジニアへのロードマップ─幅広いスキルを「Udemy夏のビッグセール」で学ぶ！ - はてなニュース
※ Udemy「夏のビッグセール」とはてなによるプレゼントキャンペーンは終了しました。記事で紹介しているフルスタックエンジニアのスキルは、引き続きUdemyの講座で学習できます。 Webで新規サービスを立ち上げる際に、UIからインフラ周りまで一人で面倒を見られるエンジニアは、少人数のスタートアップでなくとも非常に頼れる存在です。どんな課題に直面しても技術力で乗り越える、そんなスキルフルなエンジニアに憧れる方も多いでしょう。 この記事では、フロントエンドのプログラミング（JavaScript周辺）からサーバーサイド、インフラ、さらに開発手法まで、Web開発で必要になるさまざまなレイヤーのフルスタックなスキルの現在地と、関連するUdemyの講座を紹介します。 株式会社ヘンリーでVPoEを務める松木雅幸（@songmu）さんの執筆です。 フルスタックエンジニアに必要なスキル さまざまな講座でまと
期限の制約なく無料で提供される「Free Tier」クラウドサービスまとめ、主要クラウド/PaaS編（2024年版）
期限の制約なく無料で提供される「Free Tier」クラウドサービスまとめ、主要クラウド/PaaS編（2024年版） いくつかのクラウドサービスでは、新規ユーザーに対する1年程度の無料トライアルや一定額のクーポンなどの提供だけでなく、期限の制約なくずっと無料で提供される、いわゆる「Free Tier」や「Always Free」と呼ばれるサービスが提供されています。 こうしたサービスは評価や一時的なテスト環境、あるいはホビー用途などに適しています。 本記事では期限の制約なく無料で提供されている主なクラウドサービスを、2024年版としてまとめました。（有料サービスの追加機能として無料で提供されているものは除外しています）。 ただしこれらの無料のサービスは、提供側の都合により一時的に申し込みや利用が制限されたり、提供が終了することがあります。提供側の都合に留意しつつ、良心的な範囲でご利用いただ
はじめに Dockerをよく使う方なら避けては通れない道、Dockerコンテナのセキュリティについてまとめると同時に、Dockerfileのベストプラクティスに焦点を当てていこうと思います！ Dockerのセキュリティとは Dockerのセキュリティとは、Dockerコンテナのビルド、ランタイム、オーケストレーションに関する側面を指します。 これには、Dockerベースイメージのセキュリティ対策、ユーザー権限の管理、Dockerデーモンの設定、コンテナのCPU制御など、ランタイムにおけるセキュリティ対策が含まれます。 さらに、大規模なDockerコンテナのオーケストレーションに関する課題にも対応する必要があります。 では実際にどのように対応していくのか、10項目のベストプラクティスを通して、具体的な対策を学んでいきましょう！ Dockerのセキュリティに関する10項目のベストプラクティス
独学で個人開発を始めて5年が経ちました。これまでには収益化に成功したサービスもあれば、鳴かず飛ばずでお蔵入りになったサービスも数多くあります。それらの経験から、成功したサービスはなぜ上手くいったのか、マーケティングや収益化において押さえておくべきことは何か、その要点が少しずつ見えるようになりました。 今回は私が開発〜集客〜収益化を行うプロセスと、各工程で気をつけているポイントを順を追って書き出してみます。上手く言語化できているか分かりませんが、暖かい目でお付き合いください。 収益化した3つのサービス 私はこれまでにWebサービスを20個以上開発しており、現在はポモドーロタイマー（月間100万ユーザー）やYouTubeのループ再生ツール（月間10万ユーザー）などを運営し、そこからの収入で生活しています。 基本は海外向けのBtoCで、以下のようなツール系が中心です： 収益化済みサービス： Po
エンジニア採用の状況は地域によって大きく異なる 最近視聴した2つのコンテンツが、同じソフトウェアエンジニア採用の話題を取り扱っているにもかかわらず、その内容が両極端で非常に興味深かった。 ひとつは「エンジニア採用必勝法・これだけでわかるDevRel入門」という動画で、もうひとつは「最近カナダで就職したエンジニアと一緒に北米就活の攻略法を語る」というポッドキャストのエピソードだ。 エンジニア市場と企業の採用戦略は地域や業界によって異なるが、ここで話されている東京と北米（バンクーバー）では顕著な違いが見られる。 東京を中心とする日本ではテック企業間での人材獲得競争が激しく、特にエンジニアが不足しているため、採用広報の役割の重要性が増し、DevRelといった呼び名で施策が実行されている。 一方、カナダでは、永住権を持たない外国人労働者が職を得るハードルが高く、求職者の競争が激しい現状が実際
フロントエンドフレームワークからサーバーにアクセスするパターン | フューチャー技術ブログ
僕が触り始めた頃のウェブフロントエンド開発はデバッガーもなく、ダイナミックHTMLと呼ばれて文字をチカチカさせたりするようなものでした。IE6という超安定ブラウザが出てきたり（Netscape 4.xも7.xも不安定だった）その後jQueryが登場したときは、天使が降臨したように思えたものです。 そこから長い年月が経ち、ウェブフロントエンドの比重が大きくなるにつれ、フロントエンドのコードはどんどん複雑化しました。OpenAPIなどのコードジェネレータなども普及した結果、通信というものが隠され、イベントの中でawaitや.then()で呼ばれる何か、みたいな理解をしているメンバーも今後増えていくのではないかという懸念があります。 現在ではウェブフロントエンド開発はReactやVueといったフレームワーク上で行われ、イベントというのはそのフレームワークの提供するライフサイクルイベントに対応付け
はじめに こんにちは。BEENOSのがれっとです。 AWS上にアプリケーションを構築する際、一般的なのはECS + RDSという組み合わせです。私も社内システムをそのような形で構築しました。 しかし、使わないときにもインスタンスが動き続けてしまうため、大量のトラフィックを捌かないアプリケーションにおいてはコストが見合わないものとなってしまいます。 そこで、ECS + RDSという構成からLambda + EFSの構成に社内システムを移行して、コスト削減した話を紹介します。 前提 以下の構成のアプリケーションを移行しました。 Blitz.js 内部に下記を使用 Prisma Next.js PostgreSQL テーブル数は12 (_prisma_migrationsテーブルを含めて13) AWS 構成図 移行前 移行後 リレーショナルデータベースを用いることが必須のアプリケーションを構築す
ページ閲覧 AutoPagerize chromewebstore.google.com ページネーションされたウェブページを自動で読み込み続けます。無かったら違和感あるレベルで日常になっています。 daily.dev chromewebstore.google.com 開発者向けニュースを空タブに表示します。 タブを開くときに自然に視界に入るのに加えて、検索で「過去話題になったもの」から探したりします（はてなブックマークやHacker Newsも似た用途で使います） ホームタブとは別です。ホームはperplexity.aiにしてます。 Google Scholar PDF Reader chromewebstore.google.com 標準のPDFビュワーを科学論文を読みやすく強化します。参考文献の追跡や引用、ジャンプ機能を提供します。ついでに官庁資料やクリプト系のホワイトペーパーなど
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? Pyxel作者です。Qiita初投稿です。よろしくお願いします。 皆様、Python向けレトロゲームエンジンPyxelのご愛顧ありがとうございます。 「気軽に楽しくゲームプログラミング」をコンセプトに、2018年にGitHubで公開を始めたPyxelも、おかげさまで現在15,000スター、ダウンロード数は80万を超えることができました。 4億を超えるGitHubプロジェクトの中で、Python向けゲーム開発環境としてはダントツの1位（2位は7.5kスターのPygame）、全言語合わせたゲームエンジンの中でも8位にランクインしており、7位
最近、AIが長年の悩みを次々と解決してしまう
最近、AIが長年の悩みを次々と解決してしまう 2025.01.12 Updated by Ryo Shimizu on January 12, 2025, 09:12 am JST 今日は特に強いメッセージとかはない。 ただ、正月休みの次に来た連休で、特に休んですることもない。まあすることがあるとすれば仕事くらいだ。 今日はこの後シラスの特別講義の仕事があるが、まあそれも半分は趣味みたいなもので、もっと真剣に取り組むべき仕事もいくつか抱えている。これは休みという概念がないのでまあ置いておく。 ただ、最近、OpenAI o1の正式版が出て、さらにo1 pro modeとかが出てきてしまったことで、僕の長年の悩みがどんどんなくなっていく現状について語っておきたい。 長年の悩みというと大袈裟だが、「こういうプログラムがあれば便利なのに」と思っていたようなことが、o1 pro modeに頼むと、次
週末にちょっとしたウェブサイトというかリンク集（？）を作った。 今回は生成AIツールをフル活用していつもより効率よく作業ができた。 生成AIツールについては日々、新しいものがヤバイすごいと宣伝されているけど、実際にどう使っているのかという情報が少ないと感じている。 なので具体的な使い方を書いてみることにした。 作ったもの 開発の概要 最終的なアーキテクチャ UI開発に生成AIツールを使う 初期デザインの参考元 デザインツールの選定と比較 Next.jsの利用 Cursorを活用した開発 データ整形にLLMを使う スクレイピング Amazonの商品データ取得 LLMの選定 動的なコードと静的なコードの使い分け TypeScriptを使わない範囲を定めた 静的サイト生成（SSG）の採用 柔軟なデータベース設計 まとめ 作ったもの 『最も重要な「最も重要なマンガ10選」10選』は「最も重要なマン
はじめに 本記事ではレベルアップしたいエンジニアが読んでおくべきQiita記事を紹介します。厳選に厳選を重ねた43記事です。全ての記事を読んでおく必要はありませんが、ちょっとでも「分からないな」「興味あるな」など思ったタイトルがあれば読んでみてください。 次の4種類に分類して紹介しています。参考にしてください。 フロントエンド バックエンド インフラ・Linux周りの知識 その他 それでは、早速紹介していきます！ フロントエンド まず最初はフロントエンドエンジニアに読んでおくべきとおすすめできるQiita記事を11個選びました！フロントエンドエンジニアとしての基礎が身に付く記事から、デザインまで幅広い内容を選んでおります。 【保存版】Webフロントエンド基礎力（初心者向け）（♡1988） Web開発の入門者向けに、HTML、CSS、JavaScriptの基本をわかりやすく解説しています。こ
「お前の口調、角が立ってて相手からみたら不快だから治せ」的な指摘は、東大、東工大院卒の新人なら半数くらいは言われる→社会は正論で殴りあってはいけない
ナシェモン @nassyemon 最近はBigQueryばかり書いてます。プロマネもやってますが、本業はエンジニアです。 React/node.js/flask/AWS+terraform+serverless/BQ/elasticsearch スクール→weblab.t.u-tokyo.ac.j ナシェモン @nassyemon 「お前の口調、角が立ってて相手からみたら不快だから治せ」の趣旨の指摘は、東大、東工大院卒の新人なら半数くらいは言われると思う。 表現としての「柔らかくした方がいい」という言い方は、女性だから気を使われた(差別的)かもしれない x.com/anticolonialfe… 2024-11-24 09:57:12 Ms. Rainbowﾌｪﾐﾆｽﾄ化学者 @anticolonialfe1 根に持っているので何度でも言おう。私が新卒で勤めていたJTCでおじさんにこう言わ
はじめに先日、初心者でも簡単に参加できる GitHub チュートリアル 『First Contributions JA』を共同開発しました！ 振り返りも兼ねて、プロジェクトの背景や使用技術について、紹介していきます。 ▼ GitHub のリンク： なぜ First Contributions JA を構築したのか？さて、First Contributions JA には、次のような特徴があります： - React/ Next.js で構築されたWebサイト - 初心者向けのGitHubチュートリアル - オープンソースのプロジェクト 上記を踏まえて、プロジェクトの経緯は、主に２つあります。 （技術スタックは、後で詳しく説明します） 1. JavaScript/ React 学習コミュニティで、共同開発を提案した！以前、 「JavaScript/ React を学習するコミュニティを、期間限
こんにちは！イーゴリです。 AWS にとって、クラウドのセキュリティは最優先事項です。(AWS公式ページ) AWS環境のセキュリティ対策としてAWSサービスを解説するよりも、まずはAWS環境の最適な設計について考える必要があります。AWS Well-Architected Frameworkを考慮しながらの設計を推奨します。AWS Well-Architected Frameworkを全部詳しく読むことをおすすめしますが、この記事では個人的に一番重要だと思う点について記載します。 とてもざっくり説明しますと、AWS Well-Architected Frameworkとは、クラウドシステムの最適な設計方法を提供するAWSのガイドラインで、6つの柱があります。この記事では基本的に「セキュリティ」の柱を技術的観点から見てみたいと思います。 AWS Well-Architected Framew
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
2024年版のDockerfileの考え方＆書き方 | フューチャー技術ブログ
DevTools の使い方を可能な限りスクショ付きで解説してみる
もしプログラミング初心者に戻れたら、初めから使っておきたかったツール36個
超簡単にChromeの拡張機能を作ってみる【誰でもできるよ】 - Qiita
プログラミング言語をすぐに試せる「プレイグラウンド」まとめ。2024年版
技術選定の失敗 2年間を振り返る TypeScript,Hono,Nest.js,React,GraphQL
ぼくがかんがえた最強の Visual Studio Code カスタマイズ 2024
Visual Studio Codeに入れるべき拡張機能【2024年最新版】 - Qiita
令和時代の API 実装のベースプラクティスと CSRF 対策 | blog.jxck.io
【令和最新版】令和のWebスクレイピング(クロール)【ベストプラクティス】
2024年に乗り換えた or 乗り換えつつある開発関連ツール - valid,invalid
【無料公開】560万円かけて開発したサービスのソースコード
知らないと後悔する最強のエンジニア勉強法 - Qiita
なぜあなたのウェブサイトは遅いのか
思いつきで作ったAIツールが5000スターを獲得した話
Dockerfileセキュリティ完全ガイド ｜脆弱性を防ぐ10のベストプラクティス
Webアプリを作って収益化する、僕の個人開発ルーティン
エンジニア採用のパラダイムシフト - laiso
ECSとRDSをやめて、AWSコストを9割削減しました
唐突に使っているChrome拡張を紹介 - laiso
【公式】レトロゲームエンジンPyxelを使わない理由が見つからない - Qiita
生成AI/LLMを使ったウェブサイト開発 - laiso
レベルアップしたい人必見 Qiita記事43選 - Qiita
「GitHub難しい!!」を30分で解決するサイトを共同開発しました🚀｜kazzyfrog
セキュアなAWS環境の設計についての解説【2024年版】 - サーバーワークスエンジニアブログ