フレームワーク

React v16.3 の Context と Fragment

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

"KeyError: key not found"

問題 Railsにて、新たに設定した環境変数が機能しない: myproject/config/initializers/constants.rb:13:in `fetch': key not found: "CONSTANT" (KeyError) 原因 RailsのPreloaderであるspringを入れていたため、環境変数が更新されていなかった。 解決法 $…

Rails5 API + devise でユーザーの認証と作成機能を実装した API を作成する

2017/04/26 curl部分に間違いがあったので修正、ついでにログインの必要な動作を追記 目標 Rails v5.0.0 から追加されたapiオプションを使い、ユーザーの作成と認証機能を実装したベーシックな Rails API を作る rails new まずはプロジェクトを作成します $…

Rails5: データベースがrakeタスクからdropできない時の対処法

問題点 Rails5になってrakeタスクのdrop動作に大きな変更があったらしく, Rails4からアップデートして初めての rake db:drop がエラーを吐いてしまう. $ bundle exec rake db:drop Mysql2::Error: Error dropping database (can't rmdir './db_name', errno:…

"Array values in the parameter are deprecated" エラー

問題と原因 Railsのサーバーやコンソール実行時次のような警告が出る場合: $ rails server Array values in the parameter are deprecated. Please use a String or nil. An Array was passed in from bin/rails:3:in `load' . . . この場合原因はbin/spring…

はじめてのUnity (C#)

参考: http://catlikecoding.com/unity/tutorials/clock/ シンプルな時計を作る 完成品はこちら: まずはプロジェクトの作成: プロジェクトの作成が完了したら、Create > Create Emptyから新しく"Clock"という名でゲームオブジェクトを作成する。また、Create…

はじめてのAurelia

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

webpack, React Hot Loader + Browsersync でクロスブラウジング+ホットリロード開発

React Hot Loader + Browsersync React Hot Loader を使えば、エディタを保存した時点で、React コンポーネントの変更が検知され、ブラウザの更新が自動で行われます。さらに、React Hot Loader はHotModuleReplacementPlugin(HMR) を使用しているため、更新…

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

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

ElectronとReact-Reduxではてなブログに投稿できるマークダウンエディタ作った

Electron Markdown Editor powered by React-Redux いまのところ特徴としてはこんな感じ はてなブログエントリーの投稿 はてなブログエントリーリストの取得 Evernoteとの連携とか画像アップロード機能とかいろいろやりたい。あとキャッチーなネーミングがほ…

Electronから簡単にGithub OAuth認証するライブラリ作った

github.com 前に作ったelectron-oauth-twitterの応用。 このライブラリを使えば簡単にGithubのアクセストークンを取得できます。 uraway.hatenablog.com インストール npm install electron-oauth-github 使い方 アプリを登録 Client ID と Client Secretを取…

React Redux勝手にチュートリアル(TODO List)

今回は基本的機能としてtodoの追加と削除ができるtodoリストを作成します。 前回と同様ジェネレーターからアプリのフォルダを自動生成するところから始めます。 詳しくは前回の記事参照。 uraway.hatenablog.com まずはindex.js js/index.js import React from …

Redux勝手にチュートリアル(Counter)

最近流行りのReduxをより深く理解するために、 「分かりやすい」を目指して勝手にチュートリアルを書いてみます。 自分的には結構複雑に見えたんですが、 他のフレームワークやアーキテクチャに慣れていると簡単なのでしょうか? 参考: http://qiita.com/ogomr/…

react-social-sharebuttons(Facebook) 日本語ドキュメント

react-social-sharebuttons(Facebook) Simple React components for Facebook Button. インストール npm install --save react-social-sharebuttons 使用例 import { FacebookButton } from 'react-social-sharebuttons'; class App extends React.Component…

React + Electronでエディターを作りたい

github.com Electronを使えば、 HTML + CSS + JavaScriptでデスクトップアプリが作れるらしい。 エディタはAtomを使っているけど、 簡単なドキュメントを書くだけならもっと軽いものを使いたいなあと思っていたので、 Reactを使ってマークダウンエディタを作り始…

react-social-sharebuttons(Linkedin) 日本語ドキュメント

Simple React components for Linkedin Button. インストール npm install --save react-social-sharebuttons 使用例 import { LinkedinButton } from 'react-social-sharebuttons'; class App extends React.Component { render( const url = "http://urawa…

react-social-sharebuttons(GREE) 日本語ドキュメント

react-social-sharebuttons(GREE) Simple React components for GREE Button. インストール npm install --save react-social-sharebuttons 使用例 import { GREEButton } from 'react-social-sharebuttons'; class App extends React.Component { render() …

React Twitter Timelineモジュール作りました

github.com 使い方 まず、こちらで新しくwidgetを作成し、 表示されるコードの中のdata-widget-idの値を取得します。 <a class="twitter-timeline" href="https://twitter.com/****" data-widget-id="your widget ID">****</a> 取得したwidget IDをwidgetIdプロパティとして次のようにコンポーネントに渡します。 import React from 'react'; import ReactDOM from …

react-social-sharebuttons(Feedly) 日本語ドキュメント

react-social-sharebuttons(Feedly) Simple React components for Feedly Button. インストール npm install --save react-social-sharebuttons 使用例 import { FeedlyButton } from 'react-social-sharebuttons'; class App extends React.Component { ren…

react-social-sharebuttons(Hatena Bookmark) 日本語ドキュメント

react-social-sharebuttons(HatenaBookmark) Simple React components for HatenaBookmark Button. uraway/react-social-sharebuttons: Simple Re... - GitHub インストール npm install --save react-social-sharebuttons 使用例 import { HatenabookmarkBu…

react-social-sharebuttons(LINE) 日本語ドキュメント

react-hatenabookmark-buttonとreact-line-buttonは、 react-social-sharebuttonsに統合されました。 react-social-sharebuttons react-social-sharebuttons(LINE) Simple React components for LINE Button. このLINEボタンはスマートフォン向けです。 PCユー…

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のモジュールを読み込むことはできません。したがって以下の様なツールを組み込む必要があります…

いつまでimport Reactしているつもり? Webpack-ProviderPlugin

1日に何回このようなimport宣言を書いていますか? import React from 'react' import ReactDOM 'react-dom' import $ from 'jquery' ファイルごとにいちいちimportするのはめんどくさいですよね。書き忘れるとエラーも起こすし。 そこで活躍するのがWebpack…

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...依存物を…

React-nativeで作ったiOSアプリを実機テストする

React-nativeで作ったiOSアプリを、実機テストしてみようとしたら、こんなエラーが出た。 AppDelegate.mを見てみる。 /** * Copyright (c) 2015-present, Facebook, Inc. * All rights reserved. * * This source code is licensed under the BSD-style lice…

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

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

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

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