JavaScriptで始めるジェネラティブアート - 生物アルゴリズムの応用 - ICS MEDIA
ジェネラティブアートという言葉をご存知でしょうか？ アルゴリズムによって作られる芸術作品を指す名称です。Pinterestで「generative art」と検索すると静止画、動画ともにたくさんの作品を見ることができます。 無機質さを感じさせるものもあれば、まるで生きているように感じる作品もあります。創作者たちはどのようなところから着想を得ているのでしょうか？ 彼らの中には数学的な幾何学模様や物理現象、果ては生物が織りなす複雑なパターンをコンピューターで再現することにより作品を作る者もいます。 本記事では特に「生物」に焦点を当てます。生物の複雑な営みを紐解いた背景や、それをアルゴリズムに落とし込むことで可能になった表現を紹介します。 本記事を読むことで日常に潜むあらゆる現象が芸術の種に見える喜びを感じていただければ幸いです。 サンプルはHTML CanvasとJavaScriptで作成して
Reactを使わずにReduxでステート管理してわかったアプリ設計のコツ
ReduxといえばReactと組み合わせて使うものーーですが、あえて素のJavaScriptを使ってテトリスを開発した著者が得られた、気づきとは？ 私はゼロからなにかを作ったり、全体がどのように動作するのかを理解したりするのが好きな開発者の一人です。このようなことに熱中するのは仕事としては不要と認識していますが、特定のフレームワーク、ライブラリー、モジュールの裏側の認識や理解を助けてくれることは間違いありません。 最近また同じような機会があり、Reduxと素のJavaScript以外はなにも使わずにWebアプリケーションの開発に着手しました。本記事では、採用した解決法やこれまでに学んだことについて触れる前に、アプリを開発した方法や初期の最終的に失敗したバージョンを分析した概要について説明します。 セットアップ React.jsとReduxの組み合わせによって、最新のフロントエンド技術を用い
Vanilla JSで学ぶRedux - Qiita
この記事はReact #1 Advent Calendar 2017の5日目です。 はじめに 私はなんとなくReduxが好きなのですが、 初めて手を出した時はreact-reduxのボイラープレートやディレクトリ構成やstore、Provider、middlewareのセットアップなど初見ではどれも意味不明で、最初はReact専用のフレームワークだと思っていました。 しかしソースコードを読んでみるとRedux自体は実装にflowもTypeScriptも使っていない非常に小さなJSライブラリに過ぎず、Reactとは独立した存在であることが分かりました。 ここではreact-reduxや他のJSフレームワークの事を一旦忘れてVanilla JSでReduxを動かし、純粋にReduxの動作原理について学んでみたいと思います。 FluxアーキテクチャとRedux1 ReduxはFluxアーキテクチ
Angular 日本語ドキュメンテーション
あらゆる規模で機能する Angularなら見通しのいい道から小さくスタート。チームやアプリの成長に合わせてサポートします。
apiDoc - Inline Documentation for RESTful web APIs
apiDoc creates a documentation from API annotations in your source code. Java, JavaScript, PHP, … CoffeeScript Elixir Erlang Perl Python Ruby Lua /** * @api {get} /user/:id Request User information * @apiName GetUser * @apiGroup User * * @apiParam {Number} id Users unique ID. * * @apiSuccess {String} firstname Firstname of the User. * @apiSuccess {String} lastname Lastname of the User. */ ### @api
node.jsのいろいろなモジュール31 – apiDocでRESTful APIドキュメントを生成する | DevelopersIO
RESTアプリケーション用ドキュメント apiDocモジュールは、RestfulAPI用ドキュメントジェネレーターです。 jsファイル内にJavadocやJsdocのように埋め込み、API用の説明を記述すると、apiDocコマンドでhtmlとして出力することができます。 デフォルトではこんな感じでドキュメントが出力されます。 なお、独自のテンプレートを使用することも可能みたいです。 環境構築方法 今回使用した動作環境は以下のとおりです。 OS : MacOS X 10.7.5 Node.js : v0.10.4 npm : 1.2.18 npmを使用してモジュールをインストールしましょう。グローバルオプションをつけてapiDocをインストールします。 % npm install apidoc -g これで問題なくapidocコマンドが使えるかと思ったのですが、私の環境だと、 「env: n
immutableのメリットとImmutable.jsでのModel定義 - コネヒト開発者ブログ
こんにちは。フロントエンジニアの安達 (@ry0_adachi) です。 気付いたら前回の私の記事から2ヶ月が経ちました。時間の流れは早いですね...。 さて、今回はimmutableとそれをJSで実現するためのImmutable.jsについてです。 この記事を通して沢山の方にimmutableについて知ってもらえると嬉しいです。 immutableとは immutableは元となっているオブジェクトに変更を加えない、加えられない状態です。 また、変更を加える、加えられることをmutableと呼びます。 immutableの例 JSで配列に値を追加する際に let list = [1, 2] list.push(3) とやるとlistに3が追加されます。 これは元となっているlistに対して3を追加するという変更を加えているのでmutableです。 しかし、これをImmutable.jsの
JavaScriptユーザのための関数型プログラミング(前編) | POSTD
私が関数型プログラミングについて度々耳にするようになったのは、数カ月前からです。でも当時は、それが何なのか見当もつかず、単なるバズワードだと思っていました。皆さんの中にも、そのような方は多いでしょう。それ以来、私は関数型プログラミングについて深く学び、この言葉を日々聞いてはいるものの内容を理解していない初心者の方のために、分かりやすく説明しようと思い立ちました。 関数型プログラミング言語の話になると、「 Haskell と Lisp は どちらが優れているのか 」という 議論 が 白熱する 傾向にあります。HaskellとLispはどちらも関数型言語ですが、実際には大きな違いがあって、それぞれに長所と短所があります。その具体的な内容については、この記事を読み終える頃には深く理解していただけると思います。この2つの言語には、それぞれから派生した言語があります。その中で恐らく皆さんが耳にしたこ
Googleドライブの各種データを自動処理できる「GAS」で作業自動化の第一歩を踏み出してみた
Googleが提供するスクリプト実行環境「Google Apps Script」(以下GAS)を使うと、簡単にJavaScriptを実行することができます。Google ドキュメントやGmailなどのGoogle提供の各種アプリを簡単に操作することができるとのことで、今回は試しにGoogle スプレッドシートを操作してみました。 Apps Script | Google Developers https://developers.google.com/apps-script/ まず、元となるデータを作成します。Google ドライブの画面左上にある「新規」をクリックし、「Google スプレッドシート」を選択します。 今回は、「201708」や「201709」といった月ごとのシートがあり、そのシートの「C2」セルに合計金額の記載があるという「テストデータ」を用意しました。 同様に「テス
【お詫びと訂正】iOS11でついにSafariからカメラにアクセスできるようになりました。（コピペで動くサンプルコード付き） - KAYAC engineers' blog
お詫びと訂正：（2017/06/08 23:32） 本記事内に掲載しているスクリーンショットが、 Apple.Incの開発者利用規約（APPLE BETA SOFTWARE PROGRAM AGREEMENT APPLE INC.）に抵触しているというご指摘をいただきました。 Apple.Incの開発者利用規約から、掲載内容を不適切と判断し、該当箇所を削除させていただきました。 Apple.Inc及び読者の皆様に深くお詫び申し上げます。 追記：（2019/02/17） Navigator.getUserMediaが非推奨となったため、MediaDevices.getUserMediaを使うように修正しました。 Navigator.getUserMedia - Web API | MDN MediaDevices.getUserMedia() - Web API | MDN ざっくり1行でま
RegExp - JavaScript | MDN
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015. * Some parts of this feature may have varying levels of support. Learn moreSee full compatibilityReport feedback RegExp オブジェクトは、テキストをパターンと照合するために使用します。 正規表現の入門記事は、 JavaScript ガイドの正規表現をお読みください。正規表現の構文の詳細情報については、正規表現リファレンスを参照してください。
JavaScriptのパフォーマンスを上げる13のテクニック(Google I/O 2012) - ITコンサルタント成長録
JavaScriptのパフォーマンスを上げる13のテクニック 一部意訳あり。(特に関数についての11と13)。深く理解したい方はスライドや動画を観ることをオススメ。 (元記事） http://www.jonefox.com/blog/2012/07/10/13-javascript-performance-tips/ - 先日、Googleのダニエル・クリフォードは"Google I/O 2012"にて「V8で打ち破るJavaScriptのスピードリミット」と題した素晴らしい講演を行った。その中で彼は、JavaScriptコードで実践できる13のシンプルな最適化手法を紹介している。それらはChromeのV8 JavaScriptエンジンのコンパイルや実行速度を上げ、コードを速くするものだ。彼はそれらについての多くの説明を行なっているが、もしただシンプルTips一覧が欲しいというなら、以下を
関数型プログラミング in javascript
The document discusses exception handling in Java. It provides definitions of exceptions as abnormal conditions or events that disrupt normal program flow. Exception handling allows the normal flow to be maintained by catching and handling exceptions. There are two main types of exceptions - checked exceptions which are compiler-checked, and unchecked exceptions which occur at runtime. The try-cat
最速MVCフレームワークMithril.jsの速度の秘密 - Qiita
Mithril 0.2が本日リリースされました。ちょっとURLが変わったり( http://mithril.js.org/ )、API名が一部(m.moduleがm.mount)変わっていたり、コンポーネント機能がコーディング規約レベルから、専用のサポートAPIが追加されたりしていますが、0.1系と大した差はなさそうです。 某node.js会長とはいろいろ社内で話をしたりしたのですが、各種ベンチマークでもトップクラス、平均的には最速のクライアントサイドMVCフレームワークという称号を持ちながら、国内ではまだまだ知られていないMithril。レンダリング速度は仮想DOMの代名詞となったReact.jsの5倍以上(ベンチマークによります)です。 ↓ホームページから転載 ちなみにこちらのベンチマークで計測すると、MithrilはReact.jsの10倍以上速い結果になるのですが、これはちょっと計
Promiseでコールバック地獄から解放された話
6. 例えば • こんなコードが書きたい • 「hoge APIを叩いて∼」 • 「その結果を元にリクエスト作ってmoge APIを叩いて∼」 • 「さらにその結果をもとにfuga APIを叩いて∼」 • 「それをページに表示させたいヾ(ó ｀o)ﾉ」 8. こうなる／(^０^)＼ $.get("http://api.hoge.com?hoge=hoge", function(err, hoge) { if(err) { console.error(err); return; } $.get(“http://api.moge.com?moge="+hoge, function(err, moge) { if(err) { console.error(err); return; } $.get(“http://api.fuga.com?fuga="+moge, function(err,
JSHint Documentation
JSHint is a program that flags suspicious usage in programs written in JavaScript. The core project consists of a library itself as well as a CLI program distributed as a Node module. More docs: List of all JSHint options · Command-line Interface · API · Writing your own reporter · FAQ Basic usage First, check out the installation instructions for details on how to install JSHint in your preferred
D3.jsをつかってData-Drivenにリッチなグラフやチャートを作成しよう - Tech-Sketch
Webやスマートデバイス、センサーなどあらゆるものから情報を収集出来るようになり、世の中には膨大なデータが溢れかえっています。 また、ビッグデータやデータサイエンティストといったキーワードに注目が集まり、データ活用への期待が高まっています。しかし、単純に収集したデータはそのままでは見づらく、そこから意味を汲み取るのは困難です。 そこで、データの見せ方や伝え方が重要になってきます。 インフォグラフィックスやデータビジュアライゼーションといったキーワードにも注目が集まりつつありますね。 本記事ではD3.jsというJavaScriptのライブラリを利用し、このブログ(Teck-Sketch)のはてなブックマーク数や、世界の国別の人口の比較を視覚的に分かりやすく表現していきたいと思います。 インフォグラフィックス？データビジュアライゼーション？ キーワードとしてインフォグラフィックスとデータビ
javascript - introducing lambda.js : 404 Blog Not Found
2013年04月04日21:00 カテゴリTipsLightweight Languages javascript - introducing lambda.js JavaScript: The Definitive Guide (Kindle ed.) David Flanagan [邦訳:JavaScript 第6版] もうfunctionの打ちすぎで腱鞘炎になりそうで、Arrow Functionも間に合いそうにないので。 dankogai/js-lambda ・ GitHub 基本的に404 Blog Not Found:javascript - λ表記をDSLにをより実用的にしたものです。 SYNOPSIS log(lambda("x:x")(42) ); /* 42 */ log(λ("x:x")(42) ); /* 42 */ log(λ("n:n<=1?n:n*_0(n-1
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Three.js Aligning HTML Elements to 3D