ブックマーク / zenn.dev/praha (37)

  • ウミガメのスープを1人で遊べるアプリを作りました

    1人でウミガメのスープを遊べるiOSアプリを作りました。 アプリの概要 「ウミガメのスープ」は以下のようなゲームです。 出題者が問題を出し、他の人は「はい」または「いいえ」で答えられる質問を出す。質問者は、出題者が考えているストーリー、あるいは物を推測して語る。それがすべての謎を説明できたとき、このパズルは解けたことになる。 (Wikipedia - シチュエーションパズルより引用) 通常は複数人でプレイするゲームですが、このアプリでは出題者をChatGPTに担当してもらうことで1人でウミガメのスープを遊ぶことができます。 問題は今のところ15問で遊びたい問題を選択してプレイできます。 (良い問題が思いついたら追加する予定です) アプリ開発のきっかけ 2024年4月から業務でモバイルアプリ開発をすることになりました。 自分はWebアプリの開発経験しかなく業務時間だけのコミットでは足りないと

    ウミガメのスープを1人で遊べるアプリを作りました
    yug1224
    yug1224 2024/11/12
  • 【懺悔】Chu!雑にチケット切ってごめん

    むかしむかしあるところに ※おおむね嘘です めでたくリリース!までは幸せだった ボス🧔‍♂️ < 今日から新規プロジェクトを立ち上げる! ボス🧔‍♂️ < まず、君には基幹システムからのデータ連携システムの構築を任せる。 ボス🧔‍♂️ < 連携元システムの担当者はxxxさんだ。詳細は彼と詰めてくれたまえ。 私👨🏻‍💻 < ラジャ! ... 私👨🏻‍💻 < でけたっす! ボス🧔‍♂️ < よくやってくれた。では次のタスクを~...。 ... ボス🧔‍♂️ < 無事リリースだ!お疲れ様! ボス🧔‍♂️ < 早速次のプロジェクトに移ってもらう。運用保守はやってもらうが、優先度は低くていい。 私👨🏻‍💻 < ラジャ! そして起こる悲劇 CS👧 < すみません、お客様が「商品を購入したのにログインできない」っておっしゃってます!カンカンです!至急確認をお願いします!

    【懺悔】Chu!雑にチケット切ってごめん
    yug1224
    yug1224 2024/11/02
  • Next.js 15 和訳

    雑に翻訳しました。 意訳がめちゃくちゃ含まれているので注意です。 Next.js 15が正式に安定版としてリリースされました。 このリリースはRC1とRC2のアップデートをベースにしています。 安定性に重点を置きながら、気に入っていただけるようなエキサイティングなアップデートを追加しました。 今すぐNext.js 15をお試しください。 # 新しい自動アップグレードCLIを使用する npx @next/codemod@canary upgrade latest # もしくは手動でアップグレードする npm install next@latest react@rc react-dom@rc また、今週木曜日(10月24日)のNext.js Confでは、次の新機能についてもご紹介します。 Next.js 15の新機能は以下の通りです。 @next/codemod CLI: Next.jsとR

    Next.js 15 和訳
    yug1224
    yug1224 2024/10/23
  • プルリクを気持ちよくレビューしあえるコツあれこれ

    divではなく、spanを使ったほうが良いと思いました! + <div>山田</div> - <span>山田</span> 文章だけで「ここはこうした方がいい」を説明するより、コードも一緒に提案してあげた方が分かりやすいです。 GitHub上だと、以下のように操作するとコードの提案ができます👇️ GitHubのリンクを貼る時はパーマリンクを使う

    プルリクを気持ちよくレビューしあえるコツあれこれ
    yug1224
    yug1224 2024/10/07
  • Chrome DevToolsを使いこなしてフロントエンド開発を加速させる

    Chrome DevTools(以下、開発者ツール)は開発者にとって欠かせないツールですが、改めて使い方を調べたことは少ないのではないでしょうか? この記事では開発者ツールの便利な機能をまとめて紹介します!筆者はChromeをメインで使用しているのでChrome DevTools前提ですが、一部拡張機能や他のブラウザの便利な機能を含みます。 スクリーンショットをキャプチャする 端末の機能でもスクリーンショットをキャプチャすることはできますが、開発者ツールではより便利なスクリーンショットの機能が提供されています。 特定のノードのスクリーンショットをキャプチャする Elementsパネルからスクリーンショットをキャプチャしたいノードを選択します ノードを右クリックして「Capture node screenshot」をクリックします 選択したノードのスクリーンショットがダウンロードフォルダに保

    Chrome DevToolsを使いこなしてフロントエンド開発を加速させる
    yug1224
    yug1224 2024/09/03
  • ディレクトリツリーを2秒で書けるアプリを作りました

    ディレクトリツリーを2秒で書けるアプリを作りました。 アプリ開発のきっかけ PRに説明をつけるとき、自分はよくディレクトリツリーを使います。 👇 こんなのです。 一から自分でディレクトリツリーを書くのはなかなかの手間なので、👇のようにしていました。 既存のディレクトリツリーをコピーしてファイル名の部分だけを変える 足りない部分は他の部分をコピーしたり「けいせん」を変換して補完する が、それすら面倒になってしまいサラッと書けるようなアプリを作ってしまおうと思い作成しました。 アプリの概要 入力したインデントに応じて自動的にディレクトリツリーの罫線部分を挿入してくれます。 左のテキストエリアにスペースやタブを入れるとスペースやタブの数がそのままディレクトリの深さとなり、右のテキストエリアにディレクトリツリーが描画されます。 技術スタック フレームワーク: Astro スタイリング: tai

    ディレクトリツリーを2秒で書けるアプリを作りました
    yug1224
    yug1224 2024/08/20
  • NeverThrow入門 | TypeScriptでResult型を使いたいんじゃ^〜

    会社でNeverThrowというライブラリを使っています。 とても便利なので、とても便利だよ〜という記事を書きます。 NeverThrowとは? NeverThrowは、TypeScriptで「Result型」を実現できるライブラリです。 Result型とは? Result型は、関数の中でエラーをthrowする代わりに、エラーを戻り値として返すようにすればいいじゃね?な仕組みのことをいいます。 もっと噛み砕いて説明します。 たとえば「50%の確率で足し算してくれるけど、50%の確率で💩をthrowする」という関数があるとします。 コードで表すと👇になります。 function add(a: number, b: number) { if (Math.random() >= 0.5) { throw new Error('💩'); } return a + b; }

    NeverThrow入門 | TypeScriptでResult型を使いたいんじゃ^〜
    yug1224
    yug1224 2024/07/20
  • フルリモートで相手に気持ちよく仕事をしてもらうためのコツあれこれ

    社内のプチ発表に使った資料です。 文章のコツ 前置き フルリモートでは、文章でのやり取りがメインになる。 なので、文章がヒドいと「この人と仕事するのキツイ」と思われちゃう😢 そう思われないための色々思ったことを自戒メモ。 なるべく箇条書きにする

    フルリモートで相手に気持ちよく仕事をしてもらうためのコツあれこれ
    yug1224
    yug1224 2024/06/19
  • Next.js 15 RC 和訳

    雑に翻訳しました。 意訳がめちゃくちゃ含まれているので注意です。 Next.js 15 リリース候補 (RC) が利用可能になりました。この初期バージョンでは、今後の安定版リリースの前に最新の機能をテストできます。 React: React 19 RCをサポート。React Compiler (Experimental)の登場及び、ハイドレーションエラーの改善。 Caching: fetchリクエスト、GETルートハンドラー、クライアントナビゲーションはデフォルトではキャッシュされなくなりました。 Partial Prerendering (Experimental): PPRをオプトインする設定をLayout及びPageに追加しました。 next/after (Experimental): レスポンスのストリーミングを終了後にコードを実行する新しいAPIを追加しました。 create-n

    Next.js 15 RC 和訳
    yug1224
    yug1224 2024/05/26
  • GitHub Actions入門

    GitHub Actionsとは? GitHub Actionsは、GitHubが提供する「スクリプトを動かしてあげるよ~」なサービスです。 具体的に言うと、リポジトリに以下のようなディレクトリを作って、その中に「こういうときにこれを実行してね」なYAMLファイルを設置しておくだけで、GitHubが「お!これを実行したらええんやな!」と認識してくれます。 料金(2024年05月現在) publicリポジトリだと無料で使い放題です。すごい。 privateリポジトリでも無料枠が2,000分/月もあります。 その前に:YAMLの書き方を予習する 先にYAMLの予習をしておくのがオススメです。 というのも、先にYAMLの書き方が分かっていないと「これはGitHub Actionsの機能なの?YAMLの機能なの?」と迷うからです。 学習としてオススメなのが、JSONでいろいろなデータを表現してみた

    GitHub Actions入門
    yug1224
    yug1224 2024/05/12
  • はじめてのプロジェクトマネジメントでやりたい放題した結果

    株式会社プラハは2022年、株式会社アガルートによるM&Aで子会社となりました。 この変化の一環として、アガルート社長自らがプロダクトオーナーのひとりとして参加する新規プロダクト開発が始まりました。プロダクトの開発はプラハの私たちが担当し、私も「開発チームのリーダー」としてそのチームに加わることになりました。 私はこれまで開発メンバーとしての経験しかありませんでしたが、エクストリームプログラミングとかレガシーコードからの脱却とかめっちゃ好きで、で学んだプラクティスをリーダーとして実践できる機会が与えられて最高にハッピーでした。しかも、プロダクトオーナーの一人として参加するアガルート社長はこれまで伝統的な開発手法しか経験したことがないとのことで、新たな開発の進め方を経験してもらう絶好の機会でもありました。 やったこと 「欲しい機能一覧」を受け取ったが、いったん白紙に戻した プロジェクトが始

    はじめてのプロジェクトマネジメントでやりたい放題した結果
    yug1224
    yug1224 2024/04/28
  • フロントエンド界隈のビルドツール用語の違いを分かりやすく!

    「ここ間違ってるよ!」があれば、コメントで指摘して頂けるとうれしいです。 フォーマッター フォーマッターは「俺が決めた書き方に修正してやるぜ」なツールです。 たとえば「この行は文字数が多すぎるから改行してやるぜ」とかをしてくれます。 現状は、Prettierがよく使われているようです。 フォーマットするルールは自分で追加できますが、公式には「フォーマットルールを議論することは無駄です」的なことが書かれてるので、暗にデフォルト設定のまま使うことを推奨している気がします。 リンター リンターは「その書き方はやめたほうが身のためだぜ」を警告してくれるツールです。 警告するルールは自分で追加できます。たとえば「関数を書くときは絶対に関数式で書け!関数宣言は使うな!」とかを警告できたりします。 ルールを追加すればするほど「俺に指図するなああーッ!!」となりますが、👇のようなメリットが生まれます。

    フロントエンド界隈のビルドツール用語の違いを分かりやすく!
    yug1224
    yug1224 2024/03/31
  • Prettierを使わない理由

    この記事はPrettierを使用している人を非難したり、脱Prettierを推奨する事を目的としていません。 こういった考え方もあるということをひとつの意見としてご覧いただければ幸いです。 勘違いしている人が多そうなので追記します。 Prettierを使わないというのは私が独断で決めた事ではないです。 チームが発足する際の技術選定で合意は取れていますし、私が関与していない別のチームでも同様にPrettier無しで開発しています。 私達のチームはメンバー同士を互いに信頼していますし、細いスタイルで喧嘩を始めるようなメンバーは居ないので安心してください。 はじめに Prettierはコードフォーマッターとして広く使われているツールです。 コードスタイルに関する議論をなくすことを目的としており、ESLintとは異なりデフォルト設定のままですぐに使えるのが特徴です。 さらに、PrettierはJS

    Prettierを使わない理由
    yug1224
    yug1224 2024/03/31
  • WEBエンジニアだけど1mmも確定申告が分からないので調べたのだ~~!

    2月になると「確定申告の季節ですね~」と言うエンジニアがいるのだ。 ぼくも「そうですねー」と話をあわせるのだが 「確定申告」ってなんなのだあああああああ~~~~? 実はぜんぜん知らないのだああああああああああああああ ・・・って内心は思ってるのだ。 そんなことではいけないと思い、確定申告について調べてみたのだ! 確定申告とは? 一言でいうと「私は今年これだけ稼ぎました!」と税務署に報告することを指すらしいのだ。 うん、それは知ってるのだ。 中学生のときに「国民は納税する義務があるよ」と教えられたのだ。 でも、具体的に いつ? どれくらい稼いだら? どうやって申告する? 税金の仕組みってどうなってるの? など詳しいことは教えられていない気がするのだ。 そこらへんを掘り下げていくのだ。 その前に:会社員は? 会社員の場合は、源泉徴収(げんせんちょうしゅう)というやつのおかげで、確定申告をしなく

    WEBエンジニアだけど1mmも確定申告が分からないので調べたのだ~~!
    yug1224
    yug1224 2024/02/18
  • DefinitelyTypedにはじめてプルリクを出したのでやり方をメモ【人生初OSSコミット】

    DefinitelyTypedにプルリクを送った話を書きます。 (人生初OSS活動でした🌎) 経緯 最近、react-calendar-heatmapというライブラリを使う機会がありました。 GitHubで使われているようなヒートマップを表示してくれるライブラリです👇 ▲しずかなインターネットでも使用されてみたいです とても便利なライブラリなのですが、以下のような状況でした。 体パッケージにTypeScriptの型が含まれていない DefinitelyTypedにはあるが、anyが多い 一言でいうと「つらい」。 そんなわけでDefinitelyTypedの型ファイルを見たところ、「自分でも直せそう」と思いました。 それくらい簡単でした。 なので、直してプルリクを出してみることにしました。 プルリクを出すまでの流れ 先に書いておくと、これが実際に出したプルリクです👇 Reduce U

    DefinitelyTypedにはじめてプルリクを出したのでやり方をメモ【人生初OSSコミット】
    yug1224
    yug1224 2024/01/27
  • 「プログラマー脳」という本を読んだ!風変わりで面白かったのでメモ!

    プログラマー脳」というを読みました。 技術としては風変わりで面白かったので、せっかくなのでメモしておきます。 (雑な解釈なので「それ違うんじゃね?」があるかもです。その場合は指摘してくれるとうれしいです) 📖どういうか ザックリ言うと 科学的にいうとプログラマはこういう感じでコードを書いたりしてるので、こういうことを意識すると効率が上がるかもね! みたいな内容を書いてるです。 🧠人がコードを読むときの脳内 人がコードを読んでいるとき、どのようなことが脳内で起こっているのでしょう? ・・・という感じの説明からはじまります。 ▲こういう流れらしい まずコードを読むと、目を通して「感覚記憶」というところに情報が入るらしいです。(1の部分) 「感覚記憶」って何?という話ですが、たとえば写真をパッと一瞬だけ見せられたとしても、脳裏に残像が少しだけ残ってる感があったりしますよね?このとき

    「プログラマー脳」という本を読んだ!風変わりで面白かったのでメモ!
    yug1224
    yug1224 2023/12/29
  • VScodeだけでGit操作を完結させるのだ~~ッ!!

    VScodeだけでGit操作を完結させる方法について書くのだ。 👀その前に! この記事は、以下の2つの拡張機能がインストールされている前提で進めるのだ。 Git Graph - Visual Studio Marketplace GitLens — Git supercharged - Visual Studio Marketplace インストールしておいてほしいのだ。 ✅ステージング(git add ◯) 以下のようにするのだ。 +ボタンをクリック:ステージングする ーボタンをクリック:ステージングを解除する ▲ステージング→解除 ✅コミット名を自動でつける 右にある✨ボタンを押すと、コミット名を自動で決めてくれるのだ👇 ▲この例だと、変更内容が意味不明すぎて変なコミット名になってるし、現状英語だけみたい? これは、GitHub Copilotの機能なのだ。 ✅コミット(git c

    VScodeだけでGit操作を完結させるのだ~~ッ!!
    yug1224
    yug1224 2023/12/07
  • ブランチ名をもとにPRに自動でラベルを貼るGitHubActions

    はじめに 弊社では、2023年11月よりOSSチームの活動がスタートしました。 このチームに参加しているメンバーは、1週間のうちの1日分の稼働をOSS活動に割り当てる事ができます。社員の技術力向上及び、日頃使わせていただいているOSSコミュニティに対する恩返しをチームのミッションとしています。 OSSチーム以前のOSS部では下記のような活動も行っていました。 今回は、OSSチームで新たに開発したGitHub Custom Actionsについて紹介させて頂きます。 GitHub Custom Actions GitHubActionsでusesの所に指定するアレです。 Docker Container ActionsやJavaScript Actions、Composite Actionsなど、さまざまな種類が存在しますが、今回はCustom Actionsの詳細な解説は省略させていただき

    ブランチ名をもとにPRに自動でラベルを貼るGitHubActions
    yug1224
    yug1224 2023/11/27
  • Next.js 14 和訳

    雑に翻訳しました。 意訳がめちゃくちゃ含まれているので注意です。 Next.js Confで発表したとおり、Next.js 14 は、下記の点に最も重点を置いたリリースです。 Turbopack : App & Pages Router で 5,000種のテストに合格 ローカルサーバーの起動が53%高速化 Fast Refreshによるコード更新時の反映速度が94%高速化 Server Actions (Stable) : Progressive EnhancementなMutationを実現する キャッシュと再検証の統合 シンプルな関数呼び出し、またフォームとネイティブに連動 Partial Prerendering (Preview) : 高速な初期静的レスポンス + 動的コンテンツのストリーミング Next.js Learn (New) : App Router、認証、データベースな

    Next.js 14 和訳
    yug1224
    yug1224 2023/10/29
  • LGTM画像を投稿・シェアするサービスをエッジな構成で作りました

    はじめに LGTM画像を投稿・シェアするサービスをプラハの有志メンバー達と一緒に作りました。 今回はこちらのサービスについて紹介させて頂きます。 サービスの紹介 LGTM画像を投稿・シェア出来るサービスです。 Goodの文字は変更可能で、下記のようにLooks Cat To Meといった画像も投稿できます。 僕の愛「くるり」ちゃんです LooksToMeは下記のOrganizationの元で管理されており、AGPL3.0のOSSとして公開しています。 使い所 PRをApproveする際などに、「LGTM」とコメントする代わりに利用する事を想定しています。 Goodを通り越して神な時はLooks God To Me。 寿司いてぇなって時はLooks Sushi To Meと、その時の気分に合わせて使う事ができます。 なぜ作ったのか 既存のLGTM画像サービスを個人的に利用していたのですが

    LGTM画像を投稿・シェアするサービスをエッジな構成で作りました
    yug1224
    yug1224 2023/09/16