Casual Developers Note

エンジニアやデザイナー向けの技術情報・英語学習情報・海外留学情報・海外旅行情報を提供中。世界を旅して人生を楽しもう。

  • ホーム
  • 技術 Tips & Tutorials
  • 技術塾
  • ライフハック
  • 海外留学
  • 英語学習
  • コラム
  • お問い合わせ
現在の場所:ホーム / アーカイブjavascript

2020年1月13日 By KD コメントを書く

2020年JS周辺のバックエンド寄りの注目技術!ネクストNodeJSの「Deno」と分散型パッケージレジストリの「Entropic」の紹介

2020年JS周辺のバックエンド寄りの注目技術!ネクストNodeJSの「Deno」と分散型パッケージレジストリの「Entropic」の紹介

2020年もWeb業界の進歩は止まりません。今回は、JS周辺のバックエンド寄りの注目技術である「Deno」と「Entropic」をざっくり紹介します。

はじめに

2020年に入り、Web業界の特にJavaScript周りの動向を調査していたところ、「Predicting the Future of the Web Development (2020 and 2025)」という面白い動画を見つけました。2020年から5年後までのWeb業界の予測の動画で、ざっくり言うと、以下の4つの予想が示されています。

  1. TypeScriptが爆発的に人気を集めており、React/Vue/Anguarなどのフロントエンドフレームワークで利用可能になっている現状から、TypeScriptがJSプロジェクトで最も一般的な選択肢になるという予想
  2. ブラウザ上での大容量ファイルのダウンロードが許容されつつある現状から、WebAssemblyにより、ブラウザ経由でネイティブアプリのような大容量のWebアプリが提供されるようになるという予想
  3. NPMのパッケージレジストリやGitHub Package Registoryといった中央集権型のパッケージレジストリのセキュリティ問題を挙げ、多くのエンジニアが何かしらの悪意のあるNPMパッケージによる感染被害に合うという予想
  4. JSの代替手段の一つであるElmを取り上げ、JSより優れている点を示しつつも、ニッチであり続けるという予想

詳しくは実際に動画を見てみてください。

この動画の(1)で、なぜか触れられていなかったのですが、TypeScriptが今後主流になっていくだろうという予想の背景として、NodeJSの作者がTypeScriptのランタイムとして開発している「Deno」の存在があるはずです。まさにネクストNodeJSと言えるものなので、今回紹介することにしました。

この動画の(3)で、「The economics of open source by C J Silverio | JSConf EU 2019」で発表された「Entropic」という分散型のパッケージレジストリの話題も出ており、会場の誰も聞いたことがなかったようなので、これも紹介することにしました。

ということで、今回は多くの人が書いている2020年のフロントエンド寄りの記事に飽きた人向けに、バックエンド寄りで注目すべき技術「Deno」と「Entropic」をざっくり紹介しておきます。

Denoの紹介

まずは、ネクストNodeJS「Deno」の紹介です。

Denoとは?

「Deno」とは、JavaScriptとTypescriptを実行するための新しいランタイムであり、V8/Rust/Tokio/TypeScriptで作られています。

背景

NodeJSの作者Ryan Dahlさんの「Deno」の紹介動画「JSDC 2018#A01 – Deno, A New Server-Side Runtime By Ryan Dahl」や、比較的新しい動画「Ryan Dahl. Deno, a new way to JavaScript. JS Fest 2019 Spring」にて説明されています。(同じスライド使っていろいろなところで登壇していますね。)NodeJSが抱えている、(1)貧弱なモジュールシステム、(2)レガシーAPIのサポート、(3)セキュリティ問題、を解決し、楽しく生産的な実行環境を作ることが現在の目的です。背景としては、「Node.jsに関する10の反省点 Ryan Dahl – JSConf EU 2018」で語っている反省に起因しています。

試す

それでは、2018年にプロトタイプと言っていた「Deno」が2020年現在動くのか試してみましょう。

インストールする

まずは公式インストール手順に沿ってインストールします。

$ curl -fsSL https://deno.land/x/install/install.sh | sh
$ cat "export PATH=$HOME/.local/bin/deno:$PATH" >> ~/.zshrc
$ deno --version
deno 0.28.1
v8 8.0.192
typescript 3.7.2

TCPサーバーを書く

公式マニュアルを見て、簡単なTCPサーバーを書いてみましょう。

$ mkdir deno-echo-app
$ cd deno-echo-app
$ touch app.ts

app.ts

const PORT = 8080;

const listener = Deno.listen({ port: PORT });
console.log(`listening on 0.0.0.0:${PORT}`);

for await (const conn of listener) {
  Deno.copy(conn, conn);
}

エコーしてみる

TCPサーバーを実行します。

$ deno --allow-net app.ts
Compile file:///Users/user/deno-echo-app/app.ts
listening on 0.0.0.0:8080

エコーされるか確認します。

$ nc localhost 8080
Hello, Deno!
Hello, Deno!

OKですね。自動的でコンパイルされて実行されるのは快適ですね。

「--allow-net」は外部のネットワークにアクセスする事を許可するためのフラグです。「Deno」はセキュリティを意識してい実装されているので、デフォルトでサンドボックス上で実行されるようになっており、外部のファイルシステム、ネットワーク、スクリプトの実行、環境変数にアクセスできないようになっています。

現状はまだ「mildly stable」のようですが、試す分には大丈夫なようです。気になる人は遊んでみてください。

Entropicの紹介

次に、分散型パッケージレジストリ「Entropic」の紹介です。

Entropicとは?

「Entropic」とは、新しい分散型(decentralized)の統合パッケージレジストリ(a federated package registry)であり、新しいCLI「ds」も付属されています。

背景

背景は、冒頭で紹介した動画「The economics of open source by C J Silverio | JSConf EU 2019」で語られています。NPMを会社化した経験から、中央集権型のサービスはお金がかかり過ぎる問題があり、かつ、パッケージレジストリをプライベートカンパニーがコントロールすべきではないと。そこで、新たなOSSとして、分散型のパッケージレジストリである「Entropic」を発表するに至ったというわけです。NPM inc自体は、「NPM Pro」という月額7ドルでプライベートリポジトリが使えるプランを用意していますが、Github Package Registryとガッツリ競合しているので、やはりこのままでは会社としては短命な雰囲気です。

試す

それでは、「Entropic」で自分のレジストリを作って、、、と思ったのですが、正直取り上げるのが早すぎた感があり、公式ドキュメントは未完なので、「ds」コマンドを少し試してみるだけにしようと思ったのですが、、、インストールも失敗して動きませんでした。残念ながら試す段階にも達していないようです。

「Entropic」は発想は面白いのですが、実用化されるのはまだまだ先という感じですね。興味がある人はぜひコントリビュートしてみてください。

最後に

いかがでしたか?「Deno」も「Entropic」も2020年に正式にリリースされるかは微妙なくらい新しいOSSですが(まだ数年かかりそう)、今後のJSの発展に寄与する技術だと思います。これらを知っていれば、バックエンド寄りのJS周辺の最新技術の動向に取り残されずに済むかもしれません。ちなみに、フロントエンドの注目技術は個人的には「Svelte」なのですが、それは別の記事にします。それでは。

環境

  • Deno: 0.28.1

カテゴリ : 技術 Tips & Tutorials タグ : deno, entropic, javascript, npm, typescript, yarn

2018年10月1日 By KD コメントを書く

JavaScriptによるオブジェクト指向プログラミング(class編)

JavaScriptによるオブジェクト指向プログラミング(class編)

ES6からclassシンタックスシュガーが導入され、JavaScriptでのオブジェクト指向プログラミングが分かりやすくなりました。今回はclassを使用したJavaScriptのオブジェクト指向プログラミングの方法を紹介します。

はじめに

前回Prototypeチェーンを使用したJavaScriptのオブジェクト指向プログラミングを紹介しました。今回はES6で導入されたclassシンタックスシュガーを使用したJavaScriptのオブジェクト指向プログラミングの方法を紹介します。

クラスの定義

まずは、classシンタックスシュガーでクラスを定義してみましょう。

class Component {
  constructor(name, props = {}) {
    this.name = name;
    this.props = props;
  }

  toString() {
    return `name: ${this.name}, props: ${JSON.stringify(this.props)}`;
  }

  static isComponent(obj) {
    return obj instanceof this;
  }
}

const myComponent = new Component('Component', { color: 'blue' });
console.log(myComponent.toString()); // => name: Component, props: {"color":"blue"}
console.log(Component.isComponent(myComponent)); // => true

この例では、toString関数がいわゆるインスタンスメソッドで、isComponent関数がいわゆるクラスメソッドです。

カプセル化とGetter/Setterの定義

2つの方法があります。

WeakMapを使う方法

WeakMapを使って実装してみましょう。

const _name = new WeakMap();
const _props = new WeakMap();
const _capitalize = new WeakMap();

class Component {
  constructor(name, props = {}) {
    _name.set(this, name);
    _props.set(this, props);

    _capitalize.set(this, letter => letter.toUpperCase());
  }

  get name() {
    return _name.get(this);
  }

  get props() {
    return _props.get(this);
  }

  set props(props) {
    _props.set(this, props);
  }

  toString() {
    return `name: ${this.name}, props: ${JSON.stringify(this.props)}`;
  }

  shoutName() {
    console.log(`${_capitalize.get(this)(this.name)}!!`);
  }
}

const myComponent = new Component('Component', { color: 'blue' });
console.log(myComponent.toString()); // => name: Component, props: {"color":"blue"}
myComponent.name = 'Not Changed'; // 変更されない
myComponent.props = { color: 'green' };
console.log(myComponent.toString()); // => name: Component, props: {"color":"green"}
myComponent.shoutName(); // => COMPONENT!!

この例では、nameプロパティはSetterが無いため値を変更できません。一方で、propsプロパティはGetter/Setterが両方あるため、変更も取得もできます。

Symbolを使う方法

Symbolを使って実装しましょう。

const _name = Symbol();
const _props = Symbol();
const _capitalize = Symbol();

class Component {
  constructor(name, props = {}) {
    this[_name] = name;
    this[_props] = props;
  }

  [_capitalize](letter) {
    return letter.toUpperCase();
  }

  get name() {
    return this[_name];
  }

  get props() {
    return this[_props];
  }

  set props(props) {
    this[_props] = props;
  }

  toString() {
    return `name: ${this.name}, props: ${JSON.stringify(this.props)}`;
  }

  shoutName() {
    console.log(`${this[_capitalize](this[_name])}!!`);
  }
}

const myComponent = new Component('Component', { color: 'blue' });
console.log(myComponent.toString()); // => name: Component, props: {"color":"blue"}
myComponent.name = 'Not Changed'; // 変更されない
myComponent.props = { color: 'green' };
console.log(myComponent.toString()); // => name: Component, props: {"color":"green"}
myComponent.shoutName(); // => COMPONENT!!

この例でも先程と同じく、nameプロパティはSetterが無いため値を変更できません。一方で、propsプロパティはGetter/Setterが両方あるため、変更も取得もできます。

継承とポリモーフィズム

継承

extendsを使って実装できます。

const _name = new WeakMap();
const _props = new WeakMap();
const _capitalize = new WeakMap();

class Component {
  constructor(name, props = {}) {
    _name.set(this, name);
    _props.set(this, props);

    _capitalize.set(this, letter => letter.toUpperCase());
  }

  get name() {
    return _name.get(this);
  }

  get props() {
    return _props.get(this);
  }

  set props(props) {
    _props.set(this, props);
  }

  toString() {
    return `name: ${this.name}, props: ${JSON.stringify(this.props)}`;
  }

  shoutName() {
    console.log(`${_capitalize.get(this)(this.name)}!!`);
  }
}

const _children = new WeakMap();

class Welcome extends Component {
  constructor(props, children) {
    super('Welcome', props);
    _children.set(this, children);
  }

  render() {
    return `<h1>${_children.get(this)}</h1>`;
  }
}

const welcome = new Welcome({ color: 'orange' }, 'Welcome to here!');
console.log(welcome.toString()); // => name: Welcome, props: {"color":"orange"}
welcome.shoutName(); // => WELCOME!!
console.log(welcome.render()); // => <h1>Welcome to here!</h1>

ポリモーフィズム

続いて、ポリモーフィズムを実装してみましょう。

const _name = new WeakMap();
const _props = new WeakMap();
const _capitalize = new WeakMap();

class Component {
  constructor(name, props = {}) {
    _name.set(this, name);
    _props.set(this, props);

    _capitalize.set(this, letter => letter.toUpperCase());
  }

  get name() {
    return _name.get(this);
  }

  get props() {
    return _props.get(this);
  }

  set props(props) {
    _props.set(this, props);
  }

  toString() {
    return `name: ${this.name}, props: ${JSON.stringify(this.props)}`;
  }

  shoutName() {
    console.log(`${_capitalize.get(this)(this.name)}!!`);
  }
}

const _children = new WeakMap();

class Title extends Component {
  constructor(props, children) {
    super('Title', props);
    _children.set(this, children);
  }

  render() {
    return `<h1>${_children.get(this)}</h1>`;
  }
}

const _children2 = new WeakMap();

class Paragraph extends Component {
  constructor(props, children) {
    super('Paragraph', props);
    _children2.set(this, children);
  }

  render() {
    return `<p>${_children2.get(this)}</p>`;
  }
}

const title = new Title({ color: 'orange' }, 'What is OOP?');
const paragraph = new Paragraph({ color: 'black' }, 'The OOP means an object oriented programming.');

const components = [title, paragraph];
components.forEach(component => console.log(component.render()));
// => <h1>What is OOP?</h1>
// => <p>The OOP means an object oriented programming.</p>

最後に

いかがでしたか?classシンタックスのおかげでprototypeと比べて簡単かつ直感的にオブジェクト指向プログラミングが実装できるようになりましたね。最近のフロントエンドフレームワークはオブジェクト指向で書く事が多いので、書き方は理解しておきましょう。では。

カテゴリ : 技術 Tips & Tutorials タグ : class, es6, javascript, oop

2018年9月24日 By KD コメントを書く

JavaScriptによるオブジェクト指向プログラミング(Prototype編)

JavaScriptによるオブジェクト指向プログラミング(Prototype編)

JavaScriptが人気になっている昨今、他のプログラミング言語を使っていたエンジニアがこぞってJavaScriptを使い始めています。その際にオブジェクト指向でプログラミングをしようとするのですが、JavaScriptは勝手が違うため苦戦することが多いでしょう。今回は、他のプログラミング言語からJavaScriptに移動してきた人向けに、JavaScriptによるオブジェクト指向プログラミングの方法を紹介します。

はじめに

JavaScriptはJavaやC#などのメジャーなプログラミング言語と異なり、Classベースのオブジェクトを定義するのではなく、Prototypeベースのオブジェクトを定義してオブジェクト指向プログラミングを行います。ES6からはこの混乱を避けるためかclassというシンタックスシュガーが登場していますが、Prototypeベースであることに変わりはありません。今回は、JavaScriptのPrototypeベースのオブジェクト指向プログラミングの方法を紹介します。

オブジェクトの定義

JavaScriptでのオブジェクトの定義方法は2種類あります。

オブジェクトを使った定義

const component = {
  name: 'Component',
  props: {},
  print() {
    console.log('name: ', this.name, ', props: ', this.props);
  },
};

component.props = { type: 'Object' };
component.print(); // => name:  Component , props:  { type: 'Object' }

関数を使った定義

function Component() {
  this.name = 'Component';
  this.props = {};

  this.print = function () {
    console.log('name: ', this.name, ', props: ', this.props);
  };
}

const component = new Component();
component.props = { type: 'Function' };
component.print(); // => name:  Component , props:  { type: 'Function' }

カプセル化とGetter/Setterの定義

オブジェクト指向プログラミングにおいて、プロパティ(フィールド)をカプセル化し、不用意なデータ変更を防ぐことは重要な考え方です。Object.definePropertyを使ってプロパティのカプセル化およびGetter/Setterを実現してみましょう。

function Component(initialName) {
  const name = initialName;
  let props = {};

  Object.defineProperty(this, 'name', {
    get() { return name; },
  });

  Object.defineProperty(this, 'props', {
    get() { return props; },
    set(value) { props = value; },
  });
}
Component.prototype.print = function () {
  console.log('name: ', this.name, ', props: ', this.props);
};

const component = new Component('Component');
component.name = 'Not Changed'; // 変更されない
component.props = { type: 'Function' };
component.print(); // => name:  Component , props:  { type: 'Function' }

この例では、nameプロパティはSetterが無いため値を変更できません。一方で、propsプロパティはGetter/Setterが両方あるため、変更も取得もできます。

継承とポリモーフィズム

継承用の関数

まず、Object.createを使った継承用の関数を用意します。

function extend(Child, Parent) {
  Child.prototype = Object.create(Parent.prototype);
  Child.prototype.constructor = Child;
}

継承

では、継承してみましょう。

function Component(name, props = {}) {
  this.name = name;
  this.props = props;

  this.print = function () {
    console.log('name: ', this.name);
    console.log('props: ', this.props);
  };
}

function Welcome(name, props) {
  Component.call(this, name, props);

  this.render = function () {
    console.log('<h1>Welcome</h1>');
  };
}
extend(Welcome, Component);

const component = new Component('Component', { type: 'Super' });
component.print(); // => name:  Component , props:  { type: 'Super' }
const welcome = new Welcome('Welcome', { type: 'Sub' });
welcome.print(); // => name:  Welcome , props:  { type: 'Sub' }
welcome.render(); // => <h1>Welcome</h1>

ポリモーフィズム

続いて、オブジェクト指向の醍醐味であるポリモーフィズムを実現してみましょう。

function Component(name, props = {}) {
  this.name = name;
  this.props = props;

  this.print = function () {
    console.log('name: ', this.name, ', props: ', this.props);
  };
}

function Title(name, props, children) {
  Component.call(this, name, props);

  this.render = function () {
    console.log(`<h1>${children}</h1>`);
  };
}
extend(Title, Component);

function Paragraph(name, props, children) {
  Component.call(this, name, props);

  this.render = function () {
    console.log(`<p>${children}</p>`);
  };
}
extend(Paragraph, Component);

const components = [
  new Title('Title', { type: 'Title Component' }, 'Good Title'),
  new Paragraph('Paragraph', { type: 'Paragraph Component' }, 'This is a paragraph.'),
];

components.forEach(component => component.render());
// => <h1>Good Title</h1>
// => <p>This is a paragraph.</p>

この例では、TitleオブジェクトとParagraphオブジェクトをComponentオブジェクトとして同一に扱っています。

おまけ(Mixin)

Mixinの関数

Object.assignを使ってMixin用の関数を用意します。

function mixin(target, ...sources) {
  Object.assign(target, ...sources);
}

Mixin

では、オブジェクトに関数をMixinしてみましょう。

const canDrive = {
  drive() {
    console.log('Driving...');
  },
};

const canFly = {
  fly() {
    console.log('Flying...');
  },
};

function FlyingCar() {
}
mixin(FlyingCar.prototype, canDrive, canFly);

const flyingCar = new FlyingCar();

console.log(flyingCar.drive());
// => Driving...
// => undefined
console.log(flyingCar.fly());
// => Flying...
// => undefined

最後に

いかがでしたか?JavaScriptには独特の癖がありますが、オブジェクト指向を実現することは可能です。では。

カテゴリ : 技術 Tips & Tutorials タグ : javascript, oop, prototype

ブログ更新情報や海外の関連情報などを配信する無料メルマガ

Sponsored Links

About Author

KD

世界を旅し日本を愛するエンジニア。大学でコンピュータサイエンスの楽しさを学び、日本の大手IT企業で働く中で、新しい技術やスケールするビジネスが北米にある事に気づく。世界に挑戦するための最大の壁が英語であったため、フィリピン留学およびカナダ留学を経て英語を上達させた。現在は日本在住でエンジニアとして働きつつ、次の挑戦に備えて世界の動向を注視している。挑戦に終わりはない。このブログでは、エンジニアやデザイナー向けの技術情報から、海外に留学したい人向けの留学情報、海外に興味がある人向けの海外旅行情報など、有益な情報を提供しています。

https://casualdevelopers.com/

最近の投稿

  • 2020年JS周辺のバックエンド寄りの注目技術!ネクストNodeJSの「Deno」と分散型パッケージレジストリの「Entropic」の紹介

    2020年JS周辺のバックエンド寄りの注目技術!ネクストNodeJSの「Deno」と分散型パッケージレジストリの「Entropic」の紹介

    2020年1月13日
  • 今さら聞けないJavaによる関数型プログラミング入門 ~ラムダ式、ストリーム、関数型インターフェース~

    今さら聞けないJavaによる関数型プログラミング入門 ~ラムダ式、ストリーム、関数型インターフェース~

    2019年11月4日
  • ReactのためのEslintおよびPrettierの設定方法 ~Airbnb JavaScript Style Guideの適用~

    ReactのためのEslintおよびPrettierの設定方法 ~Airbnb JavaScript Style Guideの適用~

    2019年10月30日
  • BashからZshに移行する方法(Mac編)

    BashからZshに移行する方法(Mac編)

    2019年10月21日
  • Create React Appを使わないでゼロからReactの開発環境を構築する方法(Webpack/Docker編)

    Create React Appを使わないでゼロからReactの開発環境を構築する方法(Webpack/Docker編)

    2019年9月30日

カテゴリ

  • 技術 Tips & Tutorials (100)
  • 技術塾 (6)
  • ライフハック (26)
  • 海外留学 (12)
  • 英語学習 (3)
  • コラム (6)

アーカイブ

最高の学習のために

人気記事ランキング

  • MySQLで「ERROR 2003 (HY000): Can't connect to MySQL server」と怒られた時の対処法
    MySQLで「ERROR 2003 (HY000): Can't connect to MySQL server」と怒られた時の対処法
  • SAKURAのメールボックスで独自ドメインのメールを設定し、Gmail経由で送受信する方法
    SAKURAのメールボックスで独自ドメインのメールを設定し、Gmail経由で送受信する方法
  • Jupyter Notebookで「The kernel appears to have died. It will restart automatically.」というエラーが出た場合の原因と対処法
    Jupyter Notebookで「The kernel appears to have died. It will restart automatically.」というエラーが出た場合の原因と対処法
  • Expressで「Cannot set headers after they are sent to the client」と怒られた時の対処法
    Expressで「Cannot set headers after they are sent to the client」と怒られた時の対処法
  • Amazon EC2インスタンスにSSHできなくなった時の対処法
    Amazon EC2インスタンスにSSHできなくなった時の対処法
  • SLF4JとLogbackによるJavaのロギング入門(SLF4J + Logback + Lombok)
    SLF4JとLogbackによるJavaのロギング入門(SLF4J + Logback + Lombok)
  • SpringBootのProfile毎にプロパティを使い分ける3つの方法
    SpringBootのProfile毎にプロパティを使い分ける3つの方法
  • [tips][perl] Perlで文字コードをいい感じに処理する方法
    [tips][perl] Perlで文字コードをいい感じに処理する方法
  • 爆速でJenkinsをマスターしよう(GitHubアカウント統合編) ~ JenkinsのGitHub Organizationの設定方法 ~
    爆速でJenkinsをマスターしよう(GitHubアカウント統合編) ~ JenkinsのGitHub Organizationの設定方法 ~
  • Go言語のためのVisual Studio Codeの設定方法
    Go言語のためのVisual Studio Codeの設定方法

Bitcoin寄付 / BTC Donation

Bitcoinを寄付しよう

BTC
Select Payment Method
Personal Info

Donation Total: BTC 0.0010

このブログの運営のためにBitcoinでの寄付を募集しています。お気持ち程度の寄付を頂けると管理者の励みになります。

Bitcoin寄付について知りたい方はこちらの記事へ

ビットコイン取引ならここ

  • ホーム
  • 技術 Tips & Tutorials
  • 技術塾
  • ライフハック
  • 海外留学
  • 英語学習
  • コラム
  • サイトマップ
  • タグ一覧
  • プライバシーポリシー
  • お問い合わせ

Copyright © 2023 KD - Casual Developers Notes