概要 4年ほどProductionで使っていたリッチテキストエディタ（Quill on Nuxt.js v2）をTiptap on Next.jsに移行しました。 既存のQuillエディタの使い勝手をTiptapで再現しつつ、改善できるところは改善しつつ、既存の4年分のリッチテキストデータが正しく編集できるようにしなければいけませんでした。 本記事では移行の具体的なプロセスを解説しようと思っていたのですが、リッチテキストエディタは前提知識があまりに多いため、前提となる知識や考え方を解説しているだけでそこそこのボリュームになりました。そこで、一旦考え方や前提知識をまとめた、という体で公開します。 本記事を読んでから各ライブラリのDocsを読んだりカスタマイズを始めたら、少しハードルが下がっていることかと思います。 対象読者の例 リッチテキストエディタに興味がある リッチテキストエディタの開発
技術選定の成功 2年間を振り返る TypeScript,Hono,Nest.js,React,GraphQL
技術選定の成功 2年間を振り返る TypeScript,Hono,Nest.js,React,GraphQL 技術選定に失敗はない 技術選定に失敗はありません。 仮説を立て、検証し、結果の分析からNext Actionを考える。検証の結果がどうであれ、それは過程に過ぎません。 机上の空論だけで全てを理解できるほど、我々人間は賢くないのです。（注意: これは人類全体を誹謗中傷する意味ではありません。） この記事では、この２年間で行った技術選定の成功例をその理由と共に紹介していこうと思います。 申し訳遅れましたが、私、YadaYadaKonnanYadaといいます。私は今回初めて記事を書いたので、どうぞお手柔らかに。 Twitterエンジニア垢作りました。エンジニアのお友達がいません。 @uncode_jp 前提 技術選定に結論はありません。組織毎に前提が違うのだから当然のことです。みんな違っ
JavaScriptフレームワークを取り巻く状況は、常に変化を続けています。近年では、サーバーサイドレンダリング（SSR）とクライアントサイドレンダリング（CSR）のバランスは、重要な検討事項です。 ChatGPTのRemix採用 2024年9月、ChatGPTがNext.jsからRemixに移行したことが明らかになりました。この出来事は、Remixの母体であるReact Router系のコミュニティで大きな話題となり、移行の理由について様々な憶測を呼びました。 JavaScriptエキスパートのWes Bos氏（学習動画教材とかを作っている人）は、ChatGPTのフロントエンドのソースコードを分析し、OpenAIがRemixを採用した理由について独自の考察を展開しました。 www.youtube.com 緊急で動画を回すWes Bos氏 Wes Bos氏の分析によると、ChatGPTのア
はじめに こんにちは。calloc134 です。 自分は普段 React を利用してフロントエンドの開発をしています。 SPA のルーティングを実装する上で、TanStack Router を利用することが多いです。 この使い方について、簡単にまとまったドキュメントが思ったより少なく感じたため、まとめていきたいと思います。 TanStack Router とは TanStack Router は、React のルーティングを行うためのライブラリです。 当初は React Location として、TanStack の Tanner Linsley 氏によって開発されました。 その後、改名や設計のし直しが行われ、TanStack Router として開発されており、2023 年のクリスマスに v1 がリリースされました。 現在は色々な機能が追加されており、React のルーティングを行うため
SmartHRのフロントエンドの技術的変遷 ── 技術顧問のkoba04と語るこれまでとこれから - SmartHR Tech Blog
マルチプロダクト戦略を掲げてプロダクトを急速に増やし続けている SmartHR のフロントエンド領域について、2018年から SmartHR に参加しているフロントエンドエンジニアの nabeliwo と技術顧問の koba04 が、これまでの振り返りと今後の展望を話しました。 SmartHR のフロントエンドでどんな技術が使われてきてどんな課題と向き合ってきたのか、そして今現在取り組んでいる課題や SmartHR ではどんなフロントエンドエンジニアが求められるのかなど、幅広いテーマが出てきました。 この記事ではその模様をお届けします。 目次 フロントエンドの Rails からの脱却とフロントエンド領域の確立 SmartHR UI の誕生 プロダクトの急増 複雑化する技術課題 テストの整備とロジック共通化の取り組み Next.js の導入 新たな技術的挑戦 フロントエンドミーティングの見直
仕事内容全国の媒体社（放送局）が販売している広告枠情報に対して、各種データ、及び条件絞込み機能を組み合わせた広告枠の検索・分析サービス開発をご担当頂きます。 このサービスは広告会社様・広告主様合わせて約400社以上と幅広いユーザーに利用されており、ページ数や機能も多く、ひとつひとつの開発がお客様の売上とユーザーに大きく影響します。 エンジニアがお客様と直接折衝するケースもあり、お客様の課題ヒアリングからの要求・課題整理からの提案・要件定義などの上流工程から開発・リリース後は運用までと、システム全体を見て開発いただくことができます。 「このやり方の方が顧客体験やサービス運営としてのROIが向上する」など、より良い技術・環境の提案もお任せしていきます。 業務詳細 機能追加開発・部分改修等に関わる提案、要件定義、設計、開発、テスト、リリース まずはサービスの仕様理解、そして小規模の開発から対応い
こんにちは、 kenzauros です。 NextAuth.js は標準でさまざまな OAuth プロバイダーに対応していますが、なぜかアクセストークンの更新に対応していません。 今回は NextAuth.js + Cognito という環境で更新トークンを使ったアクセストークンのローテーションを実装します。 概要 OAuth2 でアクセストークンを使って認証する場合、アクセストークンの有効期限は短いため、ローテーションする必要があります。 このときに使われるのが Refresh Token （更新トークン） です。この更新トークンの有効期限内であれば、認証情報を再び入力することなく、新しいアクセストークンを取得できます。 公式の情報にもあるとおり、 NextAuth.js は今のところアクセストークンのローテーションを自動で行ってくれません。これは Cognito に限らず、どのプロバイ
Tauriでマルチプラットフォームアプリを作ろう！
はじめに この記事はパン屋さん。主催の全国高専_非公式 Advent Calendar 2023に参加しています！ 他の記事はこちらから！ 概要 パッと何かを思い立ってアプリを作った時にアプリがマルチプラットフォームに対応していると何かと嬉しいですよね。 今回はTauriというフレームワークを使ったマルチプラットフォームアプリの作り方について、 私が以前作ったアプリを交えて簡単に解説していきます！ 自己紹介 福井高専 5年 Unityを弄るのが好きで高専プロコンとか出ました 最近は燈株式会社で長期インターンをしていてWeb開発をメインでやっています 言い訳 作ったもの こちらが今回制作したアプリです。 動作している動画 YouTubeの動画/プレイリストのurlを入力すると、その動画を広告なしで再生することができます。 更にトラック管理機能、履歴機能、テーマ(色)変更機能などをつけてみまし
Next.jsには様々なレンダリング手法があります。それぞれのレンダリング手法にはメリット、デメリットが様々あり、それぞれがどのようなコンテンツに向いているか、特長があります。 それぞれの特性から何に向いている、向いてないを、実践も交えて見えてきたものをまとめました。 Next.jsのApp Routerについて Next.js 13.0以降からApp Routerが実装されました。従来のPages Routerと比較し大きくディレクトリ構造が変更となり、各ページの配置はpagesからappになりました。 また、これを境にサーバーコンポーネント（サーバー側でHTMLを構築して返す）がデフォルトになり、より強化されています。 fecthの機能も強化され、コンポーネント間のデータの受け渡し（いわゆるバケツリレー）が不要になりました。また、サーバーサイドでfetch→レンダリングまでを担えるよう
React.jsをCDNで使う
生成AIの進化に伴い、自然言語でコードを生成できるようになっている。create.xyzもその一つ。 「アルバムサムネイル」という具合に、作りたいデザインを入力すると、デザインが自動生成される。そしてそのソースコードを、Reactで出力できる。 この手の自然言語でコードを生成するサービスの多くは、フロント兼バックエンドはReact.jsが多く、デザインはtailwindCSSをベースとしていることが多い 苦手意識があり、内部ロジックの実装よりも倍以上時間をかけていたフロントエンドを、生成AIによって作れるのはめちゃくちゃ便利。 ただ、唯一の不満がある。それは環境構築だ。React.jsはnode.js環境下で動作するのでnode.js環境が必要だし、最小構成を作るにも、npmを利用してプロジェクト群を生成する。まあこの機能自体はめちゃくちゃ楽なのだけど、個人でかつ小規模で、サクッと開発した
JavaScriptのフリーランス求人・案件について JavaScriptのフリーランス求人・案件の業務委託における月額相場単価は、作業時間の目安を週5常駐で月140~180時間とした場合、60~80万円程度です。 JavaScriptのフリーランス求人・案件の平均単価は70.5万円、中央値単価は70万円、最高単価は500万円、最低単価は10万円です。（※調べ/2024年07月） JavaScriptのフリーランス求人・案件の実務経験年数に応じた単価相場は以下の通りです。 ・JavaScript経験1年未満：35万円前後 (年収420万円) ・JavaScript経験1年～2年：42万円前後 (年収504万円) ・JavaScript経験2年～3年：60万円前後 (年収714万円) ・JavaScript経験3年～5年：70万円前後 (年収840万円) ・JavaScript経験5年以上：
React + Rails + Vite.js なSPAアプリを、RubyMineを使ってReactとRailsの両方をデバッグしてみた - メモ的な思考的な
JetBrainsの資料にある通り、RubyMineではRailsに加えてReactもデバッグできます。 Debug a React application - React | RubyMine Debugging React Apps Created With Create React App in WebStorm | The WebStorm Blog Reactのデバッグについては、公式ドキュメントに Only for applications created with create-react-app. Debugging of JavaScript code is only supported in Google Chrome and in other Chromium-based browsers. Debug a React application - React |
Reactをセットアップ(環境構築)する
Reactをセットアップする手順 この記事ではReactの簡単な始め方について、セットアップ、環境構築の方法を解説します。 Reactの開発環境はMacやLinuxはもちろん、Windowsでもセットアップできます。 手順は大まかには下記の3点です。 nvmのインストール ※Node.jsのバージョンを管理するツール Node.jsのインストール ※サーバサイドJavaScript環境 Create React Appの実行 ※Reactアプリの雛形を生成するツール nvmのインストール nvmとは？ nvm（Node Version Manager）とは、Node.jsのバージョンを管理するツールです。 Node.jsは頻繁にバージョンアップが行われており、バージョンが進むにつれて新しい機能が追加されたり、既存の機能が削除されたりします。そのため、Node.jsを利用する上で、使用するバ
React.jsのIISデプロイ方法 - Qiita
はじめに reactのIISデプロイ方法に難儀したので備忘録として残します。 投稿久々～～～～((´∀｀))ｹﾗｹﾗｹﾗｹﾗｹﾗｹﾗｹﾗｹﾗｹﾗｹﾗｹﾗｹﾗｹﾗｹﾗｹﾗｹﾗ 環境 Windows Server 2016 IIS: 10.0.14393.0 url-rewite: 2.0 node: v16.15.0 React: v18.1.0 react-router-dom: 6.3.0 プロジェクトの作成 create-react-appでreactのプロジェクトを作ります。 buildが完了したらbuildフォルダにモジュール一式作成されます。 IISデプロイ その1 IISを開いてサイトを追加していきます。 まずはアプリケーションプールを追加します。 名前はreact-deployで行きます。 詳細設定はこんな感じです。 次に先ほど作成したbuildフォルダをC:\inetpub
結局、Next.js 14 App Router 何もわからない 概要 皆さんこんにちは。加賀谷です。学習のアウトプットと、情報の整理も兼ねて Next.js 14 App Routerにおける情報をまとめたいと思っています。 私の理解が足りない点、間違っている点などあると思いますのでその際はご指摘ください。 対象 Next.js 14 App Routerについて調べている人 機能の全体を俯瞰したい人 開発環境 名前 バージョン Next.jsとは 一言でいえば、Reactのフレームワークです。フルスタックな機能を有しており、サーバーサイドレンダリング(SSR)アプリケーションの開発を行うことができます。 Reactとは、JavaScriptのライブラリです。シングルページアプリケーション(SPA)の開発を行うことができます。 App Router Next.jsが提供する開発モデルの一
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【React】リッチテキストエディタ（Quill、Tiptap、Slate...）の考え方や前提知識
ユーザー体験重視のSPAアーキテクチャ改 - laiso
TanStack Routerでサクッと始める型安全ルーティング
エンジニア【DX領域事業の自社サービス】 | ビデオリサーチグループ
NextAuth.js + Cognito で Refresh Token を使ってアクセストークンを更新する
Next.jsのレンダリング別用途｜Blog｜株式会社デパート
JavaScriptのフリーランス求人・案件 - Qiita
React.jsシリーズ: React Hooksへようこそ！
結局、Next.js 14 App Routerが何もわからないから学ぶ