Reactサブセット実装の preact で、ライフゲームのアニメーション書いて使い方を確認した
厳密なサブセットかは要確認な気がするが、まあそういうコンセプトのライブラリがある。 で、使ってみた。 preact とは reactのサブセット実装。reactと比較してかなり小さい(圧縮して3kb)。contextとかpropTypesとかはない。いらないと思う。 reactとの互換をもたせるレイヤーは本体を小さくするために外部パッケージに切り出されている。 https://github.com/developit/preact-compat コード量が少ないので、迷ったら元のコード読めるという安心感がある。 個人的にReactは過剰な抽象化の迷宮だと思っていて、あんまり読みたくない。 最初に ライフゲームのアニメーションしたかったわけで、ライフゲームを書きたかったわけではないので、ライフゲームのロジック部分はnpmから適当に持ってきた。 動いてるコードはここ http://mizchi
2015年の最優先事項は関数型プログラミング！ | POSTD
—もはやOOP（オブジェクト指向プログラミング）は”クラウドモンスター”から私たちを守りきれない おそらくあなたは、”Clojure”、”Scala”、”Erlang”といった言葉や、”Javaにラムダ式が導入された”という話を聞いたことがあるでしょう。そしてそれらの言葉が”関数型プログラミング”と関連があるのをご存じかもしれません。プログラミングコミュニティに参加していれば、おそらく既にこのテーマが議題に上がっているでしょう。 Googleで”関数型プログラミング”を検索しても、目新しいものは何も見つかりません。言語の中で2番目に古い言語は、関数型プログラミングを利用しています。1950年代に登場した、Lispという言語です。では一体なぜ人々は、今になって関数型プログラミングに沸き立っているのでしょうか？ およそ60年も経っているのに？ 初期の頃、コンピュータは実に遅かった 信じられない
HTMLもSVGもテキストも自在！DOMアニメーションの決定版「KUTE.js」が登場
ハイパフォーマンスで超多機能を謳うアニメーションライブラリーが登場しました。HTMLやSVG、テキストなど、プラグインで拡張できる注目のJavaScriptライブラリーを試してみましょう。 この記事ではthednpとdalisoftによって開発されたオープンソースの多機能フリーJavaScriptアニメーションエンジンKUTE.jsを紹介します。 KUTE.jsでできること KUTE.jsではアニメーションのコアエンジンと、特定のプロパティにアニメーションを実装するたくさんのプラグインが利用可能です。このライブラリーはKUTE.jsのモジュール構造によって高い性能と柔軟性があります。 コアエンジンで実装できるアニメーション コアエンジンだけを使って実装できるアニメーションは以下です。 Opacity（透明度）プロパティ matrixおよび2軸で値を指定したskew、scaleを除く、すべて
仮想DOMの内部の動き | POSTD
PreactでVDOMがどのように機能するかを示すフローチャート 仮想DOM（VDOMあるいはVNode）は魅力的です✨ しかし複雑で、理解が難しいものでもあります???? React や Preact 、その他同様のJSのライブラリでは、これをコアで使っています。残念ながら私は、これを詳細かつ分かりやすく説明している優れた記事や資料を見つけられませんでした。ですから、自分で書こうと思い立ったのです。 備考：これは非常に長い記事です。内容をシンプルに表すために画像を山ほど挿入しましたが、それゆえにさらに長い記事になってしまいました。 私は Preact のコードとVDOMを使いました。容量が小さくて済み、将来、簡単に見なおすことができるからです。しかし、概念のほとんどはReactにも共通していると思います。 皆さんがこれを読んだ後、仮想DOMをよく理解できるようになり、できればReactや
Reactコンポーネントへの理解を深める
対象読者 JavaScriptとWeb開発の基礎に理解がある方 Reactに興味／関心があり、これから学び始める方 前提環境 macOS Sierra 10.12 Node.js v6.6.0／npm 3.10.3 React 15.4.0 PropsとState Reactコンポーネント内では、PropsとStateという2つのオブジェクトが利用されます。Propsは、コンポーネントを生成するときに親から渡されるオブジェクトで、コンポーネントが画面から取り除かれるまで、不変の値を保持します。対してStateはコンポーネント内で保持される、プライベートなオブジェクトで、可変の変数を保持します。 以下のサンプルは、180秒間のカウントダウンタイマーです。こちらでPropsとStateの使い分けのイメージを説明します。 import React from 'react'; import Rea
お前Rは初めてか？力抜けよ - Qiita
R の入門記事――というよりも詰まりやすいトピック、いや正確に言うと自分が理解するのに少し躓いた物事を連ねた、半ば恨み節といっても良いような記事です。 私は今ではRを毎日のように書いていますが、使い始めた当初は「何じゃこりゃ？」と思うことの嵐でした。……いや、正直に言って今でもそうなのですが。私は R の前には C、C++、Python をそれなりに書いていて、申し訳程度に Haskell と Scheme に触ったことがあったのですが、どうも R は書いていて「あれ？」と思わされるポイントが多いように思います。もし私と同じような経験の元にRを書くことになって途方に暮れている人がいれば助けにならないかなあと思って書きました。 普通の入門であれば触れるようなこと(基本的な構文、ブロードキャスティング、よくある操作など)には触れません。また、一つ一つのトピックを掘り下げることは重視していません
ミニマルデザインで最低限守りたい4つのルール
Nickはロシアのセントピーターズバーグ出身のソフトウェアデベロッパー/ブロガーです。彼による他の記事はこちらをご参照ください。 モバイルデバイスの利用が伸びるとともに、ミニマリズムもまた増加傾向にあります。ミニマリズムは、アプリやウェブサイトに読み込み時間の高速化や画面サイズの互換性などの利点をもたらします。 素晴らしいユーザビリティと組み合わせた美しくミニマルなアプリは非常に印象的です。そして、わかりやすくシンプルなアプリはコミュニケーションにおいて非常に重要です。 しかし同時に、ミニマリズムを正しく行うことは難しくもあります。ミニマリズムを試してみたい方は、始める前にいくつかの基本的な経験則をしっかり理解しておくようにしましょう。ここで、ミニマリズムを上手く機能させるヒントをいくつかご紹介します。 余計な要素をすべて取り除く デザイン内のすべてのアイテムには、目的がなければなりません
本をバーコードから出品できるフリマアプリ「ブクマ！」を作りました。週２万冊ずつ新規出品中 - Halfway - 鶴田浩之のはてなブログ
本好きが講じて、渋谷に本屋さんを作ってしまった id:mocchicc です。 この記事は昨年９月に書き始めていたのですが、Android版も出揃った今ようやく記事公開ができました！ メルカリが牽引するCtoCのフリマアプリ業界に仲間入りさせていただき、本・書籍に特化したフリマアプリ「ブクマ！」を作りました。ブックマークのブクマでもあるんですが、本のフリマということで、ブック・フリマ→ブクマという命名です。キャラクターは性別・年齢・名前不詳のクマがやってくれています。 ▼ブクマ！のダウンロードはこちら（招待コード 5F9D4 ） App Store ｜ Google Play prtimes.jp jp.techcrunch.com ISBNバーコードを読み取って出品できるカタログ型フリマ 「ブクマ！」は、本の裏面に印字されているISBNバーコード（国際標準規格）をスマホのカメラでかざすだ
エンジニアに必要なスキルは - まなめはうす
エンジニアにとって最も大切なことは、お腹が出ていないこと。 と、１５年前に私の見ていたサイト界隈で決着がついたのですが、エンジニアである私が必要だなと思うスキルって自分の中では時折変わっているので並べてみます。 可読性の高さ プログラムを書く仕事に就いたこともあって、一番大切なことは可読性の高さだと上司に面接で熱く語ったのは良い思い出です。技術屋でない上司はちんぷんかんぷんのようでしたが、バグを出さないためには、誰が見ても読みやすいコードを書くことによりバグも見つけやすくなるし、そこまで気遣いができればバグを残すことはなくなると思ってました。 この難しさは、自分にとって読みやすいというだけでなく、誰が見ても読みやすいということです。そのために、個性を取り除いていく作業を良くしたものです。 丁寧であること プログラムを書いたり、レビューをするようになったり、繰り返しているうちに次第に思うよう
東京大学より、英語学習・無料オンラインコース「English Academia」がリリース！どなたでも学べます！ | 立教大学 経営学部 中原淳研究室 - 大人の学びを科学する | NAKAHARA-LAB.net
東京大学より、英語学習・無料オンラインコース「English Academia」がリリース！どなたでも学べます！ 東京大学から、また新しい英語学習・無料オンラインコースがリリースされました。 名づけて、 「English Academia」（イングリッシュ・アカデミア） https://utokyo-ea.com/ です（パチパチパチ！）。 このコースは、どなたでもご利用いただけ（学生であってもなくても、社会人であろうと、誰であろうとOK!）、スマホからでも、ＰＣからでも学ぶことができます。 イングリッシュ・アカデミアは、これから研究ライフをはじめる、学部生、大学院生向けに開発された、初心者向けのアカデミックコミュニケーションのサイトです。どうぞふるってご利用下さいませ。どうぞよろしく御願いいたします。 ▼ いまさら「アタリマエダのクラッカー」ですが、グローバル化が進行しています。そんなな
CSSのcalc()関数を使うとスゴイ便利！ページのレイアウト、要素やフォントのサイズ指定など実装テクニックのまとめ
pxでも、%, em, rem, vw, vhなどの相対単位でも、異なる単位の計算式で値を指定できる「calc()」がどのように機能し、どのように使うのか、「calc()」を使うと便利になる要素のセンタリング、フォントサイズ、グリッドの作成などの実装例を紹介します。 Opera Miniを除くすべてのメジャーブラウザに「calc()」はサポートされており、レスポンシブとも非常に相性のよいCSSの関数です。 How calc() Works 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 「calc()」とは値を計算式で指定できる 「calc()」を使う理由 「calc()」の使い方 「calc()」を使うと便利になる実装テクニック 「calc()」とは値を計算式で指定できる CSS3の「calc()」は、プロパティの値を計算式で
『ワンワン』がEテレ卒業？ ネットで話題、もっともらしい「4つの根拠」 NHKに真偽を聞きました （withnews） - Yahoo!ニュース
Eテレの子ども向け番組「いないいないばあっ！」。この長寿番組の人気キャラクター「ワンワン」の引退説が、ネット上でまことしやかに語られています。「番組で流れた曲の歌詞が示唆してる」「ワンワンの『中の人』であるチョーさんが今年で還暦を迎えるから」といったことが理由として挙げられていますが、本当なのでしょうか？ NHKに話を聞きました。 【画像】ワンワンの「中の人」はこちら。「たんけんぼくのまち」や、ジュウオウジャーのナレーションも担当 NHKのホームページによると、「いないいないばあっ！」は1996年に放送開始。0歳児から2歳児を対象に、乳幼児に直接働きかける「映像」と「音」で構成された番組で、このように紹介されています。 「その映像と音で感覚を揺さぶることにより、こどもたちの持つさまざまな可能性と能力を引き出すことをねらいとしています。子どもどうしはもちろん、親子がより豊かにかかわりあうき
ES6時代のNode.js
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは。情報システム本部の伊藤(@koh110)です。 社内システムの開発、運用を担当しています。 今回、担当しているシステムをNode.js LTS(v4.x)へバージョンアップしました。 それに伴い実施したES6対応の中から3つの事例を紹介したいと思います。 varを撲滅しよう arrow functionを使おう callbackを撲滅しよう varを撲滅しよう varをlet, constに置き換えます。基本はconstに置き換えます。 メリットは以下の点で、コードの品質向上につながると思います。 プログラム中で変更不可である事を明示的に示せる。 誤った使い方をした時にバグとして検出される。 varを利用するとブロック
「アジャイルサムライ」を読みました - @ikikko のはてなブログ
これも定番中の定番ですが、特にプロジェクトキックオフ時の取り組みに関してインセプションデッキを追求したくて、読もうと思いました。 アジャイルサムライ−達人開発者への道− 作者: Jonathan Rasmusson,西村直人,角谷信太郎,近藤修平,角掛拓未出版社/メーカー: オーム社発売日: 2011/07/16メディア: 単行本（ソフトカバー）購入: 42人 クリック: 1,991回この商品を含むブログ (255件) を見る 第3章 みんなをバスに乗せる はい、インセプションデッキの章です。 今までも、プロジェクトの概要や目的を明文化するような取り組みとして、"インターナルプレスリリース"という取り組みを社内でやってきていました。これは、Amazon流の開発術では、まずプレスリリースを作る | fladdictに習って、先にプレスリリースを書いてみるというものです。ただ、インセプションデ
BdashというBIツールをリリースしました - hokaccha memo
BdashというアプリケーションをElectronで作りました。 bdash-app/bdash: A simple business intelligence application. 以下からダウンロードしてインストールできます（現状まだMac版だけ）。 https://github.com/bdash-app/bdash/releases ざっくりとこんな感じのことができる。 SQLを書いて保存＆実行できる 結果を元にグラフを書ける gistで共有できる 現状で対応しているデータソースはMySQL、PostgreSQL（Redshift含む）、BigQuery 仕事でRedshiftを使って分析SQLを書くことが増えて、手元ではJupyter Notebookを使ってたんだけど、SQL書いてグラフを書くだけの用途には若干オーバースペックでもうちょっと簡単にできるといいなと思ったのがき
色んなことをソコソコできる人が、生きる道 - GoTheDistance
僕は器用貧乏です。色んなことがそこそこできるという、一般的なキャリア論では最もダメな部類に入ると思います。餅は餅屋。ドラッカー先生も言うてはる。あなたは何によって知られたいのか、それが重要だと。 エンジニアとしてキャリアをスタートさせて、恐ろしいことに10年以上の月日が経ちました。残念ながら、エンジニアとしては絶対に大成しないという確信があります。コードを書くのは好きです！でも、要素技術を突き詰めようという気持ちがすごく弱いのです。1つに絞り込むってことが、生理的に出来ない...全く違う分野に対して興味を持ったら、もう止められない。 そんな人って、実は技術職のエンジニアでも結構いるんじゃないかなっと感じたので、ブログ書きました。1つの分野の専門性が築けなくて悩んでいるのなら、「そーゆーの向いてないわ、俺」で諦めちゃったらいかがでしょう？ 僕のように。 僕より優れたエンジニア、僕より優れた営
Reduxの正しい解釈の話
2016年の課題は状態遷移の管理だったと思う。 そのアンサーとして、 Fluxのような実装におけるStore相当にアプリケーションの状態をほぼすべて管理させるReactのようなVirtual DOMを搭載したビューの実装を透過的なユーザーインターフェースとして扱うこの2つの組み合わせにより、アプリケーションの状態と描画される画面が (ほぼ) 参照透過的になる。というのがFluxとReact以降のパラダイムだと思う (理論として) 。 このパラダイムなら、エラーの発生時にアプリケーションの状態を表現するJSONをエラー収集サービスに送るようにして、簡単にバグを再現したりできるし、状態の遷移をテストしていくことで、クラッシュするようなバグのうち大半を検出できる。 Fluxの問題そこで問題が出るのが、Action(Creator) とReducer (Store#reduce())の2要素間のル
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
KUTE.js Supported Properties | Javascript Animation Engine
ag九游游戏中心-ag九游游戏中心苹果版下载|AG九游会