Vue.js の Composition API が登場してから 1 年少しが経過しており、すでに使いこなしている方もいらっしゃるのではないでしょう？ 私自身お仕事で Composition API を使用しており、従来の Options API と比較して UI とロジックの分解がよりやりやすくなったように思えます。リアクティブなデータをコンポーネントの外で定義できるようになったことで、1 つのコンポーネントにまとめて書かざるをえなかった論理的な関心事に分けてそれぞれ別のファイルで定義できます。 書き心地としては React のカスタムフックに近い感じとなっていますね。 個人的には React がクラスコンポーネントから関数コンポーネント + Hook へ移行したように、Vue.js においても Composition API へ移行する流れが来るのではないかと思います。 さて、そんな

Webアプリのプロト環境をサクッと立ち上げたい 主に趣味の開発でサクッと動くものを立ち上げて、少しずつ手を入れながら PoC 的にプロダクトのイメージを固めていきたいというような場面がしばしばあります。そのようなときに使えそうな構成として、 Next.js + Prisma + Supabase でのプロジェクト立ち上げを試してみたのでメモを残しておこうと思います。 初期設定 Next.js プロジェクトを作成し、 Prisma をインストール・初期化します。 $ npx create-next-app@latest --typescript $ cd <project dir> $ yarn add --dev prisma $ npx prisma init Prisma のスキーマファイル prisma/schema.prisma と .env が作成されます。 Supabaseのプ

これまでいろんな現場でWebフロントエンド開発をしてきて、メンテナンスしやすく効率の高いWebフロントエンド開発をする上で重要になる考えが自分なりにまとまってきたので記事にしてみます。 Worse is Betterという考え方 自分が見てきた中でWebフロントエンドの開発効率が落ちてしまう一番の要因は、きれいで理論的には優れているアーキテクチャを構築しようとしてそれ自体がもたらす複雑性を支えきれないというパターンです。 少し前にフロントエンドにClean Architecture（以下CA、あの同心円の図を指すのは誤用に近いですがここではそれに乗ります）を導入する記事が流行ったと思いますがあんな感じです。ああいったクラスベースでDIが重要となる設計手法はサーバーサイドのJavaでSpringを使うのとは違ってReactがサポートしているものではないため、CAの実現自体に高い設計スキルが必

確かに、パッと見で 「なんだこれ？」 になりますね。 意味のないコメントとして　else 句ごと削除してしまって良さそうにみえます。 しかし、実はこの「何もしない」コードは、 プログラミング（理論）的に面白い側面を持っている ので、簡単に記事にまとめてみたいと思います（記事中では Swift に似た擬似コードを使用します）。 キーワード if 式、網羅的パターンマッチ、参照透過、副作用、モナドと単位元 else 句が省略できる条件 例えば、次のコード例を考えてみます： let array: Array<Int> = ... var positiveArray: Array<Int> = [] // var = 可変変数 for x in array { if x > 0 { positiveArray.append(x) } else { // 何もしない } } ここでは array か

概要 先日Astro + microCMSでポートフォリオサイトを作り直したので、その時のことを振り返りつつ感じたことをまとめます。 リポジトリはこちら この記事で触れること Astroのメリット・デメリット・個人的な好き嫌い microCMSを使ってみてどうだったか 触れないこと Astroの概要、技術説明 microCMSの説明 Astro Astroについては公式ドキュメントを参照してください。 Astroを使った理由 100% Static HTML, No JS という点に惹かれたからです。 これの前のポートフォリオはEleventy.jsを使って開発していましたが、11tyを使っていた理由もJSが動作しない100%静的なHTMLを生成できるツールだったからでした。 （余談ですがEleventy v1.0が正式にリリースされましたね！めでたい！） これに加えてReactやPrea

制作したもの 概要 React のチュートリアルの三目並べを Next.js 12 + TypeScript + Recoil + @herp-inc/eslint-config の構成で、新しめの記述を取り入れた形に書き直してみた。 （上記のリポジトリにすべてのコードを掲載した。） コンセプトは、 TypeScriptの型チェックと厳しめのESLintルールでバグが起きづらい形にし、スケールしても内部品質を担保。 Next.jsで作ることにより、ブラウザでのパフォーマンスと開発体験の向上 である。 改良したいポイント React のチュートリアルの三目並べ（マルバツゲーム）の公式サイトに掲載されている元のコードは以下である。 この code に関して、以下のような課題が考えられる。 React の書き方が、現在では非推奨のクラスコンポーネントである。（関数コンポーネント + React

ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは。Yahoo!ニュース を担当しているエンジニアの喜楽です。 今回は、Yahoo!ニュースが取り組んでいるブラウザバック時の表示最適化手法について紹介します。 なぜブラウザバック時の挙動に注目するのか ユーザーがYahoo!ニュースのページを閲覧し、別のページに遷移する方法は大きく分けて以下の2つが考えられます。 （A） リンクをたどってページを遷移する （B） ブラウザーのナビゲーションボタンまたはスワイプ操作によって遷移する 「戻る」による遷移（ブラウザバック） 「進む」による遷移（ブラウザフォワード） Yahoo!ニュースでは総PVのうち一定程度が(B)のブラウザバックまたはブラウザフォワードによるページ遷移時のも

こんにちは。メルペイ Backendチーム Manager of Managersの @godricです。 この記事は、Merpay Advent Calendar 2021 の25日目の記事です。 メルペイは「信用を創造して、なめらかな社会を創る」をミッションとし、与信事業を中心に黒字戦略に取り組んでいます。また、メルカリグループの新たな成長軸を模索するためのメルコインの暗号資産投資の事業、ソウゾウのメルカリShopsなど様々な新規開発が並行に走っています。どちらもメルカリグループにとって重要な事業戦略で、高い品質を保ちながら最速スピードでサービスをローンチし進化させて、市場で優位性を確保しなければなりません。 メルペイBackendチームの全員がAll for Oneで今までメルカリ、メルペイの高速な成長を支えてきましたが、技術的負債、組織的負債が溜まったことによって様々な課題が出てき

判断と決断の話の違いはこのツイートの通り。 判断の話で言うとぼくはそーだいさんがしてくれた「判断と決断は違う」という話がだいぶ実になっていて、「情報を集めれば理屈で答えが出せるのが判断、今は情報を集めることができない中で答えを出さないといけないのが決断、リーダーがやらなければならないのは決断」という話をかなり大事にしている— しんぺいくんさん (@shinpei0213) 2021年12月10日 決断のコツ 結論から言えば、決断のコツは失敗できるようにすることだ。 失敗できる状態なら決断することができる。 そして素早くアクションして、失敗のフィードバックを受け取ることで新しい決断をすることができる。 そーだいさんがぼくに教えてくれた二大大事なこと「判断と決断は違う」と「ロールバック可能なことはどんどん試せばいい、ロールバックが難しいことは慎重に」です— しんぺいくんさん (@shinpei

2021年もう終わっちゃいましたが、転職と学業と子供のことについて書きます。 TL;DR 転職した。 Ubieに入社して半年経った（別記事） UoPeopleでは21単位取れた。 子供3歳。今が一番かわいい。 転職 やはり2021年の一番のイベントは転職だった。 2月頃から本格的に転職活動を始め、3月末で終了した。 9社応募して結構大変だったので少し詳しく記録を書いておくことにする。 応募した会社 エンジニアとして、より成長できそうな会社 情報発信を積極的にしていたりとカルチャーが魅力的な会社 海外事業をしている、もしくは英語を使うなど職場環境がグローバルな会社 リモートワークがメインなど子育てしながらでも働きやすい環境 をピックアップして9社ほど応募した。 やったこと ポートフォリオの作成 一からデザインしたい気持ちもあったが無限に時間かかりそうなのでテンプレートを探しアレンジした。 ネ

本書は、Lydia Hallie 氏 と Addy Osmani 氏らによる Learning Patterns (https://www.patterns.dev/) の日本語訳です。原著は大きく 3 つのセクションに分かれていますが、本書は、その最初のセクションである Design Patterns を訳したものとなります。

Brave の紹介は必ず「すごく速いウェブブラウザ」「プライバシーを重視したブラウザ」みたいな感じになっている。そのおまけみたいに BAT（Basic Attention Token）の説明が付いてくる。実はそのトークンとトークンによって作られるエコシステムこそが彼らの狙い。BAT でそのエコシステムが回れば、クリエイターとユーザーが広告を使って共に協調しあう素晴らしい社会が生まれる。 今、Brave を使ってる人もまだ使ってない人も BAT というトークンを軸にして考えてみるとまったく新しい web3 のエコシステムが見えてくるはず。 「今後ほぼ全ての企業がトークンを発行してその経済活動を行うだろう」「スターバックスもトヨタもディズニーも街角のパン屋さんもトークンで顧客とつながるようになる」そんな話を聞いても「はぁ？」という感想を持つかもしれない。でも Brave が作り出そうとしている

はじめに radikoのタイムフリーとエリアフリーを大変便利に使っているのですが、 過去1週間分まで遡れるのはいいとして、 「聴取を開始してから24時間以内であれば、合計3時間まで」という制限があります。 意外と24時間経過してしまったりして、全部聞けないこともあるので、（Cookie削除すれば、ゲフンゲフン…） どうにかして短時間かつ高品質でダウンロードしてみます。 まず、タイムフリーで再生するまでの流れについて、 Chromeのデベロッパーツールや、パケットキャプチャーで解析、また先人の知恵を借りると、 大雑把に以下の3ステップあります。 （エリアフリーの場合は、プレミアム会員として、1の前にログインしてCookieを取得して、以降取得したCookieを使って各Stepを進めます） https://radiko.jp/v2/api/auth1 にGETリクエストしてトークンを取得 ht

Merpay Advent Calendar 2021 の 8 日目はメルペイフロントエンドチーム の @tanakaworld がお送りします。 はじめに メルペイは金融サービスであり、品質の維持・向上に日々取り組んでいます。フロントエンドチームでは、約 2 年前からリグレッションテストの自動化に取り組み始め、直近の 1 年間はインテグレーションテストの自動化にもチャレンジしてきました。本記事ではメルペイフロントエンドチームに於けるテスト自動化の方針とその全体像について振り返ってみたいと思います。 フロントエンドプロダクトに関わるテストは次のものが挙げられます。これらをひとつずつ順番に見ていきたいと思います。 ユニットテスト インテグレーションテスト シナリオテスト リグレッションテスト テストの種類とそのカバレッジ対象 1. ユニットテスト ユニットテストは Jest を用いて、主に

こんにちは、@chikathreesixです。エンジニア起業家としてAutifyというAIを用いたソフトウェアテストの自動化製品を開発するスタートアップのCEOをやっています。 この記事では、BtoBスタートアップがProduct Market Fitするために必須である「顧客のBurning needsを解決する」ことについて、アメリカのアクセラレーターAlchemist Acceleratorにて学んだ経験を元に書きました。 僕らがどのように顧客のBurning needsを見つけ、Autifyという製品にたどり着いたのか、その過程と失敗について共有することで、エンジニア起業家やBtoB SaaS起業家の方々の参考となれば幸いです。 ※BtoCには当てはまらないケースもあるかもしれませんが、僕はBtoCの事は全くわからないのでご容赦ください。 弊社は2019年の1月にアメリカのトップス

heyで STORES の事業責任者をしている御守(オンモリ)@OnMorikです。プロダクトマネージャー組織のマネージャーからプロダクト責任者を経て現在に至ります。特技は予算達成。 この記事では「なぜ予算を達成しなきゃいけないの？」という疑問に対する答えについて書きます。この疑問をクリアにしておくことで、周りを巻き込んでプロジェクトを進める際に使いがちな「予算達成のために協力してください」というフレーズを、自分の言葉で、自信を持って、迫力を込めて言いやすくなります。(hey Advent Calendar 2021 の22日目です) 「予算達成に必要だから」の一言で済ませていいのだろうかビジネスにおいて周囲を巻き込んだプロジェクトを進める時には、WHYの説明が不可欠です。「なぜこれをやるべきなのか（=だから協力してほしい）」という自分の考えを伝えて納得してもらうことで、周りのステークホル

｜DMM inside

Affinity Photo for iPadを使って写真の背景を切り抜く 切り抜く元の写真はこちら。ジャケットを床に敷いて椅子に乗って上から撮った写真です。 このままではフローリングが丸見えなだけでなく、椅子の足がちょっと写り込んでしまったりと生活感が出てしまっています。 この写真をジャケットだけを残して、残りの不要な部分をAffinity Photo for iPadを使って削除していきたいと思います。やる作業はざっくりと下記の5工程。 残したい領域をざっくり選択する 選択範囲を細かく調整する 選択範囲を反転 消しゴムツールで背景を削除 影をつけてそれっぽくする 上の作業をAffinity Photo for iPadを使って、もう少し詳しく説明していきます。 Step.1 ざっくりと残したいものを選択する まずはAffinity Photoで編集したい写真を読み込み。なるべく解像度の

主体的で幸福感の高いキャリアを歩むための勘所やコツをIT業界の最前線で活躍する、二人の元エンジニアに学ぶ「DX時代を勝ち抜くエンジニア成長戦略」。ここで株式会社レクター 取締役／一般社団法人日本CTO協会理事の広木氏が登壇。ここからは、キャリアの節目で広木氏が考えていたこと、とっていた行動を紹介します。前回はこちらから。 キャリアの節目で考えていた2つのこと 広木大地氏：このような活動をしていた僕が、キャリアの節目節目でどんなことを考えたかをまとめてみました。誰かに負けたくないという思いから、成長を求めるゲームに参加してきた。それはなにか。自分の信用度合いがそんなに高くない時に、「できます。できます」とビッグマウスでいれば、いい仕事をもらえるかもしれません。 その仕事にきちんと応えていけば、それがまた信頼や信用になり、新たな仕事を得るためのチャンスになるので、さらにレバレッジをかけて、「自