saitoxu.io

AboutTwitterGitHub

#JavaScript

31件の投稿があります

オランダ空軍式トレーニングができるサービスを作った

April 29, 2018

集中力を鍛えたいなーと思って、オランダ空軍式トレーニングができるサービス(サービスと言えるほど大したものでもないが)を作った。 Dutch Air Force Training オランダ空軍式トレーニングとは タイル上に並べられた文字(A-9)の中に、指定された文字が何個あるか…

Reactのグラフ描画ライブラリRechartsを使ってみた

February 28, 2018

前から気になっていた React のグラフ描画ライブラリRechartsを触ってみた。 内部でD3.jsを使っていて、README に書いてあるが大きな特徴は 3 つあるらしい。 React コンポーネントとして使える 素の SVG の描画をサポート 画面に表示したいコンポーネ…

ESLintを使ってるプロジェクトにPrettierを導入した

January 31, 2018

ESLint を使ってるプロジェクトに code formatter のPrettierを導入した。 参考記事の寄せ集めに過ぎない感があるが、自分の備忘録ということでメモしておく。 やりたいこと Prettier を使ってコードを自動フォーマットしたい ESLint を導入して…

D3.js on React Nativeでグラフ描画

September 30, 2017

JavaScript にはD3.jsというデータビジュアライゼーションのためのライブラリがありますが、 これを React Native で使ってみました。 D3.js は基本的に SVG(Scalable Vector Graphics)をいじってグラフを描画します。 Rea…

手軽にチャット機能を作れるSendBirdを試してみた

September 17, 2017

SendBirdという簡単にチャット機能を作れる SDK と API を提供しているサービスがあります。 今回これを使ったサンプルアプリを React Native で書いてみました。 次のように動きます。 スクリーンショット リポジトリはこちらになります。 saitoxu/S…

preactを使ってブログのアーカイブメニューを作る

July 01, 2017

developit/preactという React から一部機能を除いてサイズを軽くしたライブラリがあります。 この preact を使って、Jekyll で書いてるブログのアーカイブメニューを作ってみた(フッター参照)ので、 作り方をメモしておきます。 1. アーカイブページ…

Reactでマインスイーパーを作ってみた②

June 25, 2017

「React でマインスイーパーを作ってみた」で作ったマインスイーパーに、 reduxを導入しました。 デモはこちら。 マインスイーパー 盤面の状態を redux 管理下に移すのはしんどかったので、 とりあえず難易度やクリア/ゲームオーバーの状態など、 ゲーム全体の情報だけを …

JavaScriptでフォームデータを送信する

May 09, 2017

JavaScript でフォームデータを送信する方法のメモです。 FormData オブジェクトを使う オブジェクトを使ってデータを送信します。 ファイルの送信などに重宝します。 使い方は簡単で、key-value 形式で送信するデータを詰め込むだけです。 詳しくはこちら ↓…

Reactでマインスイーパーを作ってみた

April 25, 2017

React でマインスイーパーを作りました。デモはこちら。 マインスイーパー こういうパズルゲーム系は React だと作りやすい気がしました。 ソースコードはこちらにあるので、参考にしてみてください。

React+ReduxでAJAXを使ったアプリを作ってみる

April 16, 2017

Redux 公式のページで紹介されている AJAX を使ったアプリをベースに、 GitHub の公開リポジトリを取得するアプリを作ってみました。 React Redux Async Sample 動作イメージ ↓ Anime 環境 react 15.5.4 redux 3.6.…

appear.inのAPIを使って簡単ビデオチャット

April 05, 2017

appear.inという手軽にビデオチャットができるサービスがあります。 最近、自分のサイトに簡単に埋め込める API があるのを知ったので、ちょっと使ってみました。 ドキュメントはこちら 1. サンプルアプリ チャットルームを生成して、そのルーム参加者とビデオチャットできるも…

TODOアプリでReact Routerを使ってみる

April 02, 2017

前回作った TODO アプリに、 react-router を使ってルーティングを組み込んでみます。 できたものはこちら ↓ todo-app-2 1. コンポーネントの構成 コンポーネントの構成は次のような形にします。 また、ルーティングは次のとおりとします。 トップペー…

ReactでTODOアプリ

March 30, 2017

これまで何度か React を触ってきましたが、 今回はこれまでの復習がてら、ありがちですが TODO アプリを作ってみます。 今回の完成形はこんな感じ ↓ todo-app 1. 設計図を描く 最初にコンポーネントの構成を考えます。 今回はこんな感じでいってみます。 TOD…

Reactで三目並べの続き

March 26, 2017

React の公式チュートリアルの三目並べには以下のように続きがあります。 Now, you’ve made a tic-tac-toe game that: lets you play tic-tac-toe, indicates when one player has wo…

React DnDを使ってみた

March 22, 2017

React でドラッグ&ドロップを簡単に実装できるReact DnDを使ってみました。 前回同様、公式のチュートリアルに従ってます。 一応、成果物はこちら ↓ react-dnd-sample 環境 MacOS Sierra 10.12.3 Node.js v6.10.0 Re…

Reactで三目並べ

March 21, 2017

React の公式チュートリアルにある三目並べを作ってみました。 成果物はここにおいたので確認してみてください。 react-tic-tac-toe 環境 MacOS Sierra 10.12.3 Node.js v6.10.0 React 15.4.2 Create Reac…

Yarn + webpack + BabelでES6入門

March 20, 2017

Yarn や webpack を使ったことがなかったので、 以下の記事をトレースする形で勉強がてら ES6 の環境を作ってみました。 webpack+babel 環境でフロントエンドも ES6 開発 環境 macOS Sierra 10.12.3 Node.js v6.10.0…

Back Propagation

December 13, 2016

This time, I will explain about Back Propagation by making a simple program. What is Back Propagation? In machine learning, it is a supervi…

Neural Network

November 30, 2016

Previously, I realized logical AND by creating a neuron. Neuron At this time, by using a neural network that combines neurons, I will make …

Neuron

November 29, 2016

I made artificial neurons and realized a logical AND. Neuron (GitHub) What’s Neuron? Neurons are components of neural networks that mimic n…

Original Google Translate API

November 21, 2016

Recently, Google Translate has evolved using a neural network. So I created an original API server that uses Google Translate without using…

Genetic Algorithm

November 18, 2016

I created a program to solve the knapsack problem with genetic algorithm. Genetic Algorithm (GitHub) What is Genetic Algorithm? Genetic alg…

Ant Colony Optimization

November 16, 2016

Since I created ant colony optimization algorithm this time, I will introduce it. Here is my program, please refer this if you want. Ant Co…

Q Learning

November 09, 2016

I created a simple module to do a Q Learning. GitHub: Q Learning Q Learning is one of reinforcement learning in machine learning field. Q-L…

Inductive Learning

November 04, 2016

I created a simple module to do an inductive learning. GitHub: Inductive Learning Inductive Learning is a very simple algorithm. It generat…

How to use Gulp "watch"

October 31, 2016

Gulp has method as default. This method watches changes of specified files, and executes tasks which you want to do automatically. Usage i…

Gulp first step

October 29, 2016

Today I’ll introduce the first step of Gulp. As first step, let’s try to compile SCSS file by using Gulp. Step 1 First, create npm project.…

How to create sticky window on Electron

October 22, 2016

Today, I will introduce how to create sticky window on top by Electron. I use the following tutorial for explanation. Quick Start - Electro…

Sample programs of Machine Learning

October 10, 2016

I’m creating sample code collection of machine learning, this is the repository. ML Kitchen Sink Generally, machine learning programs are w…

How to create C/C++ Addons of Node.js

October 08, 2016

We can create Node.js Addons written in C/C++. See the following page for more detail. Addons | Node.js v6.7.0 Documentation In this post, …