前回からの続きです。
何回も書き直してぐしゃぐしゃになってしまったけどとりあえず公開する。
振り返り的なことは別記事で書く。
まとめようと思ったけどうまくいかなかったので、あくまで自分視点で感じたことを書いていこうと思います。
中には自分がうまく理解できていないだけだったり単に能力不足だったりというのもあるかも知れません。
続きを読む
ポートフォリオはクライアントサイドだけで作ったのでサーバサイドと連携したものも試してみたいなと思った。
以前サイゼリヤ1000円作ったときにSinatraが手軽でいいなと思ったので、SinatraでAPI作ってReact（というよりはaxios）で叩くことを試してみた。
require 'sinatra'
before do
response.headers['Access-Control-Allow-Origin'] = '*'
end
get '/' do
content_type :json
{ key1: 'value1', key2: 'value2' }.to_json
end
たったこれだけ！超短い。
CORS設定しないとネットワークエラーになってしまう。CORSについては別の機会にちゃんと勉強する（勉強するとは言ってない）
import React from "react"
import "./App.css"
import axios from "axios"
class App extends React.Component {
state = {
key1: "",
key2: ""
}
handleClick = async () => {
try {
const response = await axios.get("http://localhost:4567/")
const data = response.data
this.setState({ key1: data.key1, key2: data.key2 })
} catch (e) {
alert(e)
}
}
render() {
return (
<div className="App">
<button style={{ width: 200, height: 35 }} onClick={this.handleClick}>
Sinatra呼び出し
</button>
<p>{this.state.key1}</p>
<p>{this.state.key2}</p>
</div>
)
}
}
export default App
クライアント側。ボタンをクリックしたらaxiosでSinatraからJSONを取得して、結果をstateに入れて表示する。それだけ。
state = {
key1: "",
key2: ""
}
stateの中身について上記のコードかconstructorかで宣言してあげないとkey1なんてないよと怒られてビルドできない。
CORSのところと上記のstate周りでちょっとハマったけど、予想通りとても簡単にできた。素晴らしい。
仕事でReact（正確にはReact Native）を使っているのでお勉強がてらポートフォリオサイトを作った。
案外さっくり作れたつもりだったけどコミット履歴を見ると10日はかかった模様。
平日1日1時間程度+休日なのでだいたい15時間程度くらいだろうか。
まずはいろんなポートフォリオサイト見て回ってコンテンツをひねり出し、さらに最初の1,2日はTypescriptわからん、Material-UIわからんという感じで格闘していた気がする。
Material-UIを選んだのはcssフレームワークの中で、前職辞める直前に一瞬React触ったときに使ってたような気がするなというだけで選んだ（本当に使っていたかは定かではない）
実際に作ってみて、cssの知識全然足りないなって思った。
やろうとしたレイアウトがうまくできなくて諦めて変えるみたいなことをしていた。仕事では許されないやつ。css勉強せねば…。
まだデザインとかほぼ素のままなのでもう少しいじってみるつもり。
それとgh-pagesだと毎回deployめんどいのでCIにしたい（明らかに先にやっとくべき事案）
ただ、なんだかんだ言って慣れてしまえば結構書きやすいなと思った。redux使ってないとかはあるけどｗ
あと、Typescriptはコンパイル時点でエラーがあると教えてくれるのは便利だなと思った。JSだと実行したときにタイポに気づくとか日常なので。
それにしても、2019年にもなってなんで自分のWebサイト作ってるんだろうなぁなんて思ったのでしたｗ
Reactビギナーズガイド ―コンポーネントベースのフロントエンド開発入門
6月の頭、これまで携わっていた仕事が唐突になくなってしまいメンバーがそのまま別のプロジェクトに放り込まれることになった。
1ヶ月経ってようやくプロジェクトがなんとか進み始めた（ように見える）のでやったことを書いておく。無事に着地できるといいな…。
まず自分たちが入った時点でプロジェクトの仕様を把握できている人が誰もいなかった（恐ろしいことに…）
既存メンバー同士でも理解がズレていることが散見されたので、1週間かけて全員が仕様をきちんと理解+意識合わせするということを行った。
認識があっていなかった中にはインフラ環境も含まれていて、それもあって開発者が実行できる環境がなかったのでまずはこれを作ってもらうことにした。
これを決めるとき、ヘルプで投入されたCTOからかなり的確なアドバイスをもらえてCTOすごいって思った（小並感）。やっぱ経験が物を言う部分ってあるよね。
自分たちがやるべき部分を明確にするためにアプリ、インフラ、サーバチームに分けた。早さを優先するためでもある。
これまでは全員がそれぞれの部分に対してレビューとかしていたけど、その負担で本来やらなければならない部分が遅くなるということが起こってしまっていたので。
最初の目標は「実行環境作って1機能がちゃんと作れることを確認するということ」とした。
いざスタートしてみるも、いきなりうまくいくはずもなく。
チーム分けたにもかかわらず別チームのプルリクレビューにバンバン入ってきてたりしたので、それは明示的に「こっちにはかかわらず本来のチームの仕事に集中してほしい」と伝え、それぞれがやることとやらないことを明確にした。
本人は良かれと思ってやってくれていることだけど、結局そこが遅れると全体として遅れる結果になってしまうので…。
チームを分けたことでチーム間での意思疎通ができていない（お互いに向こうから聞いてくるだろうと思っている）ことも発覚する。
リーダー間の話し合いでコミュニケーションを取る必要があるだろうということになって週3で全員での進捗確認の場を設けることにした。
表向きは進捗確認だけど、真の目的は顔つき合わせて進捗を話させることでコミュニケーションを強制的に発生させることである。スクラムでいう朝会みたいな。
これまでの様子を見ていると、決めごとは誰かが決めてくれていたっていう人が多く*1こうやって強制的にでも話す機会を作らないといつまで経っても話が進まないという感じだったので。
このタイミングで別チームに確認したいことを出させたり、各自が思い込みで進めて認識がズレていた部分を合わせられるようになった。
上記の進捗確認とは別に、自分のチームは毎日朝会をすることにした。
ただしみんなちょくちょく寝坊するので14時から。「朝」とは。
先述の意識付けの一環として、まず昨日やったことに対してどうしてそれをやったのかを確認することにした。
最初の1週間、見ていると作業をするためにタスクを切るという本末転倒なことをしていたので、作業はタスクを完了するためにするものということを意識してもらうようにした。
これは前のスクラムマスターに教えてもらったことだけど、改善すべきことはそれぞれの人が無意識にやっていることにあるのでそこを明らかにしなければならない。
問題を改善するにはまず問題を認識するところから。そして無意識にやっているということは再現性も高い。だからその無意識にやっている理由を明確にすることが必要になる。
メンバーがこれを意識できるようになったかはわからないけど、勝手に作業をせずやる前に確認したり聞きに来てくれるようになった。
次に不要不急のリファクタリングを禁止にした。
単純に時間がないのと、リファクタ案が出ても上記の通りいつまで経っても決められず*2放置されるプルリクが散見されたので。
プルリクもこの時間で一通り見ることにした。
これはどっちかというとまだ技術部分をキャッチアップできてない自分のためにという側面もある。
全員の前で説明してもらって、動かしてみて、問題なさそうと全員が納得したならマージしていくというスタイル。
正解がわからないところで悩んで時間を使うよりは試してみてうまくいかなかったときに対応したほうが良さそうという判断。
自分の課題として上記の通りまだ技術部分のキャッチアップができてないこと。
既存メンバーは進捗は出てなかったとはいえ技術検証や学習はきっちりやってたみたいで、決めたタスクに対する作業はとても早い。
自分がチームリーダー的ポジションとして開発以外の雑用（割と差込み仕事多い）を引き受けてる間に朝会で自分がやるって言ってた分まで片付けてくれてる。
自分の知識がつかないことやこの先のことに対して結構恐怖があるけど、ひとまず今は炎上プロジェクトに対して自分ができることで貢献できればいいか…と思って自分を納得させている状態。
無事に着地できるといいな…（2回目）
サイゼリヤ1000円ガチャがバズっていたので自分でも練習として作ってみた。
github.com
フレームワークはSinatraにしてみた。
初めて使ったけど爆速でWebアプリが動いてすごい。
ときどき、Railsはオーバースペックみたいに言われるのがちょっとわかった気がした。
sqliteをActiveRecordで使う方法とかいろいろ調べながらやったけどそれでもここまで2時間かかってないと思う。
最小限のファイルしかいらないので見通しもいいし、ちょっとしたものなら本当にこれで良さそう。
あとはデザインか…（絶望）
デザインは1時間くらい悩んだ後とりあえず本家と全く同じにしました（何
デザインできる人ほんとすごい。
書いたコードと本家コードを見比べてみてかなり簡潔にコードを書けた気がする。
もちろん本家コードはプログラミング初学者（当時）が書いたものだし、フレームワークも言語も違うんだからそこでマウント取ろうとかそういう気持ちはまったくないんだけど、自分もガチ初心者だった頃より少しはマシになれたのかもなぁと思った。
参考にしたサイト
Sinatra＋ActiveRecord＋SQLite3で，軽量なWeb-DB連携例tamosblog.wordpress.com
はじめてのRuby Sinatra入門: 軽量RubyフレームワークSinatraとPaizaCloudを使って10分でWebサービスを作る
GWが明けたらiTerm2のショートカットを完全に忘れていたので備忘録を兼ねて書く。
Cmd + d
Cmd + shift + d
Cmd + ],Cmd + [
Cmd + opt(alt) + i
iTermを使い始めた理由は最後の複数タブ同時入力のため。
普段はVSCode内のターミナルで作業しているのでリリースなどでサーバーにsshするときしか使っていない。
ctrl + w
ctrl + l
Cmd + kでも同じようなことができるがiTermで同時入力してるときはCurrent Paneしか消えないctrl + u, ctrl + k
カーソルより前/後を全削除あとは、普段fishを使っているので以前に入力したコマンドは→で補完入力されたりする。
fishもとりあえず入れただけで使いこなせてないのでもう少し調べて使いこなしたい。
GWの成果物です。
Googleフォトのアルバムの並び順は古い順、新しい順、最近、カスタムの4つしかなく、ファイル名でソートすることが出来ません。
カスタムにしても撮影日時などのEXIF情報の時刻が全く同じせいか入れ替わることがあったりして不便（そもそも手動で順番を入れ替えないといけない時点で面倒）
なので、Googleフォトの機能でアルバム内の順番を固定するために画像のEXIF情報を1秒ずらしで設定するコードを書きました。
ただ、使用したmini_exiftoolは実際はexiftoolを使ってるらしく（インストールしないと動かない）Rubyで書いた意味はあんまりなかった気がしなくもない。
次にやることはと言えばこうしてEXIFを書き換えた画像をそのままGoogleフォトにアップできるようにすることだけど、現時点ではGoogle Photos APIsのRubyのラッパーはないらしくますますRubyで書く意味が（ｒｙ
一連の流れも含めて全部シェルで書き直したほうがいいかもしれないなと思ったところでGWは終了。
とりあえずやりたかったことは出来たので良しとする。
そもそもGoogleフォトがファイル名でソートできるようにしてくれればいいんだけど。。。
