Null-aware operators ： x?.m()

Null-aware operators について一つずつ事例を挙げて紹介していきます。


「??」「??=」「x?.p」に続き 4 件目は「x?.m()」です。
「x?.m()」といった記載をし、オブジェクト x が null でない場合のみ関数 m() を実行するという意味です。




Knight クラスのオブジェクト piece は null なので、その関数である jump() を実行しようとすると普通は例外が発生してしまいますが、実行の際に「?.」を利用することで例外を回避することができます。


null の参照例外を回避できるというのは絶大で、この記載方法をスタンダードとしていくべきだと思います！
超主観ですが(笑)


ここまで前回の記事のパクリですが(笑)、「x?.p」とはセットで利用するものだと考えます。
オブジェクトのプロパティ参照か、関数実行かの違いですしね。


Null-aware operators についてお伝えしてきましたが、Dart を用いたコーディングでは必須といえる技術になりますので、ぜひ活用していきたいですね！


今回は以上です。

Null-aware operators ： x?.p

Null-aware operators について一つずつ事例を挙げて紹介していきます。


「??」「??=」に続き 3 件目は「x?.p」です。
「x?.p」といった記載をし、オブジェクト x が null でない場合のみプロパティ p を参照するという意味です。




Knight クラスのオブジェクト piece は null なので、そのプロパティである point を参照しようとすると普通は例外が発生してしまいますが、参照の際に「?.」を利用することで例外を回避することができます。


null の参照例外を回避できるというのは絶大で、この記載方法をスタンダードとしていくべきだと思います！
超主観ですが(笑)


次回は「x?.m()」を紹介します。
今回の記事を見ていたら想像できると思いますが、こちらも効果絶大！

Null-aware operators ： ??=

Null-aware operators について一つずつ事例を挙げて紹介していきます。


前回の「??」に続き 2 件目は「??=」です。
「A ??= B」といった記載をし、A が null の場合のみ B を実行するという意味です。





上記のとおり、「??=」の左辺が null の場合と、そうでない場合で振る舞いが異なります。
「??」に比べたら、まだ使うシーンはあるかもしれませんが、積極的に利用するかは？？？です。。。


次回は「x?.p」を紹介します。
次回あたりから使い勝手が良さそうなのが出てきますよ～

Null-aware operators ： ??

前回の記事で取り上げた Null-aware operators について一つずつ事例を挙げて紹介していきます。


まず、1 件目は「??」です。
「A ?? B」といった記載をし、A が null でなければ A を、null の場合は B を実行するという意味です。





上記のとおり、変数 a と b が null であるので、 print 関数を実行すると c の文字列が表示されます。
個人的にはあまり利用シーンが浮かばなかったのですが、あればあるで良いといった感じでしょうか。。。


次回は「??=」を紹介します。

Null の扱い（Null-aware operators）

8/31 に Dart 1.12 がリリースされました。
（UP が遅くなってしまいました。。。）


今回のリリースで追加された機能の説明に入る前に次のコードをご覧ください。

var isNull = null;
isNull.toString();

多くの言語では null という概念に悩まされます。
上のコードでは toString() というモジュールを実行しようとしていますが、実行元のオブジェクトが null であるために例外が発生してしまいます。
＃いわゆるヌルポ（NullPointerException）ですね


多くのプログラマは、この null を常に意識してコーディングせねばならず、他人の書いたモジュールの返り値に null が含まれるかどうかまで気にしないといけません。


今回の Dart のアップデートでこの null に対するわずらわしさを解消、とまではいきませんが、軽減するような機能が追加されました。
Null-aware operators です。




「Dart News & Updates」で紹介されていたコードをそのまま載せましたが、各演算子に「?」を付けることで null の可能性があるオブジェクトの扱いをシンプルにしてくれます。

var isNull = null;
isNull?.toString();

toString() の前に「?」を付けることで、オブジェクトが null の場合でも例外を発生せず、後続へ流れます。
確かに便利だな～と思います。


Null-aware operators にはいろいろな種類がありますので、別の記事でまとめようと思います。


--- 参考もと
http://news.dartlang.org/2015/08/dart-112-released-with-null-aware.html

カスケード呼び出し

以前、Dart で HTML 要素にスタイルを設定する方法を 2 種類紹介しました。
（その１、その２）


それぞれの方法で文字色を赤色にするだけのシンプルな内容でしたが、実際のケースでは複数のものを同時に設定することが多いと思います。


そういったときに便利なのが今回紹介する「カスケード呼び出し（カスケード演算子）」です。
コードを見たほうが説明しやすいので、次のコードをご覧ください。





「#sample_container_id」という id の div 要素に、文字色、フォントサイズ、フォントを設定しています。


その際に、それぞれのスタイル設定をカスケード演算子「..」で繋ぐことで一度に行っています。
このような複数の関数の同時実行や複数のプロパティへ同時アクセスすることを「カスケード呼び出し」といいます。


コーディングとしては毎回の「div.style」部分を省略でき、適度な改行を入れることで可読性もよくなると思います。
スタイル設定や、要素のプロパティに対するアクセスの際はぜひとも使っていきたいですね！


ちなみに、、、スタイル設定その２の方法でもカスケード呼び出しは可能ですので、スタイル設定の方法自体は好きな方法でよさそうです！



その２の方法だと、スタイルを「;」区切りで複数設定できるから、わざわざカスケード呼び出しする必要ないんですけどね。。。

Dart でスタイルを設定するには２

以前、Dart でスタイルを設定する方法を記事にしましたが、今回は別の方法でスタイル設定してみます。（前回の記事はこちら）


Dart には HTML 要素を扱うための「Element」クラスがあります。
このクラスのプロパティ「attributes」を用いた方法です。




前回の記事と全く同じスタイルの設定ですが、CSS 専用のクラスを用いるのではなく、汎用的な「attributes」に key 値を渡すことで実現しています。
個人的にはこちらの書き方のほうが好きですね。


今回は以上です。

Dart で乱数使用

Dart で乱数を使用する方法を書き残します。


乱数を使用するためには「Random」クラスを用います。
Random クラスは math ライブラリに用意されており、インポートして使用可能となります。





使用方法はいたってシンプルで、「nextInt」メソッドに乱数の最大値を渡して実行するだけです。
※ここで渡す最大値は返却される乱数に含まれないので注意が必要です。
（つまり 0 < nextInt(10) < 10 ということ）


利用頻度は？？？ですが、たまに乱数を使いたくなることがあるので、残して置きました。
今回は以上です。

DartPad の新しい共有機能がすごい！！

DartPad の新しい共有機能が 8/20 に Dart News & Updates で公開されました。


英文を訳す前に「これはすごい！」と感じてしまったのですが、実際にこのブログに共有したものを見れば体感できると思います！



どうでしょう？かなり Cool ですよね？！
DartPad で書いたコードを共有するだけでなく、その実行結果（HTML やコンソールへのアウトなど）を確認できます。


通常、ブログなどにコードを載せる場合、実行結果までは表現できないので、読み手にイメージさせづらいことが問題でした。
ですが、この共有機能があれば見事に解消できますね！


実際の共有の仕方ですが、DartPad の右上に「Share…」というボタンがありますので、それをクリック。

上記のような窓が立ち上がるので、「Embed」にあるテキストエリアをコピペで共有できます。簡単ですね！
ちなみに、下にあるラジオボタンで、Dart 資産のみか、Dart + HTLM かを選択できます。
（今回共有したのは Dart + HTML です）


共有の仕方も簡単ですし、今後は DartPad を使ったコーディングが捗るな～


--- 参考もと
http://news.dartlang.org/2015/08/a-new-way-to-share-with-dartpad.html

http://9-bb.com/css-button-2/（コード中の Web デザイン）

最近の Dart について

Google の検索エンジンで「Dart 言語」と検索すると、このブログが 2 ページ目くらいに表示されます。
ようやくコツコツと書いてきたことが実を結んだんだな！
、、、ではなく、Dart 自体の注目度が下がってきているのだと思います。


現に、公式のブログ「Dart News & Updates」は 6 月から更新がなく、8 月になって 2 ヶ月ぶりに更新されている状況です。
このブログよりも更新されていません（笑）


この記事を書こうと考えたタイミングでは 8月の更新はされておらず、「このままフェードアウトしてしまうのでは？」と心配になっていましたが、このタイミングで UP されて少しホッとしています。


JavaScript へのコンパイルに特化した言語へと方針変更をしてから更新頻度こそ減りましたが、コンパイル速度の改善やECMA標準の対応など、Dart は着実に前に進んでいます。


このブログでも書けることは限られますが、少しでも多くの情報を提供できるように前に進んで行こうと思います。

Dart でスタイルを設定するには

Dart が JavaScript のコンパイル前提と考えた際に、よく使いそうなコードを残していこうと思います。


HTML 要素へのスタイルの適用は基本的に css ファイルで行いますが、時にソースコードから動的に設定する必要がある場合もあります。
ごくごく基本的なコードではありますが、複数の言語を扱うような人の場合、混乱する場合もあるので書き残します。




上の例では「sample_container_id」という id が指定された HTML 要素（今回は div 指定）に対して、スタイル「color : red」を設定しています。
Dart でのスタイル指定は CssStyleDeclaration クラスを用いて行います。
直感的に書ける感じなのでいいですね。


今回は以上です。

Dart で Local Storage

前回の記事で DartPad を紹介しましたが、筆者が2回めに DartPad を開いた際、1回めに入力したコードが残っていて驚きました。


まあ、単に Local Storage に保存されているだけなんですが、普段 Web ブラウザベースの開発環境を使わないので、新鮮に感じたのでした。


新鮮に感じたついでに、Dart で Local Storage を利用する方法を書いてみました。


まずは dart。

import 'dart:html';
void main() {
  InputElement serif = querySelector('#serif');
  InputElement submit = querySelector('#save');
  Element output = querySelector('#outputSerif');
  Storage localStorage = window.localStorage;

  String savedSerif = localStorage['serif'];
  if (savedSerif != null) output.text = savedSerif;

  submit.onClick.listen((Event e) {
    output.text = serif.value;
    localStorage['serif'] = serif.value;
  });
}

そして html。

<html>
  <head>
    <meta charset="utf-8">
    <title>Dart で Local Storage</title>
  </head>
  <body>
    <h1>Dart で Local Storage</h1>
   <label for="serif">好きなセリフは？</label>
   <input type="text" name="serif" id="serif">
   <input type="submit" id="save" value="Save">
    <h2>
      <output id="outputSerif"></output>
    </h2>
  </body>
</html>

結果はこんな感じ。

実際のところ DartPad は、iframe タグに sandbox 属性「allow-same-origin」の指定がないので動きません。。。
DartPad で動かしたければ、無理やりやってね（笑）


久々に技術的なことを書きました。
DartPad が思いのほか手軽なので、今後は技術的な内容も増やしていこうと思います。

DartPad とは

5月6日の「Dart News & Updates」で、ブラウザ上で Dart のコードを体験できる Web アプリ「DartPad」が発表されました。
＃DartPad のリンクはこちら（https://dartpad.dartlang.org/）


つい先日、DartEditor の開発終了が発表されたところですが、今回発表された DartPad は IDE としての位置づけではなく、これから Dart に触れる開発者向けの体験用のアプリとなっています。

DartPad では、Dart コード、API、HTML、CSSをサポートしており、ブラウザ上で書いたコードが即時実行可能となるので、初心者だけでなく経験者でも大いに利用できそうです。
（簡単な動作テストとか楽そうだな）



今後は DartPad を利用した言語仕様系の記事も書いていこうと思います。

--- 参考もと
http://news.dartlang.org/2015/05/announcing-dartpad-friction-free-way-to.html

DartEditor が開発終了へ

4月30日の「Dart News & Updates」では、Dart 1.11 のリーリスとともに DartEditor の開発を終了すると伝えています。


理由としては、WebStorm、IntelliJ 、Eclipse plugin for Dart などの Dart をサポートした IDE が増えたことが大きいようで、開発者はそれらを利用することになりそうです。
また、DartPad が別のタイミングで発表されていますので、開発の規模や用途に応じて選択していくのが良いかもしれません。


現在の Dart のバージョンが 1.10 ですので、DartEditor としても最終バージョンでしょうか。。。
Blog 以外のところでもお世話になってきた IDE ですので少し寂しいですが、DartPad などとても興味深い発表もありましたので、その変化も楽しみつつ、引き続き追いかけていきます。


--- 参考もと
http://news.dartlang.org/2015/04/the-present-and-future-of-editors-and.html

JavaScript へコンパイルできる言語

先日、Dart が JavaScript へのコンパイル機能を強化していく方針を出したと記事にしました（該当記事はこちら）。
それでは Dart 以外に同様の言語はどのくらいあるのでしょうか？


 - CoffeeScript

 - TypeScript

 - HAXE

 - JSX


CoffeeScript は JavaScript のコードの書き難い部分を解消し、また大規模な開発向けに作られた言語です。
類似の言語の中で一番利用されており、有名な言語だと思います。


TypeScript は Micorosoft が開発した言語で、JavaScript の構文をそのまま利用できることが特徴的な言語です。
これも大規模開発向けに作られています。


HAXE は JavaScript 以外の言語にもコンパイル可能な言語で、主にマルチプラットフォーム開発を目的として使用されている言語です。
コンパイルが可能なのは「JavaScript」「C++」「C#」「Java」「PHP」など。


JSX はモバゲーの DeNA が開発した言語で、「スピード」の向上に重点を置いた言語です。
JSX によって最適された JavaScript コードは、同等の JavaScript プログラムと比較して 10% 以上高速になるそうです。

筆者は上記言語のどれも利用したことはありませんので、現時点で Dart との比較はできませんが、キーとなってくる「コードの書きやすさ」「大規模開発への適応」「スピード」に着目しながら、今後の Dart の動向と併せてこれらの言語にも触れていこうと思います。

Dart 1.9 リリース

3月26日に Dart 1.9 が公開されました。


非同期系の機能の強化が主で、ECMA標準の仕様実装にあたるものが多いです。
（今回でECMA標準の仕様実装はひととおり終わったのかな）


まず、async / await が構文として利用可能になりました。
これにより、以前のバージョンまででは Future を用いて行っていた遅延計算（単一イベントの非同期）と、Stream を用いて行っていた複数イベントの場合の非同期処理を簡潔に書くことができるようになります。


また、ジェネレータ『sync*, async*, yield, yield*』のサポートの開始（これは別の記事で詳しく書こうと思います。たぶん。。。）、enum が正式にサポートされたり、そのほかにも細かい改善が行われています。


DartVm が Chrome に搭載されないことが発表された翌日のリリースになりますが、今後の動きに期待ができるバージョンアップ内容なのではないでしょうか。

引き続き Dart の動向を追いかけて行こうと思います。

（超スローペースではありますが。。。）


--- 参考もと
http://news.dartlang.org/2015/03/dart-19-release-youve-been-await-ing-for.htmlｖ

Chrome で Dart をネイティブに動かせない

DartVM に関して、Google Chrome に統合されないことが正式に発表されました。


以前より Chrome にDartVM が搭載されることが予想されており、Chrome 上で
Dart をネイティブに動かせる未来が来るのだと思っていましたが、その夢は断
たれてしまいました。


今後は、JavaScript のコンパイル機能の強化に取り組むという事で、大きな方
向転換ではありますが、今後の Dart の動向に期待していきたいですね。


ちなみに、DartVM のサポートは引き続き行っていくようなので、Dart 言語そのものの動きについても見ていこうと思います。


--- 参考もと
http://news.dartlang.org/2015/03/dart-for-entire-web.html