Hey Next.js, Is Server Side Rendering Dead?
Next.js is not the first solution to introduce SSR with React, but it shows an excellent way to fetch data(AKA: getInitialProps). With that, we could build pages without worrying about how and when to render them. export default function HomePage({ name }) { return ( <div> Hello, {name} </div> ) } HomePage.getInitialProps = async function() { // Fetch some data from an external API return { name:
SkyWayとTone.jsを使って、ボイスチェンジャー付きボイスチャットアプリを作る - Qiita
こちらのは2026年4月でサービスを終了する旧SkyWayについての記事です 現在のSkyWayとはAPI仕様が異なります 現在のSkyWayの仕様については、以下開発者ドキュメントをご覧ください。 https://skyway.ntt.com/ja/docs/user-guide/ 最近ちまたでは、リモート会議や飲み会で、自分のカメラ映像をsnapCameraで面白おかしく加工するのが流行っています。 映像だけでなく、声も加工したくなるとき、ありますよね？ ・・・ありますよね？（・・・きっとあるから読んで頂けているはず。） 自分の声を加工するためには「バ美声」などのボイスチェンジャーアプリと仮想オーディオデバイスが必要です。しかし、これらを用意するには手間がかかるし、仮想オーディオデバイスは割とトラブルがつきものです。。。 そこで、手間無しで、トラブルに悩まされることも無く、誰でも簡単に
JavaScriptだけでExcel風のスプレッドシートを開発できる「jExcel」を使ってみた！ -
どうも、まさとらん（@0310lan）です！ 今回は、JavaScriptで簡単にExcelのようなスプレッドシートを作成できるライブラリをご紹介します！ 基本的な操作はすべてJavaScriptから制御可能であり、自分の好きなようにカスタマイズできる強力な機能が多数提供されています。また、簡単なプログラムだけでファイルの書き出し機能が利用できるなど便利なメソッドも多く含まれています。 自作のWebアプリなどにも手軽に組み込めるので、ご興味ある方はぜひ参考にしてみてください。 なお、JavaScriptの基本はpaizaラーニングの「JavaScript入門編」で学ぶことができますので合わせてチェックしてみてください。 【 jExcel 】 ■「jExcel」の使い方 それでは、まず最初に「jExcel」の導入方法から見ていきましょう！ 全部で3通りの方法が以下のように提供されています。
Nuxt.js+Firebaseの認証・認可を実装した雛形プロジェクトを公開しました - Qiita
この記事について NuxtとFirebaseを使って、これまでいくつかサービス開発をしていますが、認証/認可の実装はどのサービスでも毎回同じようなコードを書いている気がします。 サービスとしてのコア部分ではないですが、センシティブな部分なのでしっかりと調べながら実装すると結構大変ですよね（毎回時間がかかってしまいます）。 ここ最近のサービスはNuxt +Firebaseで開発することが多く、認証 / 認可のコードベースのTipsが貯まってきたので公開したら需要あったりするのかな？ サンプルになりそうなプロジェクト見当たらないし、コアな部分ではないのであまり楽しくないし...。 雛形のプロジェクトとして需要あれば公開します👍 — フジワラユウタ | SlideLive▶️ (@Fujiyama_Yuta) June 7, 2020 自分だけではなく、いろんな人が同じような課題感を感じている
2020-06-09のJS: Firefox 77.0、HTML5 Boilerplate 8.0.0、React TypeScript Cheatsheets
JSer.info #491 - Firefox 77がリリースされました。 New in Firefox 77: DevTool improvements and web platform updates - Mozilla Hacks - the Web developer blog Firefox 77.0, See All New Features, Updates and Fixes Firefox 77 サイト互換性情報 | Firefox サイト互換性情報 Firefox 77 for developers - Mozilla | MDN 開発者ツールのSource Mapロード時間の改善、デバッガーのステップ実行の改善、ネットワークパネルの改善などが行われています。 またES 2021で入る予定のString#replaceAllの実装、JPEG画像がExifデータに基づい
JavaScriptの歴史については「JavaScript: The First 20 Years」を読む
JavaScript/ECMAScriptというプログラミング言語の歴史について書いた文章はWikipediaなどいろいろなものがあります。 その中でも、ECMAScript 2015のSpec EditorであるAllen Wirfs-Brockによって書かれた”JavaScript: The First 20 Years”が特におすすめです。 JavaScript: The First 20 Years JavaScript: The First 20 Years | Zenodo “JavaScript: The First 20 Years”はHOPL IV - History of Programming Languages向けに書かれたPaperです。 JavaScriptの誕生からECMAScriptの策定、ECMAScript/JavaScript各バージョンでの違い、ブラ
JavaScript: The Definitive Guide, 7th Edition
2.1 The Text of a JavaScript Program2.2 Comments2.3 Literals2.4 Identifiers and Reserved Words2.4.1 Reserved Words2.5 Unicode2.5.1 Unicode Escape Sequences2.5.2 Unicode Normalization2.6 Optional Semicolons2.7 Summary 3.1 Overview and Definitions3.2 Numbers3.2.1 Integer Literals3.2.2 Floating-Point Literals3.2.3 Arithmetic in JavaScript3.2.4 Binary Floating-Point and Rounding Errors3.2.5 Arbitrary
国税庁法人番号を使った経産省発、法人種別名の抽出コンポーネントのESモジュール版公開
ブラウザやDenoでサクッと動く、法人番号からの検索するESモジュールができました。 好評な経産省によるオープンソース「IMIコンポーネントツール」の7つ道具、一通りできました！ 「IMIコンポーネントツール」法人種別名の抽出コンポーネント追加(src on GitHub) サンプルとしていれている番号はどんな法人でしょう？ [変換]ボタンを押してみまてください。 使い方は簡単です。下記コードを main.html として保存して、ブラウザで開くだけ！ <script type="module"> import IMIEnrichmentHojin from "https://code4sabae.github.io/imi-enrichment-hojin-es/IMIEnrichmentHojin.mjs"; const main = async () => { const json
JavaScriptの非同期処理Promise、AsyncとAwaitの仕組みをGIFアニメで解説
JavaScriptの非同期処理Promise、AsyncとAwaitの仕組みをGIFアニメで解説した記事を紹介します。 ⭐️🎀 JavaScript Visualized: Promises & Async/Await by Lydia Hallie 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに コールバック地獄 Promiseの構文 イベントループ: Microtasksと(Macro)tasks AsyncとAwait はじめに JavaScriptのコードが期待通りに実行されないことに悩まされたことはないですか？ おそらく、関数が不規則に実行されたり、予測できないタイミングで実行されたり、実行が遅れたりしたことがあるかもしれません。そして、ES6で導入された新機能Promiseが原因かもしれません！ 何年も
日本政府発のJavaScriptライブラリを勝手にweb標準化するプロジェクト、全角-半角統一コンポーネントのESモジュール/Deno対応版公開
全角半角という言葉は、パソコン普及前夜のワープロ時代の遺物。「住所を全角で入れてください」など、優しくないお願いは排除し、必要な処理はプログラムでしましょう。 日本政府、経済産業省（経産省）から「IMI 情報共有基盤 コンポーネントツール」が発表されました。 5つ星オープンデータの語彙を定める「共通語彙基盤IMI」に関連したオープンソースなJavaScriptで作られたツール群です。 Node.js を前提に作られていますが、ブラウザや Deno で動かしたいので、ひとまず簡単そうな「全角-半角統一コンポーネント」を移植。インストール不要で下記のようにすっきり使えるものができました！(src on GitHub) $ cat > main.mjs import IMIMojiConverter from "https://code4sabae.github.io/imi-moji-conv
Concepts | webpack
At its core, webpack is a static module bundler for modern JavaScript applications. When webpack processes your application, it internally builds a dependency graph from one or more entry points and then combines every module your project needs into one or more bundles, which are static assets to serve your content from. Since version 4.0.0, webpack does not require a configuration file to bundle
Stack Overflowの調査によると、デベロッパーの5割以上が「フルスタック」エンジニアを自認。最も使われている言語はJavaScript、最も愛されている言語はRust
IT技術者向けQ＆Aサイトとして知られるStack Overflowは、同サイトの利用者6万5000人のデベロッパーの回答から得られた調査結果「2020 Developer Survey」を発表しました。 調査は今年の2月に行われ、北米、南米、欧州、アフリカ、アジアなどグローバルに広がる同サイトの利用者から回答が寄せられました。調査結果は回答者であるデベロッパーの年齢や学歴、プログラミング開始年齢、現在の地位や役割、使っているプログラミング言語やフレームワーク、好みのプログラミング言語や嫌いな言語、好きなプラットフォームなど多岐に渡っています。 回答者の地理的分布は、米国が19.5％、カナダが3.4％、英国6.1％、ドイツ6.1％、インド13.1％、ロシア1.7％、中国0.6％、日本0.5％などとなっています。 ここでは調査結果から4つだけ見どころを紹介したいと思います。 1つ目は「Dev
webpackの次のバージョンで入るassetModulesの紹介 - 技術探し
この機能が導入されることにより、{raw/file/url}-loader が不要となります。 webpack@4 でも使えますが、まだ実験的フェーズです。 Documentation Asset Modules | webpack webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.
決定版！イマドキの ESLint 設定！ | DevelopersIO
2021 年度版は Zenn に書きましたのでご覧ください。 ESLint 設定を作成する技術 そろそろ書かねばな、と思っていたところに必要としてくださる方がいらっしゃることがわかったので書きました。 eslint, eslint-plugin-prettier, typescript-eslintの組み合わせは僕の中では完全に鉄板になったんだけど、「決定版！イマドキのESLint設定！」みたいなタイトルの煽り記事を書く元気はないんだよな…… — なかざん (@Nkzn) June 1, 2020 2020 年 6 月現在のまとめです。 TL;DR 先にベースの完成形となる設定ファイルをおいておきます。 JSON に比べ YAML のほうが記述量が少なく構造が把握しやすいので YAML で書いています。次の内容をプロジェクトのルートディレクトリーに .eslintrc.yml として保存し
vendor.js の終焉と Granular Chunks - 徒然技術日記
webpack を使った code splitting のベストプラクティスとして，v3 以前の CommonsChunkPlugin の時代から node_modules 以下に置かれている依存ライブラリを vendor.js という単一の chunk にまとめる方法が紹介されていました． これは webpack の公式ドキュメント Caching | webpack や Google の Make use of long-term caching | Web Fundamentals | Google Developers でも説明されている通り，「ライブラリのコードはアプリケーションコードに比べると更新頻度が低い」という仮定のもと vendor.js にライブラリコードを切り出すことで，キャッシュ効率をよくすることが主な目的でした． しかし時は流れ，いつしか「ライブラリのコー
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Chrome、JavaScriptやWebViewに関する脆弱性を修正
Learn JavaScript by building a UI framework: Part 6 - Intro to Virtual DOM Algorithms
Developer, Author, and Speaker | Juan Cruz Martinez
Setting up efficient workflows with ESLint, Prettier and TypeScript
Babel 7.10 Ships with Better React Tree-Shaking
