正規表現でガチャを回せる投稿サイトを作った話
（映像もつくりました） 正規表現ガチャ（英語名：Regech）という、正規表現から生成されるランダムな文字列でガチャを引ける投稿サイトをNext.jsで個人開発した話です。 筆者について 今までPHPやjQueryで開発をしてきた19歳です。 制作期間は20日ほどです。 もしよければ、読んで・遊んでいってもらえたら嬉しいです！ つくったもの 正規表現にマッチするランダムな文字列を生成するアプリです。 例：(にゃん?)+→にゃにゃんにゃんにゃ おもしろいガチャができたら投稿することでみんなで遊べるようになります。 ぜひ、おもしろいガチャを作って投稿してください！ 正規表現の学習にもおすすめです。 英語対応もしてみたので英語環境からアクセスするか、/en/にアクセスすると英語でも見れます。 私のおすすめガチャ 私のおすすめです。他にもおもしろいガチャが投稿されているので遊んでみてください！ リ
ZennとClassmethod
Kubernetesのつらいところ
はじめに 本記事はKubernetesの嬉しいところではなくてつらいところについて書きます。Kubernetesを少しは触ったことがあって基礎的な用語がわかるくらいの人であれば読めると思います。 Kubernetesのよく言われる売り文句は「Kubernetesを使うと自分でぽちぽちコマンドを叩かなくても、あるべき状態を宣言しておけば後はKubernetesが勝手にその状態になるように保ってくれるのですごく運用が楽」でしょう。これはその通りで自分もKubernetesのおかげで楽をしているなあと感じることがかなりあります。 しかし、何年も実際に使い込んできた経験からいうと、前述の売り文句には「大体の場合は」という但し書きが付きます。では「大体は」じゃないときにどうなるかというと、つらくなります。ここからはどんなときにどんなふうにつらいのかを簡単な例を使って説明します。 冗長度を自動回復して
概要 GitHub Actions で GitHub ホストランナーを使用する場合、パブリックポジトリは無料ですがプライベートリポジトリは従量課金（無料枠あり）です。 ワークフローを編集する際にデバッグしていると結構な時間を消費してしまいます。 そこでデバッグ時は GitHub ホストランナーを使わずに無料で実行する方法を 3 種類紹介します。 nektos/act 言わずと知れたローカル実行ツールです。 すべてを再現することはできませんがコミットを増やさずにデバッグができます。 注意点 ubuntu-* のみサポート ソフトウェアは指定する Docker イメージ依存、デフォルトのイメージだと色々足りないので -P で指定 secrets.GITHUB_TOKEN が未定義なので Personal Access Token を発行し設定が必要 サービスコンテナ services が使えな
Goで学ぶGraphQLサーバーサイド入門
GraphQLはリクエストクエリを書くことで、必要な分のデータを柔軟に取得することが可能なAPI形式です。 RESTとは違うその仕組みはクライアント目線ではとても便利なものですが、サーバーサイドに立ってみると無限の組み合わせがあるリクエストクエリに一体どう対処しているのか不思議に思う人もいるでしょう。 この本では、Goのgqlgenというライブラリを用いてGraphQLサーバーを作る過程を通して、サーバーサイドGraphQLを理解・開発するのに必要な知識を解説していきたいと思います。
【AWS】大規模なバッチ処理を支える技術選定
ここから、表で挙げた内容をそれぞれ解説していきます。 構築難度に関しては、関数を実装するだけで済むLambdaが最も簡単で、バッチ専用に特化されたサービスであるBatchに関しては比較的バッチ構築はしやすい印象ですが、ECSに関してはバッチに特化していないため、バッチ処理を行うようにカスタマイズする必要があります。 タイムアウト制約に関して留意すべきは、Lambdaの実行時間は15分までなので、それ以上を超える処理時間のバッチは実装できないことです。 起動•実行上のオーバーヘッドに関しては、Lambdaにはコールドスタートがあるため起動時にオーバーヘッドを考える必要があり、Batchではジョブをキューに送信して、最適化のために、ある程度のジョブがキューイングしてから実行しようするので、即時性を求める処理には不向きです。 既存バッチを移行したいケースがあると思いますが、Lambdaで動かせる
（2023/08/29） 全ブラウザでネストに対応したので記事を更新しました。 本日2023/08/29、全ブラウザでCSSでネスト（入れ子）ができるようになりました💐 次のようなコードが、「SassではなくCSSで」できるようになります。Sassを使わないCSSコーディングを大きく変えることでしょう。
この記事で使用している画像は、公式の github から引用したものです。今回、あまりにも数が多いため引用リンクは省略しています。一部、自身で撮影したものもあります。 ファイル Recent Files ★★★ 最近開いたファイルの一覧を表示してくれるプラグイン。何故これがデフォルトで無いのかがよくわからない。絶対に入れておきたい。 Auto Template Trigger ★★★ 新しいノートを作成する際にテンプレートを選択して挿入できるプラグイン。ノートを書く敷居を下げてくれるので重要。 Quick Explorer ★★★ エクスプローラー機能を強化するプラグイン。ノートが増えてくると非常に便利。 Tag Wrangler ★★★ Tag pane から rename や merge などができるようになるプラグイン。 Quick Switcher++ ★★ ファイル移動のプラグイ
参考 目的 プロジェクトで使用されている不適切なuseEffectを減らす 本題 Reactの公式ドキュメントにuseEffectは必要ないかもしれない，というようなページがありとても勉強になったので記事にしようと思いました． データフェッチング アプリのデータフェッチングをuseEffect内で行うのはよく知られている方法です． Bad 💣 function SearchResults({ query }) { const [results, setResults] = useState([]); const [page, setPage] = useState(1); useEffect(() => { // 🔴 Avoid: クリーンアップなしでのフェッチング fetchResults(query, page).then(json => { setResults(json); }
インメモリデータストアを現代風に再実装したら? 高速なデータアクセスのためのインメモリデータストアとしては、RedisやMemcachedが有名です。ただし、これらは10年以上前に設計されており、Memcachedに至っては、2003年と約20年前です。 長い年月を経て、機能追加や最適化が進む一方で、どうしても設計の古さも目立ってきます。 その課題を解決すべく開発されたのがDragonfly です。 全ての操作がアトミック 高スループットでもミリ秒未満のスループット を目指し、Redis/Memcached互換なAPIを提供します。 Redisの25倍のスループットを誇り、1インスタンスで百万オーダーのQPSをさばけます。 開発者が実施したAWS EC2上のベンチマークによると、Dragonflyは本家RedisやRedisのマルチスレッドforkであるKeyDBよりも圧倒的なスループット
セキュリティの立ち上げで何をやる？
Laravel使いの情報源まとめ
はじめに 最近Laravelの情報収集用にTwitterアカウントを作ってみました。結果、海外に比べて日本は情報が散逸していてちょっと辛いぞという気持ちになりました。そのためLaravelの情報を集約するためのリンク集を作ることにしました。このリンク集が、業務や学習の手助けになればと思います。もし追加した方が良いリンクがあれば、コメント欄で教えてください。 基本 Laravel学習の時も、実業務で使う時も一貫してお世話になるであろうリンクを集めています。 Laravel公式 主にLaravelの機能を調査したいときに参照します。 https://laravel.com/ https://readouble.com/laravel/ (非公式和訳) アップグレードガイド バージョンアップ時の差分と対応方法を知りたいときに参照します。 https://laravel.com/docs/6.x/
クラスメソッドがエンジニアの技術情報発信サービスである「Zenn（ゼン）」を買収する。自らもエンジニア向けの技術情報発信メディア「Developers.IO」を運営するクラスメソッドが、なぜZennの運営に乗り出したのか？ 数十社による争奪戦の舞台裏とは？ そして今後目指す情報発信の姿とは？ Zenn開発者のcatnose氏とクラスメソッドの横田聡CEOに聞いた。（以下、敬称略 インタビュアー アスキー編集部 大谷イビサ） 既存のブログサービスでは満足できなかった オオタニ：まずはcatnoseさんからZennの開発経緯を聞かせてください。エンジニアの技術情報発信って、それこそ個人ブログもあるし、最近ではQiitaがメジャーだったりして、決して真新しくはないですよね。あえて、この分野にチャレンジした背景を教えてください。 catnose：もともと私は個人でWebメディアをやっていて、十分食
TL;DR モチベーション ウェブページの背景に星空を見せたかった。それがちゃんと実際の星空の、リアルタイムの状況を反映していたら面白いよねと思った。 スタート時の状況 主に愛情のこもった手打ち HTML5 と 手打ち CSS でシンプルな Web ページを作っていた https://web.archive.org/web/20210212085818/celestian.io この前にどうやら React が世間では流行ってるらしいということで React と TypeScript を使った小さい 1 ページアプリを作った https://web.archive.org/web/20201202100627/https://celestian.io/ssr/ 今の https://celestian.io/sushi の前身 C# で WPF のデスクトップアプリとか作ってたことがあった
DDDとORMのEntityを混同しないための考え方
２つの ”Entity” ある種の ORM では RDB のテーブルスキーマモデルとなるクラスのことをEntityと呼んでいます。例えば PHP のDoctrineや TypeScript のTypeORMなどがそうです。 そういった ORM を採用したプロジェクトで DDD に取り組むとき困るのが用語の衝突です。ORM の Entity は RDB のための定義を含むため当然 DDD の Entity とは異なるのですが、なにぶん同じ名前なので混同してしまいがちです。 本記事では両者を混同せず扱うための考え方をまとめます。 Entity の定義 まずは定義から確認します。 DDD での定義 エヴァンス本の日本語訳から引用します。 主として同一性によって定義されるオブジェクトはエンティティと呼ばれる Eric Evans. エリック・エヴァンスのドメイン駆動設計 (Japanese Edi
久しぶりのPython環境をRyeで整える
CSS-in-JSのパラダイムシフト
2023年現在、Reactでは多種多様なスタイリング手法が用意されています。 代表どころで言うとCSS ModulesやTailwind、CSS-in-JSなどが有名です。筆者の個人的な好みでは、これらの選択肢の中でもCSS-in-JSを用いたスタイルが特に好きですが、CSS-in-JSライブラリ群の中にはランタイムでスタイリング処理がなされる為にパフォーマンス上の問題を抱えているとの指摘を受けているものもあり、最近は人気が下火になっているように感じています。 そこで本記事では、CSS-in-JSが生まれた背景から遡り、各ライブラリの内部実装を確認しながらそれぞれのライブラリの仕組み・メリット・問題点を明らかにし、CSS-in-JSのパラダイムシフトを追ってみたいと思います。 CSS-in-JSの登場 CSS-in-JSという言葉が最初に公の場で登場したのは、2014年にFacebookの
注意事項 かなり高度なGASの使い方なのである程度GWS（Googleフォームやスプレッドシート）やGASをわかってる方前提で書いていますので結構省略しているとこも多いです。 あと作った後に手順を書いているのでなにか抜け漏れあったらごめんなさい。 まだ作ってみただけで実際に運用はしてないのでテスト等も不十分かも。運用してからまた追記します。 コードは直接スクリプトエディタでサクッと作ったサンプルです、実際はローカルでLintかけたりするのでインデントおかしかったりしても許してください。 背景 GWSを使う際にマイドライブで外部共有可能にするとやりたい放題なのでセキュアな環境とは言い難くなる。 また組織のファイルをマイドライブにおいてしまうとファイルオーナーが退職したときの扱いに困る。上長に移管したり、退職者アカウントに移管するのが一般的かと思うが、移管するということはマイドライブのファイル
はじめに 📘 この記事は ラクスパートナーズ Advent Calendar 2023 の1日目の記事になります！！ 本社の ラクス Advent Calendar 2023 の7日目にも参加予定なのでそちらもよろしくお願い致します🥳 長い間 Python3.7 環境のプロジェクトに携わっていましたが、この度 Python3.10~ 環境のプロジェクトに携わることになりました。 そこでこの機会に python3.8 以降の最新の型ヒントやコード品質向上のテクニックについて、改めて情報をキャッチアップしながらまとめていきたいと思います。 この記事の対象者 🎯 Python の型ヒントについて学び直したい方 Python3.8 以降の型ヒントについて理解を深めたい方 python のドメインモデルクラスについて理解を深めたい方 型ヒントを使用したことがないが、興味がある方 なぜ型ヒントを
有料記事の技術ライターで食っていけるか
2020年版: なぜ仮想 DOM / 宣言的 UI という概念が、あのときの俺達の魂を震えさせたのか | Zenn という記事を500円で販売しました。その経緯と現時点での結果について。 なぜ書いたか Qiita の開発から離れて久しいのですが、 もし Qiita で有料記事を出せたらどういう体験になるんだろう、というのは当時からずっと考えていました。 zenn に搭載された Qiita にはない機能を使うことで、それを感じてみたかった、というのが一番の理由です。 優れたプログラマ、そして優れた書き手には相応の対価があるべきです。 オープンなコミュニティでは、それが称賛や承認となって返ってきますが、人間はそれだけでは生きていけません。 今までのエンジニア界隈では伝統的にオープンなコミュニティで稼いだ名声を使って、良い企業への転職で高い給与をもらう、というのが今までの実質的な「稼ぎ方」でした
要約 現在最新のGoogle Chormeで10080番ポートが使用できなくなった Firefoxではすでにブロック済み NAT Slipstreaming v2攻撃への対応のため ブラウザからアクセスするサーバを建てる場合は10080以外のポートにするべき 回避方法は一応ある Chrome 91以降は10080番ポートがブロックされる Google Chormeの91 (2021/05/25 リリース)から10080番ポートへのサーバに接続できなくなります。 例えば Google Chrome 90だと以下のように10080番のポートを受け付けるサーバにアクセスできますが、91以降だとアクセスできなくなります % python -m http.server 10080 Serving HTTP on 0.0.0.0 port 10080 (http://0.0.0.0:10080/) .
こんにちは。地図パズル製作所の都島です。今朝メールを確認したら、とても残念なメールが届いていたので、記事にしました。なんと、Heroku が無料プランを廃止するようです。2022/11/28 までに有料プランにアップグレードしてくださいと書かれています。残念！ 詳しくはこちらを見てみてください。 ということで、Heroku でホストしているアプリをどうしたらいいか考えていかないといけないですね。いくつか案を考えてみますが、私もあまり詳しくないので、間違っていたらコメントで教えてください！ 方法1: Heroku の有料プランに移す 一番簡単にできそうな方法です。でも、お金が結構かかる、、、というのが残念です。Hobby の dyno が $7/月、Heroku Postgres の Hobby Basic が $9/月、ということで、DB があるシステムだと毎月 $16 かかってしまうよう
App Engine VS Cloud Run
IP Anycast について
Cloudflare は現在120か国、320都市以上に500を超えるエッジデータセンターを保有しています。これらはIP Anycast という技術を用いて同じIPアドレスでその時点でのユーザーから一番近いエッジを判別しています。 また技術的に必然性のある場合を除き、全てのエッジの全てのサーバで全ての機能を動作させるというのが基本設計です。 このブログサイトでは今までCloudflareの様々な機能をテストし手順としてまとめてきており、非常に多くの機能が存在していることをお分かりいただけたかと思いますが、パブリッククラウドと異なりそれらの機能は可能な限り内部ルーティングなしで動作するように設計されており非常にモノリシックです。このため、ユーザーはどこにいても一番近いエッジと自動で通信が確立され同じ機能が提供されることになります。ゼロトラスト系のサービスを使う場合これはセキュリティと通信速度
4 月から新入社員となって本格的にエンジニアとして生活し始めた方も多いかと思います．いままであまり GitHub を使っておらず，会社から要求されてはじめてまともに使い始めた方もいるかもしれません． そんな方々にお願いがあります． GitHub を使うなら通知くらいまともに設定してくれ あなたがこのタイトルを読んでピンときていないのであれば，あなたの通知設定はおそらく間違っています．GitHub は初期設定だと非常に多くの通知を送信します．それは GitHub 自身が通知ページで述べているくらいです． 通知はあなたが思う以上に大切な存在です．必要とする通知は人によって様々であり，それを見逃してはいけないため，ときに GitHub は必要以上の通知を送信しています．しかし，必要以上な通知を受け取ると，人は通知を見ないようになってしまいます． 個人開発ならそれでもよいかもしれません．しかし，あ
チーム開発を加速するテストの育て方
テストを書いてないというチームには色々理由があると思いますが、「何をテストすべきかわからない」「書き方がわからない」「どのくらいメリットがあるかわからない」という意見は多いのではないでしょうか？テスティングフレームワークの選定や使い方を学ぶのは重要ですが、それ以上にテストの目的や戦略を学ぶことが重要です。チーム開発においてテストを活かすのは相応の知識とスキルが必要になりますが、活かせればテストは開発スピードを維持・促進する飛び道具になり得ます。 本稿は筆者が取り組んで実際に高いチーム満足度と速度を得られた、テスト戦略についてまとめたものです。
blitz-js prisma rails 倒し方
この記事の内容 blitz-js が生まれた背景 prisma の紹介 blitz で簡単なブログを作ってみる blitz を vercel にデプロイしてみる tldr blitz-js は next.js + prisma で rails を再現しようとしているフレームワーク Prisma ORM それ自体が良い。blitz の理解のためにも、まず Prisma を学べ blitz-js 自体はまだ α 品質だけど、今から注目しておく価値はある。デファクトになるかは不明。思想は継承されそう。 はじめに next.js はとても良いフレームワークだが、永続層を持たない。なのでフロントエンドとフロントサーバーに閉じている。 永続層、つまり DB を持たないので、初学者や流行りのプログラミングスクールの教材に選ばれない。また、JavaScript の学習資料が散らばっている。 要は Rail
私が妄想している最強のデータ基盤2023
新年になったので今年のやりたいことをまとめようと思いたち筆をとっています。単にやりたいこと書いてもただのポエムになってしまうので、私が今時点で妄想している最強のデータ基盤を描いて、その中でまだ触ったことのない技術を今年触っていこうという意気込みを最後に書こうと思います（意気込みだけにならないように頑張りたいです！） まだ触ったことないものもあるので妄想しているレベルです。 アーキテクチャ図 まず最初に結論から書いていきます。 なぜこのアーキテクチャが最強と思うのか データ基盤として機能を分けると以下の6つの領域に分かれると思っています（もう少し細かく分けることもできたりします。例えばDMBOKとかではホイール図で11の領域に分けたりしています） データ基盤の領域 主に関連するDMBOKの知識領域 主担当
どうも、フリーランスエンジニアの人です。 今まで関わったプロジェクトにおいてコーディングルールが曖昧だった環境で苦労したので、例に出しながら振り返ろうと思います。 ※ 本記事に登場するコード例は実際に存在するコードではありませんがヤバさは忠実に再現しました。 2022/11/5 追記 曖昧かつ実態のズレた変数名 変数の命名というものはエンジニアによって少々偏った傾向が見られますが、その変数が指し示す実態と命名に大きなズレがなく、主旨が伝わればエンジニアリングにおいて大きな問題はないはずです。 ですが、世の中には曖昧かつ実態と一致しない変数名が書かれたプロダクトコードが存在します。 以下のコードをご覧ください。 ※ 今回はJSを例に出します // ユーザーのデータを取得 export const getUserData = async (id) => { const res = await
Reactコンポーネントの開発時、データフェッチは欠かせません。 SPAで開発を行う時、あなたも含めてuseEffect()を使ったことがあるはずです。 あなたがSWRやReact Queryの代わりにuseEffect()を使う理由は、いくつかあるのでしょう。 そんな方のために、Reactが提供する<Suspense>を使ってデータフェッチを行う方法を紹介します。 追記: Suspenseではウォーターフォール問題を解決できないとの指摘について 「Suspenseの実装」に記載のコードを見た限り、ウォーターフォール問題を解決できないとの指摘がありました。 実装の章では問題を解決することではなく、<Suspense>をどのように使うかに焦点を当てました。 具体的な実装方法に踏み込むとテーマから大きく外れてしまう可能性があったためです。 読みやすさを優先した結果、解決のための実装については割
こんにちは。Turing株式会社の機械学習チームでインターンをしている九州大学修士1年の岩政(@colum2131)です。 Turingは完全自動運転EVの開発をするスタートアップです。 自動運転技術において、カメラやセンサ情報は正確な制御をする上で不可欠な要素である一方、自然言語やマルチモーダルな処理が必要となる状況もしばしば存在します。特に完全自動運転車においては、音声認識によってドライバーの音声命令を認識し、リアルタイムで適切な制御を行うことや、複雑な交通状況の背景にあるコンテクストを理解させるといった要求が出てきます。そのために、「基盤モデル」と呼ばれるような、自然言語処理を含む大規模モデルの学習が必要になってくると、私たちは考えています。 そこで本記事では、言語モデルの発展の流れとTuringが目指す基盤モデルの開発について紹介します！ 1. 言語モデルとは？ 近年の言語処理モデ
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Zennで発生した障害の原因と行なった対策のまとめ
GitHub Actions のデバッグをローカルで行う
コンピューターサイエンスの学習は、職業エンジニアになることを阻害する
Firebase Authから内製認証基盤に無停止移行して年間1000万円以上削減した
Sassなしで入れ子が可能に。CSSネストが全ブラウザ対応
【Obsidian】2023 年でオススメのプラグイン 66 選
【保存版】「そのuseEffectの使い方あってる？」と言われる前に
GitHub Actionsのワークフローを可視化するactions-timelineを作った
Redisの25倍のスループットDragonflyを試してみる
次の技術ブログを狙う「Zenn」がクラスメソッドへ 改めてエンジニアの情報発信を問う (1/3)
Web ページの背景を動く星空にした話 (with react-three-fiber)
複数の環境でDockerfileを共通化するために使えるtips
React17におけるuseEffectの破壊的変更を理解する
GoogleフォームとGASを使って利便性高くセキュアな共有ドライブ運用を作る
中国の "物流シェアリング" サービス利用者が死亡、運送ドライバーが過失致死罪で逮捕された件をまとめてみる
Python 3.8以降の型ヒント革命：DataclassとPydanticの徹底比較
Web Application開発に10080番ポートは使ってはいけない
Heroku の無料プランが廃止されるようです
GitHub を使うなら通知くらいまともに設定してくれ
Axios 使うのやめたらビルドサイズが 10 KB 減って、なんか知らんがパフォーマンスも良くなった話
チーム個々人のテックブログをRSSで集約するサイトを作った（Next.js）
コーディングルールはマジでしっかり決めろって話
useEffectをやめて、Suspenseを使おう
実践！大規模言語モデル / 1000億パラメータ越えモデルを動かすには？