2018-07-19

Boostnoteが便利！！EvernoteともDropbox Paperともおさらば出来た！

Editor

先日、BoostnoteというOSSの紹介を見て試しにインストールしてみたところ、日頃仕事でメモを取っていた環境をすべてこちらに移すことができたので紹介します。

boostnote.io

employment.en-japan.com

Boostnoteとは

ざっくりいうと、

markdownでかけて
タグを各ノートに設定できて
code snipetも保存できて
データはローカルに保存されて
ついでに画像も、ローカルに保存される

みたいなメモツールです。

ある程度markdownも拡張されていて、

- [ ] task1

のように記述すると、チェックボックスが出てきて、そのMarkdown内での達成率も画面上に表示されます。

仕事でのメモ環境

働き始めてから4年ちょっと、会議でのメモ等々をどこにまとめていくかずーーーっと悩んでる状況でした。
はじめはSublimeText（当時、今はVSCode）普通のメモファイルを作成していて、各案件ごとのフォルダにまとめていたんですがこれが割とめんどくさいのと、たまにコードを貼りたいときに```でまとめることが出来なかったのが不満でした。

その後はEvernoteを試して一瞬でヤメて、会社的にはDropboxを契約していたので、Dropbox Paperも使ってみましたが、日本語入力がだいぶバギーだったので（今は結構治ってるかも）これもやめて・・・。

転職してからは諦めてEvernoteで可能な範囲で使っていたんですがいよいよ見つけたって感じですね。

仕事でのメモ環境に困っている人は試してみて！

ということで、メモを取るとかの部分を困っててMarkdownがいいんだよねーー！！！って人は是非試してみてください。
ぜひ！！！

2018-05-28

4年ぶりくらいに「ゆるい勉強会」を開催した

ゆるい勉強会

実は大学を卒業してすぐくらいに2回ほど、「ゆるい勉強会」と称して簡単な勉強会を 飲み屋で 開催しておりました。
その後、仕事が忙しくてずーっとできてなかったのですが、5月2週目くらいの水曜日(5/11 金)に「第3回ゆるい勉強会」を開催、無事終えることができました。

ということで、どんな内容なのかとか、この間の会の振り返りとかをやっていきます。
完全にやらかしたんですが、一枚も写真撮ってないのが辛いです・・・。

あと、下書きに置きっぱで2週間ほど経った・・・！！！

どんな会

もともとのコンセプトは、【高校卒業して、みんなバラバラの分野研究したし、今は色々な仕事やってるんだし知見を共有しようぜ飲もうぜ】って感じです。
ただ、発表するってことに対してハードルを感じてほしくなかったので、あくまでテーマは自由です。

発表の形式も、「ゆるい」がちゃんと反映させるように、LT（Lightning Talk）で5分にしています。
この5分も別に厳密に計ってドラを鳴らすとかじゃなくて、超えてもいいし短くてもいいよってくらいゆるくしています。

この間の会で実際に話されたテーマ

バスの地上乗務員の仕事とトラブル
ロレックスという時計について
eSportsについて
投資について
MRについて
パン工場の話について
フリーランスについて
信託銀行について
森林組合について
雑談

といった感じでした。

資料は身内向けに公開（まだやってない・・・）する予定で、第4回も7月中頃開催します。
次は会議室→飲み屋の流れの予定

次は写真も撮ってレポートしよう:(

2018-04-28

技術書典4でサークルチェック漏れした「Libraries of React」の電子版を買って読んだ感想

JavaScript React.js プログラミング

先日の技術書典4で購入漏れしていた「Libraries of React（れいな＠底なし沼の魔女）」を読みました。 megablacklabel.booth.pm

たまたまフォローしていたので、Twitterを眺めていたら購入漏れに気づき、Boothで買いました。やっぱし、電子版も出してくれると大変助かります。

本著は、作者様が知り得たReact.jsに関する知見のうち

流行りに沿ったコーディング
ゼロコンフィグ・モジュールハンドラー
日本語情報の少ない良さげなモジュール

についてまとめてくれた同人誌です。

で、購入したら

了解です！当方、勉強始めたばっかで簡単な管理画面とFirebaseと連携したスケジュール管理アプリ、クイズアプリ作成中くらいなステータスなんであまり期待しないでくださいw
— Ricck/Riki (@Ricckn) 2018年4月26日

とあったので、書きなれないですが感想を書いてみます。

また、私のReact.jsについてのステータスは上にTweetにあるようなレベルで、初期の学習はUdemyの下記講座を利用しました。 www.udemy.com

1章 Stateless Functional Component（SFC）で可読性向上

Functional Componentについては、上記講座で学んだので、Stateを持つ必要がないComponentについてはすでに利用していました。が、もしどこかのサイトで勉強して書いている人がいる場合、公式のドキュメントを読んでいないとこういう知識は漏れてしまうので、紹介されているのは助かります。

2章より良くReactを使うテクニック

個人的にはこの章がすごく助かりました。基本的には動画で学んだことや、ちょろちょろ見ているサンプルコードで知識を得ているくらいなので、この章にかかれている細かいテクニックなどを見落としがちなのが個人的にも課題だなぁと思っていたところです。

たとえば、「JSXのドット記法」なんかはFunctional Componentとして細かくファイル分割されている今の環境では一発で可読性が良くなりそうな知見だなぁと感じます。 reactjs.org

3章 recomposeでHOCsを扱う

Higher-Order Componentsという概念はこの章で初めて知りました。
（わからんこといっぱいあってすごく助かる・・・。）

「作成したComponentに処理を追加することができるラッパー」ということで、大分理解できたのですが、これはちょっと書いてみないと実感できないんだろうなぁという印象。
幾つか記事も合わせて調べてみましたが、Componentの巨大化を防いだり、再利用性を高めるという意味ですごく良いかもしれないですね。
実際どこかで使ってみたい。

とまぁここまで読んでみて、時代はやっぱしSFCで書くのを推奨しているんだなぁと思った次第。小さいアプリくらいだと余り困らないけど大規模になればなるほど困るのかな・・・？
ここは実感として持てるほど経験がつめていないので、なんとか理解できたらなぁと感じるところ。

4章ゼロコンフィグ・モジュールハンドラー

今のところすでに組み込み終わった、オレオレ webpack.config.js とか .eslintrc.js とかでやっているのであまり恩恵はないのかなぁ？と思いました。
ただ、本著にもあるように

選択肢の多さで、コーディング以外のところで体力を使う辛い状況から「設定ファイルを0にして実際の開発に注力する」

の部分もあるように、開始初期はここでかなり躓いた記憶があるので、意義はすごくわかる。
自分みたいに趣味レベルで書いてるくらいだと、コンフィグをいじる機会があまりないので困ってなかったけど、ならむしろこっちでいいんじゃね？という気分はあります。

5章開発時のお勧めモジュール

styled-componentについて www.styled-components.com これは使いたいなぁ・・・。
とにかく、React.jsはCSSをどう書くのが良いのかよくわかって無くて、かと言ってsassを普通に読み込ませるのなぁとおもっていたところ。これ以外も調べてなんかCSS書く方法は検討したい。
今のところは、Material-UIをメインで使ってるので底まで困ってないけど、独自に書きたいというのはそうそう遠くないミライに来る予定なので、準備します。

読み終えて

個人的に一番良かったのが、「一般的な技術書と比べてコンパクトにまとまっている」という部分で、Webの記事以上のまとまり具合、読みやすさで、普通に出版されているよりもコンパクトでライトというのが、すごく気に入ってます。

内容については、とても自分の現状にマッチしていると感じました。
なので上のTweetにもありますが、「とりあえず環境は組み終わった、書ける、いくつか書いてみた、けどベストプラクティスなんぞや」みたいな人にはいいんじゃないかなぁと。

ということで、React.js書いてて楽しいけど周りにあまり聞ける人がいなくてどう書いたら良いんだろ、もっと良い書き方がある気がするみたいに悩んでる人がいたらこちらの本買ってみてください。 megablacklabel.booth.pm

最後に、このような素敵な本を書いていただき、ありがとうございました！！！！！！！！！

2018-04-19

現在の自分の技術スタックについて

プログラミング

誕生日が二日後に迫っていて、ついでに転職する時自分のまとまったスキルについてのリストがなくてだるかったので現時点のものをまとめておく。

※ 2018/04/19現在

そもそも

はじまりはMumbleサーバー

FEZっていう当時の神ゲーがあって、VCしたかったんですけどSkypeは重いわTSは音質悪いわってことでMumbleというVCツールを建てようとしたところから、それっぽいことが始まりました。
そこでXAMPPでWordPress動かしたりしてた、懐かしい・・・。

ということで以下本編。

言語

JavaScript

jQuery

JavaScriptの勉強と言うか、そもそもの私のプログラム勉強スタートが、学校の授業でWebサイトを作るというところから始まっていて、その時「Light Box」をjQuery Pluginとして入れるところをやって、そこからTwitterAPI触るのにハマっていってという流れで結構の間お世話になった。

React.js

ずっとjQueryで書いてたけど、カルマが溜まっていったのと作りたいアプリもあったことから勉強した。
簡単な管理アプリなんかはもうReact.js + (Node.js + MongoDB or Firebase)で作ってる
React Nativeは勉強中。NativeBaseが良い。

Redux

使ってみたけど小規模なアプリで利用している為、そこまで恩恵は受けてない。Fluxの概念はなんとなくわかった。

Firebase

ここにいれるか悩んだけど、使っててすごく良い、面白い。簡単に色々作れる。React.jsとの親和性が高い。

PHP

FuelPHP

会社で利用していたため使った。緩めのMVCっぽくて、そもそもMVCを学ぶところから始めた自分的には良かった。
最終的に、スマホ向けのWebアプリのフロント側全部作った。（ECっぽい物）

Laravel

これも会社で触る。FuelPHPよりも固め？な印象で現在進行形で勉強中
こっちは主にAPIの作成を行っている、fill()便利

WordPress

WebがメインなのではっぱしWordPressは触る機会が多かった。
自分のBlogもWordPressを利用中
カスタムタクソノミーとかフォームとかをいじって、専用の入力ページを作ったり、テーマをカスタマイズしたり作ったりとかやった。

PHP Excel

いまはPHP Spreadsheetってのがあるみたいだけど、PHPからExcel出力するのに利用
もう大分つらい気持ちになった・・・。

Node.js

Express

上でも書いたけど、React.jsとMongoDBを組み合わせてJsonのやり取りをするようなときにサーバー側のフロントにAPIサーバーを立てるときに使ってる。

Golang

キワモノ系だけど、Golangであるテキストを入力した際にその答えを出すアプリを作る
しかもWindowsクライアントとして配布する。
Walkというパッケージを利用して、exeファイルを作成した

Cシャープ

なんか # が表示されない
ASP.NETの開発で。バックエンドはPostgreSQL
Office365APIとの連携で、カレンダーアプリを開発
調べながらならできる。

HTML / CSS / SASS

普通に使える。
mixinとかその辺もまぁ。
普通以上には使えない（絵を描くとか）

DB

MySQL

WordPressで利用したときはあまりDBを触ったイメージはない。
Laravelもあまりそういうイメージはないけど、FuelPHPで開発を行ったときはもりもりSQLを書いてた

MongoDB

Expressで建てたAPIサーバーと通信する時、主にJsonを扱いたかったため利用。
特殊だけど、Jsonをそのまま突っ込めるのはメリットに感じた。
趣味レベル

PostgreSQL

スケジュールアプリを会社で作成した時に利用。
このときはC#とASP.netで作成した。

SQL Server

まさかのPHPからの連携先として利用
これは主にデータをもりもり貯めて、FuelPHPとPHP Excelで帳票出力するのに利用

Firebase

一応ここにも

まぁDB系は必要に応じて書いてた感じ、すごい難しいSQLを書いたとかではないのでIFNULLなのかISNULLなのかみたいな差異は調べながらやってくみたいな。

サーバーアプリケーション系

Apache

ずっと使ってたけど最近あまり使ってない。
仕事では結構使う

Nginx

Dockerと組み合わせるようになってからもりもり使ってる。
でも確かDockerでWordPressを配信する前から、静的ファイルのキャッシュのために利用していたような。

PHP-FPM

Nginxにしてからは主にPHP-FPMを利用している。

インフラ

さくらのVPS

自分の環境は大体さくらのVPSを利用している。主にCentOS7

AWS

ECっぽいサイトのときに一人で構築。
ELBとEC2、RDSを組み合わせたシンプルなWebアプリを作成するのに利用
他にも、個人的にJavaのアプリを動かすためにEC2だけ契約して使ったことも有り。

Docker

結局、自分のVPS環境は中でDockerを動かして、アプリ単位で配置している。
ローカル開発環境としては基本Dockerで組むようにしている為、主に公式Imageとdocker-composeを組み合わせることが多い（ちょっとカスタマイズすることは多い）
オーケストラレーション系のツールは未経験、気になる。
VPS環境はDockerをポンポン設置して、フロントにNginxを置くケースが多い
Mastodonを入れるときに、初めてVPSに設置した記憶がある。

その他

Git

便利、手放せない

明日以降の目標

広めに

とりあえずもうちょっと深く知らないといけない分野が多い印象
今の会社はPHPがメインだけどそれ以外の仕事も多いのでそっちにもガンガン入っていきたい。

具体的には

デザインパターン周り
より低レベルのコンピューターサイエンスの知識

は拡充させていきたい。本とか読む

目下やりたい

React.jsが面白すぎるので趣味ではReact.jsを使ったアプリを書いていくと思う。Eslintがよくできてて、どっかで書いたけど大リーグボール養成ギブスっぽさが良い。

そんなわけでReact.jsで書いてるQuizアプリは早めに出したい。

2018-04-16

React.jsからAsync, Awaitを使ってNode.jsのExpressで立てたAPIサーバーにアクセスしてMongoDBのデータをFetchする話

Docker JavaScript React.js Node.js MongoDB

ちょっとしたツールを作っていて、普段使っているRDBではなく、MongoDBを使うべきだなぁってシーンが有ったのでNode.jsとMongoDBにReact.jsからアクセスした流れとかを書いていきます。
といっても、今回書こうと思っているのはReact.jsでAPIにアクセスするあたりの処理がメインなので、Node.js Express MongoDBあたりはサクッと紹介していこうかなぁと。

環境はDockerで構築したので、それっぽいものをGithubにPushしておきました。 github.com こんな感じの構成です

Nginx
MongoDB
MongoExpress
React.js
Material-ui
Webpack

Node.jsとExpressとMongoDBを使ったAPIサーバーの設定

APIの数が少なかったので、横着して簡単に書いてますが、以下の項に /expressDir/route/index.html にべた書きしちゃってます。

const Mongo = require('mongodb');
const MongoClient = Mongo.MongoClient;
// docker-composeを利用しているため、以下のようなURLを指定している
// 同一のサーバーに立てるのであれば、localhostで良いはず
const _url = 'mongodb://tm_mongodb:27017/feed';

router.get('/', (req, res, next) => {
  MongoClient.connect(_url, (err, client) => {
    const db = client.db('feed');
  
    db.collection('feed', (err, collection) => {
      collection.find().sort({ 'feed.id_str': -1 }).toArray((err, docs) => {
        res.send(docs);
      });
    });
  });
});

こんな感じにすると、JavaScript側からGETで http://localhost:3000/ にアクセスすると、feedの一覧が取得できます。

なお、Node.jsはプロセスを立ち上げているとファイルの更新をしても処理が変更されないので、大抵は更新検知するプロセスからNode.jsを実行します。今回利用したのはnodemonというものでしたが、これが自分のDocker環境でうまくファイル更新を検知してくれなかったのですが、以下のような設定を追加すると動いたので備忘録的に残しておきます。

困ってたこれ。docker-compose周りの設定が悪い可能性もあるけど、package.jsonに記述する以下のコードで動くようになった。

"scripts": {
"start": "nodemon --legacy-watch ./bin/www"
}, https://t.co/ZBcwG8Xlpf
— Ricck/Riki (@Ricckn) 2018年4月9日

package.json のscripts部分にnodemonを絡めた実行コードを記述すると思うのですが、そこで --legacy-watch パラメーターを追加してやるといい感じにやってくれます。

React.jsでAPIにアクセスする

React.jsでAjaxを使う場合、ちょっと前までは「ここだけjQuery使うのかよ、FetchAPIもまだ怪しいし」みたい話を聞いたことがあったのですが、現在は使いやすい物があるみたいです。 github.com 今回はこのsuperagentを利用しました。

非同期処理なのでasync awaitを使って書いてあります。
API関係のコードはすべて api.js というファイルに纏めて記述します。

import request from 'superagent';
const url = 'http://localhost';
export const getAllFeed = async () => {
  const endPoint = url;
  try {
    const res = await request.get(endPoint);
    return res.body;
  } catch (error) {
    console.log(error);
    return {};
  }
};

呼び出す側はComponentが読み込まれた際に実行してもらいたいので、 componentDidMount() 内に記載します。

componentDidMount() {
    // すべてのFeedを取得
    getAllFeed()
      .then((feed) => {
        this.setState({ feed });
      });
}

以上がComponentが読み込まれた際、MongoDB側からFeedを取得して、React.jsでsetStateする部分の処理になります。

React.jsは勉強中で、それまではFirebaseを使ってデータを格納していたこともあり、Async, Await系の処理を書いたことがありませんでしたが、思ったよりも簡単にかけてスッキリするので良いです。
Firebaseはそれはそれですごく使いやすいのですが、Realtime Databaseが必要ではないときと、まぁ費用がかかりそうなときは今回作ったDockerファイルあたりを駆使して、MongoDBとExpressを使ってサクッとAPIサーバーを立ててもいいかもしれませんね。

2018-03-11

React.jsのboilerplate

JavaScript React.js プログラミング

React.js
Material-ui
Babel
ES2016
Sass
Eslint

あたりを使ったReact.jsプロジェクト用のレポジトリを、周りの人向けに作ったので共有しておく。

github.com

色々コメントを書いてあるのと、まだまだ修正する可能性があるんだけど、もしとりあえず簡単なコードを読んでみたいって需要があったら使ってもらえればと思います。

2018-02-23

Dockerで- /etc/localtime:/etc/localtime:ro がMount Deniedを出すやつ

Docker

Mac OS: 10.13.3（17D47）
Docker for Mac: Version 17.12.0-ce-mac49 (21995)

ちょっと古いdocker-compose.ymlには結構

volumes:
  - /etc/localtime:/etc/localtime:ro

みたいな記述が入ってるんだけど、これが以下のエラーを出す。

Mounts denied:
The path /etc/localtime
is not shared from OS X and is not known to Docker.
You can configure shared paths from Docker -> Preferences... -> File Sharing.
See https://docs.docker.com/docker-for-mac/osxfs/#namespaces for more info.

ということで、以下のように書くと良いっぽい。

volumes:
  # - /etc/localtime:/etc/localtime:ro
environment:
    - TZ=`ls -la /etc/localtime | cut -d/ -f8-9`

環境変数のTZに値を渡す感じ。

もともとDockerさんに時刻を渡す方法はこの二通りなんだけどちょっと前のバージョンから動かなくなってた。
Dockerの時刻 - Qiita

とりあえず誰かの参考になれば

Boostnoteとは

仕事でのメモ環境

おすすめの使い方

仕事でのメモ環境に困っている人は試してみて！

どんな会

この間の会で実際に話されたテーマ

1章 Stateless Functional Component（SFC）で可読性向上

2章 より良くReactを使うテクニック

3章 recomposeでHOCsを扱う

4章 ゼロコンフィグ・モジュールハンドラー

5章 開発時のお勧めモジュール

読み終えて

そもそも

はじまりはMumbleサーバー

言語

React.js

Redux

Firebase

Laravel

Node.js

Express

Cシャープ

HTML / CSS / SASS

DB

MongoDB

Firebase

サーバーアプリケーション系

Nginx

PHP-FPM

インフラ

さくらのVPS

Docker

その他

Git

明日以降の目標

広めに

目下やりたい

Node.jsとExpressとMongoDBを使ったAPIサーバーの設定

React.jsでAPIにアクセスする

2章より良くReactを使うテクニック

4章ゼロコンフィグ・モジュールハンドラー

5章開発時のお勧めモジュール