GitHub - piotrwitek/react-redux-typescript-guide: The complete guide to static typing in "React & Redux" apps using TypeScriptYou signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
React Nativeアプリの開発環境をコマンド一発で構築する「create-react-native-app」
今月の13日と14日に米カリフォルニア州のサンタクララでReact Conf 2017というReactのカンファレンスが行われました。このタイミングで発表されたのが、今回紹介する「create-react-native-app」です。Reactの「create-react-app」と同様コマンド一発でReact Nativeアプリの開発環境を構築してくれるツールです。これは、これまでなかなか手の出しにくかったReact Nativeアプリの開発を大きく変えてくれる画期的なツールとなるでしょう。今回はこの「create-react-native-app」の使い方を紹介したいと思います。 create-react-native-appとはReact Nativeはご存知の通り、iOSやAndroidのネイティブアプリをReactの作法で開発するためのフレームワークです。Reactでネイティブア
UI開発の流れが変わる！React Storybookでデザイナーも開発者も幸せになれる
「用意されたUIパーツが足りなかった」「運用中のUIのメンテナンスが困難」。Reactアプリの開発ならReact Stroybookで問題を解決できるかもしれません。 フロントエンドのプロジェクトを始めるとき、きれいなデザインを考えることから始めます。細心の注意を払って、UI部品とステートやエフェクトを考えて描いていくでしょう。しかし、開発の最中でも次々に変更が発生します。新たな要求、予測していなかった使い方などが、いろいろなところで発生します。当初はかっこいいと思っていたコンポーネントだけではすべてをカバーできず、結局、新しいデザインを考えて拡張することになるのです。 それでも、その時点でデザイナーがチームにいればまだ良いほうです。多くの場合、デザイナーは別のプロジェクトに移っていて、あとから発生したデザイン変更には開発者が対処することになります。その結果、デザインの一貫性が崩れ、ライブ
ECMAScript 2015 (ES6) まとめ (モジュール編)
ECMAScript2015 (ES6) で機能追加されたもののうち、今回は class に関連する部分をピックアップしてまとめていきます。 ついに JavaScript でも クラス が使えるようになった！ …のですが、不完全な部分もありますので、この記事を読んでそんなところもピックアップしてもらえればと思います。 ES2015 に関連する まとめ記事 は以下の通りです。 関連記事 ECMAScript 2015 (ES6) まとめ (基本編) ECMAScript 2015 (ES6) まとめ (クラス編) ECMAScript 2015 (ES6) まとめ (モジュール編) ← この記事 目次 ESモジュール概要 基本構文 import export ESモジュール概要 ESモジュールは ECMAScript で定義された 標準規格 です。 Node.js で定義されている モジュー
RxJS を学ぼう #1 - これからはじめる人のための導入編 | Recruit Tech Blog
React の登場と共に web フロントエンド界隈でも注目を集めるようになったリアクティブ・プログラミング ( RP ) 。その中でひときわ存在感を放っている1)オレ調べ。 RxJS について学んでみようと思います。 ReactiveX そもそも RxJS って何？ RxJS は Reactive Extensions for JavaScript の略称です。Observables というアーキテクチャを用いたリアクティブ・プログラミング用のライブラリであり、非同期処理 ( クリックなどイベント駆動の処理も含まれます ) を簡潔かつ可読性高くコーディング出来ることを主な目的としています。 で？Reactive Extensions ( Rx ) って何？ 元々は Microsoft が C# 向けのライブラリとして設計・開発したものです。2009年に始動したプロジェクトから生まれたこの
Flow導入時に最初にやることまとめ - Qiita
備忘録的に。 flow-typed をグローバルインストール 参考：Flow | Checking third-party code flow-typed という CLI があり、package.json があるディレクトリでこのコマンドを使うと React などサードパーティのライブラリに対する型定義ファイルを探してダウンロードしてくれる。
Learn Redux by coding a Mini-Redux
There are lots of resources for learning Redux. There is the official documentation, examples, tutorials, blog posts, boilerplates, Youtube videos, podcasts, etc… The list goes on. Even though we have so many great resources to learn from, new developers coming in still sometimes gets confused. It’s an overwhelming amount of content and it can be difficult to filter out the relevant stuff. A diffe
ローカル環境を出来るだけ Dockerize した
ローカルに nginx や mysql が起動していたり、gem install のためだけ に cmake や icu4c を brew install するのは嫌になったので、三連休で 出来るだけ Dockerize しました。仕事の素振りも兼ねています。 nginx# このブログの記事を書く時のプレビューや、雑多な html ファイルの表示 に使っています。 今まで $ brew install nginx して、nginx.conf も別途管理していまし たが、以下のような雑な docker-compose.yml で、雑にマウントするだけ で良くなりました。 version: '3' services: nginx: image: nginx:alpine ports: - 8080:80 volumes: - /Users/masutaka/Sites:/usr/share/n
原理原則で理解するbashの仕組み - Qiita
はじめに 以前書いたエントリー、重大な脆弱性(CVE-2017-5932)で少し話題になったbash4.4の補完機能の便利な点で、bash4.4からでないとタブの補完機能のソート処理が制御できないという問題について、ソースコードレベルで調べた結果をまとめていたのですが、bashの実装そのものを深く掘り下げ過ぎてしまい、内容が膨大になったので、何回かに分けて書こうと思います。 今回はbashが起動されてからインタラクティブモードでキーボードの入力を待ち受けるまでのお話です。普段使っているbashがどのような処理を行っているのか一緒に覗いてみませんか？ 検証ソースコード Bash version 4.1.0(1) release GNU bashの生誕 bashのプロセスが起動されるのはOSへのログイン時にユーザーのログインシェルがbashに設定されている場合、あるいはログイン後に明示的にba
「Reactビギナーズガイド」でReactを勉強する。 - Qiita
同書の書評は「Reactビギナーズガイド」を読みました。」という同タイトルのブログを書いているので興味のある方はご覧ください。 今回の目標 今回の目標は「Reactビギナーズガイド」のサンプルアプリケーションをRailsに乗せて作る。 (React歴1.5ヶ月くらいなのでどうか温かい目で読んで頂けると...) 1. 開発準備 1-1. Railsアプリケーションの作成 バージョン: Ruby 2.4.0, Rails 5.0.1 1-2. posts_controllerの作成 同書で作る「WhinePad」というアプリケーションは「ワインについてのメモや評価を記録できるアプリケーション」とのことですが、もう少し庶民的なアプリケーションにしたいので「BookPad」という「書籍についてのメモや評価を記録できるアプリケーション」に路線変更をしたいと思います。 ということで、Rails側では「
JavaScriptでメモリ効率を考える その２（メモリアロケータ篇） - Qiita
JavaScriptでメモリ効率を考える その１（シングルフレームバッファ篇） JavaScriptでメモリ効率を考える その２（メモリアロケータ篇）←この記事 通常の配列生成 前回のシングルフレームオブジェクトで大量のオブジェクトは捌けました。 捌けましたが、あれはプロパティやら何やらが色々固定されたクラスだから出来たことで、例えばこんなケースだと難しいです。 function loop(){ let i = 1000; while(i--){ // ランダムなサイズを指定 const size = Math.ceil(Math.random() * 100000); // 配列を生成 const arr = new Float32Array(size); // 破棄する arr = null; } requestAnimationFrame(loop); } サイズが変動する配列はプー
オブジェクト ー ゼロから始めるJavaScript入門（ECMAScript 2015）【Vol.12】
オブジェクトはユーザーが定義できるオブジェクトと組み込みのオブジェクトがあります。組み込みのオブジェクトは、配列、関数があげられます。今回はユーザーが定義できるオブジェクトを学びます。 オブジェクトは名前のついた値を集めたコンテナです。 Atomで新規ファイルをつくり「文字列型 ー ゼロから始めるJavaScript入門（ECMAScript 2015）【Vol.2】」で作った「js-study」フォルダ内に、「obj1.html」というファイル名で保存します。 以下のコードを書いて保存します。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <script> var book = new Object(); book.id = 1; book.title = "三四郎"
JavaScriptでカリー化を理解する | SIBYL System
完全適用と部分適用 完全適用(full application)はいわゆる関数です。部分適用(partical application)は、引数の一部を渡すことをいいます。部分適用である関数add4は第1引数は固定の値で、第2引数のみ渡しています。 // 完全適用 var add = function(a, b){ return a + b; }; add.apply(null, [4, 5]); // 部分適用 var add4 = function(a){ return add(4, a); } console.log(add4(5)); // -> 9
flowの始め方 - Qiita
ということで、前回に引き続きReact Confで紹介されてたものを試すシリーズの第二回です。 flowの簡単な設定とeslint/babel/precommitフック/vimとの連携のみです。深い使い方は(今のところは?)書きません。flowは既に色々なところで紹介されてますが、気にせず行きます。 ちなみに今回もReactは出てきません。(追記で少しだけ触れてしまいました) flowとは JavaScript用のtypeチェッカー ファイル単位で適用できるため、既存のプロジェクトにも気軽に導入できる eslintやbabelとも連携できるので既存プロジェクトに導入しやすい 色んなエディタ/IDEでもサポートされている この辺を見る限りFacebookのデベロッパ的にはTypeScriptはあんまり推奨してないっぽい GitHubのstarヒストリーを見る限りはTypeScriptに分があ
Elastic Beanstalk のカスタムプラットフォームをアップデートする | DevelopersIO
こんにちは、藤本です。 先日、Elastic Beanstalk にカスタムプラットフォームがリリースされ、EB アプリケーションで EB に最適化された独自 AMI を簡単に作成・利用することが可能となりました。カスタムプラットフォームについては下記エントリをご参照ください。 Elastic Beanstalk のカスタムプラットフォームを試してみた 先日はカスタムプラットフォームを作成して、EB アプリケーションを作成するまでを実施してみましたが今回はアップデートを試してみました。 Elastic Beanstalk のプラットフォーム更新 Elastic Beanstalk のプラットフォームは事前設定済みプラットフォームとして、様々な言語、様々なミドルウェアが構成された AMI が提供されています。またそのプラットフォームは定期的に AWS によってアップデートされ、バージョン管理
CloudFormation入門-ネットワーク環境の作成と組み込み関数- | DevelopersIO
ご機嫌いかがでしょうか、豊崎です。 先日CloudFormationの肩慣らし記事を書きました。 CloudFormation入門-ちいさな構成をつくって肩慣らし- 今回は先日作成したstackを更新してリソースを追加していきたいと思います。 準備 環境にリソースを追加する前にCloudFormationの組み込み関数を押さえておきましょう。 CloudFormationを実行するまでわからない値をプロパティに代入するために組み込み関数は使用されます。 今回は「Ref」,「!GetAtt」のみの利用で対応できる内容にしています。 Fn::Base64 条件関数 Fn::FindInMap Fn::GetAtt Fn::GetAZs Fn::ImportValue Fn::Join Fn::Select Fn::Sub Ref 組み込み関数について詳しくは弊社のブログをご参照ください。 AW
DataPipelineを利用してEFSのバックアップ環境を作ってみた | DevelopersIO
はじめに こんにちは、中山です。 最近DataPipelineとEFSを触る機会がありました。EFSは非常にシンプルなサービスなので比較的理解しやすいですが、DataPipelineの方は少しとっつきにくい印象があります。各サービスを連携する用途で利用されることを想定している点、またビックデータ系の知識が必要な点が主な理由なのかなと考えています。確かにDataPipelineをより深く理解するにはそれらの知識を習得する必要があるのですが、「定期的にデータをバックアップする」といった初歩的な用途であればそこまで難しくはない印象です。今回はDataPipelineを理解するために、以下のドキュメントに記載されている内容を参考にしてバックアップ環境を作ってみたので、本エントリでご紹介したいと思います。 Walkthrough 4: Back Up an EFS File System なお、環境
Pythonのlambda式（無名関数）の使い方
Pythonにおける無名関数（匿名関数）の書き方について説明します。無名関数は、一度だけしか使われない使い捨ての関数のことです。一度きり使うだけなので、名前をつける必要がないため無名関数と呼ばれます。Pythonではlambda式を使って無名関数を作ることができます。 lambda式を使った無名関数の作り方 通常、関数は処理のまとまりに名前をつけて部品化したもので、名前をてがかりにプログラム中のどこからでも呼び出すことができます。しかし、プログラムの途中でその場限りで使い捨てる場合は名前を付ける必要がありません。このような関数を無名関数と呼び、最近の言語ではlambda式を使って記述することが多くなっています。 次の例は２つの引数を足し算した結果を返す関数add()を定義したプログラムです。
SendGridのイベントをAPI Gateway -> Lambda(Python) -> DynamoDBに格納する - ヤマムギ
SendGridのメールイベントログはコンソールで確認出来るのは直近7日分で一括ダウンロードとかもないので、SendGridでメールを送信し始める前にはEvent Webhookを設定してどこかにイベントログを蓄積しておいた方がいいと思います。 後々に開封率やメール内URLとかのクリック率とか受信数とか出さないといけなくなったときにデータがない、とかになってしまうので。 ※最低限の設定例です。 Amazon DynamoDB 任意の名前のテーブル(ex:’sendgird_table’)を作成します。 プライマリパーティションキーは sg_event_idにしました。 AWS Lambda ロールにAmazonDynamoDBFullAccessのポリシーをアタッチしました。 Python 2.7 コード テーブル名は「sendgird_table」としています。 SendGrid Eve
[python]pandasでデータの読み込み方法まとめ - おじさんAのプログラムメモ
まずはインポート import pandas as pd CSV, TSV pd.reed_csv(filename, header=None, names=['A', 'B'], index_col='A', ...) # filename以外は省略可能 # pd.reed_table()というメソッドもある。これは、sep=""パラメーターで区切り文字を指定できる。デフォルトはタブ Excel xls = pd.ExcelFile(filename) df = xls.parse('sheet_name') JSON import json json_data = json.loads(json_text) name = json_data[0]['name'] XML from lxml import objectify parsed = objectify.parse(open(x
![[python]pandasでデータの読み込み方法まとめ - おじさんAのプログラムメモ](https://cdn-ak-scissors.b.st-hatena.com/image/square/309d2ec8694e9fd9c739ea9a2c01526ebe01d5a4/height=288;version=1;width=512/https%3A%2F%2Fogimage.blog.st-hatena.com%2F8454420450090616909%2F8454420450093701210%2F1433208652)
コマンドライン for デザイナー3 -pyenv編 - kick the base
「コマンドライン for デザイナー」のお話も今回で最終回となりました。本日はPythonの開発環境を整えていきます。*1 ターミナルって何？ Homebrewって何？ pyenvって何？ 今回はpyenvについてご説明します。実際にPythonのバージョンをプロジェクトごとに切り替えてみましょう！ pyenvとはなにか 異なったバージョンのPythonを切り替えるってどういうこと？ pyenvをインストールしよう 環境変数を設定する bashユーザー zshユーザー fishユーザー コマンドの解説 インストールできるバージョンの一覧を表示 特定のバージョンをインストール 現在インストール済みのバージョン一覧を表示する 現在使用しているバージョンのみ表示 デフォルトで使用するバージョンを指定する 実際に使ってみよう ふたつのバージョンのインストール maya_projectでバージョンの
Python: KMeans 法を実装してみる - CUBE SUGAR CONTAINER
KMeans 法は、機械学習における教師なし学習のクラスタリングという問題を解くためのアルゴリズム。 教師なし学習というのは、事前に教師データというヒントが与えられないことを指している。 その上で、クラスタリングというのは未知のデータに対していくつかのまとまりを作る問題をいう。 今回取り扱う KMeans 法は、比較的単純なアルゴリズムにも関わらず広く使われているものらしい。 実際に書いてみても、基本的な実装であればたしかにとてもシンプルだった。 ただし、データの初期化をするところで一点考慮すべき内容があることにも気づいたので、それについても書く。 KMeans 法の具体的なアルゴリズムについてはサンプルコードと共に後述する。 今回使った環境は次の通り。 $ sw_vers ProductName: Mac OS X ProductVersion: 10.12.3 BuildVersion
TensorFlowのHighLevelAPIについての雑感つき解説 - Qiita
TensorFlow v1.0での目玉の１つにHigh Level APIがあります。v1.0の発表から何故かギョームが忙しくなり、しっかり追いかけきれていませんでしたが、現時点で日本語のまとめ記事っぽいのがなかったので雑感付きでサンプルコードを添えて書いてみようと思います。雑感は、まあ個人の意見ということで、Kerasはちょっと、という方が結構いるのも事実かと思います。 サンプルコードは以前書いた記事同様にirisデータに対して適当なDNNを作ってみたらどうなるか、という感じにしています。厳密にそれぞれの条件を揃えているわけではないのでその辺りはご容赦を。 TensorFlowの基本 まずは改めてTensorFlowの基本的な記述方法です。細かく言い出すとキリがないので、ざっくり言うと以下のような感じでしょうか。 入力用にplaceholderを用意 重みやバイアス用にVariableを
KMC の春合宿で Python の処理系の講座をした - 私が歌川です
追記: dict の実装で出てくる図が間違っています*1．あとで修正します． スライドを差し替えました．変更点は次の2点です． dictの図を開番地(オープンアドレス)法のものに訂正 バイトコードについて追記(2バイトで1つの命令と引数を表す旨) 先日 KMC で春合宿があり，そこで Python の処理系に関する講座をしました． speakerdeck.com 内容 プログラミング言語を実行体系で分類すると，次の2つに分けられるのではなかろうかと思います*2． コンパイル言語 インタプリタ言語 また，型付けで分類すると，次の2つに分けられます． 静的型付け言語 動的型付け言語 C言語のコンパイラの実装に関する情報は巷に溢れており，また書籍も数多くあります． 一方で Python のインタプリタに関する詳細な情報は，もちろんあるのですが，気にせずに使っている人が大半かと思われます*3． そ
APIを使うアプリ開発のdev環境にAPIGatewayを立てたらすごくいいと思った話 | DevelopersIO
こんにちは、三上です。 2017/03/15（水）、株式会社フレクト様主催のイベント、ピザを食べながら、IoTサービスのLTを楽しもう！に参加させていただきました。 オープニングトーク含め、どのセッションも実務に即した非常に興味深いIoTの世界のお話でした。 トークの内容もさることながら、会場の雰囲気もフランクで、とても楽しい時間を過ごさせていただきました！ どうもありがとうございました（ごちそうさまでしたｍｍ 本エントリは、その中のセッション「APIGatewayでサーバもコードも使わずにAPIモックを建てた話」にインスパイアされて書いております。 追記（3/21 17:30）：セッション資料へのリンクを追加しました。 はじめに 当方、以前はWeb業界で働いておりました。 アプリ（サーバーときどきフロント）開発に携わっており、特にスマホアプリなどは通常APIを開発（ときどき使用）してまし
テストやビルドスクリプトをDockerコンテナで実行させるための便利ツールを作った - オープンソースこねこね
ある程度複雑なプログラムだと、ローカル環境やCIサーバ環境など、どこでも動くようにテストを書くのが難しくなったりします。また、昨今のWebアプリケーションだと、デプロイ前に何らかのビルドプロセスが必要になることがほとんどで、依存物をインストールしたり、Webpackを動かしたり、Goのビルドを走らせたりします。こういうタスクもnodeやらGoに依存していて、複数の環境で差異なく動かすことを考えると、いろいろツライものがあります。 そこで、こういったテストやビルド処理はシェルスクリプトを書いて、Dockerコンテナ内で動かすことによって環境に対しての依存を解消していました。 たとえばGo言語の場合以下のようなテスト実行スクリプトtest_run.shを書いておきます。 #!/usr/bin/env bash set -eu go test $GOTEST_FLAGS $(go list ./
ペアプログラミングの5W1HとFAQ / 5W1H and FAQ of Pair Programming
at Productivity Engineering − Forkwell Meetup #4
ANTLR のターゲットに Go が追加されたので Gogland とあわせて遊んでみる - 押してダメならふて寝しろ
概要 ANTLR ってのは，いわゆるパーサジェネレーターです． 去年の年末に出たバージョン 4.6 からターゲットに Go が追加されました 🙌 ． かなり昔に使ったことあったんですが，v4 になってだいぶ整理されて洗練された感じになってました． この記事は結構適当にやってしまっていると思うので，ちゃんとやりたいならリファレンスを読んだ方がよさそうです（ぉ． The Definitive ANTLR 4 Reference 作者: Terence Parr出版社/メーカー: Pragmatic Bookshelf発売日: 2013/01/22メディア: ペーパーバックこの商品を含むブログを見る ANTLR の簡単な紹介 入力のあるプログラム書いていると，入力が well-formed であるかどうかをチェックする必要があることがあります． 正規表現とか使って自分で入力が正しいかどうかチェ
[翻訳] Why Go? - Qiita
(この記事は Dave Cheney さんの Why Go? の翻訳です。) 数週間前、友人に「Goに注目に値するのはなんで？」と聞かれました。 彼は私がGoに情熱を注いでいることを知っていましたが、なぜ私が他の人もGoを気にするべきだと思っているのかを知りたいようでした。 この記事は、私がGoを重要なプログラミング言語だと考える、3つの大きな理由を紹介します。 メモリ安全 個人としては、私もあなたもC言語でメモリリークも危険なメモリの再利用もしないプログラムを書く事ができるでしょう。しかし、40年以上の経験から、集団としてのプログラマーはC言語で信頼できるプログラムを書けない事がはっきりしています。 コードの静的解析、 valgrind, tsan (訳注: たぶん ThreadSanitizer), -Werror といったツールは10年以上前から使えますが、それらのツールが広く認知さ
![[翻訳] Why Go? - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/d313f26f571d157c7c29164447df12a9a57ac14b/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCJUU3JUJGJUJCJUU4JUE4JUIzJTVEJTIwV2h5JTIwR28lM0YlMjAmdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZzPWIzZTExMGY2MzBiNjk3YWJiOTc5NWMzMTY5YmE5ZWEy%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBtZXRoYW5lJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz1lY2ZlNjYzN2FhMDBlNGVlNzYxMjk5ZmIyNTYyN2I5Yg%26blend-x%3D142%26blend-y%3D436%26blend-mode%3Dnormal%26txt64%3DaW4gS0xhYiDmoKrlvI_kvJrnpL4%26txt-width%3D770%26txt-clip%3Dend%252Cellipsis%26txt-color%3D%2523212121%26txt-font%3DHiragino%2520Sans%2520W6%26txt-size%3D36%26txt-x%3D156%26txt-y%3D536%26s%3Dccf027fbd87fba51b162b7132f21cfb9)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
AngularJS vs React それぞれの利点と特徴（React編） | ALTUS-FIVE
reactとreduxを使ったExampleのソースコードリーディング:todos編
JavaScript練習問題集(ECMAScript2015,2016,2017,2018,2019,2020,other Library)
http://gakuseibiz.com/?p=1584
https://www.freia.jp/taka/blog/python3-hash-randomie/index.html
TwitterAPI でツイートを大量に取得。サーバー側エラーも考慮（pythonで） | コード７区