ScalaコードからJavaScriptコードを生成できる「Scala.js 1.0」リリース | OSDN Magazine
ScalaコードをJavaScriptコードにコンパイルするツールを提供するScala.js開発プロジェクトは2月25日、正式版となる「Scala.js 1.0.0」を公開した。 Scala.jsはScala言語で実装されたコードをWebブラウザやJavaScriptランタイムなどで実行できるJavaScriptに変換するツール群。Scalaは強力な型付け機能を備えており、その特徴をWebアプリケーション開発などに生かせるという。また、高い最適化機能やJavaScriptランタイムとの互換性もあるという。ライセンスはApache License 2。 2013年にバージョン0.1が公開されて以来、約7年をかけてバージョン1.0.0に到達した。本バージョンではデフォルトでECMAScript 2015準拠のコードを出力するようになり、JavaScriptライブラリとの相互運用性を強化した。S
ブラウザとnode.jsに両対応したライブラリを作りたいときのWebpackレシピ集 - Qiita
概要 Webpackを使ってNode.jsとブラウザに両対応したライブラリを作るときのレシピ集です いろいろなレシピを見てWebpackによるライブラリ生成の挙動を理解することを目的としています ブラウザにもNode.jsにも両対応したライブラリを作りたい ブラウザとNode.jsに両対応したいとおもったとき、 両方同時に対応した1つのバンドルjsを作る【統合型】と、 ブラウザ用、Node.js用と別々にライブラリを出し分ける【出し分け型】の2パターンある。 本稿では主に**【統合型】**について説明する ライブラリのビルドに関するWebpack設定項目 レシピ集に行く前に、 まず、ライブラリのビルドに関する設定項目をざっくりみていく。 webpack.config.js 以下のような典型的なwebpack.config.jsの中でoutput以下の項目でライブラリ生成のためのパラメータを
ローカルファイル・カメラ・SNSなど、さまざまな画像に対応したJavaScriptの画像アップローダー -Uppload
デスクトップからの画像ファイルはもちろん、PCのカメラで今撮影した写真のアップロード、写真サイトからのアップロード、Twitter、Instagramからのアップロードにも対応したJavaScriptの画像アップローダーを紹介します。 Vue.js、Reactなどのフレームワークも完全にサポートしており、オープンソースで利用できます。 Uppload Uppload -GitHub Upploadの特徴 Upploadのデモ Upploadの使い方 Upploadの特徴 Upploadはカスタマイズにも対応した、JavaScriptの画像アップローダーです。 写真画像をドラッグアンドドロップでアップロード。 PCのカメラで撮影した写真画像をアップロード。 写真画像をサイト（Unsplash、Pexels、Pyramidなど）から検索してアップロード。 写真画像をWebサービス（Twitte
JavaScriptのモダンな書き方 - ES2020のオプショナルチェーン、null合体演算子、動的import、globalThis等を解説 - ICS MEDIA
JavaScriptのモダンな書き方 - ES2020のオプショナルチェーン、null合体演算子、動的import、globalThis等を解説 JavaScriptの仕様であるECMAScriptは年次で仕様が更新されています。ECMAScript 2020（ES2020）は2020年6月にリリースとなりました。現行のすべてのブラウザでES2020の機能は利用できますが、フロントエンドエンジニアにとって使いこなしたい記法ばかりです。 本記事ではES2020に焦点をあて、JavaScriptの新しい記述方法のメリットと使いどころを解説します。 オプショナルチェーン Optional Chaining（オプショナルチェーンやオプショナルチェーニングと呼ばれています）とは、?.構文を用いてnullやundefinedになりうる値へ安全にアクセスできる仕組みです。 利用シーン nullやunde
JavaScriptエンジンの仕組みをGIFアニメで分かりやすく解説
Node.jsおよびChromiumベースのブラウザで使用されるJavaScriptエンジンの仕組みについてGIFアニメーションで分かりやすく解説された記事を紹介します。 🚀⚙️ JavaScript Visualized: the JavaScript Engine by Lydia Hallie 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 JavaScriptを視覚的に解説: JavaScriptエンジン JavaScriptはクールです（私はそう思います）が、あなたが書いたコードをマシンが実際に理解するにはどうすればいいのでしょうか。JavaScriptデベロッパーは通常、コンパイラを自分で扱う必要はありません。しかし、JavaScriptエンジンの仕組みを理解し、人に優しいJavaScriptコードをどのように処理
Next.jsのドキュメントを全部読んでみた - $shibayu36->blog;
最近Next.jsのドキュメントが更新されて、APIリファレンスが付くなど読みやすくなったので、この機会に全部読んでみた。メモを置いておく。 https://nextjs.org/docs/routing/introduction#dynamic-route-segments pages/post/[…all] → /post/* (/post/2020/id/title) こんなことできるのか！ただ全部吸い込まれるのは使いづらそう https://nextjs.org/docs/routing/shallow-routing router.pushにshallowオプションを加えると、getInitialPropsを実行しないレンダリングができる。ページ内でクエリやハッシュフラグメントを変えるなどで便利に使えそう import { useEffect } from 'react' imp
JavaScript プロトタイプ継承の仕組みをGIFアニメで分かりやすく解説
JavaScriptにはどのオブジェクトにもプロトタイプと呼ばれる便利な隠しプロパティがあります。プロトタイプ継承の仕組みについてGIFアニメーションで分かりやすく解説された記事を紹介します。 🎉👨👩👧👧 JavaScript Visualized: Prototypal Inheritance by Lydia Hallie 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 JavaScriptを視覚的に解説: プロトタイプ継承 文字列や配列、オブジェクトに対して.length, .split(), .join()のような組み込みメソッドを使用できるのか、疑問に思ったことはありませんか？ それらを明示的に指定したことはありませんが、どこからきたものでしょうか？ これは、プロトタイプ継承（prototypal in
2019 JavaScript Rising Stars
Welcome to the 4th edition of JavaScript Rising Stars! Let's see by the numbers the projects that got traction on GitHub in 2019. The following graphs compare the number of stars added on GitHub over the last 12 months. We analyzed projects coming from Best of JS, a curated list of the best projects related to the web platform. Note that you can click on a project to get more info.
2020 年、 React 軸で学ぶべき技術 - mizchi's blog
なぜ仮想 DOM という概念が俺達の魂を震えさせるのか - Qiita から 5 年経ち、 仮想 DOM を備えた React やそれを採用した Vue や他のライブラリも市民権を得たように思います。 有用な技術が市民権を得る、というのはエコシステムが花開くことでもあります。新しいプロダクトを作る際の技術選定において、 TypeScript + React が常に正解というわけではないですが、このスタックはかなり強力だという手応えがあります。 このスタックは得意のウェブフロントエンドは勿論、それ以外もとりあえず 80 点ぐらいの品質でプロトタイピングできる、というようなエコシステムになってきたような肌感があります。 モダンフロントエンドだと TypeScript と Webpack は採用しているのを前提として、本記事では React を軸にその技術を活かすために、次の 6 個の技術を紹介
GitHub - antvis/G6: ♾ A Graph Visualization Framework in JavaScript.
Introduction • Examples • Quick Start • API G6 is a graph visualization engine. It provides basic capabilities for graph visualization and analysis such as drawing, layout, analysis, interaction, animation, themes, and plugins. With G6, users can quickly build their own graph visualization and analysis applications, making relational data simple, transparent, and meaningful. G6, as a professional
Chart.jsでいい感じの色を自動で割り当てる！ - 虎の穴ラボ技術ブログ
こんにちは、虎の穴ラボのH.Kです。 今回はChart.jsで可変の表示要素に対していい感じの色を割り当てる方法をご紹介します。 この記事で解決する課題 取得したデータによって比較対象に当たる要素数が可変になるようなグラフ（Chart.js）に綺麗に色をつける 自動で色を割り振った完成形 Chart.jsとは 簡単にグラフを描画できるライブラリです。 パラメータで受け取った値を元にキャンバス要素にグラフを出力してくれます。 円グラフ、折れ線グラフなど多くの形式で表示することが可能です。 また、自動で縦軸や横軸の値を調整してくれるので、値さえ用意すれば簡単に出力できるのが魅力です。 社内で使用しているツールのグラフ表示に使用しています。 www.chartjs.org 解決方法 早速、解決方法ですが、以下の手法を取ることにより解決しました。 HSL色空間を用いる 要素数から色相の角度を計算し
Rails 6+Webpacker開発環境をJS強者ががっつりセットアップしてみた（翻訳）｜TechRacho by BPS株式会社
概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: Rails 6: the missing developer setup guide - DEV Community 💻💻 原文公開日: 2019/11/19（最終更新: 2019/12/17） 著者: Vincent Voyer 日本語タイトルは内容に即したものにしました。画像はすべて元記事からの引用です。 原文の目次は省略しました。原文の乱れは訳文で修正してあります。以下のRailsガイドもどうぞ。 Webpacker の概要 - Railsガイド 更新履歴: 2019/11/28: 初版公開 2021/05/06: 更新 👋皆さんこんにちは。本記事では私がRubyやRuby on Railsを学んだ一環として、ドキュメントに書かれていないことを全部盛りしました。RubyやRailsのエコシステムは初めてなので、皆さまか
モダンJavaScript再入門 / Re-introduction to Modern JavaScript
FRONTEND CONFERENCE 2019の登壇資料です。 https://2019.kfug.jp/session/onoueyosuke Webサイト・Webアプリ制作への高まる要求に耐えられるようにJavaScriptは進化を続けてきました。特にこの約5年間で、JavaScriptは…
JavaScriptの配列操作に役立つ13のヒントとトリック - Qiita
以下はDuomly ( Webサイト / Twitter )による記事、13 useful JavaScript array tips and tricks you should knowの日本語訳です。 Duomlyはプログラミング学習コースを提供しているWebサイトです。 ただランディングページにたいしたことが書いてないので、詳細はよくわかりません。 ここはもう少し書いておいてほしいところ。 13 useful JavaScript array tips and tricks you should know 配列はJavaScriptで最も一般的な概念のひとつであり、内部に格納されたデータを操作する手段は多数存在します。 配列はJavaScriptの最も基本的なトピックであり、プログラミング学習パスの最初に学習するものだという前提のうえで、この記事ではあなたが知らないかもしれない、しか
Node.js v13の主な変更点 - 別にしんどくないブログ
🎉More great news! Node.js 12 to LTS and Node.js 13 is here!🎉 https://t.co/JmDiMlHgmr— Node.js (@nodejs) 2019年10月22日 Node.jsのv12がLTSになり、v13がcurrentとしてリリースされました。 今回はNode.js v13の主な変更点を紹介したいと思います。 assert (PR: #28263) build (PR: #29887) console (PR: #29251) deps (PR: #29694) http (PR: #29589) http, http2 (PR: #27558) ES Modules (PR: #29866) 最後に ダウンロードは公式ページから行えます。 nodejs.org 以下リリースノートにあるNotable Chang
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - alpinejs/alpine: A rugged, minimal framework for composing JavaScript behavior in your markup.
GitHub - microsoft/playwright: Playwright is a framework for Web Testing and Automation. It allows testing Chromium, Firefox and WebKit with a single API.
TypeScript + Node.js プロジェクトのはじめかた2020 - Qiita
Vue.jsを100時間勉強して分かったこと - Qiita
Minimum Hands-on Node.js / minimum handson nodejs
