javascript

Functional ComponentでforceUpdateをエミュレートする

Functional ComponentでforceUpdateをエミュレートする 参考 https://www.telerik.com/blogs/what-is-render-react-how-do-you-force-it?utm_source=reactdigest&utm_medium=email&utm_campaign=274 https://reactjs.org/docs/hooks-faq.html#is-there-somet…

React v16.3 の Context と Fragment

よく使いそうな Context と Fragment についてメモ。 Context そもそも、 Context はあらゆる階層のコンポーネント間で、データを共有する機能を持ちます。 しかし、v16.3 以前の React における Context には以下の注意書きがありました。 If you want your…

React Component で作る window.confirm 代替品

window.confirm はESLint でエラーが出るし、UI が良くない。なので似たような API で扱うことの出来る window.confirm の代用品を作ってみた。 参考: http://reactkungfu.com/2015/08/beautiful-confirm-window-with-react/ 環境: React (16.1.1), React-Bo…

僕らは JavaScript を知らない - レキシカルスコープとクロージャとガベージコレクション Lexical Scope, Closure and Garbage Collection

参考: https://github.com/getify/You-Dont-Know-JS/blob/master/scope%20%26%20closures/ch2.md https://anond.hatelabo.jp/20070622101313 https://developer.mozilla.org/ja/docs/Web/JavaScript/Closures https://developer.mozilla.org/ja/docs/Web/Jav…

僕らは JavaScript を知らない - データ型と参照 Data Type and Reference

参考 https://github.com/getify/You-Dont-Know-JS/blob/master/types%20%26%20grammar/ch2.md#value-vs-reference https://www.webprofessional.jp/how-javascript-references-work/ https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Globa…

僕らは JavaScript を知らない - 巻き上げ Hoisting

参考: https://developer.mozilla.org/en-US/docs/Glossary/Hoisting JavaScript において、変数を宣言するには var、 let、 const を利用します。これらのうち、 var let では、初期値を指定せずに宣言した場合すべて undefined になります。 var a; let b;…

僕らは JavaScript を知らない - シンボル Symbol

初めてプログラミングを触って、それからずっと2年くらい JavaScript 使ってますが、なかなか初心者から抜け出せないなあという思いがあり、恥を忍んで JavaScript の勉強記事を書くことにしました。たぶん何回か続きます。 参考: You Don't Know JS 改訂新…

Warning: Material-UI: The white color was not parsed correctly, because it has an unsupported format (color name or RGB %). This may cause issues in component rendering.

const muiTheme = getMuiTheme({ raisedButton: { textColor: 'white', color: purple900, } }); こんな感じにMaterial-UIの色を変えて遊んでたらエラーが出た: Warning: Material-UI: The white color was not parsed correctly, because it has an unsuppo…

Amazon Dash Buttonをハックする

ウィルキンソン Dash Buttonをハックしたときの備忘録。 Amazon Dash Buttonのセットアップ まずはAmazon iOS/Androidアプリを使って、Amazon Dash Buttonのセットアップ。商品選択でキャンセルしておくことに注意。 MACアドレスの取得 使用するのはdash-but…

はじめてのAurelia

http://aurelia.io Aureliaとは次世代UIフレームワーク。AngularJS、Reactに比べて影が薄い。どうなっていくんだろうか?チュートリアルをやってみた感想としては、HTTPリクエストとルーティング周りがクリーンで素敵。 以下、チュートリアルの適当な和訳。 …

Babelを使うとアロー関数内のthisがundefinedになる

ややこしい問題に直面したので、メモしておく。 問題 次のように、jQueryでコールバック関数にアロー関数を用いたスクリプトを記述する。 $("item > title").each(() => { let title = $(this).text(); console.log(title); }); このES6の構文ををBabelでES5…

Node.jsマルコフ連鎖モジュール作ったよ

JS+Node.jsによるWebクローラー/ネットエージェント開発テクニック作者: クジラ飛行机出版社/メーカー: ソシム発売日: 2015/08/31メディア: 単行本この商品を含むブログ (2件) を見る 読者サポート | JS+Node.jsによるWebクローラー/ネットエージェント開発…

JavaScript初学者が1時間でNode.jsのReactLINEボタンモジュールつくった

uraway.hatenablog.com 前回と同じ要領で今度はLINEボタンのモジュールを作ってみました。 uraway/react-line-button: Simple React comp... - GitHub モジュールをまとめました。 こちらを使用してください。 uraway/react-social-sharebuttons: Simple Re... …

JavaScript初学者がNode.jsのReactはてなブックマークボタンモジュールつくった

uraway/react-hatenabookmark-button · GitHub たった40行で作れてしまいました。 scrpitタグ作って必要なものを突っ込んでるだけです。 以下ソースコード。 モジュールをまとめました。 こちらを使用してください。 uraway/react-social-sharebuttons: Simple Re…

Uncaught ReferenceError: require is not defined 対処法まとめ

前にも記事を書きましたが、少し勉強した中で他にも解決法を見つけたのでまとめておきます。 さて、クライアントサイドのJavaScriptではrequireを使ってNode.jsのモジュールを読み込むことはできません。したがって以下の様なツールを組み込む必要があります…

Feedly検索ブラウザアプリ作ったよ

Node.jsとExpressを使って、簡単なFeedlyアプリをheroku上に作ったので公開します。Expressほとんど初めて触ったけど楽しい。 DOM操作がやっぱりめんどくさかったのでReact.jsで作り直すかも。 FeedlySearch サイトのタイトルやURL、FeedのURL等で検索できま…

Webpack + React + ES6の最小構成を考えてみる。

Webpack + React + ES6 Webpack + React + ES6の最小構成を考えてみる。 この記事は明石家サンタを見ながら書かれました。 (注: 2016/9/25 内容を大幅に改定、WebpackやReactの最新版に対応) 関連した過去記事 Webpack入門編 uraway.hatenablog.com Gulp + B…

快適な開発環境を目指して(4)

fluxでの開発を見据えて、gulpを使った開発環境を作ってみた。 (Gulp + Browserify + ES6 + Babelify + Watchify + Brower-sync) 前提知識 gulp ES6(ES2015) 材料 gulp...自動タスク管理ツール Browsersync...ブラウザの自動リロード browserify...依存物を…

Atomのパッケージを作る(4) spec編

参考:http://jasmine.github.io/1.3/introduction.html specs AtomではJasmiseをspecフレームワークとして使っています。必須ではありませんが、新機能にはspecをつけるべきでしょう。Atomのテストに関するフライトマニュアルを訳しながら、実際にspecを書…

CoffeeScriptを学んでみる

www.youtube.com CoffeeScriptの特徴 シンプルな記述 読みやすく理解しやすい 保守が簡単 JavaScriptにコンパイルが必要 PythonやRubyを意識した文体。インデントに注意 以下省略。 CoffeeScriptについて、まとめたものはこちらにあります。 Learnings/Coffe…

快適な開発環境を目指して(Gulp + Browserify + ES6)

参考: Using ES6 with gulp — Mark Goodyear — Front-end developer and designer gulp 3.9からgulpfile.jsにES6が使えます。 JavaScriptを使うなら早めに慣れておきたいところ。 前の記事で作ったgulpfileをES6で書き換えてみましょう。 uraway.hatenablog…

快適な開発環境を目指して(Gulp + Browserify)

横着しないでひとつづつ理解していくことにする。 今回はGulpとBrowserifyを合わせて使ってみる。 参考: javascript - Why do I have to use vinyl-source-stream with gulp? - Stack Overflow gulp/API.md at master · gulpjs/gulp · GitHub Gulp + Browse…

グローバルインストールしたnodeモジュールが使えない時の解決策

nodeのモジュールであるexpress-generatorをグローバルインストールしても動かない。 $ npm install express-generator -g $ express express: command not found パスを通したら使えるようになったので、メモを一応残しておきます。 参考: stackoverflow.c…

プログラミング初心者がexpressとgulpでローカル開発環境を構築する

サーバー再起動、ブラウザリロードとか面倒くさい!ってことで、それらを自動で行ってくれるBowserSyncモジュールと、ついでにアプリの骨格を作ってくれるexpressを導入する手順をまとめます。参考:gulp + node + express で BrowserSync 使おう - ぶるーす…

React.jsとES6でTodoListアプリを作ってみる v2.0.0

uraway.hatenablog.com前に作ったTodoListをアップデートしてみました。 主な変更はチェック機能と削除機能の追加です。入力されたvalueをTodoListのデータの一つであるtextで取得できず苦労しました。 最初からデータのtextも、valueと名付けていればこんな…

express-generatorを使ってみる

参考: node.jsにおける、npmとpackage.jsonという作法について http://expressjs.com/starter/generator.html アプリの骨組み uraway.hatenablog.com 前に作ったBMI計算機をgithubに乗せてみました。 (ちなみに画像は拾い物) それがこちら uraway/bmicalc…

ES6版ReactでTodo Listを作ってみる

これが、See the Pen Todolist by uraway (@uraway) on CodePen.ES6版だとこうなるSee the Pen TodoApp(ES6) by uraway (@uraway) on CodePen.でも、これだと不便なので、手を加えてみよう。 次回へ続く…

Stack Overflow で英語で質問してみる

Stack Overflow とは: Stack Overflow is a question and answer site for professional and enthusiast programmers. It's built and run by you as part of the Stack Exchange network of Q&A sites. With your help, we're working together to build a…

ES6版React.jsでBMI calc を作ってみる

BMIカテゴライズ 参考: Calculate Your BMI - Metric BMI Calculator See the Pen BMI calc by uraway (@uraway) on CodePen.bmiCalc関数によって、BMI数値を計算し、stateを更新して、BMI数値をカテゴライズする。トリガーを書き忘れてて数十分詰まった。 …

ES6版React.jsでCowntdown Timerを作ってみる

See the Pen countdown timer by uraway (@uraway) on CodePen. 参考: reactjs - React.jsでFormを扱う - Qiita Forms | React タイトル通り。 class CountdownTimer extends React.Component { constructor() { super(); this.tick = this.tick.bind(this)…