ゆるふわ技術日誌

ゆるくふわっと広く浅く。

Sequelizeを使ってみた #43

今日やったこと

Sequelizeを使ってみた

Node.js+SQLiteでWebアプリ作ってますーみたいな話をつい先日した気がします。

アプリの規模的にはSQL直書きでも全然いけちゃうんですが、ORマッパーって便利なんだなぁってことを知ったのでNode.jsで使えるORマッパーSequelizeを使ってみたという話………なんですが結局動かすことには成功してないです。やること溜まってタイムオーバーになってしまった。

作業途中のリポジトリ

github.com

何がいけないのかよくわからん。うまくいってるフリだけされてしまう……。

ただ、ライブラリ探してきてドキュメント読んで動かしてみるって面白いですね。ハマりそう。

雑談

進捗〜〜〜😇

position: stickyがすごい #42

今日やったこと

CSSのposition: stickyがすごい。

すごいんスよ。

とりあえずご覧ください。(スクロールしてね)

See the Pen position:sticky by Kota Nonaka (@uutarou) on CodePen.

〈追記〉prefix指定してないので動かない環境が結構ありそう(iPhoneSafariは動かなかった)。PC版Chromeは動いたのでそちらでご覧ください〈追記ここまで〉

こういうありがちなやつがJS一切なしでかけちゃう。すごい。

positionstickyを指定するだけで作れます。

Can I Useで確認してみると

Can I use... Support tables for HTML5, CSS3, etc

EdgeとIEとOperaMiniは完全に不可、それ意外はまぁまぁ使えそう。

固定されないと表示が崩れたりしない場所であればこれで実装しちゃうっていう運用全然アリな気がする。

CSS3も全然知らない機能があるなぁと思った次第。いろんなことに手を出しすぎて勉強が追いつかないのが辛いねぇ。

CodePen初めて使った

codepen.io

上のやつですね。初めて使いました。めっちゃ便利やんけ。

今回はHTML/CSSオンリーなので関係ないですが、JavaScriptもBabelでトランスパイルしたりできるみたいですごい。何だこれ。

雑談

今日はまた別件で東京方面に来てました。

交通費つれえ。


今日はバイトなので軽めに。早めに。

どっかでまとめてドバっと時間を作って開発なり勉強なりしたい。

6月過ぎたら余裕ができる…といいな。(と思ったけど期末試験シーズンですねorz)

fs.watchの続き/chokidar #41

今日やったこと

fs.watchの挙動を確認

yurufuwa-tech.hatenablog.com

この記事で作った、Node.jsを利用したファイル変更検知スクリプト

何故かrenameしか検知しなかったのを直していきます。…というつもりだったのですが。

公式ドキュメントに実は書いてて

Note that on most platforms, ‘rename’ is emitted whenever a filename appears or disappears in the directory.

なるほど…。

困りましたねぇ。

と思っていたらnodejsのissueにこんなものが。

Mac: fs.watch() not detecting changes to file from git operation · Issue #5039 · nodejs/node · GitHub

この中で紹介されているchokidarというライブラリがかなり良さげ。

github.com

ぐぐったらそこそこヒットしたのでまぁ割りとメジャーなライブラリなのかな?

というわけで使ってみる。

chokidar

これがすごかった。

ワンライナーでファイル変更検知するだけならこんな感じ。

const chokidar = require('chokidar')

chokidar.watch('./src').on('all', (event, path) => {
  console.log(event, path)
})

素敵すぎる…。取るイベントを指定したり、無視するファイルを指定したりできます。完璧すぎる…。

実際に上記コードを動かすとこうなる

f:id:uutarou:20170624233709g:plain

神か?

fs.watchとは違い互換性など気にしなくていいみたいなのでコレであるものを作ってみたいと思います。

その話はまた今度。

今日のサンプルコードも上げておいたのでどうぞ。(ほぼ公式丸写しなのでそちらをご覧ください笑)

github.com

雑談

今日はサポーターズの逆求人イベントに参加していました。

いろいろな企業のエンジニアの方と話して、意外な自分のやってみたいことに気が付かされたり発見が多かったなぁというのが個人的な感想です。

2年後?、納得の行く会社で働ける日を夢見て。明日からも頑張りましょう。

とりあえず今日は軽めの記事になっちゃましたが許して。

Expressやった #40

今日やったこと

Expressやった

Expressは、Node.jsのWebフレームワーク。Node.js界では割とスタンダードらしい。

毎週恒例、実習の中で使いました。コレでWebアプリ作ってみる。

DBはMongoとか使った方がイケてる気がするんだけど、時間がかかりそうなので今回はSQLiteで。 絶賛追記したいところなんですが今日はとにかく時間がやばいので一旦投げておく。

また気が向いたら続き書きます。

Nodeでファイル変更検知/はじめてのDocker #39

今日やったこと

Nodeでファイル変更検知

ちょっとした用事があってファイルの変更検知、やりたいなぁ…と思って。

最初シェル芸で片付けようかと思ってファイルのチェックサムを定期的に確認して変更があったらファイル変更って感じのスクリプトを書こうとしたのですが、例えば指定ディレクトリ下のファイルのどれかに変更があったら検知…とかやろうとするとどうしたらいいのかわからず。(全ファイルのチェックサム計算する???)

そしたら、Node.jsのfsには標準でwatchがついてるという情報をキャッチしたので使ってみました。

const fs = require('fs')

fs.watch('./src', (eventType, fileName) => {
  switch (eventType) {
    case 'rename':
      console.log(`${fileName} is renamed!`)
      break;
    case 'change':
      console.log(`${fileName} is changed!`)
      break;
  }
})

console.log('Watching...')

こんな感じ。一応GitHubにおいておいたのでもしよろしければ。

github.com

動かしてみたらこうなる。(見切れてるけど…)

f:id:uutarou:20170622233402g:plain

なぜかイベントがrenameしか拾えてないのですが、その辺はまた明日。

File System | Node.js v8.1.2 Documentation

これがドキュメント。なんかFSWatcherがなんとかとか書いてる気がしますね。明日やります。

Docker使ってますか?

便利ですよね。

なんだかんだちゃんと使ったことがなかったのでかんたんなDockerfileを書いてみました。

FROM ubuntu:16.04

RUN apt update && \
    apt install -y curl &&\
    curl -sL https://deb.nodesource.com/setup_6.x | bash &&\
    apt install -y nodejs

ENV APP /app
ADD . $APP
WORKDIR $APP
CMD ["npm", "start"]

こんな感じ。(実は某別件で触れてる構成とほぼ同じ感じだったりするのでう〜ん。)

UbuntuベースにNode.jsをインストールしてカレントディレクトリのファイルをコンテナの/app下に配置する感じ。

こうやって見てみると何も難しいことはしてないのが分かる。

ちなみにNode.jsは apt update した上で apt install nodejs npm で入れてあげることもできるのですが、降ってきたバージョンが4.xとかでめっちゃ古かったので(現状の安定版は6.11.0)NodeSourceを利用しました。

github.com

使い方はREADME.mdを。

日本語訳に頼るのはホントは良くない気がしますが、いい感じに翻訳されたドキュメントもあるので見ながら書けば良さそう。

Dockerfile リファレンス — Docker-docs-ja 1.13.RC ドキュメント

雑談

課題が終わらない!!


LaTeX環境を作ってくれるDockerfile+自分の使うスタイルファイルとかを作っておけば

みたいなときに便利だからつ〜くろ、と思ったんですが我が家の回線でその作業し始めると数時間コースなので延期。

ReduxとRailsとReactと #38

今日やったこと

今日はエンジニアバイト1日目でした。

バイト先でやったことを。

Redux公式ドキュメントを読んだ

Read Me · Redux

英 語 辛 い !

現場からは以上です。

(というのは2割位冗談で、公式ドキュメントは確かに英語ですが確実な情報が書いてるのでちゃんと読んだほうがいいなと思いました。)

Railsやった

Railsはおろか、RubyもわからないのにRailsやりました。

まぁわからん。

主にActiveRecord触ったのですが、 find とか update はそれぞれ後ろに!をつけて find! とか update! にすると、見つからなかったときに例外を投げてくれる。なるほど。

ちょこちょこRailsにも触っていきたいものです。

React

Reactもやった。特に語ることなし。

雑談

疲れたけど楽しかった!

初心を忘れずいきたいものですね。


ぼくのQiitaが強い感じになった。

f:id:uutarou:20170621223258p:plain

react-routerのお勉強② #37

今日やったこと

react-routerのお勉強②

昨日、react-routerがバージョン4から様変わりして無理ぽよという話を書いたら後輩さんから「日本語の記事よりドキュメント!」と言われてしまったので公式ドキュメントの例を写経しつつごりごり。

こんな感じになった。

楽しい。Reduxと組み合わせて使うと云々みたいな話を聞いた。

アドレスバー書き換えて遊んだ

そもそもreact-routerがどうやってアドレスバーを書き換えてるかというと、

qiita.com

こういうカラクリらしい。

これでシューティングとかできるゲームサイトもあるらしい。楽しい。

雑談

明日からプログラマー見習いになります👨‍💻🔰

怖い………

(しかも朝から豪雨らしくたどり着けるのか?って感じ)