2018-08-19

React,Redux,開発環境(TypeScript)の学び始め(途中経過)

はじめに

盆休み中にReactが出来ないとWebエンジニアの求人少ないよねって感じが急にし始めたので勉強を始めた。公式みればいいだろって思ったら、やることが多い上に手の付け所がわからなかったのでまとめておく。あくまで自分の実施記録なので、推奨！とかこうやるといいぜ！という内容ではない。ちなみにまだ途中経過。 HTMLとかJSとかはある程度勉強済みという前提でお願いします。

Reactを学ぶ

とりあえず公式をやった。

reactjs.org

上から順にやっていけばいいのだけれど、ところどころ英語が辛かったりするので、日本語で記事を翻訳してくれているサイトも参考にした。ありがとうございます。

mae.chab.in

難易度、量ともにあまり負荷は高くない。というか、AngularのチュートリアルTour of Heroに比べたらかなり量が少なくて不安を覚える。具体的には"これってAPIとか非同期系どうするんでしょう”、"噂のJSXって出てこなかったな"という感じ。

JSXについてはチュートリアルのMAIN CONCEPTSにあったので解決。

reactjs.org

二点目のAPIとかについては軽く調べてReduxから叩くよっていうのは理解したけれど、手を動かすだけではきつかったので本腰を入れて勉強することに。

Reduxを学ぶ

知識0で公式をやろうとして挫折した。

Introduction - Redux

イントロからしっかり読み込むのは英語が辛くて早々にあきらめて、BasicのTODOをやろうとしたが全体像が見えなくてきつい。何をインストールして、どういうディレクトリ構成で、みたいなのが見えないと何から書き始めていいかわからない。。。というか、概念が用語が分からない。。。となってので日本語資料を探すことに。ありがたいことにいろいろな人が知見を共有してくれていたので大変助かった。ありがとうございます。

qiita.com

他にもたくさん記事を見たのだけれど、上記の２つのQiitaの記事が何度もお世話になった。検索して出てくる記事の中には内容が古くなっているものもあるので最終更新日をきっちり見たほうがいいかなと思った。また、初心者向けでない記事(middlewareの話とか、ロジックはaction?reducer?とか、ファイル分割を一切しないで単独ファイルにaction,reducer,container,componentが書いてある)もあるのですべてを理解するというのは諦める。というか、まだ早いと割り切る。共通して語られることが大事な部分なので、それを大量の資料から汲み取るという作業だと認識して進める。

日本語で概念を理解したと思えた後は、改めて公式のTODOをやる。

Basics - Redux

なんとなく概念の理解と動くものを作ったところで"あれ、非同期ってどうやるの？"という当初の疑問が解決されていないことに気がつく。軽く調べて、そういうのはmiddlewareにやらせるべきとわかった。が、このmiddlewareがいろいろ種類があるようなのでまた本腰いれて比較しないと行けなさそうだなあと思い、一旦休止。チュートリアルをやりながら、もっと楽にReact-Reduxを書くにはどうすれば？という気持ちになったので、開発環境について考える。

開発環境について学ぶ

Reactの公式チュートリアルにはcreate-react-appを使うのが推奨されている様な記載があったので、それに従う。 webpackの導入から始めてもいいけれど、便利ツールがあるのであればそちらに流れるべきかなと思ったので特に調べずに進める。また、型については公式だとPropTypesを使っていたけど、個人的にTypeScriptを使いたかったので導入について調べる。導入するだけなら、create-react-app --scripts-version=react-scripts-tsで出来るのだけど、それだけではエラー出まくりになるので、下記を参考にもう一度もう一度公式のTODOをTypeScriptでやる。

github.com

https://nowscripting.com/posts/blogs/ts_redux_react_tutorial

github.com

またEmacsでコードを書いているので、同時にTypeScriptを書く環境も整える。これはAngularを書いていた時点で出来ていたので、特別にReactのためになにかを実施したわけではない。

github.com

Web-mode+tide+company+flycheckで補完+チェックをしている感じ。

f:id:crewfanq:20180819182739p:plain

上みたいに、エラーがあればEmacs上に通知される。

f:id:crewfanq:20180819182750p:plain

また、補完も効くのでストレスフリーに書いていける。

TypeScriptでTODOが出来たら、TODOを改変して勘所を掴む。なんでもいいけど、だいたいボタンを押したらFizzBuzzされるみたいな簡単なやつを作った。ここまででお膳立ては出来たので、休止していたmiddlewareを学び始める。。。というくらいで今日に至る。

今後

middlewareもredux-thunk,redux-saga,redux-observableなど選択肢があるようなので、要調査かなと思います。本件とは関係ないですが、Reactで開発やるよという会社様に祈られてしまってなぜReact勉強しているのはわからなくなっているけれど、いろいろ学ぶのも大事なのでReact+Redux+TypeScript+{なにかしらのmiddleware}+Firebaseで見せられるものが出来るくらいを目標にやっていきます。

やりたいこと： Webエンジニア
勤務地：神奈川、東京
希望年収：500万円
転職時期：要相談
年齢層：二十代
スキル/資格/語学：JavaScript,TypeScript,Angular,要件定義,スケジュール管理/TOEIC:780
契約形態：正社員
作成サービス： https://t.co/int5esxGaH
SES拒否：◎
#hiyokonitsuduke
— crewfanq (@crewfanq) July 8, 2018

まだまだ先は遠いですね。

2016-05-31

sphinx+jenkins+gitでドキュメントサーバを建てた

背景

ドキュメントを作成したが、notesDBやexcelで保管しても参照が難しい
- 検索難
- よって見られない
git+sphinx+jenkins+nginxでドキュメントサーバを立てたので備忘録的に残す
リモートレポジトリにpushしたのを検知して、自動でsphinxがhtmlを作成し、公開する

用意するもの

git
sphinx
jenkins
nginx
サーバ(今回はVM上のubuntu)

各ソフトの導入

割愛
git,sphinxはローカルマシンにもインストールする

[サーバ]sphinx

.rstファイルや.mdファイルをhtmlに変換するビルドツール
インストールされてればOK

sudo apt-get install python-pip
pip install sphinx
pip install recommonmark=='0.4.0'

[サーバ]git

ドキュメントを管理するためにレポジトリ
- なるべくルートディレクトリに近いディレクトリにgit用のディレクトリを作る

sudo mkdir /repo

作成したディレクトリの実行権限等をユーザにする

sudo chown -R usr /repo
sudo chgrp -R usr /repo

レポジトリ用のディレクトリを作成し、初期化

cd /repo
mkdir ProjectName.git
cd ProjectName.git
git init --bare --share

[ローカル]プロジェクトの準備

sphinx+gitでドキュメントを作成する
プロジェクトのディレクトリを作成

mkdir ProjectName
cd ProjectName

gitで初期化

git init

sphinxのディレクトリ構成を作成

sphinx-quickstart

途中聞かれる質問にお好みに答える
- sourceとbuildは分ける
sourceディレクトリ以下に参照したいドキュメントを追加する
- デフォルトでは、rst記法のみに対応している
Makefileがあるディレクトリに移動して、以下のコマンドを実行

make html

上記のコマンドが正常に終了していれば、buildディレクトリが生成され、htmlディレクトリ以下に変換後のドキュメントが格納される
commit→リモートレポジトリにpush

git add .
git commit -m "First Commit!"
git remote add origin ssh://[ログインユーザ]@[IP]:[ポート番号]/repo/ProjectName.git
git push origin master

[サーバ]リモートレポジトリから公開ディレクトリへファイル移動

サーバ上のレポジトリから、htmlを作成する
作業用ディレクトリを作成

mkdir /work/
cd /work/

cloneしてhtmlを作成

git clone /repo/ProjectName.git
cd ProjectName
make clean html

結果、build/htmlにhtmlができていることを確かめる
- nginxの公開ディレクトリにコピーすれば公開完了
- 手動でもいいが、面倒なのでjenkinsを用いて自動化する

[サーバ]jenkins

インストール方法は割愛
- ローカルマシンからブラウザでjenkinsが見れる状態を想定
以下の様なシェルスクリプトを作成
- 引数にProjectNameを与えることで、git clone or git pullを実行し、htmlをビルドする
- /work/script/MakeRepo.shとして作成

#//bin/sh
WORK_DIR=/work
BUILD_DIR=/work/$1/build/html

echo "check dir:"$1

 if [ -e $WORK_DIR/$1 ]; then
        cd $WORK_DIR/$1
        git pull
 else
        cd $WORK_DIR
        git clone /repo/$1.git
        cd $WORK_DIR/$1
 fi

 make clean html

このシェルスクリプトをjenkinsに登録する

f:id:crewfanq:20160531180517p:plain

この場合、プロジェクト名はdocumentとしている
あとはプロジェクト名等をわかるように設定してジョブを作成する
作成したjobをjenkinsのインターフェースからkickして、htmlが作成されるか確かめる

ls /work/ProjectName/build/html

作成したジョブによってリモートレポジトリからhtmlを作成するところまで、自動化できた
- ドキュメントのリモートレポジトリが更新されたタイミングで、このジョブが実行できるようにしたい

[サーバ]git pushを検知して、jenkinsのジョブを実行する

jenkinsのインターフェースから、先ほど作成したジョブの設定を表示する
- 中腹にあるビルドトリガの"リモートからビルド"にチェック
- 認証トークンを任意に決める
- この設定により、該当URLにGETするだけでジョブが実行するようになった
git push時にジョブが実行されるようにする
- /repo/ProjectName.git/hooks/post-updateを作成する

cp /repo/ProjectName.git/hooks/post-update.sample /repo/ProjectName.git/hooks/post-update

"exec git update-server-info"の前にいかのコマンドを記述

wget --spider --auth-no-challenge --http-user=[jenkins-username] --http-password=[jenkins-password] http://[HOST]:[ポート番号]/job/document-sphinx-autobuild/build?token=documentjobtoken&cause=git-push

この設定によって、git push時に、jenkinsのジョブが実行される

nginx

公開サーバの設定をする
- 社内向けの設定を想定しているので、最低限
- listen:ポート番号、server_name:IP
- /etc/nginx/site-enable/sphinx

 server {
      listen 5000;
      server_name 0.0.0.0:;

      root /work/document/build/html;
      index index.html;
      location /{
              auth_basic "Restricted";
              auth_basic_user_file /etc/nginx/.htpasswd;
      }

 }

作成後、ファイルをコピー

sudo ln -s /etc/nginx/site-available/sphinx /etc/nginx/site-enable/sphinx

アクセスを制限したいので、Basic認証を利用
- インストール

sudo apt-get install apache2-utils

ユーザ名、パスワードの設定

$ sudo htpasswd -c /etc/nginx/.htpasswd username
New password: password
Re-type new password: password
Adding password for user username

この設定によってページアクセス時にusername/passwordの入力を求められる。
nginxの設定ファイルの文法を確認

sudo nginx -t

nginxの起動

sudo systemctl start nginx
sudo systemctl enable nginx

設定したIP,ポート番号にアクセスすると、nginxが起動していることがわかる
- ブラウザからアクセスすると、site-enable/sphinxに設定したindex.htmlが見れるはず

2015-12-30

Archlinuxでサスペンドから復帰時に、ネットワークに接続できない問題

ノートPCにArchLinuxを導入して使ってる。基本的にサスペンドさせることが多いが、復帰時にネットワークに繋がらなくなり大変不便だった。

いままでの対処法

復帰するたびにコマンドを実行していた

 sudo dhcpd

もしくは下のコマンドで登録している無線ネットワークに接続していた

 sudo systemctl restart netctl-auto@INTERFACE.service

解決法

Archwikiを参考にnetctl-auto-suspend@serviceを追加した。

[Unit]
Description=netctl sleep hook
Before=sleep.target
StopWhenUnneeded=yes

[Service]
Type=oneshot
RemainAfterExit=yes
ExecStop=/usr/bin/systemctl restart netctl-auto@INTERFACE.service

[Install]
WantedBy=sleep.target

ファイルを作成後、serviceを登録する

sudo cp netctl-auto-suspend@service /usr/lib/systemd/system/netctl-auto-suspend@service
sudo systemctl enable netctl-auto-suspend@service

2015-12-17

機械学習初学者がLinearRegressionを試して遊んだ

諸事情で２ヶ月間、田舎に幽閉された。
その暇を持て余す間に、以前から興味があった機械学習について勉強したので
備忘録 and 恥さらしとして残したい。

■やってみたこと

coureseraの機械学習コースをひと通りやった。

f:id:crewfanq:20151217194902p:plain

全体的にかなり丁寧に説明してもらえるので、難易度はそこまで高く感じない。

コースは講義(日本語字幕)＋演習(matlab)の形式になってるので、手を動かして講義の内容を理解できる。

courseraを経由することでmatlabのライセンスを買わなくても一定期間利用できる。無料のOctaveを利用することも推奨していたが、抵抗がないならmatlabでいいと思う。 pythonで書くのが今の流れに乗っていると思うけど、残念ながら未対応。

正直実装より、各セクションの最後の５問クイズのほうが難しいと思う。(英語だし)

■つくったもの

ひと通り講義＋演習をしたので、何かしらのアウトプットが必要なのかなあと思った。

その結果→LinearRegressionしてみた

実装力が低いので、シンプルな線形回帰を使ってみた。

線形回帰の学習パラメータをいじることで、結果が変わっていく様子を見ることができる。

■簡単な解説

赤の座標を緑の座標に射影する関数fを線形回帰で求める。

下の数値を変えることで、学習のパラメータを変えることができる。

学習効率や最急降下法のリトライ回数を変化させることで、学習結果がどのように変わるのかグラフィカルに知ることができる。

学習が終了した後、座標をクリックすることで学習に基づいた射影座標(紫)と、正しい射影座標(橙)が表示される。橙の点が大きいのは、正しい座標と学習結果の座標がどの程度離れているか視覚的に見せる意図があったが、正直イマイチ。

■レシピ

流行ってるという噂を聞いてMEANスタックというものに手を出した。

paizaのMEANスタックに関する記事が大変参考になった。

というかほぼこのままでインフラを整えた。

client側のcontrollerに線形回帰のコードを書いている。けど、これMVCモデル的に正しいのかな？どこにどういう風に拡張するのが作法に則っているのかも疑問だったりするから、後日調べる。(誰か教えて)

heroku上で公開してる。公開も4コマンド程度で実現できるから、yoすごい。 mongoDBのアドオンを導入するために、クレジットカードを登録するのが微妙に抵抗があったけどしょうがない。

■雑感と後悔

頑張って作った割にサンプルそのものみたいなものができてしまった。

次があるならもう少し面白いものが作れるといいなあ。

crewfanqのlog

いろんな備忘録的な

React,Redux,開発環境(TypeScript)の学び始め(途中経過)

はじめに

Reactを学ぶ

Reduxを学ぶ

開発環境について学ぶ

今後

sphinx+jenkins+gitでドキュメントサーバを建てた

背景

用意するもの

各ソフトの導入

[サーバ]sphinx

[サーバ]git

[ローカル]プロジェクトの準備

[サーバ]リモートレポジトリから公開ディレクトリへファイル移動

[サーバ]jenkins

[サーバ]git pushを検知して、jenkinsのジョブを実行する

nginx

Archlinuxでサスペンドから復帰時に、ネットワークに接続できない問題

いままでの対処法

解決法

機械学習初学者がLinearRegressionを試して遊んだ

■やってみたこと

■つくったもの

■簡単な解説

■レシピ

■雑感と後悔