今年も GitHub トレンドから 2022 年の JavaScript/TypeScript を振り返ります。去年の記事はこちらです。 — GitHub のトレンドで振り返る 2021 年の JavaScript | WEB EGG 集計方法 本記事の集計期間は 2022/01/01〜2022/12/07、対象言語は JavaScript および TypeScript です。 なお GitHub がそのリポジトリをなんの言語と見なしてトレンドに掲載したかをもとに集計対象を決定していることにご留意ください。 別言語で書かれた Rust 製の JS 向けのツールや CSS フレームワークなどは基本的に対象外となります。 集計に利用したデータですが、GitHub は過去のトレンドを閲覧する方法を提供していないため、独自の仕組みで GitHub トレンドのアーカイブを生成しそのデータを利用しまし
Brand-new Rich Text Editor Framework! 先日 Meta から新しいリッチテキストエディターのフレームワーク Lexical の OSS 化が発表されました。 一方で、 Meta が開発していた既存の React 用リッチテキストエディターフレームワーク Draft.js はアーカイブが決定されました。 実は自分は業務で Draft.js をめちゃくちゃ使っていて、発展に期待しつつウォッチしていたので開発が終了してしまうのが非常に残念ではあるのですが、代わりにより高度に抽象化されたフレームワークが公開されたのでこれはマスターするしかありません。 ということで調べたことをまとめていこうと思います。 執筆時点(2022 年 4 月)では正式リリースされていないので、本稿のサンプルコードは参考にならなくなる可能性があります。 概要 エディターを作るためのフレーム
実践 Node.js Native ESM — Wantedlyでのアプリケーション移行事例 | Wantedly Engineer Blog
Wantedlyではこのたび、フロントエンドアプリケーションのひとつをNative ESM化しました。本記事ではNative ESM化の必要性と、必要な作業について説明します。 この記事の概要Node.jsにはNative ESMというモードがある。Native ESMはまだ普及していないが、ライブラリ側の更新が進み、移行が必要になりつつある。Native ESMをめぐる状況は (この記事の長さからわかるように) 色々複雑で、概念をちゃんと説明するだけでも大変。Native ESMへの移行にあたってはさまざまな困難が待ち受けている。Native ESMとは歴史的経緯から、JavaScriptには複数のモジュールシステムがあります。そのうちNode.js周辺でよく使われるのはCommonJS ModulesとES Modulesです。 CommonJS Modules (CJS) は実質的に
Thredot はスレッド形式でメモを書けるサービスです。 Google アカウントがあればログインできます。 こういうの Playground ページを用意しているので、気軽に使い心地を試してみてください。 Thredot のコンセプト Thredot はアイデアや情報をメモに書き出すハードルを限界まで下げることを目指しており、そのために様々な工夫をしています。 メモを整理させない 爆速な検索機能 公開範囲を設定できる WYSIWYG エディタを採用 メモを整理させない Thredot では徹底的にメモを整理させない方針を取っています。 僕は「整理するための機能が用意されていると整理をしたくなってしまう」人間です。 でも整理するのって超面倒くさいです。 ( 支離滅裂 ) 結局中途半端に整理しようとして余計にゴチャゴチャになり、最終的にメモを書くこと自体が億劫になってしまいます。 Thre
WYSIWYGエディターの状態抽象化とReactとのつなぎ込み - 良いクロスブラウザエディターを目指して | Wantedly Engineer Blog
まえがきブログや記事を投稿するWebサービスには、殆どの場合、リッチなエディター機能が備わっています。特に、記事を見た目通りに書けるエディターは、WYSIWYGエディターと呼ばれ、記事を書く際には欠かせない機能の一つです。 Wantedly にもストーリーと呼ぶ記事を投稿する機能があり、その記事投稿部分では、WYSIWYGエディターを実装しています。 では、どのようにWYSISYGエディターを開発していくのでしょうか。この記事では、エディターの機能を実際に開発するための基礎知識と実装について書いていきます。 今回話すエディターについて今回記事で指すエディターとは、 WYSIWYGエディターを想定しています。例えば、Dropbox Paper や google docs、Medium、Note などのエディターがそれに該当します。Qiita や Zenn のような 2カラムの Markdow
株式会社ヘンリーVPoEの@shenyu_cyanです。2023年が始まり、当社の新しい取り組みとしてエンジニアリングブログを始めました。 私たちは「社会課題を解決し続け、より良いセカイを創る」をミッションにプロダクトを開発しています。その第一歩として現在はクリニック・中小病院向けの基幹システムであるクラウド型電子カルテ・レセプトシステム「Henry」を展開しています。 技術ブログの初投稿として、今回はヘンリーが利用している技術スタックおよびその裏の考え方をご紹介し、これからの方向性について書かせていただきます。 ヘンリーの技術スタックを簡単にご紹介しますが、フロントエンドはReact+TypeScriptを採用し、その裏にBFFを設け、GraphQLで通信を行なっています。そして、BFFとバックエンドの各サービス、バックエンドのサービス同士はgRPCでやりとりをします。バックエンドは主に
こんにちは！テラーノベルでiOS/Android/Webとフロントエンド周りを担当している @kazutoyoです！ 今回はHeadless Editor FrameworkであるTiptapのご紹介と、そちらを使ってオリジナルなエディタを作成しようと思います。 Tiptapとは TiptapはHeadless Editor Frameworkと呼ばれています。 これまでWebでのWYSIWYGエディタとしてQuill.jsやDraft.jsなどが存在しました。 これらは文字の装飾や文章の編集に関するUIをデフォルトで提供しており、エディタに特別な機能を追加しようとしたり、UIを大きく変えるというのは少々大変でした。 TiptapのようなHeadless Editor Frameworkは、エディタで必要な機能のコア機能を提供し、必要なUIや機能は拡張機能として追加できるような仕組みになっ
Meta（旧Facebook）、テキストエディタ用のUIコンポーネント「Lexical」をオープンソースで公開。Reactなどフレームワークの依存性なく軽量で高速、機能拡張も容易に
Reactなどを始めとする特定のJavaScriptフレームワークやライブラリには依存していないため、基本的にどんなフレームワークとも組み合わせて利用することが可能。 Lexicalは信頼性、アクセシビリティ、実行速度にフォーカスして開発されていると説明されており、W3Cのアクセシビリティ標準となる「Web Content Accessibility Guidelines」（WCAG）にも準拠しており、Webブラウザの読み上げ機能などを始めとするアクセシビリティ機能に対応。 圧縮後のサイズは22kbと比較的小さく、性能に関しては同社が以前から公開していたエディタ用UIコンポーネントのDraft.jsと比較してタイピング性能が20％から70％向上したと説明されています。これは特に性能の低いデバイスで利用するときに有利に働くとのこと。 拡張が容易になるようにAPIが容易されており、すでにRea
この記事は個人開発Advent Calendar 2022 1日目の記事です。 2022年6月13日、私が個人開発でリリースしたサービス「テストメーカー」がTwitterで2,000RT、7,600いいね以上の大バズリを記録しました。 「テストメーカー」は穴埋めテストを直感的に作れるツールです。 マウスで穴埋めにしたいテキストを選択して離すと、その部分が穴埋め問題に変わります。 リリース以降、主に全国各地の中学校、高校、大学などの授業で使っていただいたりしながらユーザー数が増えています。 他にも、社会人の方が国家資格を受験するときの受験勉強に使っていただいていることもあります。 ITMediaさんに取材も受けました。 そして、リリースからおよそ1ヶ月が経過した7月に課金機能を実装し、そこから少しずつですが課金してくださるユーザーさんも増え続けています。 本記事では、そんなテストメーカーを支
この記事は次の日本語訳です（Reactの部分のみ抜粋） https://github.com/enaqx/awesome-react 公式 React Official Website React Documentation React GitHub コミュニティ Reactiflux Discord Channel React StackOverflow React Twitter オンラインでReactのコードを試せるサービス CodePen CodeSandbox JSFiddle チュートリアル Reactのチュートリアル React Official Tutorial - 公式 Using React in Visual Studio Code - ReactをVSCodeで使う Scrimba - Learn React for free interactively - Scr
テックタッチのフロントエンドチームです。 今回はテックタッチの機能の表現の幅を広げるために WYSIWYG 機能を実装しました。 本記事では、Draft.js を用いて WYSIWYG 機能をどのように実装したか、どういう難しさがあったかなどを紹介します。 WYSIWYG とは Draft.js とは テックタッチについて WYSIWYG を使って実現したこと 表現力の向上 テックタッチ独自の UI の実現やテックタッチの機能との連携 実際に Draft.js を導入してみて WYSIWYG データの永続化対応 カスタムエレメント対応 画像の対応 サンプルコード ShadowDOM 問題への対応 今後の課題 テスト IME 対応 まとめ WYSIWYG とは WYSIWYG とは、簡単にいうと、 Markdown などの独自記法を用いて、、編集画面とは別画面で文書表現（UI）の設定をするの
いまさらだけどContentEditableをいじって、キャレットの扱いがしんどいということがわかったよ - 算譜王におれはなる!!!!
WYSIWYGエディタに憧れてContentEditableをいじってみると、けっこうな底無し沼だと。気づいたときにはどっぷり浸かってるやつ。 ググればそれなりに知見が見つかるし、良い感じのライブラリもある。けど僕がやりたかったことは、自分でコードを書いて実現するのが早いんじゃないかなーと思って、沼にダイブした。 やりたいことは、ワープロソフトみたいなやつというよりも、編集しているテキストのスタイルがリアルタイムに変化するMarkdownエディタっぽいやつ。 つまりユーザがスタイルを当てるんじゃなくて、ユーザが入力したテキストに応じてスタイルを当てたい。 より正確には、テキストの見た目をおしゃれにするだけではなくて、もっと高度な何か、Reactのコンポーネントとか、を埋め込むとかしたかった。 Draft.jsやEditor.jsのような、ContentEditableを扱いやすくしてくれる
Weekly Frontend News 2022年4月3週目/react-testing-libraryにrenderHookが追加、など
Weekly Frontend News 2022年4月3週目/react-testing-libraryにrenderHookが追加、など 寒くなったり暑くなったりして大変ですね。体調にお気をつけて。 自分が今週見たフロントエンド記事のまとめ。 react-testing-libraryにrenderHookの追加、react-hooks-testing-libraryが非推奨へ react-testing-library v13.1でrenderHookが追加された。 これにより、react-hooks-testing-libraryの大部分の機能がカバーされるので、react-hooks-testing-libraryを非推奨としてアーカイブする予定とのこと。 RFC: New Bundler in Gatsby Gatsbyがwebpack以外のバンドラーを模索中とのこと。 さまざ
WYSIWYGエディタって何？ 「What You See Is What You Get（見たままが得られる）」エディタ。うぃじうぃぐって読むらしけど誰が読めるんやろう。 ユーザー側からタグ付けとかスタイリングとかをさせることなく、 簡単に良い感じに文章が作れるエディターです。 イメージでいうとQiitaとかWordpressの投稿のエディタ画面みたいな感じです。 これを簡単に実装できる方法を紹介します CKEditor vs Draft.js 実装しようと思い、調べましたがものすごく種類あるみたいですね。 https://qiita.com/rana_kualu/items/fc752de7d4f2224b29ee 最終2候補で悩みましたが、結局表題の通りCKEditorを使用しました。 理由はReact案件ではないことがメインです。（Reactが入ってるか否かで使い分けてもいいかも）
JSer.info #588 - Lexicalというテキストエディタを作るためのJavaScriptフレームワークが公開されました。 facebook/lexical: Lexical is an extensible text editor framework that provides excellent reliability, accessibility and performance. エディタの状態をdouble-bufferingで管理して、状態の変更をdiff/patchで表示に反映させる仕組みを持っている。 またcontentEditableを使っているが、外部からの変更をMutationObserverで監視し、エディタの状態を更新している。 Lexicalは同じくFacebookが作成しているDraft.jsの後継となるライブラリで、APIの互換性はありませんが、今
2017 年、私は React.js および ECMAScript のキャッチアップをしていました。 スタートアップに転職してすぐのタイミング。転職先で React.js を使ったマークダウンエディタを開発していました。それまで Android や Node.js を中心として開発していたので、React.js をはじめとする View フレームワークは全く素人。かなりの時間をかけてキャッチアップしました。 一年後には、draft.js を始めとする OSS のコードも読めるようになりましたし、小規模のコンポーネントであれば自身で開発して GitHub で公開するようにもなりました。 正直、React.js で学んだ技術なぞ、すぐに枯れると思っていました。当時は View フレームワーク戦乱時代。React.js 以外にも Ember.js や Vue.js、Angular などさまざまな
口コミ投稿のハイライト機能をDraft.jsから自前実装に置き換えました - LIVESENSE ENGINEER BLOG
転職会議事業部エンジニアの佐藤です。 転職会議の口コミ投稿にはガイドラインがあり、ガイドラインに違反する内容が含まれた口コミを投稿しようとすると、該当する内容がハイライト表示されます。 例えばこのような内容で投稿しようとすると、 ガイドラインに違反する文字列がハイライトされます。 このような内容が含まれた口コミは削除する運用のため、そもそも投稿不可にする仕様となっています。 そのため、なぜ口コミが投稿できないのかユーザーに視覚的に知らせる文字列のハイライトは必ず提供したい機能となっています。 このハイライト機能はこれまでDraft.jsを使って実現していましたが、自前実装に置き換えました。 本記事では、置き換えをした経緯と自前での実装の詳細をご紹介します。 Draft.jsの利用をやめた経緯 ユーザーから口コミ投稿ができないという問い合わせを受けていた Draft.jsがアーカイブになった
Reactベースで動作するWYSIWYGエディタ
始めに Next(React)、TypeScript、Material UI環境で扱えるWYSIWYGエディタを調査し、実際に使用し、どのエディタが一番適しているかを調査しましたので、その結果をご紹介します。 WYSIWYGエディタとは 「WYSIWYGエディタって何？」と思われる方向けにWYSIWYGエディタって何かを簡単にご説明させていただきます。 What You See Is What You Get（見たままが得られる）の頭文字をとったものでWYSIWYGと呼ばれます。 最近では、コンテンツマネジメントシステム(CMS)などでよく使われているエディタです。 実際のコンテンツそのものを編集しながら確認することができ、そのままをウェブページなどで表示する事が出来ます。 （実際は環境（ブラウザ等）に依存するので必ずしも全く同じ結果が得られるわけではないみたいですが。。。） 使用する側か
【ウェブ担当者必見】ヘッドレスCMSを導入でホームページの表示速度はどれくらい速くなった？自社開発サイトリニューアル事例を解説
Information 【ウェブ担当者必見】ヘッドレスCMSを導入でホームページの表示速度はどれくらい速くなった？自社開発サイトリニューアル事例を解説 株式会社アンダーグルーヴ代表の小林です。 当社メイン事業「出張買取 FIRSTCLASS-ファーストクラス-」の公式サイトをリニューアルしました。 https://first-class.ne.jp/ 以前はWordpressを使用していましたが、リニューアルに伴いヘッドレスCMSを導入、新たなサイトとして生まれ変わっています。 本リニューアルは社内エンジニアによるデザイン、コーディングから、写真撮影やコンテンツ作成といったところまで、完全自社にて行っています。 私自身はマーケティング、サイト管理などウェブに関わる全てを業務としています。リニューアルはエンジニアを主導としながら、意見を出し合い、課題解決とよりユーザー目線で魅力的なサイトにな
Track Awesome List Updates DailyWe track over 500 awesome list updates, and you can also subscribe to daily or weekly updates via RSS or News Letter. This repo is generated by trackawesomelist-source, visit it Online or with Github. 📅 Weekly · 🔍 Search · 🔥 Feed · 📮 Subscribe · ❤️ Sponsor · 😺 Github · 🌐 Website · 📝 04/22 · ✅ 04/22 Table of Contents Recently Updated Top 50 Awesome List All Tr
幾つかの Web サービスや Electron ベースのアプリに組み込むエディタを実装するにあたって、Draft.js、Slate.js、CodeMirror を試してきて得た情報について、個人の感想を述べる。今更感があるので、ライブラリそのものについての解説はしない。 冒頭で挙げている三つのライブラリの中では、単純に Server-Side Rendering してもエラーを出さず、普通に動くところが良かった。単純に動かないタイプのライブラリでは、例えば React ではライフサイクルイベントのコールバックである ComponentDidMount メソッドを利用するなどして、クライアントサイドのみでエディタが描画されるように工夫しなければならない。 Draft.js でエディタのスタイルを変更するには、Decorator という、描画前の内部データを DOM 要素へと変換する変換器を与
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHubのトレンドで振り返る2022年のJavaScript/TypeScript
Meta の新しいリッチテキストエディターフレームワーク Lexical を調べる
React専用リッチテキストエディタライブラリ「Draft.js」の実践的Tips集
スレッド形式で雑にメモを書き散らすためのサービス「Thredot」をリリースしました
ヘンリーの技術スタックの概観と展望 - 株式会社ヘンリー エンジニアブログ
Tiptapでオリジナルエディタをつくろう！
【個人開発】2000RT超えの大バズリ〜初課金まで至った穴埋めテストメーカーを支える技術
Awesome React - Reactのオススメ記事・ライブラリ・ツール まとめ - - Qiita
Draft.jsを使ったWYSIWYGの実現 - Techtouch Developers Blog
WYSIWYGエディタをCKEditorで作ってみた - Qiita
2022-04-18のJS: Lexical、React Testing Library v13.1.0、Dialog componentの作成
"死にゆく" 技術と "流行る" 技術の狭間で｜Ken Wagatsuma
Track Awesome List Updates Daily
Draft.js と Slate.js と CodeMirror の感想