Fork me on GitHub

2019-12-31のJS: Ember 3.15 Octane、TypeScriptで書いたLibraryを公開する手順

Edit on GitHub 編集履歴を見る

JSer.info #468 - Ember 3.15がリリースされました。

Ember.js 3.15での大きな変更点としてOctane Editionのリリースが含まれています。
EditionはEmberでのプログラミングモデルを表わす概念で、今の所Octane Editionのみとなっています。

An edition represents a cohesive programming model, and releasing a new edition represents a shift in the programming model due to new features and concepts being added to Ember. Ember Octane is the first new edition that was added to Ember.

-- https://emberjs.com/editions/octane

Octane Editionでは、主に次の3つが大きな変更点として導入されています。

  • Glimmer Componentsの導入
    • Before: Classic Components(component.extend)
  • Element Modifiersでの振る舞いの実装
    • Before: mixin
  • @trackedを使ったReactiveなモデルの実装
    • Before: computed関数

今回のOctane Editionのリリースにあわせてチュートリアルなどの刷新、Dev Toolsのアップデートなども行われています。
詳しくは次の記事を参照してください。


少し前の記事ですがJSMonday - Publishing a TypeScript Libraryでは、TypeScriptで書いたライブラリをnpmで公開、テストするまでの流れのチュートリアルが書かれています。

ディレクトリ構造やtsc(TypeScript Compiler)でコンパイルするとどうなるかや、Jestを使ったテストやCoverageのとり方など一通りの流れが書かれています。

また、package.jsonのフィールドや基本的なnpmコマンドの使い方、Semverなどから見たい場合は、次の記事も合わせて読むと良いかもしれません。


ヘッドライン


Ember.js - Ember 3.15 "Octane" Released

blog.emberjs.com/2019/12/20/ember-3-15-released.html

Ember ReleaseNote

Ember 3.15リリース。
Ember Octaneが正式リリースとなり、ember newでのデフォルトとなった。
またComponent#isVisiblepartialwindow.ENVが非推奨となった。


アーティクル


New WebKit Features in Safari 13 | WebKit

webkit.org/blog/9674/new-webkit-features-in-safari-13/

safari article

iOS/iPad/macOSでのSafari 13の変更点についての紹介記事。
Pointer Events、Visual Viewport API、ITP(Intelligent Tracking Prevention)、FIDO2、WebDriverのサポートになどについて


JSMonday - Publishing a TypeScript Library

www.jsmonday.dev/articles/18/publishing-a-typescript-library

TypeScript library

TypeScriptでライブラリを書いて、npm publishするまでのチュートリアル。
TypeScriptの導入、Jestでのテスト、Codecovでのコードカバレッジ、npm run-scriptの設定など


Making of: Best of 2019 – Johan Ronsse

johanronsse.be/2019/12/28/making-of-best-of-2019/

article Development

Best of 2019というサイトをどのように作ったかについての記事。
SvelteとCSSフレームワーク Ygdirを使った開発、Figmaを使ったデザイン、Notionを使ったコンテンツ管理などについて


Discovering Svelte: Adding, Editing and Estimating Tasks In The Pomodoro Technique App | Barbarian Meets Coding

www.barbarianmeetscoding.com/blog/2019/12/29/discovering-svelte-adding-some-tasks-and-pomodoros

Svelte JavaScript article

TODOアプリを作りながらSvelteについて学ぶ記事。
SvelteのLifeCyle hook、$:のラベルを使ったReactiveな仕組みについて


初学者向けpackage.jsonハンズオン - Qiita

qiita.com/segur/items/6eebb70ec2de03016dde

node npm article

npmコマンドとpackage.jsonについての初心者向けチュートリアル記事。
パッケージのインストール、アンインストール、SemVer、ロックファイルについてなど


Node.jsでのCLIの作り方と便利なライブラリまとめ - Qiita

qiita.com/toshi-toma/items/ea76b8894e7771d47e10

node console Tools article

Node.jsでCLIを作る場合の作り方やCLI向けのライブラリについて


React.memo を使ったパフォーマンス最適化について - 30歳からのプログラミング

numb86-tech.hatenablog.com/entry/2019/12/20/222412

React article performance

React.memouseCallbackを使ったメモ化とパフォーマンスの最適化についての記事


Base Web - Visual Regression Testing

baseweb.design/blog/visual-regression-testing/

browser testing article

Visual Regression Testingについての記事。
Visual Regression Testingの目的、導入する際の方法、ワークフローについてなど


Ember.js - Octane is Here

blog.emberjs.com/2019/12/20/octane-is-here.html

Ember article

Ember 3.15で導入されたOctaneについて。
Glimmer Componentsの導入、Element ModifiersでのLifeCyleHooksを使った振る舞いの実装、@trackedを使ったReactiveなモデルの実装など。
その他にはチュートリアルの刷新、Dev Toolsのアップデートなど


ソフトウェア、ツール、ライブラリ関係


bbc/peaks.js: JavaScript UI component for interacting with audio waveforms

github.com/bbc/peaks.js

JavaScript sound library

音声の波形を表示するUIコンポーネント。
Web Audioベースの波形生成とaudiowaveformを使い事前に音声波形を生成したものも利用できる。


ganapativs/react-spectrum: Generate colorful text placeholders 🎨

github.com/ganapativs/react-spectrum

React library

カラフルなテキストプレースホルダを生成するReactコンポーネント


saitoeku3/use-lazyload-ref: 🖼️Custom hook to use lazy load easily

github.com/saitoeku3/use-lazyload-ref

React library JavaScript

src属性の遅延ロードをrefdata-src属性の指定することで行うReact Hooksを使ったライブラリ


Release Tesseract.js v2.0.0 · naptha/tesseract.js

github.com/naptha/tesseract.js/releases/tag/v2.0.0

JavaScript OCR library WebAssembly

Emscriptenを使ったOCRライブラリのTesseract.js 2.0リリース。
tesseract v4.1へのアップデート、複数の原語の認識をサポート、画像フォーマット(png,jpg,bmpなど)のサポート、WebAssemblyやWebWorkerのサポートでパフォーマンス改善など


この記事へ修正リクエストをする
記事を紹介する