【2024年最新版】0からReactを勉強するならこのロードマップに従え！ - Qiita
はじめに こんにちは@Sicut_study (Watanabe Jin)です。 去年の10月頃にReactのロードマップを投稿しておかげさまで1000いいねもすぐそこになりました そこから私自身も状況がかなり変わり、大好きなReactを使ってプログラミングを教えるスクールを運営しております。 エンジニアになりたい完全未経験の方や、すでにエンジニアだけどもっと自由にプログラミングができるようになりたい人をたくさん教えてきました。 👇メンバーの記事はこちらにあります その中である程度この流れで学習をすすめていけば1-2ヶ月程度でReactで自由にサービスを作れるレベルに再現性をもってレベルアップすることができると確信がもてたので、 実際にやっているカリキュラム(React部分)をすべて紹介します ロードマップは完全未経験でもできるようなものになっていますのでわかる箇所は飛ばしてもOKです。
Webサービス公開前のチェックリスト
個人的に「Webサービスの公開前チェックリスト」を作っていたのですが、けっこう育ってきたので公開します。このリストは、過去に自分がミスしたときや、情報収集する中で「明日は我が身…」と思ったときなどに個人的にメモしてきたものをまとめた内容になります。 セキュリティ 認証に関わるCookieの属性 HttpOnly属性が設定されていること XSSの緩和策 SameSite属性がLaxもしくはStrictになっていること 主にCSRF対策のため。Laxの場合、GETリクエストで更新処理を行っているエンドポイントがないか合わせて確認 Secure属性が設定されていること HTTPS通信でのみCookieが送られるように Domain属性が適切に設定されていること サブドメインにもCookieが送られる設定の場合、他のサブドメインのサイトに脆弱性があるとそこからインシデントに繋がるリスクを理解してお
商用利用もOK。AI音声合成や膨大な音素材ライブラリも使える定番波形編集ソフト、SOUND FORGE Pro 18誕生｜DTMステーション
ドイツMAGIXから定番の波形編集ソフトの新バージョン、SOUND FORGE Pro 18およびSOUND FORGE Pro 18 Suiteがリリースされました。今回のバージョンアップの目玉はAIを利用した音声合成機能を搭載し、日本語でテキストを入力すると、非常にリアルで自然な声で、そして高音質なサウンドで喋り声が生成されることです。VOICEPEAKやVOICEVOX、A.I.Voice、CoeFont……などなど、ここ数年で急速に進化し、数々のソフトが出てきたTTS＝Text to Speech（音声読み上げソフト）の世界にSOUND FORGEが殴り込みをかけてきた格好です。しかも単なるTTSに留まらず、翻訳機能も搭載。これによって最大100言語へ翻訳して喋らせることも可能になっているため、グローバルなコンテンツ制作も可能になっています。 さらにStoryblocksという音素
わずか40秒の運動で身体に起こる劇的変化 – 早稲田大学 研究活動
― 強度の工夫で短時間でも大きな運動効果 ― 発表のポイント わずか40秒の高強度間欠的運動で、全身および筋肉の酸素消費量ならびに大腿部（太もも）の主要な筋肉の活動が大きく増加することを発見した。 高強度運動の反復回数と、酸素消費量の増加は必ずしも比例しないことが判明した。 本研究をきっかけに、トレーニング効果をもたらす『最少量』の解明が進み、日本のみならず、世界の運動実施率の向上に繋がることが期待される。 概要 早稲田大学スポーツ科学学術院の川上 泰雄（かわかみ やすお）教授、国立スポーツ科学センターの山岸 卓樹（やまぎし たかき）研究員らの研究グループは、トレーニング効果を生み出す『最少量』のメカニズムについて、強度の工夫によって、短時間であっても大きな運動効果をもたらし得ることを発見しました。健康増進や疾病予防のための運動の重要性は、これまでもメディアなどでたびたび取り上げられていま
What is a collision?
2D Rigid Body Collision Resolution Part 1: Defining the problemFrom Mario bouncing off a Goomba to two cars bumping into each other in a racing game, dealing with collisions is such an integral part of most video games that we often take it for granted. In this series of blog posts, I want to show you what actually goes on behind the scenes in a physics simulation like the one above. While we're g
Firebase App HostingにNext.jsがデプロイされる仕組み
「Firebase CLIのNext.jsデプロイ対応について調べる」ではCloud FunctionsにカスタムビルドしたNext.jsアプリがデプロイされていたが、Cloud Functions (2nd gen)でCloud RunベースになったのでNext.jsのデプロイもApp HostingでCloud Run版になった 基本的なデプロイまでの手順以下のドキュメントにある。本記事ではこれを参考に内部動作を調べる firebase-tools firebase-cliの最新版に以下のコマンドが追加されている ❯ firebase --help | grep apphosting: apphosting:backends:list [options] list Firebase App Hosting backends apphosting:backends:create [opt
わかりにくい線形代数を操作可能な図で表現することで簡単に理解できる無料の教科書「Immersive Math」
「Immersive Math」は、数学のうちベクトルや行列などの計算を研究する分野である「線形代数」についてインタラクティブな図を用意することでわかりやすさを向上させた無料の教科書サイトです。 Immersive Math https://immersivemath.com/ila/index.html サイトのトップページはこんな感じ。「完全にインタラクティブな図を備えた世界で最初の線形代数本」と述べられています。 中央に表示されている三角形の図はインタラクティブで、左上をクリックすることで回転・停止を切り替えられるほか、各頂点をクリックしてドラッグ＆ドロップすることで位置を調整可能。自由に図を編集できるため理解しやすいというわけです。 ページをスクロールすると目次が現れました。まずは「Preface(序文)」をクリック。 「『百聞は一見に如かず』という言葉の通り、たくさんの言葉を重ね
Python Dashによりデータ分析結果の共有を効率化する取り組み - ZOZO TECH BLOG
はじめに こんにちは、検索基盤部の伊澤です。検索基盤部では普段から、ZOZOTOWNの検索機能に関するデータ分析や、データ分析を踏まえた検索性能の改善に取り組んでいます。 検索に関するデータ分析では、検索クエリの傾向把握や課題のあるクエリの特定のために、検索クエリごとの検索結果のクリック率やコンバージョン率といったパフォーマンス指標を評価しています。 本記事では、検索クエリごとのデータ分析に関する情報共有を効率化するため、ウェブフレームワークの「Dash」で開発したダッシュボードを活用した事例を紹介します。 目次 はじめに 目次 検索クエリごとのデータ分析の重要性 分析結果のチーム内共有時の課題 Dashを用いたダッシュボードの開発 Dashとは Dashを選定した理由 検索クエリごとのパフォーマンス指標のダッシュボード 1. 検索クエリごとのパフォーマンス指標のテーブル 2. 検索クエリ
Node.js の進化に伴い不要となったかもしれないパッケージたち
tl;dr はじめに 2024 年の 4 月 24 日に Node.js 22 がリリースされました。ESM を 条件付きで require する機能や、--run フラグによる npm スクリプトのパフォーマンス改善などが v22 で追加され、2009 年に Ryan Dahl が Node.js をリリースしてから 15 年が経つ今も、Node.js は進化を続けています[1]。 こうして Node.js 自身が強化されていくにつれ、以前はサードパーティーのパッケージを使用して実現することが一般的であった機能が Node.js のみで実現可能となり、当該パッケージが不要となるような場合があります。冒頭に引用した Ben Holmes の動画では、そのように不要となったパッケージとして dotenv node-fetch chalk mocha が挙げられていますが、この記事では「これら
PythonだけでWebアプリが作れるライブラリが増えている（2024.05） - Qiita
※本記事で言及しているReflexのdiscord内に日本語チャンネルをつくってもらいました。もし、興味をもった人がいたら参加してみてください。 １．PythonだけでWebアプリをつくるライブラリが増えている 最近（2024.05）、Python界隈ではPythonだけでWebアプリが作れるライブラリが増えています。詳しくは他の記事を参照してもらえればと思います。 以下の記事がとても参考になりました。ありがとうございます。 ２．ライブラリの分類 こうしたライブラリも大きくわけて２つの種類があるように思います。 ①データ解析の結果を表示するダッシュボードライブラリ ②汎用的なWebアプリをつくるローコードライブラリ ①ダッシュボード系ライブラリ たとえば、上記の記事にも出てきますし、ネットでもかなり情報の多い、StreamlitやDashは項番1のダッシュボードライブラリに該当すると思いま
個人開発者がGoogle Cloudの環境構築でお財布を守るために最初にすべきこと - Qiita
初めに 自分は2年くらい業務でGCP(今はGoogle Cloudですね)を使っていたのですが、友達が個人開発でGoogle Cloud使いたいから手伝ってとのことで、久々にコンソール触りたいなーと思ったので環境構築を手伝うことにしました。友達のクレジットカードが紐づいた環境なので自分の環境以上に課金やセキュリティに対して注意しなくてはなりません。課金だけでなく友情も爆発してしまいかねませんので 今回は最初期から構築するということで個人開発者向けにお財布や環境を守るうえでの最初にやったほうがよい課金のセーフティ的な設定をまとめていきたいと思います。企業で検証環境管理している人にも参考になるかと思いますので是非最後まで見てもらえると嬉しいです！ 前提 Google Cloudのプロジェクトを作成していること 課金アカウントを作成していること(クレジットカードの紐づけできていること) その1
Stable DiffusionのLoRAのつくりかた｜RedRayz
はじめにこの記事は、初めてStable DiffusionのLoRAを作成する方に向けた解説です。わかりづらかったらすみません。 この解説ではSDXLベースのAnimagine-XL-3.1で二次元イラストのキャラクターのLoRAを作成します。 注意すでにWebUIの環境構築と生成ができていて生成に慣れている前提のガイドとなります。 Windows向けのガイドです。 また、NVIDIAのGeForce RTXグラフィックボード(VRAM 8GB以上)が搭載された高性能なパソコンが必要です。 そもそもLoRAってなんぞや？Low-Rank Adaptationが正式名称です。 難しくいうと、ウェイトとデータセットの差分を出力するものです。低ランクの行列に分解してからファインチューンすることで少ないメモリで学習できるようにしたものです。 簡単に言えば、LoRAはキャラ、衣装、シチュエーションや
Remix vs Next.js - React Japan
私たちに最も寄せられる質問は次のようなものです： RemixはNext.jsと一体どう違うの? この記事では私たちはこの質問を答えるべきのようです！私たちはこの議題をストレートに、そして何の感情的な議論なしに言及していきたいと思います。もしあなたがRemixのファンになってくれていて、この記事を見て、今すぐにでもNextよりもRemixの方がすごいぜ 😎、と自慢するようなツイートをしたい気持ちが出てきたとしても、もしできれば、自慢するというような形ではツイートをなるべくしないようにお願いしたいです。私たちは Vercel で働いている方々と Vercel が立ち上がる前から友達です。そして、彼らのやっていることはとても素晴らしく、私たちは彼らを尊敬しています。 ただ、勘違いをしてほしくないのは、私たちはRemixはNext.jsよりも優れている特徴があると思っています。（そうでなければ、
scikit-learn入門＆使い方 ― 機械学習の流れを学ぼう
連載目次 前回は、機械学習の基礎と、主要なPythonライブラリの概要を説明しました。 今回は、Pythonを使った機械学習プログラミングの基本的な流れを、実際にコードを書きながら体験的に学んでいきましょう。具体的には、データの読み込みと加工から、グラフによる可視化、統計的な数値計算、そして簡単な機械学習モデルの構築まで、基本的な一連の流れを体験できます（図1）。 今回で学べること 図1の通り、機械学習プログラミングの基本的な流れに沿って進めると、第1回で紹介した主要なPythonライブラリ（pandas、NumPy、Matplotlib、seaborn、scikit-learnなど）を各場面で使い分けることになります。 各ライブラリを深く理解して使いこなすためには、個別に詳しく学ぶことが必要です。ただし本連載では、詳細には触れず、実践で役立つ基本的な使用例に絞って説明します。もっと深く掘
RPC対応によりCloudflare Workers間の連携がすごいことになった
日本時間の2024/04/05にCloudflareからRPCを使用したCloudflare Workers間の通信が発表されました。 これによりいくつかの課題が解決されると同時にCloudflare上にアプリケーションを構築する利便性が1段階どころか2段階以上上がったといっても過言ではないと思っています。 このRPCの対応によりService Bindingsが更に使い勝手がよくなったのでそれの紹介です。 出来上がりのコードはここにありますので、時間の無い方はこちらを参照ください。 前提条件 以前RemixとPrismaでD1に接続する記事を書きました。 その中で容量制限の問題があると書きましたが、それを解消する話をベースに今回のRPC対応の内容を書きます。ですので記事を読んでない方はCloudflare Workersの無料版はビルドファイルが1MBまでの制限があるということを念頭にお
PythonのマルチスレッドWSGIサーバーの選定 - methaneのブログ
今までuWSGIをシングルスレッド、マルチプロセスで使っていたのだけれども、昔に比べて外部のAPI呼び出しが増えているのでマルチスレッド化を検討している。 uWSGI uWSGIでマルチスレッドを有効にした時は、各workerスレッドがacceptする形で動作する。スレッド数以上の接続をacceptすることがないので安心。 プロセス内のスレッド間ではmutexで排他されて、同時にacceptを実行するのは1スレッドのみに制限されている。つまりthendering herd問題はプロセス間でしか起こらない。マルチスレッド化でプロセス数はむしろCPUコア数まで減らせるので、thendering herd問題はむしろ今よりも軽減できる。（ちなみにプロセス間でもロックしてthendering herdを許さないオプションもあるけど、プロセス間同期は怖いので使っていなかった。） ただしuWSGIのマ
インデックスを理解したい - Qiita
はじめに みなさんはDBのインデックスを正しく使えていますか？ 私はなんとなく「DBのパフォーマンスを向上するためのもの」という認識はあったのですが、 どのような場面で使うものなのか、逆にどのような場面では使うべきでないのかなど 明確に理解できていませんでした。 今回はそんなインデックスについての理解を深めたいと思います。 インデックスとは インデックスとは、その名の通り「索引」です。 表現の仕方と変えると、(x, a)という形式の配列であるとも言えます。 xというキー値とそれに結びつくaというデータ情報があり、 これを利用することですべてのデータを網羅して見ることなく、 まさに本の索引のように目的のデータにたどり着くことができます。 インデックスはSQLのパフォーマンスを改善するための非常にポピュラーな手段であり、 理由としては下記の3点が挙げられます。 アプリケーションのコードに影響を
WebSockets vs Server-Sent-Events vs Long-Polling vs WebRTC vs WebTransport | RxDB - JavaScript Database
For modern real-time web applications, the ability to send events from the server to the client is indispensable. This necessity has led to the development of several methods over the years, each with its own set of advantages and drawbacks. Initially, long-polling was the only option available. It was then succeeded by WebSockets, which offered a more robust solution for bidirectional communicati
ブラウザの仕組み | Articles | web.dev
序文 WebKit と Gecko の内部オペレーションに関するこの包括的な入門情報は、イスラエルのデベロッパー Tali Garsiel 氏による多くの研究の成果です。数年にわたり、ブラウザ内部に関するすべての公開データを確認し、ウェブブラウザのソースコードを読むことに多くの時間を費やしました。彼女は次のように書いています。 ウェブ デベロッパーは、ブラウザ操作の内部構造を学ぶことで、より的確な意思決定を行い、開発のベスト プラクティスの背後にある理由を知ることができます。これはかなり長いドキュメントですが、時間をかけてじっくり読むことをおすすめします。やったら嬉しいよ。 Chrome デベロッパー リレーションズ、Paul Irish はじめに ウェブブラウザは、最も広く使用されているソフトウェアです。この入門編では その仕組みを解説しますアドレスバーに「google.com」と入力し
React Server Componentの実行順序とフレームワークでの注意点
前回はこちらで議論できて大変有意義でした、ありがとうございました。 その際、Next.jsでのlayout.tsxとpage.tsxの実行順序についてpage -> layoutの順で実行されることを初めて知ったのですが、疑問に思ったのは「これはReact Server Component（RSC）の仕様なのかNext.js（フレームワーク）の仕様なのか？」ということでした。 素のReactの挙動を理由に自分が思い描いていたのは「コンポーネントはネスト順に実行される」だったのでこれは衝撃的でフレームワークについて何も知らなかったな、と思わせる内容でした。 ここでは、Reactコンポーネントの実行順序を再確認し、RSC、フレームワークについても確認していきます。 Reactコンポーネントの実行順序 ここでの対象はクライアントコンポーネントです。 このようなネストしたツリーを用意しました。Aと
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
