ようこそ!浜村拓夫の世界へ

    ブログ内検索

    最近の記事

    ブックマーク数の多い記事

    Blog Translation

    Powered By FC2ブログ

    Powered By FC2ブログ
    ブログやるならFC2ブログ


    FC2ブログ LOGIN

    with Ajax Amazon

    ES2015(ES6)へのバージョンアップ

    このエントリーを含むはてなブックマーク はてなブックマーク - ES2015(ES6)へのバージョンアップ あとで読む
    JavaScriptの開発は、ES2015(ES6)へ主軸が移りつつある。
    ES5からES6へバージョンアップする場合、どのようにしてES6の勉強をすれば良いだろうか?
    「ES2016」や「ES6」で検索しても、教材となる情報源がうまく見つけられない。

    ES6時代のJavaScript - クックパッド開発者ブログ (2015/02/02)

    最近のWebフロントエンドの変化は非常に激しく、ちょっと目を離した間にどんどん新しいものが出てきますよね。そんな激しい変化の一つとしてES6という次期JavaScriptの仕様があります。



    ES2015 (ES6)についてのまとめ - Qiita (2016/01/16)

    ES2015 (ES6)とは
    先日策定された、ECMASCriptの6th Editionのことであり、当初はES6と呼ばれているが、正式名称をECMASCript2015(ES2015と呼ばれる)とし、今後は年単位のリリースを予定しているとのこと
    [公式サイト] http://www.ecma-international.org/ecma-262/6.0/index.html



    春からはじめるモダンJavaScript / ES2015 - Qiita

    なぜ2016年の記事でES2016ではなく、ES2015なのか、と疑問に思った方もいるかもしれません。それは、ES2015がただの年次アップデートではなく、これから始まる毎年のメジャーバージョンアップの起点となるバージョンであり、またES5から飛躍的に仕様が増えたバージョンであるからです。

    トランスパイラで今すぐES2015を使う
    ここまで述べたES2015ですが、その仕様の多さのあまり、ほとんどの機能が現行のサポートすべきブラウザで実装されていません。
    で、ES2015で書いたコードをどう扱うかというと、トランスパイラと呼ばれるものでES5(場合によってはES3)に変換します。メンテすべきコードをES2015以降に保ちつつ、実行コードはES5という状態なら、殆どのブラウザにおいてランタイムでの動作が保証されます。

    メジャーなES2015トランスパイラに以下の2つがあります。
    ・babel: プラガブルにシンタックスを入れ替え可能なトランスパイラ。作者はsebmck(現facebook)
    ・typescript: 型アノテーションのシンタックスの拡張とその静的解析を行なう。MS製。



    2016年ももう冬ですがw
    ES2015を使う場合は、ターゲットとなるブラウザーの対応状況に応じて「トランスパイラ」というツールを使って、下位互換性を保つんですね。

    Babelで始める!モダンJavaScript開発 | HTML5Experts.jp (2015/10/01)

    Babelとは、2014/9から開発が始まっているECMAScriptコンパイラです。
    機能としては、ECMAScript2015 (ES6)やECMAScript7などで書かれたソースコードを一般的なブラウザがサポートしているECMAScript5の形式に出力することができます。



    TypeScript - Wikipedia

    TypeScript はマイクロソフトによって開発され、メンテナンスされているフリーでオープンソースのプログラミング言語である。TypeScript は JavaScript に対して、省略も可能な静的型付けとクラスベースオブジェクト指向を加えた厳密なスーパーセットとなっている。C# のリードアーキテクトであり、DelphiとTurbo Pascalの開発者でもあるアンダース・ヘルスバーグが TypeScript の開発に関わっている。



    言語の特長
    TypeScript は JavaScript (ECMAScript 5) に次のような言語機能の拡張を加えたものである。

    ECMAScript 6 由来
    ・クラス
    ・アロー関数式 (ラムダ式)
    ・オプション引数、デフォルト引数
    ・let, const
    ・テンプレート文字列:文字列内への変数埋め込み
    ・モジュール
    ・for/of
    ・分割代入
    ・Symbol


    ECMAScript 7 由来
    ・デコレーター
    ・Async/Await


    独自
    ・型注釈(変数、引数、戻り値などの型宣言)とコンパイル時の型チェック
    ・型推論, 型ガード - if文の instanceof などを利用した型推論
    ・インターフェイス
    ・列挙型
    ・Mixin
    ・ジェネリック
    ・名前空間
    ・タプル
    ・共用体型
    ・型エイリアス

    構文的には、静的型付けやクラス、継承、インターフェイスのようなオブジェクト指向、名前空間などの機能を追加する、ECMA-262 言語標準のマイクロソフトによる実装である JScript.NET と TypeScript はよく似ている。



    考えようによっては、TypeScriptをJavaScriptとして利用して、トランスパイラでES5とかに出力するという手もありだな?
    TypeScriptのうち、ES6由来の機能まで使ったり、ES7由来の機能まで使ったり、と使い分ける。
    JSの言語仕様を先取りして学習しておけば、いちいちバージョンアップのたびに勉強し直す手間が省けるかもしれない。

    ・トランスパイラの機能
    ・現状のブラウザー、サーバーサイドJSのバージョン対応状況を調査
    ・ES2015とTypeScriptの互換性を調査

    どうやってECMAScript 6を学び始めるか

    :beginner: ES6を学ぶ前に

    ES5がわからない
    => ES5を学ぶ

    Transpilerの動作原理がわからない
    => ブラウザが対応してる機能を優先して学ぶ

    Transpilerではできないことも理解してる
    => 容量用法を持って正しく使いましょう



    ・ES5とES6の差分を知るために、まずはシッカリとES5について復習しておく。
    ・トランスパイラの機能(できること、できないこと)を知っておく。
    ・トランスパイラも完璧じゃないので、利用者の環境を考慮しておく。

    ES2015の学習方法を調査しようと思っていたけど、TypeScriptも視野に入れて、再調査してみよう。
    いずれにせよ、便利になって、なおかつ学習コストが低いことが望ましい。

    Webページを開いたときに経過時間をjQueryで表示する方法

    このエントリーを含むはてなブックマーク はてなブックマーク - Webページを開いたときに経過時間をjQueryで表示する方法 あとで読む
    Webページを開いたときに、閲覧時間をユーザーに示したいです。
    経過時間をjQueryで表示する方法を調べました。(メモ)

    (参考) ページを開いたときに経過時間をカウントしてtitleに表示するJavaScript | iwb.jp

    以下のJavaScript(jQuery)のコードを貼り付けます。


    経過時間(秒数)を表示したい場所に、以下のようなHTMLコードを貼り付けます。

    表示時間:



    ●解説
    idを「elapsed_time」と指定したspanタグ内で、1秒毎にカウントアップした数字を書き換えています。

    言うまでもないことですが、あらかじめjQueryを導入しておかないと、上記のJavaScriptコードは動作しません。

    jQueryの「XML Tree」プラグイン

    このエントリーを含むはてなブックマーク はてなブックマーク - jQueryの「XML Tree」プラグイン あとで読む
    XMLデータの階層構造を可視化して、内容を検討しやすくしたい。
    JavaScriptのライブラリーを検索したら、イメージに近い物があった。(メモ)

    データ 階層 ツリー 可視化 CSS」でGoogle画像検索

    XMLを超見やすく折畳み表示できるjQueryプラグイン「XML Tree」:phpspot開発日誌

    XMLを超見やすく折畳み表示できるjQueryプラグイン「XML Tree」。
    ブラウザベースの味気ないXMLビューワよりも見やすい場合がありそうです。


    jQuery XML tree

    XML Tree - visualise and traverse your XML | jQuery Plugins
    プラグインの紹介ページがリンク切れだった。(ページ消滅)

    XML Tree - visualise and traverse your XML | jQuery Plugins」で検索したら、GitHubに派生したライブラリーがあった。

    GitHub - koppor/xmltree: Visualise and traverse your XML
    https://github.com/koppor/xmltree

    とりあえず、これを使ってみよう。

    他にも便利そうな「jsTree」というライブラリーがあった。

    jsTree
    https://www.jstree.com/
    jsTree

    確かな力が身につくJavaScript「超」入門 (確かな力が身につく「超」入門シリーズ)
    狩野 祐東
    SBクリエイティブ
    2015-10-30
    ¥ 2,678

    開眼! JavaScript ―言語仕様から学ぶJavaScriptの本質

    このエントリーを含むはてなブックマーク はてなブックマーク - 開眼! JavaScript ―言語仕様から学ぶJavaScriptの本質 あとで読む
    JavaScriptの入門書で「開眼! JavaScript」というコンパクトな本があります。

    開眼! JavaScript ―言語仕様から学ぶJavaScriptの本質
    Cody Lindley
    オライリージャパン
    2013-06-19
    ¥ 2,376


    ・JavaScriptの言語的特徴のまとめ本
    ・JavaScriptの「オブジェクト」を中心に説明
    ・陥りがちな落とし穴であるthis、プロトタイプチェーン(継承)、スコープチェーンなどをサンプルを使って解説
    ・サンプルコードは、「JSFiddle」(JavaScriptをテストできるWebサービス)上に用意されており、すぐ動作確認できます
    ・「どのように」、「なぜ」動作するのかを知ることで、JavaScriptを心から理解する「目覚め」を体験してください、とのこと。

    ●目次
    O'Reilly Japan - 開眼! JavaScript
    【“開眼! JavaScript ―言語仕様から学ぶJavaScriptの本質”の続きを読む】

    ローカルファイルのcookieを読み書きできないChrome

    このエントリーを含むはてなブックマーク はてなブックマーク - ローカルファイルのcookieを読み書きできないChrome あとで読む
    ChromeでJavaScriptの動作を検証するときは、注意が必要だ。
    Chromeのデフォルトの設定では、ローカルファイルのcookieの読み書きができない。

    設定を変えれば対処可能なようだが、面倒くさければとりあえずFireFoxやSafari等他のブラウザーで代用しても良いだろう。

    Chromeはローカルファイルからcookieの読み/書きができない | 狩野祐東の本 solidpanda.com

    Chromeは、デフォルトの設定ではローカルのHTMLファイルからcookieの読み/書きができないようになっています(ローカルファイルとはPCに保存されたHTMLファイルをダブルクリックして開いた状態のことで、アドレスバーのURLの冒頭が「file:///」になっている)。



    With having fun: Google Chrome で Cookie が試せない

    調べると、Chrome はデフォルトではローカルファイルでの Cookie の使用はサポートしていないようです。 ('file://' では Cookie は実行できないようです。)
    実行するには フラグ --enable-file-cookies が必要とのこと。(参考:Support cookies on file://)

    Google Chrome をフラグを付けて実行
    参考:Run Chromium with switches (flags)

    Mac で Chrome をフラグ付きで実行するには、コマンドラインから以下のように起動する。
    $ /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --enable-file-cookies &

    Web プログラマの人がブラウザの違いによって苦労しているとの話はよく聞きますが、苦労を垣間見た気がします。



    単純なことだけど、気が付かないとハマるだろうから、JavaScriptの動作チェックは複数の実行環境(ブラウザー)でテストしよう!

    確かな力が身につくJavaScript「超」入門 (確かな力が身につく「超」入門シリーズ)
    狩野 祐東
    SBクリエイティブ
    2015-10-30
    ¥ 2,678

    Web開発でフロントエンドが向かう未来

    このエントリーを含むはてなブックマーク はてなブックマーク - Web開発でフロントエンドが向かう未来 あとで読む
    Web開発で、JavaScriptを使いやすくする方法が検討されていた。
    Web開発の未来 – React、FalcorおよびES6 | プログラミング | POSTD

    Widenの最新の組み合わせは従来からサーバがJava、ブラウザ関係のコードが全てAngularJS(数年前から)、REST APIサポートにはJersey、またjQueryやunderscore、lodash、jQuery UI、そしてBootstrapなど、多数のライブラリによって構成されています。この後概説するWebアプリの基礎的サンプルをデザインする時に、次の4つの目標を念頭に置きました。

    1. 洗練された新しいアプローチ。
    2. シンプル
    3. 効率
    4. エレガント



    ●JavaScript
    Webアプリはブラウザー上で動作する。
    ダイナミックな動きは、主にJavaScriptで表現される。

    JavaScriptのコードも、AltJSを導入すれば、その糖衣構文で、自分が書きやすい文法で書くこともできる。
    AltJSの発展で得られた成果を、順次ECMAScriptの仕様に反映していけば良い。

    ●アプリの構造
    Web開発は、その構造上、ネットワークをはさんで、バックエンド(サーバー側)とフロントエンド(クライアント側)に分かれている。
    フロントエンドは、ブラウザー上で動作するGUIアプリを開発することである。

    GUIアプリを開発する手法は、PCやスマホなどのネイティブアプリのGUIを開発する手法をある程度流用できるだろう。
    GUIの設計は、単純なMVCだけではなく、PACなり他にもいろいろなデザインパターンが使える。

    Webアプリの問題は、インターネットをまたがる構造を持っているので、データの取り扱いに難がある点だろう。
    データストレージ=MVCのMを抽象化した形で、分離しておけば、Webでもネイティブでも、差異を吸収できる。

    ●テストの簡便化
    OOP等、手続き型言語のテストに飽きている人は、関数型言語の参照透過性を活用したくなるはずだ。
    関数型言語も、積極的に活用したい。

    今後のWeb開発やJavaScriptの動向について、その辺りを考慮したライブラリーやフレームワークに注目したい。

    JavaScriptで学ぶ関数型プログラミング
    Michael Fogus
    オライリージャパン
    2014-01-18
    ¥ 3,240


    入門 React ―コンポーネントベースのWebフロントエンド開発
    Frankie Bagnardi / Jonathan Beebe / Richard Feldman / Tom Hallett / Simon HØjberg / Karl Mikkelsen
    オライリージャパン
    2015-04-03
    ¥ 2,808

    JavaScriptフレームワーク「Vanilla」

    このエントリーを含むはてなブックマーク はてなブックマーク - JavaScriptフレームワーク「Vanilla」 あとで読む
    JavaScriptのおすすめフレームワークとして「Vanilla」が紹介されていました。

    JavaScript の過去と現在、ガチな JS アプリケーション設計 from Masashi Sakurai


    8. ES6
    ● すごく良くなっている – JS からではなくて、いきなり ES6 から入門 – 今まで書いてた人は、復習と Update
    ● ES.next – Object.observe – async/wait – など



    36. 結局フレームワークはどうなのか?
    ● Vanilla がおすすめ
    ● コードの寿命、チームの寿命を考える
    ● フレームワークのコードを断片的にも読むぐら いは必要
    ● 覚悟の問題 – フレームワークもメンテする – スクラッチから作りなおしてもいいやと思える



    vanilla javascript - Google 検索

    Vanilla JS

    バニラJavaScriptを選択する - Publickey

    jQueryをやめてVanillaを使おう!

    速習ECMAScript6: 次世代の標準JavaScriptを今すぐマスター!
    山田祥寛
    WINGSプロジェクト
    2015-08-28

    Javascriptの規格がECMAscriptが5から6に上がるということで 少しずつ新しい仕様や構文を知っておこうと思い本書に目を通しました。
    メジャーなJAVAScriptフレームワークやライブラリもECMAscript6見据えているということです。



    ECMAScript - Wikipedia

    ECMAScript(エクマスクリプト)は、Ecma Internationalによって標準化されたスクリプト言語である。
    実装ごとの互換性が低い JavaScript 類(特に JScript)の標準を定めたものである。
    現在の最新バージョンは6 (6th edition)。最初のバージョンのリリースは2015年6月である。



    いまからはじめるECMAScript 6 from Sensui Shogo


    mermaid.jsでインフォグラフィックを作成

    このエントリーを含むはてなブックマーク はてなブックマーク - mermaid.jsでインフォグラフィックを作成 あとで読む
    インフォグラフィックの作成支援ツールとして、「mermaid.js」というJavaScriptライブラリーが有効だろうか?(メモ)

    http://knsv.github.io/mermaid/

    mermaid.jsが素晴らしいけどなかなか使ってる人見かけないので実例晒す(追記あり) - Qiita

    mermaid.jsとは

    JavaScriptのチャート作成ライブラリです。他にも似たようなのは色々ありますが、これ一本でフローチャート、シーケンス、ガントに対応してるので、個人的にお気に入り。



    DailyJS | マークダウン風にグラフを生成するD3ベースの「Mermaid」 | JSお散歩

    本を書いている時にちょっとダイアグラム(※)を付け足したいと思うことはよくある。
    ダイアグラムを入れるのは効果的だが、ドローツールを引っ張りだすのは面倒臭い。
    本当に煮詰まっている時には紙とペン、あるいはアスキーアートで済ませがちだ。
    これは普通の人がテキスト編集する場合と同様だろう。
    エディタでフォントやタグをいじるよりマークダウンを使う方がずっと効率的だが、多くの人は面倒臭がって憶えようとはしない。

    そんなわけで Mermaid(GitHub: nsv/mermaid、MIT、Bower: mermaid)はちょうど私のツボにはまった。

    Mermaid の描画には d3 が使われている。
    d3 を使っているのならどこにでも Mermaid が使用可能だ。



    静的なデータからインフォグラフィックを作成したいとき、Adobe Illustratorで十分だろう。
    動的なデータから、インタラクティブなインフォグラフィックを作成したいとき、Web上ならJavaScriptの描画ライブラリを使えば良いだろう。

    JavaScriptでWebアプリを全部作るエコシステム

    このエントリーを含むはてなブックマーク はてなブックマーク - JavaScriptでWebアプリを全部作るエコシステム あとで読む
    最近、JavaScriptの用途が広がっていることに驚く。
    へー、こんなところでも使われているんだー!ってなかんじ。

    Webアプリを作るなら、プログラミング言語は、JavaScriptを覚えたら事足りるのではないか?
    ・フロントエンド → 元祖JavaScript
    ・バックエンド → Node.js

    で、JavaScriptをもっと書きやすくしたAltJSが様々にあって、どれを選ぶかで生産性も上げられるだろう。
    関数型のAltJSを選べば、テストも簡単になるのではないか?

    2015年Webサーバアーキテクチャ序論 - ゆううきブログ

    HTTP/2がいよいよRFC化し、既にh2oやtrusterdなどのHTTP/2のサーバ実装があり、今後Webサーバアーキテクチャを再訪することが増えるような気がしています。



    Webサーバアーキテクチャの歴史的経緯の複雑さも理解の難しさに拍車をかけている。 Webサーバ、特にWebアプリケーションサーバのアーキテクチャについて、CGIから始まりmod_xxxやFastCGIなどがあり、現在のUnicornやStarletまで至る経緯を順番に学習していくのは骨が折れる。



    Webサーバを理解しようとすると、UNIX、特にプロセスとネットワークAPIについての基本的な知識が必要だと思う。



    イベント駆動モデル
    Node.jsなどに代表されるモデル。クライアントからの接続管理もリクエスト処理も、イベントループにより1つのスレッドで実行する。



    バックエンドに、動作が高速化されるPHP7を使うか、
    Node.jsでフロントエンドと一本化してしまうか、
    簡単で効果が高いものを選びたい。

    JavaScriptでPhotoshopを拡張する方法

    このエントリーを含むはてなブックマーク はてなブックマーク - JavaScriptでPhotoshopを拡張する方法 あとで読む
    各種グラフィックソフトを販売しているAdobe社の製品は、JavaScriptで機能が拡張・追加できるように設計されている。

    Adobe Photoshop * スクリプト

    X-LABO: Haxe: ドット絵製作者・ドット絵アニメーター向けの Photoshop CC 拡張パネル PaletteChange を公開

    Adobe 製品は jsx または jsfl という JavaScript を記述する事で、任意の処理の自動化を行うことができます。更に拡張パネルを利用すると「jsx の実行結果を元に他の jsx を実行する」といった、jsx 単体では難しかった複雑な処理も可能になります。

    Photoshop CC 以降の拡張パネルは html で作成するため、拡張パネルの制御も JavaScript で行います。拡張パネルと jsx(or jsfl) の関係は、例えば Web サイトの、クライアントとサーバの関係と同じようなイメージとなります。2つのプラットフォームをまたがって処理が実行されます。



    CEPスーパー メガ ガイド: HTML5+Node.jsでAdobeのツールを拡張する | // andy hall

    CEP 5とは、8つのCCツールが共通に対応する、HTML5とNode.jsの拡張フレームワークのこと。
    要は、Javascriptさえわかればアドビのツールを好きにカスタマイズ出来るわけ!



    com.adobe.photoshop package - API Documentation

    Adobe PhotoshopやIllustratorの処理を自動化する用途として、インフォグラフィックの作成が挙げられるだろう。
    資料の表など、データに基づいてグラフを描いたり、ピクトグラムを描いたりできれば、Microsoft PowerPoint等で図を作るよりも、簡単で綺麗に仕上がるのではないか?

    Adobe製品をカスタマイズする必要がある場合、JavaScriptの知識が役に立つ。

    インフォグラフィックによる可視化の手段として、メモしておこう。

    Adobe JavaScriptリファレンス (NextPublishing)
    古籏 一浩
    インプレスR&D
    2013-11-08
    ¥ 5,076


    ExtendScript Toolkit(ESTK)基本編 (Adobe JavaScriptシリーズ(NextPublishing))
    古籏 一浩
    インプレスR&D
    2014-05-09
    ¥ 3,240


    Illustrator自動化基本編 (Adobe JavaScriptシリーズ(NextPublishing))
    古籏 一浩
    インプレスR&D
    2015-01-09
    ¥ 4,104

    FC2Ad