JavaScript

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

    JavaScript React Native D3.js
    JavaScriptにはD3.jsというデータビジュアライゼーションのためのライブラリがありますが、 これをReact Nativeで使ってみました。 D3.jsは基本的にSVG(Scalable Vector Graphics)をいじってグラフを描画します。 React NativeでSVGを扱うには、公式で提供されているreact-native-ART... read more
  • 手軽にチャット機能を作れるSendBirdを試してみた

    JavaScript React Native SendBird
    SendBirdという簡単にチャット機能を作れるSDKとAPIを提供しているサービスがあります。 今回これを使ったサンプルアプリをReact Nativeで書いてみました。 次のように動きます。 リポジトリはこちらになります。 saitoxu/SendBirdSample SendBird SDK (JavaScript)の使い方 (1) はじ... read more
  • preactを使ってブログのアーカイブメニューを作る

    React JavaScript Jekyll
    developit/preactという Reactから一部機能を除いてサイズを軽くしたライブラリがあります。 このpreactを使って、Jekyllで書いてるブログのアーカイブメニューを作ってみた(フッター参照)ので、 作り方をメモしておきます。 1. アーカイブページを作る jekyll/jekyll-archivesなどを使って、 https://... read more
  • Reactでマインスイーパーを作ってみた②

    React JavaScript
    「Reactでマインスイーパーを作ってみた」で作ったマインスイーパーに、 reduxを導入しました。 デモはこちら。 盤面の状態をredux管理下に移すのはしんどかったので、 とりあえず難易度やクリア/ゲームオーバーの状態など、 ゲーム全体の情報だけをreduxで管理するようにしました。 だいぶ見通しがよくなって、機能追加がやりやすくなりました。 今... read more
  • JavaScriptでフォームデータを送信する

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

    React JavaScript
    Reactでマインスイーパーを作りました。デモはこちら。 こういうパズルゲーム系はReactだと作りやすい気がしました。 ソースコードはこちらにあるので、参考にしてみてください。 ... read more
  • React+ReduxでAJAXを使ったアプリを作ってみる

    React Redux JavaScript
    Redux公式のページで紹介されているAJAXを使ったアプリをベースに、 GitHubの公開リポジトリを取得するアプリを作ってみました。 React Redux Async Sample 動作イメージ↓ 環境 react 15.5.4 redux 3.6.0 react-redux 5.0.4 redux-thunk 2.2.0... read more
  • appear.inのAPIを使って簡単ビデオチャット

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

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

    React JavaScript
    これまで何度かReactを触ってきましたが、 今回はこれまでの復習がてら、ありがちですがTODOアプリを作ってみます。 今回の完成形はこんな感じ↓ todo-app 1. 設計図を描く 最初にコンポーネントの構成を考えます。 今回はこんな感じでいってみます。 TODOリスト全体の状態管理はAppコンポーネントでやって、 各TODOのそれはTo... read more
  • Reactで三目並べの続き

    React JavaScript
    Reactの公式チュートリアルの三目並べには以下のように続きがあります。 Now, you’ve made a tic-tac-toe game that: lets you play tic-tac-toe, indicates when one player has won the game, stores the ... read more
  • React DnDを使ってみた

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

    React JavaScript
    Reactの公式チュートリアルにある三目並べを作ってみました。 成果物はここにおいたので確認してみてください。 react-tic-tac-toe 環境 MacOS Sierra 10.12.3 Node.js v6.10.0 React 15.4.2 Create React App 1.3.0 1. プロジェクト作成 Cr... read more
  • Yarn + webpack + BabelでES6入門

    Yarn webpack Babel JavaScript
    Yarnやwebpackを使ったことがなかったので、 以下の記事をトレースする形で勉強がてらES6の環境を作ってみました。 webpack+babel環境でフロントエンドもES6開発 環境 macOS Sierra 10.12.3 Node.js v6.10.0 Yarn v0.21.3 1. Yarnインストール Yarnが入って... read more
  • Easy Implementation of Convolution and Pooling Layer in Deep Learning

    JavaScript Machine Learning Deep Learning
    I implemented a sample of part of CNN (Convolutional Neural Network), Convolutional Layer and Pooling Layer. This is easy to understand, so it’ll help you to understand convolutio... read more
  • Back Propagation

    JavaScript Machine Learning
    This time, I will explain about Back Propagation by making a simple program. What is Back Propagation? In machine learning, it is a supervised learning algorithm for learning a ne... read more
  • Neural Network

    JavaScript Machine Learning
    Previously, I realized logical AND by creating a neuron. Neuron At this time, by using a neural network that combines neurons, I will make XOR. Program I use a neuron class whic... read more
  • Neuron

    JavaScript Machine Learning
    I made artificial neurons and realized a logical AND. Neuron (GitHub) What’s Neuron? Neurons are components of neural networks that mimic neurons of the brain. It receives one o... read more
  • Original Google Translate API

    JavaScript PhantomJS Google Translate
    Recently, Google Translate has evolved using a neural network. So I created an original API server that uses Google Translate without using the API. Original Google Translate API... read more
  • Genetic Algorithm

    JavaScript Machine Learning
    I created a program to solve the knapsack problem with genetic algorithm. Genetic Algorithm (GitHub) What is Genetic Algorithm? Genetic algorithm is an algorithm which prepares a... read more
  • Ant Colony Optimization

    JavaScript Machine Learning
    Since I created ant colony optimization algorithm this time, I will introduce it. Here is my program, please refer this if you want. Ant Colony Optimization (GitHub) What is ant... read more
  • Q Learning

    JavaScript Machine Learning
    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-Learning (Wikipedia) Description This ... read more
  • Inductive Learning

    JavaScript Machine Learning
    I created a simple module to do an inductive learning. GitHub: Inductive Learning Inductive Learning is a very simple algorithm. It generates some patterns to match with trainin... read more
  • How to use Gulp "watch"

    Gulp JavaScript Sass SCSS
    Gulp has watch method as default. This method watches changes of specified files, and executes tasks which you want to do automatically. Usage is below. gulp.watch(['files you w... read more
  • Gulp first step

    Gulp JavaScript Sass SCSS
    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. $ mkdir gulp-first-step $ cd gulp-fir... read more
  • How to create sticky window on Electron

    Electron JavaScript
    Today, I will introduce how to create sticky window on top by Electron. I use the following tutorial for explanation. Quick Start - Electron To create sticky window on top, we c... read more
  • Sample programs of Machine Learning

    JavaScript Machine Learning
    I’m creating sample code collection of machine learning, this is the repository. ML Kitchen Sink Generally, machine learning programs are written in Python, R, because these lang... read more
  • How to create C/C++ Addons of Node.js

    JavaScript Node.js C C++
    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, I’ll introduce how to create factorial... read more