現在の自分の技術スタックについて
誕生日が二日後に迫っていて、ついでに転職する時自分のまとまったスキルについてのリストがなくてだるかったので現時点のものをまとめておく。
※ 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
Laravel
WordPress
- WebがメインなのではっぱしWordPressは触る機会が多かった。
- 自分のBlogもWordPressを利用中
- カスタムタクソノミーとかフォームとかをいじって、専用の入力ページを作ったり、テーマをカスタマイズしたり作ったりとかやった。
PHP Excel
Node.js
Express
Golang
Cシャープ
- なんか
#
が表示されない - ASP.NETの開発で。バックエンドはPostgreSQL
- Office365APIとの連携で、カレンダーアプリを開発
- 調べながらならできる。
HTML / CSS / SASS
- 普通に使える。
- mixinとかその辺もまぁ。
- 普通以上には使えない(絵を描くとか)
DB
MySQL
MongoDB
PostgreSQL
SQL Server
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アプリは早めに出したい。
React.jsからAsync, Awaitを使ってNode.jsのExpressで立てたAPIサーバーにアクセスしてMongoDBのデータをFetchする話
ちょっとしたツールを作っていて、普段使っている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に記述する以下のコードで動くようになった。
— Ricck/Riki (@Ricckn) 2018年4月9日
"scripts": {
"start": "nodemon --legacy-watch ./bin/www"
}, https://t.co/ZBcwG8Xlpf
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サーバーを立ててもいいかもしれませんね。
React.jsのboilerplate
- React.js
- Material-ui
- Babel
- ES2016
- Sass
- Eslint
あたりを使ったReact.jsプロジェクト用のレポジトリを、周りの人向けに作ったので共有しておく。
色々コメントを書いてあるのと、まだまだ修正する可能性があるんだけど、もしとりあえず簡単なコードを読んでみたいって需要があったら使ってもらえればと思います。
Dockerで- /etc/localtime:/etc/localtime:ro がMount Deniedを出すやつ
ちょっと古い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
とりあえず誰かの参考になれば
React.jsとFirebaseを使って多人数同時クイズアプリを作ってる
これはオープンソース化しようと思ってるんだけど、ここ2年くらい新年の集まりでクイズアプリを使ってみんなで遊んでる。
今年は30問以上集まっていて、まぁそこそこ楽しめてて良い物だと思う。
株式会社オプトが作成したクイズアプリを試した話 | SteadyWorX
とまぁ、株式会社オプトさんが作ってくれた、フロントはReact.js、バックエンドがJavaで出来ていてWebSocketで通信するオープンソースなクイズアプリを、EC2上に設置して動かしてるんだけどちょいと気になる部分とか、問題設定の手間とかがあるので個人的にも周りでちょろっとやるにも良さげな感じに作り直そうと思って作ってるところ。
なんで
で、ちょっと前にFirebaseを使って他のユーザーとデータを共有できる仕組みを作ってみて、FirebaseのRealtimeDatabaseを使えば、
- 問題表示のタイミング同期
- スペック問題
あたりは一発で解決できそうだなぁと言うのがでかくて、React.jsの勉強も兼ねて書いてる(前作ってる方は終わってない)
問題の部分
うちの利用用途では問題は親族に募集していて、Google Formで募ってます。
するとCSVでDLできるので、今まではコピペしながらjsonに整形してたんだけど、そもそもこのCSV食わせる機能があれば結構楽ちんだなぁと思ってる。
だし、問題募集に使わなくても自分で管理するようにこれ使ってもいいと思うんだよねぇ。
実際に使ってもらうために
実際に使ってもらうためには、
- JavaScriptビルド環境の構築
- Webサーバーの知識
- Firebaseへの登録
くらいは必要になるのでそこそこめんどくさいとは思うんだけど、いや、結構面白いんだよみんなでスマホ片手にクイズやるの!
その辺をモチベーションに頑張っていきます。
とりあえずCSVの読み込みが上手くいかないんですがcsvtojsonは微妙なんですかね?