Yosuke Furukawa on Twitter: "Node.js 新しい方の書き方で http サーバ書いてみたら見違えるように書きやすいな。。 https://t.co/IMdBXqvnHi"
Node.js 新しい方の書き方で http サーバ書いてみたら見違えるように書きやすいな。。 https://t.co/IMdBXqvnHi
Next.js 4年目の知見：SSRはもう古い、VercelにAPIサーバを置くな - Qiita
Next.js by Vercel - The React Framework 画像は Next.js サイコー！っていう顔です。 Webフロントエンドエンジニアであれば、「Reactのフレームワーク」と聞いて真っ先に思いつくであろうNext.js。僕は小規模の趣味開発から中規模の業務まで、4年程度Next.jsを使い続けてきました。触りはじめの当時はバージョン4で、”SSR（Server-side Rendering）を提供するReact製フレームワーク”だったものが、執筆時時点の最新バージョン（10.0.1）ではガラッと異なるフレームワークへと進化しています。 この4年間は実務で利用するだけでなく、新しいものや廃止された機能、RFC止まりになった機能など、Next.jsに関する情報を追いかけており、ある程度の知見をためつつも、Next.js並びに開発元のVercelが目指す方向性を何と
憧れのTypeScriptフルスタック環境がコマンド1発で作れる超軽量フレームワーク「frourio」 - Qiita
今年6月のTypeScript Meetup #4で初公開されたTypeScript製フレームワーク「frourio (フルーリオ)」が今月のアップデートでめちゃくちゃカッコいい感じに仕上がっているので紹介します frourioはフロントからバックエンド・ORマッパーまでのアプリ全体を一つのTypeScriptとして統合型チェックが可能になるフレームワークです 1つのディレクトリで完結するので一見するとモノリシックのようですが、型で繋がっていること以外はフロントとバックが個別のプロジェクト扱い（それぞれに別のpackage.jsonがある）なのでフロントはVercel、バックエンドはDockerでAWSにデプロイするみたいなことが可能です 新しいfrourioの特徴 TypeScript製で最速のフレームワーク コマンド1発でフロントSPA + RESTサーバー + ORマッパーの環境構築
Inertia.js - The Modern Monolith
JavaScript apps the monolith wayInertia is a new approach to building classic server-driven web apps. We call it the modern monolith. Inertia allows you to create fully client-side rendered, single-page apps, without the complexity that comes with modern SPAs. It does this by leveraging existing server-side patterns that you already love. Inertia has no client-side routing, nor does it require an
【JavaScript】本日未明、[ async - await ]さんが死体で発見され... - Qiita
「な、なんじゃこりゃあああぁあっtっt！！！！」 ・・・ ・・・ ・・・ 非同期処理を"ちゃんと"理解して使いたい 『非同期処理なんとなくの理解で書いている...』 『動いてるし、ヨシ！』 令和プログラマー*1である私自身、なるべく気を付けようと思っていますが、ついついなんとなくで書いてしまいそうになります。 （*1: 令和になってからプログラミングを知った人。初心者のこと。） ちなみに冒頭のコードは、「並列でいける処理をつい直列でやってしまっている」 例です。 実際に手を動かしながら非同期処理の理解を深める 本記事は以下の構成で、順を追って非同期処理を学習し、明日から自信を持って非同期処理が書けるようになるためのハンズオンです。 JSの非同期処理について知る Promise について知る Async / Await を使えるようにする 冒頭のコードがリファクタリングできるようになる 実際
![【JavaScript】本日未明、[ async - await ]さんが死体で発見され... - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/4bf449aecedd4337da846b0aadc121a2a1f5652e/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-1150d8b18a7c15795b701a55ae908f94.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTg0MCZoPTM4MCZ0eHQ2ND00NENRU21GMllWTmpjbWx3ZE9PQWtlYWNyT2FYcGVhY3F1YVlqdU9BZ1ZzZ1lYTjVibU1nTFNCaGQyRnBkQ0JkNDRHVjQ0S1Q0NEdNNXEyNzVMMlQ0NEduNTVtNjZLYUw0NEdWNDRLTUxpNHUmdHh0LWNvbG9yPSUyMzMzMyZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NCZ0eHQtY2xpcD1lbGxpcHNpcyZ0eHQtYWxpZ249Y2VudGVyJTJDbWlkZGxlJnM9MDQxOGFmOThjYjQ3NmY0NTJjNzNkMWUyZThmNmQxOWU%26mark-align%3Dcenter%252Cmiddle%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTg0MCZoPTUwMCZ0eHQ2ND1RR2x0Y0d4ZmN3JnR4dC1jb2xvcj0lMjMzMzMmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NDUmdHh0LWFsaWduPXJpZ2h0JTJDYm90dG9tJnM9NTYzMWFlYzJkN2M0MWMwYTI1MDRiZWZhOTk2OTliNGU%26blend-align%3Dcenter%252Cmiddle%26blend-mode%3Dnormal%26s%3Db39e38892a91f7de69ef1909da2cf5f1)
Google Functions & Node.js: winstonで高レベルなロギングをする方法 - Qiita
本稿では、Google Could Platform(GCP)のGoogle Cloud Functions(GCF)で、Node.jsのロギングライブラリwinstonを使ったログの記録方法を説明します。 この投稿で学べること winstonをGoogle Cloud Functionsの関数に組み込む方法 winstonのメソッドの呼び出し方 winstonでオブジェクトの値をロギングする方法 winstonで記録したログの読み方 この投稿では説明しないこと winstonを使ってStackDriverにロギングする方法 winstonを使ってStackDriverに「重要度」をつけながらロギングする方法 winstonとStackDriverを組み合わせると、より自由度が高く分析しやすい構造でロギングすることが可能なりますが、この投稿ではそれについては説明しません。winstonを単
Google Functions: Node.jsで重要度付きのロギング - Qiita
前回、Google Functions: console.infoやconsole.errorなどとログビューアの「重大度」の関係性という記事を投稿しました。そこではconsole.errorやconsole.infoなどのConsole APIでは、GCP上のログの重要度(severity)は、DEFAULTかERRORの二択になるということを説明しました。 GCP上の重要度はこの2つしか無いわけではなく、以下の9つのレベルがあります。 この投稿では、Google Cloudのロギングクライアントライブラリを使って、Cloud Functionsでも重要度を指定したロギングをする方法を説明します。 この投稿で学ぶこと Google Cloud Function & Node.jsで@google-cloud/loggingを使って重要度をつけたログを記録する方法 そして、その面倒くささ。
[HTML5] カメラをJSで操作し写真を撮影する - ねこの足跡R
HTML5ではPCやスマホのデバイスの機能をJavaScriptから直接利用することができるようになりました。今回はカメラを操作し、デジカメのような要領で静止画を撮影する簡単なサンプルを作ってみたいと思います。 カメラの映像が向かって左側に写り続け、良いタイミングで下にある「シャッター」ボタンをクリックすると、右側に撮影した静止画が表示されます。ボタンをクリックするとシャッター音も再生されます。 サンプル 実行例 ソースコード 解説 大まかな原理 カメラが存在しない場合は？ オプション 特に指定しない 解像度の最小値と最大値 素材 参考ページ サンプル 実行例 以下のページから実際にサンプルを実行できます。 miku3.net 初回のアクセス時にWebブラウザから、このサイトにカメラの操作を許可して良いか聞かれますので「許可」ボタンをクリックしてください。「ブロック」ボタンを押すと設定を変
![[HTML5] カメラをJSで操作し写真を撮影する - ねこの足跡R](https://cdn-ak-scissors.b.st-hatena.com/image/square/0e5f6ee7e86e2004df6e833b7ad30d66a04fb93e/height=288;version=1;width=512/https%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fk%2Fkatsube%2F20231125%2F20231125043913.png)
話題の「Recoil」を使ってTodoアプリ作ってみた with TypeScript - Qiita
はじめに Facebook公式から新しいステート管理のためのライブラリが公開されました。 その名もRecoilです。 特徴としては ミニマム Hooksではお馴染みのuseStateと同じようなAPI パフォーマンス問題が解決できる(Viewの再レンダリングを抑える) が挙げられるかと思います。 早速Todoアプリを作ってみましょう。 環境構築 $ npx create-react-app todo-recoil --typescript $ cd todo-recoil $ yarn add recoil 型定義しておく 意気揚々とTSで始めようとしましたが、型定義ファイルは2020/05/15 10時現在は無いようです。 ですが、TS supportがIssueで上がっていて、既に予定しているようです。 有志が型定義ファイルを作ってくださったみたいなので、今回はとりあえずそれを利用させ
ウィンドウ管理アプリの.phoenix.jsを使って、任意のアプリをSplit Viewのように左右に並べる
ウィンドウ管理アプリの.phoenix.jsを使って、任意のアプリをSplit Viewのように左右に並べる TwitterとDiscordを1つの画面で見たかったので、Phoenixを使って実現しました。 Phoenixは、アプリやウィンドウの位置やサイズをJavaScriptで管理できるmacOS向けのアプリです。 kasper/phoenix: A lightweight macOS/OS X window and app manager scriptable with JavaScript このPhoenixを使うことでmacOSのSplit Viewのように複数のアプリを任意の割合で左右に並べる実装を書きました。 macOSにはビルトインでSplit Viewという2つのアプリをSide by Sideで並べて表示できる機能があります。 Split View で Mac の Ap
The Basics of Web Workers | Articles | web.dev
The Basics of Web Workers Stay organized with collections Save and categorize content based on your preferences. The problem: JavaScript concurrency There are a number of bottlenecks preventing interesting applications from being ported (say, from server-heavy implementations) to client-side JavaScript. Some of these include browser compatibility, static typing, accessibility, and performance. For
React, Redux, GraphQLを学べるオンライン教材「Full Stack Open 2019」がとても良かった - FRTKL
この記事はコネヒト Advent Calendar 2019の11日目の記事です！ qiita.com はじめに 半年ほど前から新規事業のチームで仕事するようになり、主な技術スタックもPHPからGo, Next.jsへと変わりました。 その中で、特にフロントエンドのテスト周りにおいてキャッチアップ不足を感じていたのですが、たまたま見つけた*1「Full Stack Open 2019」という教材がとても良かったので紹介したいと思います。 「Full Stack Open 2019」とは fullstackopen.com フィンランドのヘルシンキ大学で実際に使われているテキストベースのオンライン教材です。 Nodeで作られたREST APIとReactを使ったSPAの実装を通して、React・Redux・Node.js・MongoDB・GraphQLが一度に学べる教材となっています。 教材
Intent to stop using `null` in my JS code · sindresorhus/meta · Discussion #7
I intend to stop using null in my code, in favor of undefined. There are many reasons for doing so. Feedback wanted Tweet: https://twitter.com/sindresorhus/status/1114894287387258886 Background http://2ality.com/2013/05/history-undefined.html Reasons From experience, most developers use null and undefined inconsistently and interchangeably, and few know when to use which. Supporting both null and
豆になるJS: イベントリスナーとthisと引数と - メヘンニミン
JavaScriptに関する初級～中級Tipsをいくつか書いていたのですが， 話題が膨らんじゃったので分離しました． はじめに thisを理解する 本題 thisを退避させる 無名関数を用いる call, apply, bindメソッドを用いる removeEventListenerを使用する場合 おわりに はじめに ブラウザで動作するJavaScriptでthisを用いた場合， 基本的にはグローバルオブジェクトであるwindowオブジェクトを指します． しかし，たま～～にthisの中身が異なる場合があります． 例えば，Web制作に扱われやすいマウスのイベントリスナー内のお話． イベントリスナーといえば，引数もどう設定するんだ！という疑問も出てくるんじゃないかと思います． 今回の議題を整理しましょう． イベントリスナー内のthisを制御するには？ イベントリスナーに引数を与えるには？ th
Nuxt.jsのbundleサイズを55%削減したwebpack周りの小技 - Qiita
// import _ from 'lodash' import escape from 'lodash/escape' export default function (string) { // ... return escape(string) } これでbundleされるのはescape関数のみとなります。lodashはgzippedのものでも25kbほどあるため、きちんと気をつけておきましょう。 2. Vuetifyのa-la-carte（110kb→20kb） VueのマテリアルUIフレームワークといえばVuetify.jsが人気でわたしもお世話になっています。 しかしそのままVue.use(Vuetify)のようにしてしまうと、Vuetifyの全てのコンポーネントなどがbundleされてしまいます。 そこでa-la-carte（フランス語で、メニューから選んだ/お好みの料理の、
ChromeのデベロッパーツールでJSをデバッグする方法(2022年版) - ICS MEDIA
JavaScriptのデバッグは、ウェブ開発の必須スキルのひとつです。プログラムの実行をデバッグすることで、現在の変数の値や、処理がどのように進んでいるのかを確認できます。デバッグによってプログラムが意図した動作になっているかの分析に役立てられます。 本記事ではGoogle Chromeブラウザーの「Chrome Developer Tools」（以下「デベロッパーツール」、「DevToolsデブ・ツールズ」という略称もあります）を使用してJavaScriptをデバッグする際の基本的な使い方を解説します。「今までデベロッパーツールを使ったことのない」という方でもこの記事を読めば理解できるよう、チュートリアル形式になっています。20分ほどで理解できるようまとめているので、順番に試しながら読み進めてください。 この記事で学べること デベロッパーツールの使い方 JavaScriptのブレークポイ
Vue.jsを100時間勉強して分かったこと - Qiita
Vue.jsを100時間ほど勉強して分かったことを整理します。 勉強時間の内訳は、 Udemyの Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex) をだいたい全て完了（85時間） 実際に自分でコードを書いてみた（15時間） です。 学習開始時のレベルは、JavaScript・jQueryはそれなりに扱うことができ、過去に少しだけReactを勉強したことがある感じでした（専門は Ruby on Rails）。 Vue.js 自体の構文 まず、Vue.js 自体の基本的な構文を整理します。 Vue インスタンス Vue インスタンスの書き方は次のような感じです。 new Vue({ el: "#app", data: { name: "Kei", age: "30", counter: 0 }, methods: { increas
VRM は Unity 専用じゃない！ブラウザで VRM 表示出来るものを作りました！ | VirtualCast Blog
ザ・シードオンライン には、 glTF 規格の拡張である VR 利用想定のヒューマノイドモデル拡張の VRM 及び、 VirtualCast 上でインタラクティブなアイテムを自由に作成出来る VCI をアップロードすることが出来ます。 以前はそれらのファイルをブラウザ上で閲覧するのに、 Unity の WebGL ビルドを用いていました。 しかし、2019年5月現在の Unity の WebGL ビルド(と Web Assembly)は、数 MB のランタイムのダウンロードと、起動処理に数秒かかるなどの難点が存在していて、ネイティブ(JavaScript)実装に置き換えたいという要望が出ていました。一部端末で正常に表示出来ないという問題もあります。 そこで、私山岸の調査の結果、 babylon.js を採用し、自前で VRM/VCI を出来るだけ正しく porting するプロジェクトを稼
【Vue.js】Web API通信のデザインパターン (個人的ベストプラクティス) - Qiita
はじめに Vue.jsを使用したアプリケーションでのWeb API呼び出しのデザインパターンについて調べてみました。 しかし検索して出てくるチュートリアルやサンプルは、コンポーネント内でaxiosをインスタンス化していたり、Vuexの中でaxiosを使用するというサンプルがほとんどでした。 しかし実際のプロダクトでこれをしてしまうと コンポーネント内でAPIアクセスの直書きによって単体テストが困難に Vuex(actions)の肥大化(使い回さない処理はStoreに記述しないほうがいいとする文献もある) API通信部分をPureJSでモジュール化しても依存度がイマイチ下がらない（コンポーネントでモジュールをインポートするため）。 などなど問題になることが多そうでした。 ある日、Jorge氏が投稿した「Vue API calls in a smart way」という記事にたどり着きました。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
とろろ on Twitter: "余談ですが、Node.jsのスター数をDenoのスター数が追い抜きそう。 https://t.co/2IwGp4DPPU https://t.co/EGtwxB3kYS"