日本政府発の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
Babel 7.10 Ships with Better React Tree-Shaking
Building Inclusive Mini Golf: a Practical Guide to Accessible XR Development Colby Morgan discusses practical strategies and technical examples for building accessible and inclusive XR experiences. Learn about their core design principles, including accessibility at the start, invisible features, simplicity, and layered depth, using Walkabout Mini Golf as a case study.
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 にライブラリコードを切り出すことで，キャッシュ効率をよくすることが主な目的でした． しかし時は流れ，いつしか「ライブラリのコー
JavaとJavaScriptでwebブラウザとのソケット通信① - Qiita
背景 [更新]：APIを使用して簡単に実装した ネット上で多人数同時通信のものを作成するため、ソケット通信について実践したことを記述。 チャットやオンラインゲームのような、複数でのリアルタイム通信を希望。 「webブラウザ」で実行できるようなプログラムを「Java」で組みたかったのだが、ググってもあまり出てこないので記述しておく。 (知識不足でネットワークプログラミングという言葉も知らなかったため、ググり方に問題があるかも…) データの読み書き等の超基本的なところからスタート。 通信方法の1種。 サーバーとクライアントに対して、HTTPのgetアクセスやpostアクセスのように単一方向への通信ではなく、リアルタイムでの双方向通信が可能。 ⇒ サーバープログラムとクライアントプログラムの2つが必要。 詳しくはググってほしい。 実行環境 windows10 eclipse (Tomcat8.5
オープンソースのJavaScript／TypeScriptランタイム「Deno 1.0」がリリース
Denoは、単一の実行ファイルとして提供され、外部コードのフェッチに対応しているので、他のツールを使用することなく任意の動作を定義できる。 コードはWebブラウザと同様にサンドボックス内で実行され、ストレージやネットワークへのアクセスなど、悪意のある行動につながるような操作は、標準では許可されていない。 JavaScriptのコードをスタンドアロンプロセスとして動作させるための取り組みとしては、すでにNode.jsが存在するが、Node.jsは多数のユーザーを抱えていることからシステムの進化が難しく、かつ時間がかかる。また、JavaScriptの仕様変更や、TypeScriptのような派生言語の登場が、今後のNode.jsの開発を困難にする可能性がある。 さらに、Denoの開発者は、Node.jsにおける外部ライブラリとのリンクがNPMリポジトリを介して一元化される点が、Webの理想と一致
JavaScriptコードの静的解析ツール「ESLint v7.0」リリース | OSDN Magazine
JavaScriptの静的コード解析ツール「ESLint」開発チームは5月8日、最新のメジャーリリース版となる「ESLint v7.0.0」を公開した。 ESLintはJavaScriptコードの問題を検出できる静的なコード解析ツールで、さまざまなテキストエディタに組み込まれている。ほとんどの問題に対して自動的なコード修正が可能で、また構文解析を行っているため、検索・置換型で発生するような誤認識などのエラーが起きないという。 ESLint v7.0は2019年6月に公開されたESLint v6.0に続くメジャーリリース。Node.jsのバージョン8系が2019年12月にサポート終了を迎えたことを受け、最新版ではそのサポートが削除された。 コードルールでは、複数のルールでbigintを認識するようにアップデートした。また、Node.js/CommonJSルール10件が非推奨となった。esli
2020-05-12のJS: ESLint v7.0.0、Next.js 9.4、npm 7の変更予定
JSer.info #487 - ESLint 7.0.0がリリースされました。 ESLint v7.0.0 released - ESLint - Pluggable JavaScript linter ESLint v7.0.0 の変更点まとめ - Qiita メジャーアップデートであるため、ビルトインルールの変更が含まれています。 eslint:recommendedのルールを更新、いくつかのビルトインルールのデフォルトオプションの変更、Node.js関係のビルトインルールをeslint-plugin-nodeへ移行などが行われています。 また、.eslint.jsをデフォルトでignoreしないように変更、--configや--ignore-pathオプションでのパスの扱いの変更、プラグインの読み込み元ディレクトリが.eslintrc.*を基準とする変更なども含まれています。 その
Next.jsで個人サービス作ったので技術スタックを公開する｜Vexus2
一昨日「買って応援！」というサイトをリリースしました。 コロナの影響で打撃を受けている生産者や飲食店、販売店の方々が「廃棄になるよりは･･･」という思いで各所で販売されていますが、情報が散らばっていたのでまとめている【買って応援！】するためのサービスです。 割とモダンな構成で作っているかなと思うので、使用している技術・サービス周りを少しまとめてみました。 Frontend今回は初めてProductionでNext.js(React)を使いました。 元々自分はNuxt.js(Vue)を書くことが多く、いつもだったら「Nuxt.js(Vue) + Firebase + Heroku + Algolia (+ 必要に応じてFastly)」を採用することが多いんですが、直近のNext.js 9.3から強力なSSGサポートが入ったこともあり、個人でやるんだしせっかくなら、ということでフレームワークも
next.js の amp モードで tailwind.css を purgecss と合わせて使う
このリポジトリ でやったこと。 やろうとしたこと tailwind.css は Utility First と銘打った CSS フレームワークで、コンポーネント化を前提としたモダンフレームワークと相性がいいです。今回は next.js の amp-mode で tailwind を使おうとしてみました。 Tailwind CSS - A Utility-First CSS Framework for Rapidly Building Custom Designs 問題 前提として、 amp には inline css の容量制限があり、75kb を超えると AMP と認識されなくなります。 tailwind はビルドして使うのが前提のフレームワークですが、全部入りの tailwind.min.css は 1.3 M あります。これでは到底、75 kb に収まりません。 AMP の CSS
Nginx + Nuxt.js + Django REST frameworkの実装 - Qiita
初めに 前回投稿の続きで、Nuxt.js + Django REST frameworkで動くアプリケーションをnginxに乗せていきます。 構成イメージ 下記4つのコンテナがあります。 前回投稿からnginxコンテナを加えています。 ・初回ページ表示 ①nginx経由でnuxtコンテナにアクセス ②nuxtコンテナでSSRする。この際APIを叩きdjangoからDBの情報を取得する。 ③レンダリングしたページをユーザに返す ・ページ中でAPIを叩いた場合 nginx経由でdjangoコンテナにアクセス、結果をユーザに返す。 環境 Window10 Pro Docker desktop v2.1.0.5 Python 3.6.9 django 2.2.7 djangorestframework 3.10.3 Nuxt.js v2.11.0 nginx 1.13.12 ディレクトリ構造 .
Wixでjavascript入門 - Qiita
Wixでちょっと凝ったページを作るときのjavascriptメモ Wixでは結構簡単にショッピングページを作ることができるんだけど、ビミョーに融通が聞かない。いつものパン屋さんから、コロナの影響で日付ごとにデリバリーの地域が異なるんだけど、配達対象外の地域を弾くインターフェースを作れないか、相談があって、javascriptでいろんなソースを見ながら書いてみたので、ここにまとめておく。初心者なので、このコードのここがダメっていうのもあれば是非。イギリスのポストコード判定はこちらのサイトを丸パクリした。 用件 イギリスのポストコードSW7 2AZとか、W3 9AEとかからエリアコード（SW7, W3）を抽出して、配達できるかどうか表示して、配達できるならオンラインショップのページを表示する機能を作ってみた。 // For full API documentation, including c
ESLint v7.0.0 の変更点まとめ - Qiita
overrides: - files: "*.js" extends: my-config-js - files: "*.ts" extends: my-config-ts のような設定がある場合、eslint lib コマンドは lib ディレクトリ内の *.ts ファイルもチェックします。 なお、eslint lib/** のように Glob パターンを指定した場合は今まで通りに動作しますのでご注意ください。overrides 設定にかかわらず Glob パターンにマッチする全てのファイルをチェックします。 プラグイン開発者へ: あなたが管理するプラグインが *.js 以外のファイルを対象にするルールを提供する場合、recommended設定に overrides を追加すると利用者は便利かもしれません。 動作を元に戻したい場合: 今まで通り overrides 設定にかかわらず *.
download - JavaScriptで簡単にファイルダウンロード実行
Webアプリケーションなどでファイルをダウンロードさせたいと思ったことはないでしょうか。別なタブで開いて自分で保存してくださいというのは格好悪いです。ZipなどであればWebブラウザ任せですが、画像などはそうはいきません。 そこで使いたいのがdownloadです。とても簡単で使いやすいダウンロードライブラリです。 downloadの使い方 テキストの場合です。文字列、data、Blob、ファイル指定と様々な方法が用意されています。 download("hello world", "dlText.txt", "text/plain"); download("data:text/plain,hello%20world", "dlDataUrlText.txt", "text/plain"); download(new Blob(["hello world"]), "dlTextBlob.txt
TypeScript/JavaScript/Pythonの自動言語変換の話 - Qiita
この記事はGWアドベントカレンダーの「なにか新しいことにチャレンジするカレンダー」の5/6記事です。 APIを策定し、SDKを作る側になると、どの言語に対応するかという悩みが出てきます。 SDKを作る労力は最小限にしたいので、できればどれか一つの言語で作ったらそれを他の言語に自動変換したいですよね。 自動変換できる！！とまでは行かないものの、結構惜しいところまで出来てるんじゃないかなというライブラリをまとめてみました。 ※どのライブラリも惜しい！もう一歩！ というところで、完全に自動変換は難しそうでした。9割自動変換→のこり1割手動で治す みたいなやり方であればうまくいきそうです。 JavaScript -> TypeScript Javascriptの6割の人はTypeScriptも使ったことがある・・・みたいな話もありますが、旧いライブラリはまだJavaScriptですよね。移行コスト
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Setting up efficient workflows with ESLint, Prettier and TypeScript
Amazon.co.jp: Javascript for Babies (Web Design for Babies): Sterling Publishing Co., Inc.: 本
