tag:blogger.com,1999:blog-4453570673536286242024-03-15T01:00:03.569+09:00Dart Blogプログラミング言語 Dart について色々と書いていきます。<br>
これから Dart を学習する方にもわかりやすいように、できる限り細かく書くつもりです。<br>
筆者自身が学習中の身ですので、誤りや指摘などありましたらコメント頂けると嬉しいです。<br>くらもと やすひろhttp://www.blogger.com/profile/04853989769667954462noreply@blogger.comBlogger37125tag:blogger.com,1999:blog-445357067353628624.post-86985636813680447852016-04-02T00:35:00.000+09:002016-04-02T00:35:06.114+09:00Google の検索ガジェット今日はエイプリルフールなので、Dart とは関係のない内容を。<br />
<span style="color: #cccccc;">全然嘘じゃないし、そもそももう日をまたいでるし。。。</span><br />
<br />
<br />
Google 検索で「斜め」と検索したことがありますか??<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcngZOwyV9iTUgjx_eKuJw1-v-R1NTeOL5Rj9t2uyp1EmsCn6f82hL24OIMTBJaZd_ctNM_z0FiUfbt15GMK8p1b2Y6ZNl1NDvgD48YSurfLCFWbsKDhRwfI4t8KsZi-3eNop5CyMBrPPm/s1600/naname.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="208" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcngZOwyV9iTUgjx_eKuJw1-v-R1NTeOL5Rj9t2uyp1EmsCn6f82hL24OIMTBJaZd_ctNM_z0FiUfbt15GMK8p1b2Y6ZNl1NDvgD48YSurfLCFWbsKDhRwfI4t8KsZi-3eNop5CyMBrPPm/s320/naname.png" width="320" /></a></div>
<br />
<br />
こうなります。<br />
斜めになっているのわかりますか~?<br />
<br />
<br />
じゃあ、「一回転」と検索すると。。。<br />
もうお分かりですよね!<br />
<br />
<br />
Google のこういうとこ好きなんですよね。<br />
開発者たるもの遊び心を持って開発をしたいと思う今日この頃です。。。<br />
<br />
<br />
次回はコレクションの foreach() メソッドについて書いていきます。<br />
<span style="color: #cccccc;">前回も同じこと書いたな。。。</span>くらもと やすひろhttp://www.blogger.com/profile/04853989769667954462noreply@blogger.com2tag:blogger.com,1999:blog-445357067353628624.post-11795157508894030382016-02-13T21:14:00.000+09:002016-02-13T21:15:11.859+09:00Map : マップDart ではマップを Map<E> クラスを用いて表します。<br />
<br />
<br />
{ key : value } と設定するインスタンス化。<br />
<iframe frameborder="0" src="https://dartpad.dartlang.org/embed-dart.html?id=da1fa96484975677ca39" style="height: 300px; width: 100%;"></iframe>
<br />
<br />
<br />
new した後に値を詰める方法。<br />
<iframe frameborder="0" src="https://dartpad.dartlang.org/embed-dart.html?id=8f9e2f0aef2c21076a16" style="height: 300px; width: 100%;"></iframe>
<br />
<div>
<br />
<br />
前回の「List」の記事でも書きましたが、値の設定時に「const」とつけることで定数化(以降で値の詰め替え不可能)が可能です。<br />
<iframe frameborder="0" src="https://dartpad.dartlang.org/embed-dart.html?id=5a6011586a27e1e0f049" style="height: 300px; width: 100%;"></iframe>
<br />
<br />
<br />
特段目をひく内容はない、ごくごく一般的なマップですね。<br />
#まあ、特別なものがあれば良いというものでもないですし<br />
<br />
<br />
今回は以上です。<br />
次回はコレクションの foreach() メソッドについて書いていきます。</div>
くらもと やすひろhttp://www.blogger.com/profile/04853989769667954462noreply@blogger.com0tag:blogger.com,1999:blog-445357067353628624.post-40619779924692910672016-02-07T21:20:00.001+09:002016-02-07T21:28:45.887+09:00List : リスト(配列)Dart ではリスト(配列)を List<E> クラスを用いて表します。<br />
Java の List と配列を混ぜたような仕様になっています。<br />
<br />
<br />
<iframe frameborder="0" src="https://dartpad.dartlang.org/embed-dart.html?id=dcf0c2e0506da2966387" style="height: 300px; width: 100%;"></iframe>
<br />
<div>
<br />
最後の 1 行にある通り、値の設定時に「const」とつけることで定数化(以降で値の詰め替え不可能)が可能です。<br />
<br />
<br />
また、上記のように [ ] でインスタンス化も可能ですが、 new することもできます。<br />
<br />
<br />
<iframe frameborder="0" src="https://dartpad.dartlang.org/embed-dart.html?id=8b49e8db4ea27003acba" style="height: 300px; width: 100%;"></iframe>
<br />
<br />
new でインスタンス化する場合、コンストラクタに引数を渡さなければ可変長リスト、渡せば固定長リストになります。<br />
固定長リストの場合、「add」などのリストの長さに影響を与えるメソッド呼び出しはエラーとなります。<br />
<br />
<br />
今回は以上です。<br />
次回はマップについて書いていきます。</div>
くらもと やすひろhttp://www.blogger.com/profile/04853989769667954462noreply@blogger.com0tag:blogger.com,1999:blog-445357067353628624.post-34985601119711807482016-01-20T00:52:00.000+09:002016-01-20T00:52:09.672+09:00Dart を通じて思うこと前回の記事からだいぶん期間が開きました。<br />
年まで明きました。<br />
<br />
<br />
このブログを始めたのが2013年の10月なので、もう2年以上たっています。<br />
記事の数(が少ないの)はさておき、この2年でだいぶん状況も変わってきています。<br />
<br />
<br />
そもそも Dart の「言語としてのあり方」が大きく方向転換されました。<br />
DartEditor という IDE で開発していたものが、今ではブラウザ上のエディタ「DartPad」で開発するのが主流になってきています。<br />
<br />
<br />
実はこの2ヵ月くらいブログを書かなかったのは、<strike> Dart が下火だから</strike> 実はプライベートで Android アプリを久しぶりに作っていたりして、そちら側に夢中になっていたためです(笑)<br />
Android の開発はスマホが流行り始めたころからやっていますが、こちらも最近では eclipse よりも AndroidStudio による開発の方が便利だったりします。<br />
eclipse 無双の時代ではなくなったのです(笑)<br />
<br />
<br />
色々と乱文で書きましたが、自分がプログラマであると名乗るからには、業務中にコードを書くコーダではダメなんだな~と、この頃思います。<br />
技術の進歩はすごいスピードで(特にこの業界は)、筆者のようなレベルではついていくことすら出来ていませんが、それでも2年以上見てきた Dart という言語を今後も追いかけていこうと思います。<br />
<br />
<br />
ちなみに、公式の Dart News & Updates も12月に更新なし、1月に1件の更新のみです(笑)<br />
#今年は細々としたコーディング Tips 的なものを載せていきたい、、、くらもと やすひろhttp://www.blogger.com/profile/04853989769667954462noreply@blogger.com0tag:blogger.com,1999:blog-445357067353628624.post-7955258730160633772015-11-01T20:33:00.001+09:002015-11-01T20:33:39.813+09:00Null-aware operators : x?.m()<a href="http://dart.pscsrv.co.jp/2015/10/null-null-aware-operators.html">Null-aware operators</a> について一つずつ事例を挙げて紹介していきます。<br />
<br />
<br />
「<a href="http://dart.pscsrv.co.jp/2015/10/null-aware-operators.html">??</a>」「<a href="http://dart.pscsrv.co.jp/2015/10/null-aware-operators_25.html">??=</a>」「<a href="http://dart.pscsrv.co.jp/2015/10/null-aware-operators-3-x.html">x?.p</a>」に続き 4 件目は「x?.m()」です。<br />
「x?.m()」といった記載をし、オブジェクト x が null でない場合のみ関数 m() を実行するという意味です。<br />
<br />
<br />
<iframe frameborder="0" src="https://dartpad.dartlang.org/embed-dart.html?id=e689294115f2f167c976" style="height: 300px; width: 100%;"></iframe>
<br />
<br />
Knight クラスのオブジェクト piece は null なので、その関数である jump() を実行しようとすると普通は例外が発生してしまいますが、実行の際に「?.」を利用することで例外を回避することができます。<br />
<br />
<br />
null の参照例外を回避できるというのは絶大で、この記載方法をスタンダードとしていくべきだと思います!<br />
<span style="color: #999999;">超主観ですが(笑)</span><br />
<br />
<br />
ここまで前回の記事のパクリですが(笑)、「x?.p」とはセットで利用するものだと考えます。<br />
オブジェクトのプロパティ参照か、関数実行かの違いですしね。<br />
<br />
<br />
Null-aware operators についてお伝えしてきましたが、Dart を用いたコーディングでは必須といえる技術になりますので、ぜひ活用していきたいですね!<br />
<br />
<br />
今回は以上です。くらもと やすひろhttp://www.blogger.com/profile/04853989769667954462noreply@blogger.com0tag:blogger.com,1999:blog-445357067353628624.post-31274556688191294962015-10-27T00:05:00.000+09:002015-11-01T20:33:56.777+09:00Null-aware operators : x?.p<a href="http://dart.pscsrv.co.jp/2015/10/null-null-aware-operators.html">Null-aware operators</a> について一つずつ事例を挙げて紹介していきます。<br />
<br />
<br />
「<a href="http://dart.pscsrv.co.jp/2015/10/null-aware-operators.html">??</a>」「<a href="http://dart.pscsrv.co.jp/2015/10/null-aware-operators_25.html">??=</a>」に続き 3 件目は「x?.p」です。<br />
「x?.p」といった記載をし、オブジェクト x が null でない場合のみプロパティ p を参照するという意味です。<br />
<br />
<br />
<iframe frameborder="0" src="https://dartpad.dartlang.org/embed-dart.html?id=c308a04c43b025df06c5" style="height: 300px; width: 100%;"></iframe>
<br />
<br />
Knight クラスのオブジェクト piece は null なので、そのプロパティである point を参照しようとすると普通は例外が発生してしまいますが、参照の際に「?.」を利用することで例外を回避することができます。<br />
<br />
<br />
null の参照例外を回避できるというのは絶大で、この記載方法をスタンダードとしていくべきだと思います!<br />
<span style="color: #999999;">超主観ですが(笑)</span><br />
<br />
<br />
次回は「x?.m()」を紹介します。<br />
今回の記事を見ていたら想像できると思いますが、こちらも効果絶大!くらもと やすひろhttp://www.blogger.com/profile/04853989769667954462noreply@blogger.com0tag:blogger.com,1999:blog-445357067353628624.post-40485947128165517882015-10-25T22:19:00.000+09:002015-10-25T22:19:09.940+09:00Null-aware operators : ??=<a href="http://dart.pscsrv.co.jp/2015/10/null-null-aware-operators.html">Null-aware operators</a> について一つずつ事例を挙げて紹介していきます。<br />
<br />
<br />
前回の「<a href="http://dart.pscsrv.co.jp/2015/10/null-aware-operators.html">??</a>」に続き 2 件目は「??=」です。<br />
「A ??= B」といった記載をし、A が null の場合のみ B を実行するという意味です。<br />
<br />
<br />
<iframe frameborder="0" src="https://dartpad.dartlang.org/embed-dart.html?id=b0eb8c12cbe23afb21f4" style="height: 300px; width: 100%;"></iframe>
<br />
<br />
<br />
上記のとおり、「??=」の左辺が null の場合と、そうでない場合で振る舞いが異なります。<br />
「??」に比べたら、まだ使うシーンはあるかもしれませんが、積極的に利用するかは???です。。。<br />
<br />
<br />
次回は「x?.p」を紹介します。<br />
次回あたりから使い勝手が良さそうなのが出てきますよ~くらもと やすひろhttp://www.blogger.com/profile/04853989769667954462noreply@blogger.com2tag:blogger.com,1999:blog-445357067353628624.post-18932728477290475392015-10-25T22:06:00.000+09:002015-10-25T22:06:12.921+09:00Null-aware operators : ??前回の記事で取り上げた <a href="http://dart.pscsrv.co.jp/2015/10/null-null-aware-operators.html">Null-aware operators</a> について一つずつ事例を挙げて紹介していきます。<br />
<br />
<br />
まず、1 件目は「??」です。<br />
「A ?? B」といった記載をし、A が null でなければ A を、null の場合は B を実行するという意味です。<br />
<br />
<br />
<iframe frameborder="0" src="https://dartpad.dartlang.org/embed-dart.html?id=825f416a0bf96af2ff19" style="height: 300px; width: 100%;"></iframe>
<br />
<br />
<br />
上記のとおり、変数 a と b が null であるので、 print 関数を実行すると c の文字列が表示されます。<br />
個人的にはあまり利用シーンが浮かばなかったのですが、あればあるで良いといった感じでしょうか。。。<br />
<br />
<br />
次回は「??=」を紹介します。くらもと やすひろhttp://www.blogger.com/profile/04853989769667954462noreply@blogger.com1tag:blogger.com,1999:blog-445357067353628624.post-89896764423538809592015-10-04T21:45:00.000+09:002015-10-04T21:45:20.524+09:00Null の扱い(Null-aware operators)8/31 に Dart 1.12 がリリースされました。<br />
(UP が遅くなってしまいました。。。)<br />
<br />
<br />
今回のリリースで追加された機能の説明に入る前に次のコードをご覧ください。<br />
<pre class="brush: java" style="background-color: #eeeeee;">var isNull = null;
isNull.toString();
</pre>
<br />
<br />
多くの言語では null という概念に悩まされます。<br />
上のコードでは toString() というモジュールを実行しようとしていますが、実行元のオブジェクトが null であるために例外が発生してしまいます。<br />
#いわゆるヌルポ(NullPointerException)ですね<br />
<br />
<br />
多くのプログラマは、この null を常に意識してコーディングせねばならず、他人の書いたモジュールの返り値に null が含まれるかどうかまで気にしないといけません。<br />
<br />
<br />
今回の Dart のアップデートでこの null に対するわずらわしさを解消、とまではいきませんが、軽減するような機能が追加されました。
<br />
Null-aware operators です。<br />
<br />
<iframe frameborder="0" src="https://dartpad.dartlang.org/embed-html.html?id=6225e1e1e9ea91b98f72" style="height: 300px; width: 100%;"></iframe>
<br />
<br />
<br />
「<a href="http://news.dartlang.org/">Dart News & Updates</a>」で紹介されていたコードをそのまま載せましたが、各演算子に「?」を付けることで null の可能性があるオブジェクトの扱いをシンプルにしてくれます。<br />
<pre class="brush: java" style="background-color: #eeeeee;">var isNull = null;
isNull?.toString();
</pre>
<br />
<br />
toString() の前に「?」を付けることで、オブジェクトが null の場合でも例外を発生せず、後続へ流れます。<br />
確かに便利だな~と思います。<br />
<br />
<br />
Null-aware operators にはいろいろな種類がありますので、別の記事でまとめようと思います。<br />
<br />
<br />
--- 参考もと<br />
<a href="http://news.dartlang.org/2015/08/dart-112-released-with-null-aware.html">http://news.dartlang.org/2015/08/dart-112-released-with-null-aware.html</a>くらもと やすひろhttp://www.blogger.com/profile/04853989769667954462noreply@blogger.com1tag:blogger.com,1999:blog-445357067353628624.post-71858458307227199112015-09-23T20:30:00.000+09:002015-09-23T20:30:39.966+09:00カスケード呼び出し以前、Dart で HTML 要素にスタイルを設定する方法を 2 種類紹介しました。<br />
(<a href="http://dart.pscsrv.co.jp/2015/07/dart.html">その1</a>、<a href="http://dart.pscsrv.co.jp/2015/09/dart.html">その2</a>)<br />
<br />
<br />
それぞれの方法で文字色を赤色にするだけのシンプルな内容でしたが、実際のケースでは複数のものを同時に設定することが多いと思います。<br />
<br />
<br />
そういったときに便利なのが今回紹介する「カスケード呼び出し(カスケード演算子)」です。<br />
コードを見たほうが説明しやすいので、次のコードをご覧ください。<br />
<br />
<br />
<iframe frameborder="0" src="https://dartpad.dartlang.org/embed-html.html?id=c572c71c6bffffdb538c" style="height: 300px; width: 100%;"></iframe>
<br />
<br />
<br />
「#sample_container_id」という id の div 要素に、文字色、フォントサイズ、フォントを設定しています。<br />
<br />
<br />
その際に、それぞれのスタイル設定をカスケード演算子「..」で繋ぐことで一度に行っています。<br />
このような複数の関数の同時実行や複数のプロパティへ同時アクセスすることを「カスケード呼び出し」といいます。<br />
<br />
<br />
コーディングとしては毎回の「div.style」部分を省略でき、適度な改行を入れることで可読性もよくなると思います。<br />
スタイル設定や、要素のプロパティに対するアクセスの際はぜひとも使っていきたいですね!<br />
<br />
<br />
ちなみに、、、スタイル設定その2の方法でもカスケード呼び出しは可能ですので、スタイル設定の方法自体は好きな方法でよさそうです!<br />
<br />
<br />
<iframe frameborder="0" src="https://dartpad.dartlang.org/embed-html.html?id=1506bdde27b0069fe6b4" style="height: 300px; width: 100%;"></iframe>
<br />
<span style="color: #999999;">その2の方法だと、スタイルを「;」区切りで複数設定できるから、わざわざカスケード呼び出しする必要ないんですけどね。。。</span>くらもと やすひろhttp://www.blogger.com/profile/04853989769667954462noreply@blogger.com2tag:blogger.com,1999:blog-445357067353628624.post-62220126830828218932015-09-06T20:56:00.000+09:002015-09-06T21:03:08.257+09:00Dart でスタイルを設定するには2以前、Dart でスタイルを設定する方法を記事にしましたが、今回は別の方法でスタイル設定してみます。(前回の記事は<a href="http://dart.pscsrv.co.jp/2015/07/dart.html">こちら</a>)<br />
<br />
<br />
Dart には HTML 要素を扱うための「Element」クラスがあります。<br />
このクラスのプロパティ「attributes」を用いた方法です。<br />
<br />
<br />
<iframe frameborder="0" src="https://dartpad.dartlang.org/embed-html.html?id=1cc4d6c4a53c8a145559" style="height: 300px; width: 100%;"></iframe>
<br />
<br />
前回の記事と全く同じスタイルの設定ですが、CSS 専用のクラスを用いるのではなく、汎用的な「attributes」に key 値を渡すことで実現しています。<br />
個人的にはこちらの書き方のほうが好きですね。<br />
<br />
<br />
今回は以上です。<br />
<br />くらもと やすひろhttp://www.blogger.com/profile/04853989769667954462noreply@blogger.com0tag:blogger.com,1999:blog-445357067353628624.post-74787662250582551532015-08-29T20:53:00.000+09:002015-08-29T20:53:18.819+09:00Dart で乱数使用Dart で乱数を使用する方法を書き残します。<br />
<br />
<br />
乱数を使用するためには「Random」クラスを用います。<br />
Random クラスは math ライブラリに用意されており、インポートして使用可能となります。<br />
<br />
<br />
<iframe frameborder="0" src="https://dartpad.dartlang.org/embed-dart.html?id=8ac33f0a30ff055c451b" style="height: 300px; width: 100%;"></iframe>
<br />
<br />
<br />
使用方法はいたってシンプルで、「nextInt」メソッドに乱数の最大値を渡して実行するだけです。<br />
※ここで渡す最大値は返却される乱数に含まれないので注意が必要です。<br />
(つまり 0 < nextInt(10) < 10 ということ)<br />
<br />
<br />
利用頻度は???ですが、たまに乱数を使いたくなることがあるので、残して置きました。<br />
今回は以上です。くらもと やすひろhttp://www.blogger.com/profile/04853989769667954462noreply@blogger.com3tag:blogger.com,1999:blog-445357067353628624.post-9334571744513477362015-08-23T22:35:00.000+09:002015-08-25T00:51:51.062+09:00DartPad の新しい共有機能がすごい!!DartPad の新しい共有機能が 8/20 に <a href="http://news.dartlang.org/2015/08/a-new-way-to-share-with-dartpad.html">Dart News & Updates</a> で公開されました。<br />
<br />
<br />
英文を訳す前に「これはすごい!」と感じてしまったのですが、実際にこのブログに共有したものを見れば体感できると思います!<br />
<br />
<iframe frameborder="0" src="https://dartpad.dartlang.org/embed-html.html?id=456bf7d42e9890f341b5" style="height: 300px; width: 100%;"></iframe>
<br />
<br />
どうでしょう?かなり Cool ですよね?!<br />
DartPad で書いたコードを共有するだけでなく、その実行結果(HTML やコンソールへのアウトなど)を確認できます。<br />
<br />
<br />
通常、ブログなどにコードを載せる場合、実行結果までは表現できないので、読み手にイメージさせづらいことが問題でした。<br />
ですが、この共有機能があれば見事に解消できますね!<br />
<br />
<br />
実際の共有の仕方ですが、DartPad の右上に「Share…」というボタンがありますので、それをクリック。<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNkqODGA-ZrJHxJX0M8PpbIr7zgJnXNOaPgsIRjt8Ce5EVojPzyEt9jWN66fakGGaVIfAWVCwHiXZ5USSYgbMH_h0SCJOqQpgh1if0x-iX-6boIA_kPhrR3e2awIJIM7sgNI_yUViuE5sb/s1600/dartPadShare.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="218" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNkqODGA-ZrJHxJX0M8PpbIr7zgJnXNOaPgsIRjt8Ce5EVojPzyEt9jWN66fakGGaVIfAWVCwHiXZ5USSYgbMH_h0SCJOqQpgh1if0x-iX-6boIA_kPhrR3e2awIJIM7sgNI_yUViuE5sb/s320/dartPadShare.png" width="320" /></a></div>
<br />
<br />
上記のような窓が立ち上がるので、「Embed」にあるテキストエリアをコピペで共有できます。簡単ですね!<br />
ちなみに、下にあるラジオボタンで、Dart 資産のみか、Dart + HTLM かを選択できます。<br />
(今回共有したのは Dart + HTML です)<br />
<br />
<br />
共有の仕方も簡単ですし、今後は DartPad を使ったコーディングが捗るな~<br />
<br />
<br />
--- 参考もと<br />
<a href="http://news.dartlang.org/2015/08/a-new-way-to-share-with-dartpad.html">http://news.dartlang.org/2015/08/a-new-way-to-share-with-dartpad.html</a><br />
<br />
<a href="http://9-bb.com/css-button-2/">http://9-bb.com/css-button-2/</a>(コード中の Web デザイン)くらもと やすひろhttp://www.blogger.com/profile/04853989769667954462noreply@blogger.com1tag:blogger.com,1999:blog-445357067353628624.post-77384143186856461572015-08-18T22:13:00.001+09:002015-08-18T22:13:55.473+09:00最近の Dart についてGoogle の検索エンジンで「Dart 言語」と検索すると、このブログが 2 ページ目くらいに表示されます。<br />
<span style="font-size: large;"><b>ようやくコツコツと書いてきたことが実を結んだんだな!</b></span><br />
、、、ではなく、Dart 自体の注目度が下がってきているのだと思います。<br />
<br />
<br />
現に、公式のブログ「<a href="http://news.dartlang.org/">Dart News & Updates</a>」は 6 月から更新がなく、8 月になって 2 ヶ月ぶりに更新されている状況です。<br />
このブログよりも更新されていません(笑)<br />
<br />
<br />
この記事を書こうと考えたタイミングでは 8月の更新はされておらず、「このままフェードアウトしてしまうのでは?」と心配になっていましたが、このタイミングで UP されて少しホッとしています。<br />
<br />
<br />
JavaScript へのコンパイルに特化した言語へと方針変更をしてから更新頻度こそ減りましたが、コンパイル速度の改善やECMA標準の対応など、Dart は着実に前に進んでいます。<br />
<br />
<br />
このブログでも書けることは限られますが、少しでも多くの情報を提供できるように前に進んで行こうと思います。くらもと やすひろhttp://www.blogger.com/profile/04853989769667954462noreply@blogger.com1tag:blogger.com,1999:blog-445357067353628624.post-89847476124959673162015-07-19T20:59:00.001+09:002015-09-06T20:39:48.744+09:00Dart でスタイルを設定するにはDart が JavaScript のコンパイル前提と考えた際に、よく使いそうなコードを残していこうと思います。<br />
<br />
<br />
HTML 要素へのスタイルの適用は基本的に css ファイルで行いますが、時にソースコードから動的に設定する必要がある場合もあります。<br />
ごくごく基本的なコードではありますが、複数の言語を扱うような人の場合、混乱する場合もあるので書き残します。<br />
<br />
<br />
<iframe frameborder="0" src="https://dartpad.dartlang.org/embed-html.html?id=83521beea928037c3dd4" style="height: 300px; width: 100%;"></iframe>
<br />
<br />
上の例では「sample_container_id」という id が指定された HTML 要素(今回は div 指定)に対して、スタイル「color : red」を設定しています。<br />
Dart でのスタイル指定は <a href="https://api.dartlang.org/apidocs/channels/stable/dartdoc-viewer/dart:html.CssStyleDeclaration">CssStyleDeclaration</a> クラスを用いて行います。<br />
直感的に書ける感じなのでいいですね。<br />
<br />
<br />
今回は以上です。くらもと やすひろhttp://www.blogger.com/profile/04853989769667954462noreply@blogger.com0tag:blogger.com,1999:blog-445357067353628624.post-48771686832450730282015-06-02T22:24:00.000+09:002015-06-02T22:24:45.439+09:00Dart で Local Storage前回の記事で DartPad を紹介しましたが、筆者が2回めに DartPad を開いた際、1回めに入力したコードが残っていて驚きました。<br />
<br />
<br />
まあ、単に Local Storage に保存されているだけなんですが、普段 Web ブラウザベースの開発環境を使わないので、新鮮に感じたのでした。<br />
<br />
<br />
新鮮に感じたついでに、Dart で Local Storage を利用する方法を書いてみました。
<br />
<br />
<br />
まずは dart。<br />
<pre class="brush: java" style="background-color: #eeeeee;">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;
});
}
</pre>
<br />
<br />
そして html。<br />
<pre class="brush: java" style="background-color: #eeeeee;"><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>
</pre>
<br />
<br />
結果はこんな感じ。<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-VR7Ac3t_mjT6npGsCSxR1N5Vo5Dz2BGvHiJIhkTdTFkRl3RXUWKKT4C2JXe5NVYux8xp6fMEdB5pGLRM0LK_eNWoVcCoeMPZ-qNemOdjHYbxCrQyG-pO5iNIhOMdObSqBlS8MinOx2Xs/s1600/r%25E3%2582%258D%25E3%2583%25BC%25E3%2581%258B%25E3%2582%258B%25E3%2581%2599%25E3%2581%25A8%25E3%2582%258C%25E3%2583%25BC%25E3%2581%2598.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="316" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-VR7Ac3t_mjT6npGsCSxR1N5Vo5Dz2BGvHiJIhkTdTFkRl3RXUWKKT4C2JXe5NVYux8xp6fMEdB5pGLRM0LK_eNWoVcCoeMPZ-qNemOdjHYbxCrQyG-pO5iNIhOMdObSqBlS8MinOx2Xs/s640/r%25E3%2582%258D%25E3%2583%25BC%25E3%2581%258B%25E3%2582%258B%25E3%2581%2599%25E3%2581%25A8%25E3%2582%258C%25E3%2583%25BC%25E3%2581%2598.png" width="640" /></a></div>
<br />
<br />
実際のところ DartPad は、iframe タグに sandbox 属性「allow-same-origin」の指定がないので動きません。。。<br />
<span style="color: #cccccc;">DartPad で動かしたければ、無理やりやってね(笑)</span>
<br />
<br />
<br />
久々に技術的なことを書きました。<br />
DartPad が思いのほか手軽なので、今後は技術的な内容も増やしていこうと思います。くらもと やすひろhttp://www.blogger.com/profile/04853989769667954462noreply@blogger.com1tag:blogger.com,1999:blog-445357067353628624.post-63202553440923180562015-05-14T09:35:00.000+09:002015-05-14T09:36:50.122+09:00DartPad とは5月6日の「Dart News & Updates」で、ブラウザ上で Dart のコードを体験できる Web アプリ「DartPad」が発表されました。<br />
#DartPad のリンクはこちら(<a href="https://dartpad.dartlang.org/">https://dartpad.dartlang.org/</a>)<br />
<br />
<br />
つい先日、DartEditor の開発終了が発表されたところですが、今回発表された DartPad は IDE としての位置づけではなく、これから Dart に触れる開発者向けの体験用のアプリとなっています。<br />
<div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh90UcS1_QF-yeJWxrV1TsKNG2CEcPDRQz84PnIfVvKJKi3S3gc9euSCFe4jZGt-iL4li6VJjCKG7SrCjaQTLztCon8XwYrR60u4ebPV6OQm9a6LomugshoXf37VpxxoJEPiRkrMd0t0w7H/s1600/dartpad.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="235" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh90UcS1_QF-yeJWxrV1TsKNG2CEcPDRQz84PnIfVvKJKi3S3gc9euSCFe4jZGt-iL4li6VJjCKG7SrCjaQTLztCon8XwYrR60u4ebPV6OQm9a6LomugshoXf37VpxxoJEPiRkrMd0t0w7H/s400/dartpad.png" width="400" /></a></div>
<br />
<br />
DartPad では、Dart コード、API、HTML、CSSをサポートしており、ブラウザ上で書いたコードが即時実行可能となるので、初心者だけでなく経験者でも大いに利用できそうです。<br />
(簡単な動作テストとか楽そうだな)<br />
<br />
<br />
<br />
今後は DartPad を利用した言語仕様系の記事も書いていこうと思います。</div>
<br />
<br />
--- 参考もと<br />
<a href="http://news.dartlang.org/2015/05/announcing-dartpad-friction-free-way-to.html">http://news.dartlang.org/2015/05/announcing-dartpad-friction-free-way-to.html</a>くらもと やすひろhttp://www.blogger.com/profile/04853989769667954462noreply@blogger.com2tag:blogger.com,1999:blog-445357067353628624.post-31083226240675979552015-05-12T22:55:00.001+09:002015-05-14T09:17:36.474+09:00DartEditor が開発終了へ4月30日の「Dart News & Updates」では、Dart 1.11 のリーリスとともに DartEditor の開発を終了すると伝えています。<br />
<br />
<br />
理由としては、WebStorm、IntelliJ 、Eclipse plugin for Dart などの Dart をサポートした IDE が増えたことが大きいようで、開発者はそれらを利用することになりそうです。<br />
また、DartPad が別のタイミングで発表されていますので、開発の規模や用途に応じて選択していくのが良いかもしれません。<br />
<br />
<br />
現在の Dart のバージョンが 1.10 ですので、DartEditor としても最終バージョンでしょうか。。。<br />
Blog 以外のところでもお世話になってきた IDE ですので少し寂しいですが、DartPad などとても興味深い発表もありましたので、その変化も楽しみつつ、引き続き追いかけていきます。<br />
<br />
<br />
--- 参考もと<br />
<a href="http://news.dartlang.org/2015/04/the-present-and-future-of-editors-and.html">http://news.dartlang.org/2015/04/the-present-and-future-of-editors-and.html</a>くらもと やすひろhttp://www.blogger.com/profile/04853989769667954462noreply@blogger.com1tag:blogger.com,1999:blog-445357067353628624.post-30589481845047593702015-04-27T22:45:00.000+09:002015-04-27T22:45:10.566+09:00JavaScript へコンパイルできる言語<pre wrap="">先日、Dart が JavaScript へのコンパイル機能を強化していく方針を出したと記事にしました(<a href="http://dart.pscsrv.co.jp/2015/04/chrome-dart.html">該当記事はこちら</a>)。
それでは Dart 以外に同様の言語はどのくらいあるのでしょうか?
- CoffeeScript</pre>
<pre wrap=""> - TypeScript</pre>
<pre wrap=""> - HAXE</pre>
<pre wrap=""> - JSX
CoffeeScript は JavaScript のコードの書き難い部分を解消し、また大規模な開発向けに作られた言語です。
類似の言語の中で一番利用されており、有名な言語だと思います。
TypeScript は Micorosoft が開発した言語で、JavaScript の構文をそのまま利用できることが特徴的な言語です。
これも大規模開発向けに作られています。
HAXE は JavaScript 以外の言語にもコンパイル可能な言語で、主にマルチプラットフォーム開発を目的として使用されている言語です。
コンパイルが可能なのは「JavaScript」「C++」「C#」「Java」「PHP」など。
JSX はモバゲーの DeNA が開発した言語で、「スピード」の向上に重点を置いた言語です。
JSX によって最適された JavaScript コードは、同等の JavaScript プログラムと比較して 10% 以上高速になるそうです。
</pre>
<pre wrap="">筆者は上記言語のどれも利用したことはありませんので、現時点で Dart との比較はできませんが、キーとなってくる「コードの書きやすさ」「大規模開発への適応」「スピード」に着目しながら、今後の Dart の動向と併せてこれらの言語にも触れていこうと思います。</pre>
くらもと やすひろhttp://www.blogger.com/profile/04853989769667954462noreply@blogger.com1tag:blogger.com,1999:blog-445357067353628624.post-42653134394680878812015-04-04T01:09:00.001+09:002015-04-04T01:14:21.966+09:00Dart 1.9 リリース3月26日に Dart 1.9 が公開されました。<br />
<br />
<br />
非同期系の機能の強化が主で、ECMA標準の仕様実装にあたるものが多いです。<br />
(今回でECMA標準の仕様実装はひととおり終わったのかな)<br />
<br />
<br />
まず、async / await が構文として利用可能になりました。<br />
これにより、以前のバージョンまででは Future を用いて行っていた遅延計算(単一イベントの非同期)と、Stream を用いて行っていた複数イベントの場合の非同期処理を簡潔に書くことができるようになります。<br />
<br />
<br />
また、ジェネレータ『sync*, async*, yield, yield*』のサポートの開始(これは別の記事で詳しく書こうと思います。たぶん。。。)、enum が正式にサポートされたり、そのほかにも細かい改善が行われています。<br />
<br />
<br />
DartVm が Chrome に搭載されないことが発表された翌日のリリースになりますが、今後の動きに期待ができるバージョンアップ内容なのではないでしょうか。<br />
<br />
引き続き Dart の動向を追いかけて行こうと思います。<br />
<br />
(超スローペースではありますが。。。)<br />
<br />
<br />
--- 参考もと<br />
<a href="http://news.dartlang.org/2015/03/dart-19-release-youve-been-await-ing-for.html%EF%BD%96">http://news.dartlang.org/2015/03/dart-19-release-youve-been-await-ing-for.htmlv</a>くらもと やすひろhttp://www.blogger.com/profile/04853989769667954462noreply@blogger.com0tag:blogger.com,1999:blog-445357067353628624.post-26245353200751292882015-04-01T21:16:00.000+09:002015-04-04T01:10:01.069+09:00Chrome で Dart をネイティブに動かせないDartVM に関して、Google Chrome に統合されないことが正式に発表されました。<br />
<br />
<br />
以前より Chrome にDartVM が搭載されることが予想されており、Chrome 上で<br />
Dart をネイティブに動かせる未来が来るのだと思っていましたが、その夢は断<br />
たれてしまいました。<br />
<br />
<br />
今後は、JavaScript のコンパイル機能の強化に取り組むという事で、大きな方<br />
向転換ではありますが、今後の Dart の動向に期待していきたいですね。<br />
<br />
<br />
ちなみに、DartVM のサポートは引き続き行っていくようなので、Dart 言語そのものの動きについても見ていこうと思います。<br />
<br />
<br />
--- 参考もと<br />
<a href="http://news.dartlang.org/2015/03/dart-for-entire-web.html">http://news.dartlang.org/2015/03/dart-for-entire-web.html</a>くらもと やすひろhttp://www.blogger.com/profile/04853989769667954462noreply@blogger.com2tag:blogger.com,1999:blog-445357067353628624.post-35302215328614849512014-12-31T15:03:00.000+09:002014-12-31T15:03:53.974+09:00プログラミング言語「Dart」の2014年今日12/31で2014年が終わります。<br />
Blog で追いかけてきた Dart 言語の1年を振り返ってみたいと思います。<br />
<br />
<br />
<hr />
2013年11月 Dart SDK 1.0 公開<br />
※2014年の出来ごとではないですが、ここから Dart がスタートしたようなものなので<br />
<br />
<br />
<hr />
2014年01月 <a href="http://dart.pscsrv.co.jp/2014/02/dart-sdk-11.html">Dart SDK 1.1 バージョンアップ</a><br />
<br />
<br />
2014年02月 Dart SDK 1.2 バージョンアップ<br />
<br />
<br />
2014年04月 Dart SDK 1.3 バージョンアップ<br />
<br />
<br />
2014年05月 Dart SDK 1.4 バージョンアップ<br />
<br />
<br />
2014年06月 <a href="http://dart.pscsrv.co.jp/2014/08/dart-20148.html">Dart SDK 1.5 バージョンアップ</a><br />
<br />
<br />
2014年07月 <a href="http://dart.pscsrv.co.jp/2014/08/dart-20148.html">Dart が Ecma の標準規格となる</a><br />
<br />
<br />
2014年08月 <a href="http://dart.pscsrv.co.jp/2014/10/dart-17.html">Dart SDK 1.6 バージョンアップ</a><br />
<br />
<br />
2014年10月 <a href="http://dart.pscsrv.co.jp/2014/10/dart-17.html">Dart SDK 1.7 バージョンアップ</a><br />
<span style="color: white;">2014年10月</span> Dart が TIOBE プログラミング言語ランキングで17位に選ばれる<br />
<br />
<br />
2014年11月 Dart SDK 1.8 バージョンアップ<br />
<br />
<br />
2014年12月 列挙型などの新機能が Ecma で承認される<br />
<br />
<br />
<hr />
<br />
<br />
記載したトピックが 言語仕様の内容に偏ってはいますが、この1年でとてもたくさんのバージョンアップがされてきた事がわかります。<br />
<br />
<br />
また、言語仕様関連でいうと、Ecma の標準規格となった事は2014年の中でも大きなニュースではないでしょうか!<br />
つい先日、以前から進められていた列挙型などの承認もおりたようで、順調に進んでいる事が伺えます。<br />
<br />
<br />
明日から2015年になりますが、今後の Dart の動向も随時お届けできる様に Blog を続けていきます。<br />
#年末にかけてプライベートがバタバタしていて更新出来ませんでしたが、そろそろ頑張ります。。。くらもと やすひろhttp://www.blogger.com/profile/04853989769667954462noreply@blogger.com1tag:blogger.com,1999:blog-445357067353628624.post-75018247308666229472014-10-24T00:10:00.000+09:002014-10-24T00:10:46.796+09:00Dart 1.7 リリース前回の投稿から2ヵ月ほど経ちました。<br />
業務が忙しかったのは理由になりませんね。。。<br />
<br />
<br />
前回と全く同じ書き出しです(笑)<br />
この間に Dart のバージョンアップが行われましたので、簡単に紹介します。<br />
<div>
<br />
<br />
<h3>
Dart 1.6</h3>
1.6 のバージョンアップではなかなか大きな変更がありました。<br />
それは「Deferred loading」です。<br />
<br />
<br />
外部ライブラリを使用するタイミングまで読み込まず、必要なタイミングでロードするというものです。<br />
これにより実行速度の向上が見込めます。<br />
<br />
<br />
そのほかにもクラスに対する機能追加・修正、バグ Fix など、様々な更新が行われました。<br />
<br />
<br />
<h3>
Dart 1.7</h3>
1.6 に比べると控えめなバージョンアップですが、非同期系の機能強化や「pub global」が実装されました。<br />
pub については以前紹介しましたが(<a href="http://dart.pscsrv.co.jp/2014/04/pub.html">こちら</a>)、今回の改善で使いやすさが向上しています。<br />
<br />
<br />
<h3>
WebStorm 9</h3>
Web 開発エディタ「WebStorm 9」が Dart をサポートするようになるようです。<br />
WebStorm 9 は Node.js などもサポートした強力なエディタです。<br />
<br />
<br />
Dart そのものが進化するのは勿論うれしいことですが、今回のIDEのような開発ツールの選択の幅が広がるのも良いことですね。<br />
<br />
<br />
つらつらと書きましたが、今回はこんなところです。<br />
<br />
<br />
<br />
--- 参考もと<br />
<a href="http://news.dartlang.org/2014/08/dart-16-adds-support-for-deferred.html">http://news.dartlang.org/2014/08/dart-16-adds-support-for-deferred.html</a><br />
<br />
<a href="https://www.dartlang.org/tools/pub/cmd/pub-global.html#running-a-script-from-your-path">https://www.dartlang.org/tools/pub/cmd/pub-global.html#running-a-script-from-your-path</a><br />
<br />
<a href="http://news.dartlang.org/2014/10/webstorm-9-released-with-improved-dart.html">http://news.dartlang.org/2014/10/webstorm-9-released-with-improved-dart.html</a><br />
<br />
<br /></div>
くらもと やすひろhttp://www.blogger.com/profile/04853989769667954462noreply@blogger.com0tag:blogger.com,1999:blog-445357067353628624.post-39792032889000597902014-08-16T00:30:00.001+09:002014-08-16T00:30:58.196+09:00Dart 最近の動向(2014年8月)前回の投稿から2ヵ月ほど経ちました。<br />
業務が忙しかったのは理由になりませんね。。。<br />
<br />
<br />
その間に Dart についての大きな2つのトピックがありましたので、今回はそれについて書きます。<br />
<br />
<br />
まず1点目。<br />
Dart 1.5 でつくられた Web アプリは Android デバイス上で起動やデバッグが可能になったようです。<br />
これは、JavaScript にコンパイルすることなく可能とのこと。<br />
以前、<a href="http://dart.pscsrv.co.jp/2013/12/android-dart.html">Dart と Android の記事</a>を書きましたが、がぜん現実味が出てきましたね!<br />
<br />
ただ、環境準備にひと手間いるようなので、実際に導入した結果を記事にしたいと思います。<br />
(そのうち、きっと。。。)<br />
<br />
<br />
2点目ですが、Dart が Ecma の標準規格となりました。<br />
ECMAScript (JavaScript)をはじめ、C# や JSON なども Ecma による標準化が行われており、Dart も公式に仲間入りしたことになります。<br />
<br />
今後は列挙型(Enum)などの導入も予定されており、今まで以上に動向に注意していこうと思います。<br />
<br />
<br />
今回はこんなところです。<br />
<br />
<br />
--- 参考もと<br />
<a href="http://news.dartlang.org/2014/07/ecma-approves-1st-edition-of-dart.html">Dart News & Updates</a><br />
<br />
<a href="https://www.dartlang.org/tools/editor/mobile.html">https://www.dartlang.org/tools/editor/mobile.html</a>くらもと やすひろhttp://www.blogger.com/profile/04853989769667954462noreply@blogger.com1tag:blogger.com,1999:blog-445357067353628624.post-86765119011645754282014-06-18T18:59:00.000+09:002014-06-18T18:59:38.307+09:00文字列について本当はフレームワーク「AngularDart」の導入について書きたかったのですが、まとまった時間が取れなかったので、文字列について書きます。<br />
<br />
<br />
いまさら文字列と言われてしまいそうですが、Dart の文字列を紹介している Web ページの多くは公式リリース前のものが多く、多少情報が古いものもありますので、あえてこのタイミングで記事にしてみました。<br />
<br />
<br />
Dart で文字列を扱う場合、シングルクォート「'」かダブルクォート「"」で囲みます。<br />
<pre class="brush: java" style="background-color: #eeeeee;">// シングルクォート
var str1 = 'dart_String';
// ダブルクォート
var str2 = "dart_String";
// シングルクォートを文字列として使用
var str3 = "Programming language 'Dart'";
</pre>
上記例示の3つ目のように、ダブルクォートで囲った場合はシングルクォートを文字列として扱うことが可能です。(その逆もしかり)<br />
<br />
<br />
エスケープシーケンスが使用可能です。<br />
<pre class="brush: java" style="background-color: #eeeeee;">// "dart"と"String"の間で改行される
var str1 = 'dart\nString';
// エスケープシーケンスの"\"を文字列として表示する場合は
// "\\"と記述する
var str2 = '\\n';
// 今は使えないが、Dartドラフト版時代は
// "@"を使うことでエスケープさせなくすることができた
// var str3 = @'\n';
</pre>
<br />
<br />
上の例では改行を表すためにエスケープシーケンスを用いましたが、シングルクォート(もしくはダブルクォート)を3つ重ねて囲むことで改行を含む文字列を記述することが可能です。<br />
<pre class="brush: java" style="background-color: #eeeeee;">// HTMLの<PRE>タグのように使用できる
var str1 = '''dart
String''';
</pre>
<br />
<br />
「$」を用いることで、文字列リテラル内に式の値を代入することが可能です。<br />
<pre class="brush: java" style="background-color: #eeeeee;">var str1 = 'Dart';
// 式の値の代入
var str2 = 'Programming language $str1';
// 文字列と式の境界が分からない場合は「${式}」で記述する
var str3 = 'Programming language ${str1}!!';
</pre>
<br />
<br />
文字列の比較は「==」を用いて行います。<br />
<pre class="brush: java" style="background-color: #eeeeee;">var str1 = 'dart_String';
print("dart_String" == str1); // TRUE
</pre>
<br />
Dart に厳密等価演算子「===」は存在せず、すべて「==」で比較します。<br />
ですが、JavaScript へコンパイルした場合は、CoffeeScript などと同様に厳密等価演算子で比較しています。<br />
#Dart ドラフト版時代は「===」も実装されていました<br />
<br />
<br />
Dart の文字列リテラルはどれも String 型となるので、String のメソッドを使用可能です。<br />
String は変更不可能なオブジェクトのため、String を返却するメソッドは全て新しいオブジェクトを生成して返却しています。<br />
#Java と一緒ですね <br />
<br />
<br />
今回はこんなところです。くらもと やすひろhttp://www.blogger.com/profile/04853989769667954462noreply@blogger.com0