しずかなインターネットの技術構成
こんなWebサービスをリリースしたので、技術的な話をまとめておこうと思います。 元々このサービスは、趣味の延長線のような感じで開発を始めました。競合にあたるnoteやはてなブログなどのサービスが確固たる地位を築いているということもあり、「お金にはならないだろうけど、自分の趣味を詰め込んだものにしよう」というゆるい気持ちで開発を続けています（楽しい）。 選定の方針 趣味と言っても文章投稿サービスなので、ユーザーが少数であったとしても長期間運営しなければなりません。そのため、ユーザー数が少なければランニングコストが数千円/月以下、ユーザー数が増えたときは段階的にコストが上がるように選定を行いました。 アプリケーション フルスタックNext.jsアプリケーションをCloud Runにデプロイしています。各APIエンドポイントはNext.jsのAPI Routesで生やしています。 Next.js
Webフロントエンド入門
まずはじめに HTML、CSS、JSを学んだ後にモダンなweb制作を行う上でこれから何を学べばいいだろうと手探り状態だった過去があるので、今同じ悩みを抱えている方に向けてこの記事を書こうと思いました。また、自分自身が2023年に多くのことを学んだのでそれの整理になればという思いもあります。 あと、いいね、コメントいただけると記事作成の励みになります😇 この記事の対象者 HTML, CSS, JSはある程度理解した モダンなWeb制作を行いたい これから学ぶべき技術 React, Next.js 一度は聞いたことある人も多いと思います。これは、Webサイトを効率的に開発することを目的に作られたJSのフレームワーク(正確にいうとReactはライブラリ)です。 ReactはFacebook社が開発したもので、それをVercel社がより使いやすくしたものがNext.jsです。 作成するものによっ
『なっとく！関数型プログラミング』は読者の理解度の進捗を先読みして作り込まれた”プログラミング入門”の良書 - Magnolia Tech
なっとく！関数型プログラミング 作者:Michał Płachta翔泳社Amazon 良い、買おう、読もう、（コードを）書こう、以上！ めっちゃ良いですよ、この本 中盤のプリミティブじゃやりづらい→直積→直和→二つ合わせてADT→値を取り出すためのパターンマッチの解説の流れの疾走感がいいですね— magnoliak🍧 (@magnolia_k_) 2023年8月6日 『なっとく！関数型プログラミング』は、2022年に出版された『Grokking Functional Programming』の邦訳版で、主にScalaを題材として関数型プログラミングを学んでいくための入門書("Grokking"は、完全に理解する、という意味)。あくまで関数型プログラミングの考え方、コードの書き方、良い設計の指針の解説が主眼に置かれているので、Scalaの言語機能の入門書ではない。Scalaの言語仕様を網羅
世はまさに大サブスクリプション時代。この潮流の中で弊社スマートバンクもまた、去る2023年7月12日にB/43プラスというサブスクリプションサービスをリリースしました。 サブスクリプションといえばユーザーに提供されるコンテンツや機能といった直接的な価値に焦点が当たりがちですが、その土台にはサブスクリプションビジネスを成立させるための課金システムがあります。本記事では筆者が行った課金関連の開発を振り返ってみて重要だったポイントや工夫点を伝えてみたいと思います。 すでに世に多くのサブスクリプションサービスがある中で、課金システムの実装はコモディティ化した単純な作業に思えるかもしれません。しかしながら自社サービスにてゼロから実現するとなると、想像よりも多くの思考と意思決定が必要とされる、エンジニアリング観点ではとても奥深い題材といえます。いち開発プロジェクトのケーススタディ、あるいはいちプログラ
はじめに 今回はフロントエンド(主にReact, Next, TypeScript)でおすすめの学習教材をまとめました。 対象者 エンジニア初心者 モダンフロント技術を学びたい人 ロードマップ Developer Roadmaps エンジニア向けの学習ロードマップが整理されています。 現在の自分の立ち位置を把握し、次にやるべきことの方向性を知ることができます。 エンジニアが使うであろう、ほぼ全技術が網羅的にまとめられているので、まずはこのロードマップを使って現在の立ち位置を掴んでみてください。 TypeScript typescriptlang 公式が提供している学習サービス。 基本文法から実践的な内容まで学ぶことができる。英語が苦手でなければここで一通り学ぶべき。 サバイバルTypeScript 実務で使えるTypeScriptの実装方法を学ぶことができる。応用的な内容も多いが、解説が丁
久しぶりに記事を書く。最近マルス端末のUIについてツイートがあった。 この件に関して、UIについてやUXに対して日々やってきている人間は「ダメなUI」という認識の人が多いように思う。一方で、システムの開発者にとってはこれは、その認識でない人間が多いようだ。なので、この辺を私なりに意見を書いておこうと思う。 まぁ、これはいつもなのだが、書いていることが散らかってる。基本的に音声入力のメモなので、読みにくいかもしれないが読んでくれ参考になれば幸いだ。 熟練が必要なUIは基本的によくない まず、基本的に熟練が必要なUIはそもそも良くないって話をしていく。順番に話していこう、まず、熟練が必要なUIが支持される理由を考え、それに対して、批判していき、なぜ熟練が必要なUIはダメかを語ってみよう。 熟練が必要なUIが支持される理由 その前に、こういった熟練のUIが支持される理由についてかいておこう。それ
インフラチームの西川です。 当社ではGitHubを利用しています。いろいろ便利な機能があるのですが社内でコマテクを募集してみたところ意外と知らないものがあったので共有してみます。 行動の見える化 特定コミットのリンク取得 通知 行動規範 ガイドライン .github リポジトリ テンプレートリポジトリ タグをたくさんプッシュさせない ドラフトプルリクエスト チケットの自動リンク化 ベースブランチの更新を取り込む まだレビューが終わってないプルリクエストの一覧化 レビュアーの自動割り当て コードの所有者 ファイル単位でレビュー済みをチェックする レビュー中のファイルを全部閉じる 具体的な修正を提案する レビューコメントをラベル化 デプロイ管理 リリースノートを自動作成 行動の見える化 以下の設定をすることで、GitHub上の行動を見える化することができます。 docs.github.com
以下の記事が面白かったので、かるくまとめました。 ・New models and developer products announced at DevDay 1. GPT-4 Turbo「GPT-4 Turbo」は、「GPT-4」より高性能です。2023年4月までの知識と128kのコンテキストウィンドウを持ちます。さらに、「GPT-4」と比較して入力は1/3、出力は1/2の安い価格で提供します。 開発者はモデルID「gpt-4-1106-preview」で試すことができます。今後数週間以内に、安定した実稼働モデルをリリースする予定です。 1-1. Function Calling の更新「Function Calling」に、単一メッセージから複数のFunction (「車の窓を開けてエアコンをオフにする」など) を呼び出す機能などが追加されました。精度も向上しています。 1-2. 構造
ランキング参加中プログラミング はじめに この記事では、Immutable Data Modelと呼ばれる設計手法をもとに、リレーショナル・データベースにおける、テーブル設計の話を書いています。また、今回の実践で利用する、別の考え方の背景を理解するために、Out of the tar pitという小論文の内容にも言及します。 「状態とは何か？」というややこしい話がたくさん出てきますし、データベースのテーブル設計についての話であることから、たくさんのSQLが出てきます。なので、データモデリングとか状態管理とか、特にSQLとかに興味がない人には面白くないと思います。 そのあたりに興味ある方は、読んでみて欲しいです。 Immutable Data Modelを、実際のアプリケーションで使うデータベースに採用するにあたり、どういう考え方で、どのようにテーブルを構成したか、自分なりの経験を書いていま
一休レストランで Next.js App Router から Remix に乗り換えた話 - 一休.com Developers Blog
このエントリーは一休.com Advent Calendar 2023の15日目の記事になります。 CTO 室の恩田です。 現在は一休レストランのフロントエンドのリアーキテクトを手がけています。 今日はその中で Next.js App Router から Remix に乗り換えた話をご紹介したいと思います*1。 背景 6日目の記事で香西から紹介させていただきましたが、2023年10月に一休レストランのスマートフォン用レストラン詳細ページをリニューアルしました。 一休レストランの Rust バックエンドが正式リリースされました。https://t.co/7N4VGv5ej9 このページのスマートフォンビューはバックエンドが Rust で書かれた GraphQL になってます— naoya (@naoya_ito) 2023年10月4日 ちなみにフロントエンドも、旧バージョンは Nuxt v2
Next.js、Remix、SvelteKit といった近年のフレームワークは、JavaScript がなくても動作することを一つの価値として提供しています。 例えばSvelteKit のフォームではプログレッシブエンハンスメントとして、JavaScript が利用できる環境ではリッチなユーザー体験を提供しつつ、JavaScript が使えない環境においては HTML のフォームとして振る舞うことでアプリケーションの機能を変わらず提供できます。 React Server Component はサーバー側で HTML に変換されるため、クライアントに JavaScript のコードが配信されることはありません。React Server Component では useState() を使用できないといった制約がありますので、我々開発者は React Server Component の利点を
主旨 以前はシステムの状態をオブジェクト指向でカプセル化し、オブジェクト同士の通信でシステムの制御をしようとしていた しかし、Webアプリケーションのように状態をメモリ上に保持し続けるのが難しい環境が増えると、上記のことがやりにくくなった（ORMのインピーダンスミスマッチの影響が大きくなった） 現在では、システム全体の状態を管理するためにオブジェクト指向を用いるシーンは減っているが、要所要所でシステムを抽象化する道具の一つとして用いるシーンはあり、適材適所で使い続ければ良い はじめに 一時期あれだけもてはやされた「オブジェクト指向」ですが、現在では「業務システム開発においてオブジェクト指向で作るとろくなことがない」、とか、いっそ「不要である」、という意見もよく見かけます。 オブジェクト指向、この記事では特に「オブジェクト指向プログラミング」を対象として話をしますが、その利点は以下の３点に集
GraphQLはいつ使うか、RESTとの比較
さぼです、沖縄でWebと設計について考えてます。2023/09/23 に沖縄で行われたTechBaseOkinawa2023 にて上記のタイトルで登壇しました。 今回の内容は GraphQLを設計の観点から考えてみる GraphQLの目的や用途を整理する GraphQLを使う時、または使わない時のヒントを持ち帰ってもらう 最近、GraphQLじゃなくてRESTで良くないと思うケースがなんとなくわかってきたのでそれを共有する という感じで話しました。話した内容を文字に起こし少し改修してZennでも共有することとします。 まえおき 最近はクライアントAppとサーバーAppを分けて実装する事が増えてきた クライアントの環境はますます複雑になっている クライアントとサーバーはWebAPIで通信を行う クライアントが複雑になるのと同時にWebAPIの要求が更に増して来ている APIの要求・応答を効率
フロントエンドのディレクトリ設計思想
はじめに フロントエンドのディレクトリ構成、世の中に色んな「推し」が有って悩みますよね。 例えば、、、 さらに最近は、App Directoryの登場や、それに合わせたNext.js公式の「推し」構成がドキュメント化されたりと、さらに色々なパターンが出てきています。 本記事の趣旨 本記事では、具体的な構成そのものではなく、 様々ある構成を横串で見通して整理できる設計思想を紹介します。 新しい推し構成の紹介ではなく、構成を考えたり決めたりするときに役立つ抽象的・汎用的な指針を提供できればと考えています。 基本となる考え 分割の方向 一般的に、アーキテクチャにおける分割には2つの方向が有ります。 (出典も良書なのでリンクを貼っておきます： https://www.amazon.co.jp/dp/4873119820) これはディレクトリにおいても同じだと思っていて、筆者は分かりやすさのために
こんにちは、スマートバンクでアプリエンジニアをしている ロクネム です。 弊社では B/43という家計簿プリカアプリ を提供しており、つい先日サブスクリプションサービス「B/43プラス」をリリースしました。 このようなサブスクリプションを提供するサービスにおいては、そのサブスクリプションを利用しているユーザーのみが特定の “機能” を使用できるように “制御” する必要があるかと思います。 このサブスクリプションの機能制御を実装するにあたって、「サブスクリプションが有効ではない場合は機能を制限する」という設計では実は不十分で、その他にもさまざまな要件を考慮した上でより柔軟な設計を行う必要があります。 本記事では、このようなサブスクリプション機能制御の設計における勘所について、B/43プラスを例にご紹介します。 ※ 本記事は B/43 Tech Talk 〜 Fintech×サブスクリプショ
この記事は FastDOCTOR After Advent Calendar 27日の記事です。 はじめに ファストドクター株式会社でテックリードをしている shirauix と申します。 弊社では、ある Next.js アプリケーションを別会社のパートナーさんに外注することによって初期開発を行いました。ある時点からこのシステムを内製化することになったのですが、それにあたって多くの課題を解決する必要がありました。 この記事では、外注と内製のそれぞれのメリット・デメリットや、内製に切り替える際にどんな苦労があったのかについての赤裸々な事例をご紹介します。 対象となる読者 外注で初期開発したシステムを内製に切り替えてメンテナンスしようとしているエンジニアの方 新しくシステムを開発したいが、外注と内製のどちらを選択すべきか悩んでいる方 外注と内製の違い 外注するか内製するかはあくまで手段の話であ
チュートリアル: Yjs, valtio, React で実現する共同編集アプリケーション - ROUTE06 Tech Blog
Yjsは、リアルタイム共同編集を実現するためのアルゴリズムとデータ構造を提供するフレームワークです。Notion や Figma のように、1 つのコンテンツを複数人で同時に更新する体験を提供することができます。 Y.Map, Y.Array, Y.Text といった共有データ型を提供し、それらは JavaScript の Map や Array のように利用できます。さらにそのデータに対する変更は他のクライアントに自動的に配布・同期されます。 Yjs は Conflict-free Replicated Data Types (CRDT) と呼ばれるアルゴリズムの実装であり、複数人が同時にデータを操作してもコンフリクトが発生せず、最終的に全てのクライアントが同じ状態に到達するように設計されています。 クイックスタート Y.Map がクライアント間で自動的に同期されるコード例を見てみましょ
WebAssembly所感
WebAssemblyをちょっといじってみて思ったところをまとめてみます。 設計思想 WebAssembly/designに設計文書がまとまっています。特にHighLevelGoals.mdから読み取れるポイントは以下の4点です。 サンドボックス化された環境であること。 移植性があること。つまり、特定の実CPUアーキテクチャ等に依存しないこと。 少なくともC/C++の(十分に高速な)コンパイルターゲットとして機能すること。 安定した仕様を持つこと。 サンドボックスという観点からは、先行技術として以下のようなものが特筆に値します。 Webサンドボックス JavaScript および asm.js Javaアプレット Flash (ActionScript) NaCl, PNaCl Web以外のサンドボックス OSのユーザーランド、特にLinux userland これらのサンドボックスとの比
一休.comレストランのエンジニアのkymmtです。 2023年度の下半期、一休.comレストランの開発チームでは開発プロセス改善に取り組みました。改善は小さい単位で徐々に進め、バックログの作りかたやカンバンの運用方法を改善することで、フロー効率の向上、開発ペースの把握、チーム内外からの進捗の見える化ができるようになりました。 この記事では、このようなインクリメンタルな開発プロセス改善の取り組みについて紹介します。 従来の開発プロセス 主に2023年度前半の開発プロセスは次のような形でした1。 プロダクトのリリースに必要なタスクが長いバックログとして存在し、ひたすらタスクを消化 その状況に課題を感じ、区切りを入れるために2週間のスプリントを導入 この時点では、スプリントは2週間ごとに状況を確認するためのもので、目標に対するふりかえりや、次のスプリントの計画を作るためのものとしては活用してい
フロントエンドで処理をカスタムフックス化する際、windowの高さを取得するなど、どのプロジェクトでもある程度決まったコードがありますよね。 useHooksはそういったカスタムフックスのライブラリとなっています。カスタムフックは自前で作ってしまうことが多いものの部分的に任せられるかなと思い、useHooksに登録されている便利そうなカスタムフックスをピックアップしてみました。 useHooksを使うにあたって カスタムフックスは自前で用意する方がカスタマイズ性高く安心して使える 調べれば同じ機能を持つカスタムフックのコードが出てくるので必ずしもuseHooksを使う必要はない プロトタイプ開発とかで速度が求められるなら導入するのはありかも 最初からこういうのに慣れすぎると開発理解があやふやになるのではといった議論はありそう こういうカスタムフック置くと便利だなという確認にも良さそう 結論
このエントリーは 一休.comのカレンダー | Advent Calendar 2023 - Qiita の22日目の記事です。 レストランプロダクトUI開発チームの鍛治です。 一休レストランのフロントエンドを担当しています。 一休レストランでは Next.js App Router Remix を採用しています。 user-first.ikyu.co.jp 昨年の終わり頃から始まった一休レストランのリニューアルですが、フロントエンドは Nuxt v2 (Vue 2) から Next.js App Router (React) に、という大きな切り替えで、不慣れだった我々は React 初心者がひっかかる落とし穴を全部踏み抜いてきました。 例えば、チュートリアルに従って useState で変化する状態を定義して、最初はそれで全てがうまくいっていました。機能追加していく過程でいつの間にか一
はじめに こんにちは、フロント歴7年目のエンジニアになります🙂 今回は日頃仕事でお世話になっているVue.jsに感謝の意を込めて、 Vueの素晴らしさを皆さんに少しでも感じて貰えたらと思い、この記事を投稿することにしました。 アゲアゲするとか言って 「どうせSFCが便利とか言いたいんでしょ？」 「script setupが凄く凄いとか言いたいんでしょ？」 ・・・いえいえ、そんな当たり前のことを話したいわけではありません。 もっと深いところの説明だったりをですね、 「いやでも最近のVue3はReactに似ているから、それならReactで良くね？」 全く良くないです はい、そういった人達にこそ見て欲しい内容となっております。 つまり私がVueが優れていると信じ使い続ける理由です。 この記事では、Vue.jsの書き方みたいなことは扱いません。 またVueの魅力をお伝えする都合、他のフレームワー
はじめに 目まぐるしく進化するフロントエンド開発の世界では、常に最新の知識や技術をいち早く取り入れることが、エンタープライズアプリケーションの開発を成功させる上で欠かせません。Tailwind CSS、TypeScript、Turborepo、ESLint、React Queryなどを含む強力なツールキットとNext.jsを4年間使用してきた結果、開発に役立つさまざまな知見やベストプラクティスが得られました。この記事では、大企業向けフロントエンドアプリケーションのパフォーマンス、保守性、拡張性を最大限に高める設計・構築手法を紹介したいと思います。 注記：ここに記載する内容はあくまでも個人的な見解であり、筆者が推奨する手法が必ずしも適さない場合もあります。 効果的なエンタープライズ向けフロントエンドアーキテクチャの基本原則 エンタープライズ規模のアプリケーション向けにフロントエンドソリューシ
2023年に使った技術・作ったもの・書いたものまとめ
2023 年に使った技術まとめ 2023 年もそろそろ終わりなので、今年のエンジニア生活のまとめです。 正直今年はほとんど仕事しかやっていないです。どうしてもお仕事だと攻めた技術選定ができなくて（記事書くには）あんまり面白くないなあ…の気持ちではあるんだけど、その分実務でこんな技術使ってますよ、ってお話としてみていただければ幸いです。 React 18 / TypeScript 去年（2022）までは Vue と React 半々くらいで生きてたんだけど、今年はどっぷり React でした。 Vue の選択肢もないわけではなかったんだけど、ある程度の規模のプロジェクトで、かつアプリケーションとしての複雑度が高いものを作る時に Vue はやっぱりちょっと怖いんですよね。。正直コントロールできる自信がちょっとない。 多分当面は、ロジックの複雑度や抽象度が高いものは React、ロジックは素直で
【Vue.js】今、ゼロから Vue を学び始めるならこうやるといいんじゃないか (2024) 【初学者向け】
【Vue.js】今、ゼロから Vue を学び始めるならこうやるといいんじゃないか (2024) 【初学者向け】 🤔 Vue.js って何から勉強すれば良いですか？ この疑問は Vue.js に限らず、多くの初学者の中でホットなトピックです。 すごく端的にこの問いに答えてみると、「好きにすればいい、正解はない！自分で考えなさい！」です。 これは確かにとても正しい意見[1]だと思いますが、そうは言っても初学者にとっては何から手をつけたらいいのかわからない状況が多いです。 と言うことで、上記のような前提は持ちつつ「まぁ、とりあえずこんな感じで良いんじゃないですかね(安牌)」と言う私(筆者)なりのアイデアを書いてみたいと思います。 ご参考までに 😙 それではスタート 💨 Vue.js の公式ドキュメント 「おいおい、急にハードルが高すぎるだろ...」 そう思った方も少なくないかもしれません。
ドラえも⚫︎で理解するCSRF はじめに ※コメントにて徳丸浩先生(@ockeghem)に間違いをいくつかご指摘頂き修正中です。 また、@rudorufu1981様よりブラウザの同一オリジンポリシーについての補足を頂いております。 ぜひ記事の下部、コメント欄までご覧頂きますようお願いいたします。 ご指摘や補足、本当に有難うございます。 【追記2023.12.2】 同一オリジンポリシーの補足についても徳丸先生のご見解コメントを頂いております。ぜひそちらもご確認下さい。 【追記2023.12.5】 ご指摘を受けて同一オリジンポリシーはCSRFと直接の関連はない事から、取り消し線にて削除致しました。 対象読者 ・HTTPの特性 ・セッション管理 ・ブラウザの同一オリジンポリシー ・CSRF(Cross-Site Request Forgeries) ⚫︎上記の言葉を聞いてイメージができない人 ⚫
Platform Engineering on Kubernetes を読んでCloud Native の現在地を理解する - じゃあ、おうちで学べる
はじめに 近年、Kubernetesの採用が進む中、複数のチームが関わり、複数のクラウドプロバイダーへのデプロイを行い、異なるスタックを扱う組織では、その導入の複雑さが新たな問題となっています。本書 『Platform Engineering on Kubernetes』は、Kubernetes に登場しつつあるベストプラクティスとオープンソースツールを活用し、これらのクラウドネイティブの問題を技術的に組織的にどのように解決するかを示してくれます。 learning.oreilly.com 本書では、Kubernetes上に優れたプラットフォームを構築するための要素を明確に定義し、組織の要件に合わせて必要なツールを体系的に紹介しており、実際の例とコードを交えながら各ステップをわかりやすく説明することで、最終的にはクラウドネイティブなソフトウェアを効率的に提供するための完全なプラットフォーム
【Flutter】わずか数分でアプリ開発！？超速アプリ開発総合フレームワーク「Masamune」 - Qiita
こんにちは。広瀬マサルです。 これまでのパッケージをまとめて統合Flutterフレームワークを作成しました。 コンセプトは 自動生成を用いて安全かつ高速に高品質のアプリを開発可能にするフレームワーク です。 使い方をまとめたので興味ある方はぜひ使ってみてください！ masamune はじめに まずはこちらを御覧ください。 ※動画のサンプルコードはこちらに公開しています。 こちらはメモ帳アプリを全くの空の状態からわずか10分以内で完成させる動画です。 このMasamuneフレームワークを利用することでアプリ開発で行うコーディングの大半を削減することが可能になります。 このフレームワークは下記の機能を中心としています。 CLI（コマンドラインインターフェース）ツールによるコードテンプレートの生成 build_runner による追加コードの自動生成 つまりコードの大半を機械的に生成させることに
Reactコンポーネントの基本原則と人気のUI/UXデザインライブラリの解説 - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
Reactは単なるUIライブラリではなく、コンポーネントベースのアプリケーション開発フレームワークです。UI/UXデザインの基本原則に加え、再利用性や状態管理、データフローなどの概念も重要です。 Reactのコンポーネントベースのアーキテクチャを活用すると、UIと裏側のロジックを分離して管理しやすくなり、効率的なアプリケーションの開発が可能です。 今日は、Reactにおけるコンポーネントの基本原則の解説と、初心者に役立つReactコンポーネントライブラリの紹介を提供します。 コンポーネントの設計原則 UI（ユーザーインターフェース） UX（ユーザーエクスペリエンス） UIのデザインに役立つReact コンポーネントライブラリ React Material UI React-Bootstrap Fluent UI Chakra UI Semantic UI React Ant Design
ここ2年ほど、すっかりフロントエンド開発者になっている藤田です。以前、Reactフロントエンドの状態管理ライブラリRecoilについて記事を書きました。 Recoilで快適フロントエンド開発 Recoil Syncでさらに快適フロントエンド開発 その後どうなったかというと、実はRecoilからJotaiに乗り換えていて、半年ほど経ちましたので、Jotaiについて書きたいと思います。 サイトの一行目から「Recoilにインスパイアされた」と言ってるとおり、Recoilの良いところを受け継ぎ、不便なところを無くしたような状態管理ライブラリです。 Jotaiの基本 基本はRecoilとほとんど同じで、React.useStateを便利にしたような感覚で非常に簡単に使えます。3ステップで見てみましょう。 1. Providerで囲む アプリケーション全体を<Provider>で囲みます。 impo
Making of “Kindolphin” | 麦 Baku
group_inou / HAPPENING group_inouとAC部のミュージックビデオ作品『HAPPENING』をWebアプリ化しました。デザインと実装は僕一人です。元のビデオがGIFアニメ縦長漫画が歌詞に合わせて自動スクロールする仕様だったので、GIFの質感をロスレスかつ自分のペースで楽しめるように、某電子書籍アプリのような体裁でインタラクションできるようにした次第です。 We have just released a Webtoon app that highlights the lyrics of group_inou's music video "HAPPENING". You can switch between Japanese/English, change colors, stop and have a close look, or just scratch and
個人開発の SwiftUI アプリのアーキテクチャを MVVM から MV にした - maiyama4's blog
概要 SwiftUI Advent Calendar 2023 の 21 日目です。 最近趣味で iOS の podcast クライアントを SwiftUI で作っているのですが、やってみると podcast クライアントはアプリとしてそれなりに難しいことがわかってきました。作っているうちにどんどん状態管理が複雑になってきて、個人開発でなぜこんなにがんばりが必要なんだと思って開発が止まっていたのですが、最近 iOS 17 の登場をきっかけにアプリを全般的に書き直すことにして、同時にアーキテクチャを変えてみました。これにより構成がシンプルになって開発効率が上がり、開発を再開することができました。具体的には、 from: １画面に１つ ViewModel（ObservableObject）を作り、 View から ViewModel を監視する MVVM to: View から直接 Model
2024年3月15日の一粒万倍日に、mosya ReactというReactを学習できるサービスをリリースしました。 こちら1年間の開発期間を経て、ようやくリリースできました！ mosyaの開発期間と合わせると約2年間の開発期間を経てのリリースとなります。 いやー、長かった！ 良かったら下のリンクから試してみてください！ どんなサービスか mosya ReactはReactをオンライン上で学習できるサービスです。 エディターに書いたコードがリアルタイムにプレビューできるようになっていて環境構築なしでReactを学習できます！ 採点機能が搭載されているのでReactを自学習したい方におすすめです！ このサービスの開発で特に頑張ったのが以下の特徴です！ 最新の技術にキャッチアップしている ライブラリの型がエディター上で確認できる Biomeを動かしていてリントエラーがエディター上で確認できる 最
理想のUIをめざして！Webでハーフモーダルを作って磨き上げた話 - Tabelog Tech Blog
こんにちは！飲食店システム開発部オーダーチームの開発エンジニアを担当している堀口です。 食べログオーダーは、レストランでの飲食体験をより快適にするためのモバイルオーダーシステムです。飲食店に来店したお客様が自身のスマートフォンを使用してQRコードを読み取り、Web上でメニューをカートに追加し注文することができます。メニュー選択や注文操作はWebでありながら、ハーフモーダルを使用したネイティブアプリのような注文体験ができます。 この記事では、モバイルオーダーシステムのUI改善に焦点を当てます。ハーフモーダルの採用がどのようにして決定されたのか、その開発プロセス、そして実際に達成された改善点について詳しく掘り下げていきます。Reactを使用したフロントエンド開発で遭遇した課題と、それらをどのように解決したかの具体例を紹介します。 目次 なぜ「ハーフモーダル」を採用したか ハーフモーダルの導入と
「エンジニアDB」というサービスを開発しました！【Next.js / Rails / AWS / Terraform / Docker / GitHub Actions】 - Qiita
3.インフラ（全体構成）について ここから技術的なことについて話していきます。 まず大前提として、プロジェクトの全体構成は、Happiness Chain の卒業課題の条件に基づいて決めれらていました。これらの条件には以下が含まれます Rails APIモード / Reactで完全SPAのポートフォリオを作る。 本番環境と開発環境にDockerを使う。 本番環境にはECS Fargateを使う。 GitHub Actionsを使ってAWSに自動デプロイする。 Terraformでインフラをコード化する。 なので、これに倣って実装しています。 アーキテクチャの全体像 フロントエンドはVercelにデプロイして、バックエンドはAWSのECSにデプロイしています。 ブランチ運用は、GitHub flowを採用しています。 プルリク時にテストが走り、mainブランチにマージされるとデプロイされる感
はじめに 2022 年 1 月から、趣味で PC 向けの将棋アプリを開発しました。その中で取り組んだことや学んだことについて簡単にまとめます。 作ったもの Electron将棋 (electron-shogi) GitHub: sunfish-shogi/electron-shogi GitHub Pages: Electron将棋 背景 最近ではスマホやタブレットでも将棋の対局や研究ができるようになりましたが、本格的に将棋の勉強や研究をするには必ずしも十分ではなく、特に将棋 AI を動す上で PC の処理能力やカスタマイズ性は有用です。 2010 年あたりからオープンソースの将棋 AI が増えましたが、その多くは GUI や通信対局機能を備えておらず GUI のアプリケーションと組み合わせて使う必要があります。AI と GUI がやりとりするための USI という共通仕様があり、 USI
サービス概要 タイトル通り、現状はSoundCloudみたいに自分の作った曲を投稿できるサービスです。 現在実装されている機能は以下の通りです。 楽曲投稿 アルバム ランキング メッセージ（DM） フォローとフィード（タイムライン） いいねとブックマーク タグ・キーワードによる検索 このようにとりあえずSoundCloudのような楽曲投稿サービスとしての機能は最低限備えていますが、ゆくゆくはミュージシャンの活動拠点になることを目指しています。というのは、例えばYouTubeへの投稿や各種サブスク配信へのリンク、またライブなどイベントへの参加日程など、活動の実績/予定などがすべて1ページでわかるようにしたいと思っています。 また、ミュージシャン同士の交流/発見の場にしていきたいです。バンドメンバーや演奏を依頼する相手を見つけるのに適した場所はあまりありません（いわゆるメン募サイトは機能不全だ
GraphQL実践ノウハウv2
GraphQL実践ノウハウ https://speakerdeck.com/sonatard/graphql-knowhow 宣言的UIの状態管理とアーキテクチャSwiftUIとGraphQLによる実践 https://speakerdeck.com/sonatard/swiftui-graphql GraphQLの誤解 https://speakerdeck.com/sonatard/rethinking-graphql
こんにちは、Web チームの井手です。今日は私たち Web チームが作っている SSR フレームワーク(以下 FW)にについて紹介します。 記事を書くモチベーション 私たちのメインプロダクトである日経電子版においては k2 という自作 SSR 基盤を 2020 年から運用しています。SSR FW といえば多くの方が Next.js を想起すると思いますが、私たちは自作しています。一方で最近は Next.js の進化が凄まじく、自作 SSR 勢としても意識せざるを得なくなっています。もしかしたら「あぁ Next.js で作っておけばよかった」と思う時が来るかもしれません。特に k2 を保守する際には Next.js では実現できない機能を実現するために様々な手法や工夫を編み出していましたが、Next.js の進化に伴ってその必要性はだんだん減ってきているのを実感しています。そのためいつか N
SPAにするとNext.jsの嬉しさが半減しますが、/pages/以下のディレクトリ構造がそのままエンドポイントのパスに対応する、ディレクトリベースのルーティングをとても気に入っていたので、ほぼルーティングだけのためにNext.jsを使い続けていました。 今年（2023年）の春頃、高機能なNext.jsをルーティングのためだけに使いつづけるのはやはり違う気がする、と調べていて「ViteとReact Routerを使えば簡単にディレクトリベースのルーティングできるよ」という記事を見つけたのが、実はViteを知った最初でした。流行に鈍感…これが老化か…。 Simplifying Routing in React with Vite and File-based Routing Viteにはimport.meta.glob()という機能があり、トランスパイル時にディレクトリ以下のファイルを列挙し
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
サブスクリプション課金システム開発ケーススタディ - inSmartBank
【2023年】モダンフロント学習教材まとめ - Qiita
熟練が必要なUIについて、それがよくない理由と、UIの慣性について
GitHubコマテク集 - OpenWork Tech Blog
OpenAI DevDay で発表された新モデルと新開発ツール まとめ｜npaka
実践Immutable Data Model - 紙箱
JavaScript なしで動作するモダンなコードの書き方
オブジェクト指向は業務システムで本当に不要なのか？ - Qiita
サブスクリプション機能制御の設計における勘所 - inSmartBank
外注で初期開発したシステムを内製化するためにやったこと
開発プロセスをインクリメンタルに改善する - 一休.com Developers Blog
【React / useHooks】開発不要で使える便利なカスタムフックス20選
一休レストランの XState 導入記 - 一休.com Developers Blog
Vue3をアゲアゲ↑↑する記事 - Qiita
Next.jsを4年間使用してたどりついた、エンタープライズアプリケーションのフロントエンド開発・構築手法 | POSTD
ドラえも⚫︎で理解するCSRF - Qiita
Jotaiで快適フロントエンド開発 | 株式会社ヌーラボ(Nulab inc.)
Reactを学習できるサービスmosya Reactの技術的な紹介
Electronを使ったPC向け将棋アプリ開発 - Qiita
SoundCloudみたいなサービスを個人で開発した
日経電子版での自作 SSR フレームワーク基盤について — HACK The Nikkei
Vite+Vitest+Ladleで快適フロントエンド開発 | 株式会社ヌーラボ(Nulab inc.)