HonoでAPI付き雑React SPA最小
laisoさんが書いてたのほぼなんだけど Honoは文字列でもStreamでもなんでも返せるからサーバーサイドもReactで書けるし、tsconfig.jsonで適切に設定すればJSXなんでもいけるし、Viteのdev-serverがあるから、サーバーもクライントも同時に開発、ビルドできて、もちろんAPIを生やすのが得意で、雑React SPA環境（API付き！）作るのに向いてるよ。 作り方解説します。めんどい人はここにプロジェクト作ってるからclone、ダウンロードしてください。 まず、create-honoして、cloudflare-pagesのテンプレートを選ぶ。bunをパッケージマネージャーに使ってる。
HonoでAPIだけ作って素のReact DOMでSPAを書くアーキテクチャ
という構成を手軽に作れるようになっていて便利でした これを軸に素のReact APIを触って遊ぶ環境が作れそうです(Server APIもworkerdで動く範囲なら使えるかも?) とりあえず以下のソースコードでデプロイまでできるかを試しました プロジェクトのベースはnpm create hono@latestで作りました DEMO: https://hono-spa-react.pages.dev/ react react-dom @vitejs/plugin-react-swc をnpm installしています デバッグ しかしこの構成だと@hono/vite-dev-serverによるvite devは実行時エラーになり動きません(!) react-dom_client.js?v=f8955f15:11222 Uncaught Error: Objects are not vali
最近のJestでシンプルにimport/exportを使う方法 | たみブログ
JestはデフォルトではECMAScript Modulesをサポートしていないため、import/export文を使いたい場合はbabelを使用してCommonJsに変換する必要がありました。 Googleで検索すると、多くの記事ではこの方法を紹介しています。 こちらによると、babelを使わなくてもimport/export文が使えるようなので試してみました。(20210417現在、実験的機能です) 前提 Jestのバージョンは26.xnodeのバージョンは14.13.1以上 Jestをインストールする インストールが終わったらpackage.jsonをみて、バージョンが26.xか確認します。 package.json を編集する 行うことは2点です。 nodeでimport/exportが使えるようにするために、"type": “module" を追記する–experimental-
最近のフロントエンドフレームワークに対する認識とお気持ちの整理 - console.lealog();
久しぶりに、いわゆるポエムを。 新規・運用ヘルプを問わず、受託や副業でよくフロントエンドをやってるWeb屋の見解、そして手札のお悩み。 この先、また技術選定する際なんかにも参考になるかと思ったので。 React 「いまフロントエンドやるなら最初に覚えるべき！」は、もう過去の話かなーと個人的には思ってる。 Reactは`UI = fn(state)`なのが良い！とか言われるけど、あなたが必要としてるのは`UI = Component(props)`かもよって。 一昔前までは、たしかにあらゆる面で頭一つ抜けてる印象はあったけど、今はそうでもないか、その差はだいぶ埋まってきてると思ってる。（もちろん先行者利益みたいなところで、エコシステムはまだまだ優位な差があるかもしれんけど、それもあまり実感できたことはないし、いまからはじめる人はそんなんで困らんやろうし） 原初の時代からReactな案件をそれ
Hyper™
Project GoalsThe goal of the project is to create a beautiful and extensible experience for command-line interface users, built on open web standards. In the beginning, our focus will be primarily around speed, stability and the development of the correct API for extension authors. In the future, we anticipate the community will come up with innovative additions to enhance what could be the simple
Vueでグラフ描画するなら、Google Chartがオススメ - Qiita
はじめに これはVue Advent Calendar 2019 5日目の記事です。 最近、Vue.jsで集計結果をグラフ描画する機会がありました。 Vue グラフ描画で調べると基本的にCharts.jsが出てきます。 色々、考えt時に、Google chartsが便利だったので紹介したいと思います。 google chartsとは google chartsとは、googleの図表描画ライブラリです。 スプレッドシートとかで使われているグラフを描画できるイメージです。 プロジェクト作成 素のVue.jsではなく、Nuxt.jsでやっていたためNuxtでプロジェクト作成 yarn create nuxt-app charts-sample # yarnを選択 # cssフレームワークはbulmaを選択 cd charts-sample yarn dev
「レガシーフロントエンド安全改善ガイド」を商業出版します #技術書典 - memo_md
※2019/11/8: 無料サンプルと目次を記事内に追加しました。 2019年4月に開催された技術書典６で頒布した「レガシーフロントエンド安全改善ガイド」ですが、このたびインプレスR&D社さまより商業版を刊行することになりました。 自分が商業版の技術書を書く日が来るとは思わなかったのでビクビクしています。 メディア: この商品を含むブログを見る nextpublishing.jp 表紙イラストは同人版と同様、鍋料理さんに描いていただきました。「安全な感じで！」という相談から、カワイイ工事現場が仕上がりました、とても気に入ってます。工事現場本と呼んでください。 タイトルに「迷わない！困らない！」という強気ワードが付いててちょっぴり恥ずかしいですが、迷わず困らない内容になってる・・はずです！ 同人版との違い / 加筆・修正した点 紙の本で比較すると、ページ数が110ページ程度→200ページ超と
React のユーザーから見た今後のフロントエンドの予想
この記事は議論のたたき台で、ポジショントークや、偏見にまみれています。 今のフロントエンドの分類 古典的なサーバーサイド WAF への +α の味付け 大規模なクライアントアプリケーション管理のための SPA SEO / SSR を考慮した Node ヘヴィーな環境 他、提唱されてるパターン マイクロフロントエンド - マイクロサービスのフロントエンドへの応用 JAMstack | JavaScript, APIs, and Markup PRPL パターン | Web | Google Developers 今の React & Vue の受容され方 仮想 DOM アルゴリズムや、SPA を作るためのものというより、単なるテンプレートエンジンとして受容されている節がある。Web 制作で jQuery は絶対に滅びないと言われていたが、その潮目も変わってきているように見える。 クソ
npmとyarnのコマンド早見表
2019/12/24追記 npmとyarnの脆弱性が報告されています。 npmとyarnの脆弱性とpostinstall - Cybozu Inside Out | サイボウズエンジニアのブログ npmの利用者としてやるべきことは、 npmのバージョンを6.13.4以上にあげる yarnのバージョンを1.21.1以上にあげる 概要 npmとyarnの「よく使う」から「ときどき使う」くらいまでのコマンド早見表です。 環境 Windows 10 Professional Nodist 0.8.8 参考 npm Documentation CLI の紹介 | Yarn バージョン Node.jsおよびnpmはNodistでインストール、yarnはnpmでインストールしました。 Node.js
npm 5.2.0の新機能！ 「npx」でローカルパッケージを手軽に実行しよう - Qiita
npmとはNode.jsインストール時に付属するパッケージマネージャーで、Node.jsのパッケージの管理や実行を取り扱うものです。 npmのバージョン5.2.0で導入された「npx」を用いると、下記のようにローカルにインストールしたnpmパッケージを、npxコマンドだけで実行できるようになります。 npxはnpmにバンドルされているため、npxの個別インストールは不要です。 次のようにしてモジュールを実行できます。 従来のnpmの実行方法との比較 従来では、ローカルのnpmパッケージを使用するには、次のような方法が必要でした。 方法1: ./node_modules/.bin/(パッケージ名)で実行する 方法2: $(npm bin)/(パッケージ名)で実行する 方法3: package.jsonにnpm-scriptsを記述して実行する npxはいずれの方法よりも簡潔なコマンドで、パッ
Reactの次期機能のSuspenseが凄くって、非同期処理がどんどん簡単になってた！ - Qiita
React17の次期新機能のSuspenseが凄い！ と思ったので少し学習していました！ Suspense自体の説明は下の動画がわかりやすいかも。 13:15ぐらいからプログラムのDemo 29:30ぐらいからSuspenseとはなんぞや、という説明をしてくれています。 Githubにdemoもあったので、実際に動かしてみたい方はこちらも是非是非 つまりSuspenseって何？ Suspenseっていう機能があるわけじゃないんです、すみません 概念というかなんといいますか 自分の意訳・解釈なので間違っていたら土下座しに行きます 外部APIからデータを取得・表示するような処理で使えるんですね。 読み込みを開始したらLoadingを出して、APIが戻ってきたらデータを表示してローディングを消して……っていう、reduxやsagaを使って今まで頑張ってきているものがあると思うんですね。 API実
ReactとVueってどう違う？全く同じアプリをReactとVueで作成してみて分かった相違点
日常的にVueを使用している開発者が、Reactはどうなのだろうと思い、ReactとVueで全く同じアプリを作成した時のそれぞれの工程を比較して分かった相違点を紹介します。 I created the exact same app in React and Vue. Here are the differences. 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 隣の家の芝生は青く見える VueとReactで作成したアプリの見た目を比較 VueとReactはデータをどのように変更させるか アイテムの新規作成 アイテムの削除 イベントリスナーを渡す 子コンポーネントにデータを渡す 親コンポーネントにデータを戻す 終わりに 隣の家の芝生は青く見える 私は現在の職場でVueを使用しており、Vueがどのように機能するかかなり理解してい
React+Electronアプリを作ってみよう
こんにちは。前置きは抜きにすぐ作ります。 Create Application 01: create-react-app まずはcreate-react-appです。なかったらnpm install -g create-react-appしてください。 うまくいったらyarn startで起動しましょう。しましたか？うまくいってるのを確認したら即刻ジョブ止めましょう。もう二度とyarn startを実行することはありません。 02: install Some Package 以下のパッケージをインストールしてください。最新ので問題はないはずです。すべてインストール時に--dev-dependenciesを付けることを忘れないでください。まあ忘れてもいいです。 electron npm-run-all 03: setting up Electron こちらのgistを参照してください。 次に
PhantomJSの開発が終了しリポジトリがアーカイブ化された
QtWebKitをベースにしたヘッドレスブラウザであるPhantomJSの開発が終了され、2018年6月2日にリポジトリもアーカイブされました。 ariya/phantomjs: Scriptable Headless Browser 以前にもお伝えしていましたが、PhantomJSはQtWebKitをベースにしていて安定版が利用しているバージョンも古いままでした。 また、QtWebKitの新しいバージョンへアップデートを行うベータ版も開発されていましたが、Headless Chromiumが公開されたことや個人でPhantomJSのメンテナンスを続けていくの難しいという問題もあり開発は停止していました。 2017-05-03のJS: Headless Chrome/FirefoxとPhantomJS/SlimerJS、ES modules - JSer.info 2017-09-05のJ
世のフロントエンドエンジニアにApollo Clientを布教したい - Qiita
こんにちは。いかがコーディングお過ごしでしょうか。 私は今更ながら最近GraphQLで遊び出し、そしてApollo Clientに出会いました。 ワクワクしました。「これは想像以上に既存のフロントエンドの設計・実装を変えるものだぞ！」と感じました。 「Apollo ClientってGraphQLクライアントでしょ？GraphQLエンドポイントない俺には関係ないな。」と思ったそこのあなた、それだけじゃないんですApollo Clientは！！！！！ 本記事では「Apollo Clientとはなんぞや」という話と「なぜ私がApollo Clientを布教したいのか」という点について語ります。実は最初は実装含めたチュートリアルを書いていたのですが長くなり過ぎたため記事を二つに分けました。この記事はどちらかと言うと概念系の話が多めで、片方にApollo Client + Reactのチュートリアル
最近のフロントエンドのエディタ事情 - mizchi's blog
これは、個人でどんなエディタを使うべきか、ではなく、「チームとして」新しいものを採用するとき、あるツールがエディタ横断で便利かどうかを考える必要がある。 自分個人としては、基本はAtomを使って、TypeScriptを書くときだけVS Code を使っている。ターミナルでは Vim。 環境でエディタを選ぶ 最近の新規プロジェクトでは、とくにブロッカーがなければ TypeScript を使っていいと思う。TypeScript を使うなら当然 VS Code を使うことになる。Atom や Vim でもいいが、TypeScriptのエディタとしては、流石に完成度が頭一つ抜けてる。JavaならJetBrains 的なノリで、TSならVSCode、そういうものと思ったほうが楽。 TS以外なら、エディタはなんでもいいが、ある程度流行ってるものでないとエコシステムに追いついてくれない。 prettie
シンプルだけどシッカリ働く最新のECMAScript開発環境 - Qiita
どうも、最近スマホゲー界隈からコンバートしてきた新米フロントエンド戦士です。 数年前はブラウザゲー界隈にいたんですが…完全に浦島太郎状態です。 ここ数ヶ月で色々学ばせてもらいつつ、自分なりのNode開発環境が整ったので公開しちゃいます。 完成した環境はこちらのv1.0（masterの最新はこちらでクロスプラットフォーム対応を行ったものになります） 2018/8/28 追記 本日 Babel7がリリースされました！ それに伴いパッケージ名が変更されていました。 babel-core -> @babel/core babel-preset-env -> @babel/preset-env また babel-preset-env2.0でbabel-polyfillは不要になるらしい の件が実験的機能として導入され、以下のようにuseBuiltIns:usageと設定すると必要に応じて自動でpol
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Amazon.co.jp: プログラミングTypeScript ―スケールするJavaScriptアプリケーション開発: Boris Cherny (著), 今村謙士 (監修), 原隆文 (翻訳): 本
Vue.js 3 に向けた Vue.js 入門
GitHub - maxgalbu/nightwatch-custom-commands-assertions: Nightwatch.js custom commands and assertions