Vue.js & Nuxt.js から React & Next.js へ移行した理由 | fwywd（フュード）powered by キカガク2021 年から React ベースのフレームワークである Next.js を本格的に学び始めました。 昨年 2020 年は Vue.js ベースのフレームワークである Nuxt.js にどっぷりと使った１年であり、昨年リリースした キカガク (kikagaku.ai) など、本運用に乗せるところまでプロダクト開発チームで学びながら進めていきました。 その昨年に１年間もかけて知見を貯めた Vue.js & Nuxt.js を離れて、React & Next.js へ移行した背景を紹介します。
microCMS SDK + Next.jsを用いた開発手順
こんにちはhiro08です。 現在フロントエンドエンジニアとしてmicroCMS本体の開発に携わっていて、日々サービスの新機能開発や改善を行っています。 そして、先日リリースされたmicroCMSのJavaScript、iOS、Android SDKの3つのうち、JavaScript SDKの開発を担当させて頂きました。リリース時のブログはこちらです。 microcms-js-sdkはnpmで配布されていて、GitHubにオープンソースとして公開されています。 ※現在はGetリクエストのみに対応しています。今後、機能追加や改善していく予定です。 SDKを用いて開発するメリットとしては、Fetch APIやXMLHttpRequest等のネットワーク通信に関する処理を隠蔽できることにあります。冗長的になりがちなリクエスト処理を、メソッド化することによって一貫性があり、クリーンなコードを書くこ
webcontainer とは
stackblitz が提唱して実装している node.js が動くブラウザ環境。container といってるが、 Docker 等とは関係ない。 stackblitz/webcontainer-core このコンテナはブラウザ内で node.js (らしきもの)が動くことがターゲットで、現在デモとして next.js をビルドしてプレビューできている。これによって node.js + webpack + next.js cli が動いていることがわかる。 デモはここで試せる。 まだ OSS ではないので、この記事の大部分は想像によって書かれている。 webcontainer 概要 (自分の理解なので話半分に) ブラウザサンドボックスでも electron なしでも動かせるようになってきた。しかし現在 node.js を動かすには色々と欠けている部分があるので、それらを総称して webc
オリジナルのJavaScriptライブラリを公開しよう
オリジナルのJavaScriptライブラリを公開します！ ライブラリの作り方よりかは、実際に公開する手順やCI/CDについて解説します。 【技術】 ・ JavaScript ・ Node.js ・ npm/yarn ・ Mocha ・ Chai ・ Git/GitHub ・ GitHub Actions
アクセシブルじゃないクリックイベントを発見する
(() => { "use strict"; const elements = Array.from(document.querySelectorAll("*")); const clickEvents = elements .map((element) => { const listeners = getEventListeners(element); const clickListeners = listeners.click || []; clickListeners.forEach((event) => (event.owner = element)); return clickListeners; }) .flat(); for (const event of clickEvents) { if (event.owner.matches("button, a[href]")) {
Web worker meets worker threads - threads.js
Transparent API Write code once, run it everywhere – in web workers and node worker threads. Call workers transparently, await results. It's never been easier. // master.js import { spawn, Thread, Worker } from "threads" const auth = await spawn(new Worker("./workers/auth")) const hashed = await auth.hashPassword("Super secret password", "1234") console.log("Hashed password:", hashed) await Thread
認証用トークン保存先の第4選択肢としての「Auth0」 | ログミーBusiness
iCARE Developer Meetupは、月次で開催している株式会社iCAREが主催するエンジニア向けのLT勉強会です。18回目の今回は、Ruby on Railsをテーマに行いました。サーバーサイドエンジニアの越川氏からはToken認証機能について。 Rails APIモードで開発するときの認証用のトークンはどこに保存すればいいの問題越川佳祐氏：私からは、「Rails APIモードにおけるToken認証機能について」というテーマでLT（ライトニングトーク）をしようと思っていたんですが、スライドを作っていて「あれ、これ別にRailsだけの話じゃなくない？」と思ってしまいました。みなさんの中にも、そう思う方がいるかもしれないんですが、もうこれで作っちゃったのでご了承ください。 私は株式会社iCAREで、サーバーサイドエンジニアをしている、越川と申します。Twitterは@kossy07
2021年5月のWebサーバ利用シェア、「Nginx」が「Apache」を初めて上回る
Q-Successは2021年5月4日（米国時間）、Webサーバ技術の使用サイト数に基づく市場シェア調査結果を発表した。「Nginx」と「Apache」がともに33.8％を占め、わずかな差でNginxが首位、Apacheが2位となった。 2009年にWeb技術調査サービス「W3Techs - World Wide Web Technology Surveys」が開始されて以来、NginxがApacheを抜いて首位となったのは、今回が初めてだ。 2009年のシェアはNginxが3.7％、Apacheが73％超、Microsoftの「インターネットインフォメーションサービス（IIS）」が20％程度だった。Apacheのシェアは、1年前はNginxを6.6ポイント上回っていたものの、一貫して低下傾向が続いている。 調査対象のWebサーバ技術の数は現在、98に達しており、2021年5月4日付の市場
2021年に知っておきたいJavaScript最適化技術34選 - Qiita
本記事は、Atit氏による「34 JavaScript Optimization Techniques to Know in 2021」（2021年1月3日公開）の和訳を、著者の許可を得て掲載しているものです。 2021年に知っておきたいJavaScript最適化技術34選 最新の省略テクニック、コツ、秘訣で、JavaScriptコードを最適化する。 開発者の生活というのは常に新しいことを学ぶことで、その変化についていくことは決して難しいことではありません。私は、フロントエンド開発者として知っておく必要のある省略形や機能など、JavaScriptのすべてのベストプラクティスを紹介して、2021年の生活をより快適にしたいと考えています。 JavaScript開発に長く携わっている人でも、コードを追加しなくても問題解決できるような最新機能を知らないこともあるかもしれません。ここで紹介するものは
スクロールに応じて任意の要素をアニメーションさせる超軽量スクリプト・「animon」 - かちびと.net
animonはスクロールに応じて任意の要素をアニメーションさせる超軽量スクリプトです。非依存型で単体で動作します。 ScrollTrigger.jsの機能をやや抑えて軽量化した、みたいな感じでした。使い方も導入もとても簡単です。 <link rel="stylesheet" href="https://unpkg.com/animon@1.0.1/dist/animon.css"/> <script type="text/javascript" src="https://unpkg.com/animon@1.0.1/dist/animon.iife.js"></script> <script type="text/javascript"> Animon.animon(); </script> CSSとJSを読み込んで初期化。これで準備完了です。設定は加須亜夢データ属性で行います。 <h1
Google発のJavaScriptで書けるシェル 「zx」 | DevelopersIO
Introduction シェルを書きたいときにBashは手軽に使えるけど、 少し込み入ったスクリプトを書こうとするとちょっと面倒。 NodeいれてJavaScript書くのもいいけど、 いろいろセットアップが手間。 そんな人にピッタリはまるかもしれないのがzx。 Google発、JavaScriptで記述できるシェルです。 Top Level await使ってシェルコマンドがそのまま使用可能です。 また、Promise.allでコマンド並列実行ができたりするので便利です。 Environment OS : MacOS 10.15.7 Node : v14.16.1 Top Level awaitがサポートされたNode(v14.8)以降が必要ぽい？ Setup では早速セットアップしてみます。 npmでzxをグローバルインストール。 % npm i -g zx % zx usage: z
トランスパイラ「Babel」の開発チーム、「何百万人にも使われているのに、なぜ私たちの資金は尽きようとしているのか？」。資金難により寄付を訴え
トランスパイラ「Babel」の開発チーム、「何百万人にも使われているのに、なぜ私たちの資金は尽きようとしているのか？」。資金難により寄付を訴え 「Babel」は、JavaScriptコンパイラもしくはトランスパイラの代表的なツールとして知られており、FacebookやSpotify、Slack、MongoDBなどさまざまな企業や開発現場で使われています。 そのBabelの開発チームが資金難になっていることを、開発の中心となっているコアチームがブログ「Babel is used by millions, so why are we running out of money?」（Babelは何百万人にも使われているのに、なぜ私たちの資金は尽きようとしているのか？」で明らかにしています。 Babelとは、ECMAScript 15以降のいわゆるモダンなJavaScriptの構文や機能を活用して書
WinBox - HTML5 window manager
WinBox is a modern HTML5 window manager for the web. Lightweight, outstanding performance, no dependencies, fully customizable, free and open source! Please feel free to support me by making a personal donation which helps me a lot to keep this project alive and also to providing all the contribution to keep WinBox.js on a professional top-end level. Thanks a lot, Thomas (ts-thomas) Load Library (
Hello, Modules!
It has already been available for some time in modern browsers, but we can now finally use it in Node.js, thanks to Node.js 10 becoming obsolete. As I wrote about earlier this year, I have personally been waiting for this day for 10 years. Here’s a good overview of JavaScript Modules. What are the benefits of JavaScript Modules over CommonJS?Unified syntax. Helps with teaching.Browser compatibilit
HTML Sanitizer API - Web APIs | MDN
Deprecated: This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that thi
React開発効率を3倍にするVS Code拡張機能&環境設定 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? この記事を読むと VSCodeを最適化することで、React開発効率が加速します。 関数コンポーネントの雛形が一瞬で出来る。しかもファイル名がそのままコンポーネント名になる ES6の作法に則った作法で自動でコード整形してくれる。どういう時に関数内の()が省略できるか等を覚えなくて良い useEffectの最適な第二引数を自動で補完してくれる コンポーネントのimport文を自動で挿入してくれる なぜこの記事を書いたのか VSCodeは素晴らしいテキストエディタです。 特に、React開発においてはもはやデファクトスタンダードです(長年愛
AWS、エッジにおけるJavaScript実行環境に本格参入。Cloudflare WorkersやDeno Deployなどと競合へ
AWS、エッジにおけるJavaScript実行環境に本格参入。Cloudflare WorkersやDeno Deployなどと競合へ Amazon Web Services（AWS）は、エッジ環境で軽量なJavaScriptによる処理を実行可能な新サービス「Amazon CloudFront Functions」を発表しました。 AWSではすでにエッジで処理を行う「Lambda@Edge」を提供しており、そこでNode.jsとPythonによるコードを実行可能です。 しかしLambda@Edgeは13カ所のリージョナルエッジキャッシュにおいて処理が行われるのに対し、CloudFront Functionsは218カ所以上のCloudFront Edge Locationsにおいて処理が行われるため、よりユーザーに近い広範囲なロケーションで実行されます。 また、実行時間もLambda@Ed
ブラウザレンダリングの仕組み
Webの用語を100秒で解説するチャンネルを作りました！ よかったらチェックしてみてください！ はじめに 以前書いた記事「Webページがブラウザに表示されるまでに何が起こるのか？」で ブラウザレンダリングについて詳細に知りたいという意見をいただいたので、調べてまとめてみました。 全体図 レンダリングの大まかな流れです。 HTMLのダウンロード サーバから送られてきたHTMLをダウンロードします。 HTMLの解析 サーバから送られてきたHTMLファイルは、「0」と「1」でできたデータになっています。 ブラウザは、サーバから受け取ったデータをそのままHTMLとして解釈することはできないので、自分で扱うことができる形、つまりDOMに変換する必要があります。この作業を 解析 ( Parse ) と言います。 HTMLをダウンロードしたら、すぐにこの解析作業に入ります。作業は以下のようなステップにな
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Explore DOM Events
Effective Deno
