りゅうくんの備忘録

徒然なるままに思ったことを書くところ

puma-devでxip.io使うときのメモ

xip.io使う祭迷わないように備忘

手順

  1. ifconfig |grep inet　とか叩いて雑に自分のipv4アドレス調べる
  2. .envに色々書く
  3. サーバー再起動
  4. 同一LAN内からスマホでアクセス

ちょっと詳細

puma-dev使ってるやつの.envに

APP_URL=https://example.172.0.0.1.xip.io
APP_DOMAIN=example.172.0.0.1.xip.io

SESSION_DOMAIN=.example.172.0.0.1.xip.io
#アドレスは調べた自身のアドレスいれる

.env書き換えたらサーバーを再起動
ちなみにテザリングでもいけたので結構便利


参考
https://qiita.com/pi_chan/items/6860b2520ed1089e7741
https://github.com/puma/puma-dev#xipio

沖縄のペンション借りてハッカソンしたよ

ハッカソンしてきました



こんな感じのところで2日間アプリケーションを開発してました。がしゃがしゃーーーっと。


すごい綺麗めなところで歩いて10秒で海みたいな感じでした。散歩捗るめっちゃ

いつもと違う場所で開発するのは程よく刺激になって、開発のモチベーションは上場な感じでした。あと沖縄はまだ夏です。

どんなことしたか

アイディアは@puremoru0315さんのカフェなどが小物などを売る際、仕入れ先とのマッチングを支援するアプリケーションみたいな感じでした。多分そんな感じです

開発手法はissue最初にめっちゃ立ち上げて、それをペアプロベースでガンガン解消していく感じ。初めてのペアプロでした◎

技術選定は、サーバーサイドがRuby on Railsが決まってるくらいで、競合とかちゃんと回避して扱えるならgem好きなの入れていいし、フロント何使ってもいいみたいなラフな感じででした！(今思うとElmとかTypeScriptチャンスだった)

僕が何したか

僕がいる間に僕のチームでやったのは、

  • アプリケーションのログイン機能
  • 大まかなチャット機能
だいたいこんな感じでした。


チームメンバーさんの熱いプッシュにより、ログイン機能はgemのdeviseで実装することに。
さすがRailsとdeviseって感じで、色々よしなにやってくれすぎて怖い…って気持ちでした。ログインのロジックとか生でcontrollerに実装したい気持ちもあった！！けどそれはそれ。devise自体はちゃんと扱えれば便利そうだなぁって感想です。


めっちゃ個人的に頑張ったのがチャットの機能。

そもそもポーリングで実装するかWebSocketで実装するかみたいなとこから悩んでて

ポーリング => CORSが回避できない、回避したらCSRFで積みそう
WebSocket => 知見がない

みたいな感じだったのでとりあえず2通りがしゃがしゃ作ってみて、最終的にはWebSocketで非同期な感じで実装しました。

徹夜で実装しててWebSocket完全に理解したときの僕の様子です

ググったらCoffeeScriptの実装しか出てこなくて、読むのに時間かかったり、そもそもWebSocketとは🤔みたいなとこからだったので、時間はかかったんですがチャット機能うまいこと実装できてよかった…

他にも知見になったことがあって、git rebaseまわりの事知れたのがよかったですね。軽率にmargeしちゃダメだったんだ…えぇ…って気持ちになってました。

その他色々

飯がうまかったです。

ボードゲームがめっちゃたのしかったです

またこういう場所でわいわいがやがやコードを書いていきたいなーって思います。

今まで何も考えず.then使ってたけどよくなかったらしい

javascript

知見

  • fetchでthenな感じのやつはasync awaitな感じで書くといいらしい
const getFirstUserData = () => {
  return fetch('/users.json') // ユーザ一覧のJSONを取得
    .then(response => response.json()) // パース
    .then(users => users[0]) // 最初のユーザを取り出す
    .then(user => fetch(`/users/${user.name}`)) // 指定ユーザのJSONを取得
    .then(userResponse => response.json()) // パース
}

getFirstUserData();

async function getFirstUserData() {
  const response = await fetch('/users.json') // ユーザ一覧のJSONを取得
  const users = await response.json() // パース
  const user = users[0] // 最初のユーザを取り出す
  const userResponse = await fetch(`/users/${user.name}`); // 指定ユーザのJSONを取得
  const userData = await user.json(); // パース
  return userData
}

getFirstUserData();

みたいな書き換えができる

書き換えのメリット

  • 可読性の向上
  • jsonの例えばusers[0]をみて処理を変える時とか、thenだと面倒くさいコードになりがち

別件

  • ===で厳密比較を使っていくとよさそう
1 == '1' // => true
1 === '1' //=> false

ISUCONに出てみた話

isucon

ISUCONの予選に出ました

http://isucon.net/archives/52388756.html

初めて出たいなーと思ったのが今年の1月くらいで、okinawa.rbのmeetupで去年ISUCONに出た学生さんのお話を聞いたのがきっかけです。

当日までにしたこと

  • Rubyを1から => チームでRubyを使うってなったので
  • shinatraの基礎
  • ざっくりnginx
  • 本読んだ => Webを支える技術,プロになるためのWeb技術入門,この辺

ぶっちゃけ全然足りませんでした。SQL力が全然々々足りなかった。未熟...

当日したこと

  • N+1解消しようとした
  • SELECT * FROM みたいなSQLの分の*を取りえず置き換えようとした
  • ローカルでも動く環境を整えようとした(出来なかった)

これくらいしか意識してできなかった...マジで悔しい....
H2Oぶっちゃけ知らなかったし、サーバーの3台あって、どういう配置にしたら効率的かみたいな話をできなかったのでTHE無力でした。しんどい。
鈴木さんにうちかてなかったあああああああああ

来年に向けて

  • 言語を絞る。これならいけるってやつを作る
  • 基礎的なところしっかりさせる

来年も絶対ISUCON出るしリベンジしてやる！！！！

TeamLabのインターンに参加してきました　

T社のインターンに参加してきました

borderless.teamlab.art
planets.teamlab.art
こんなことしてる会社さんにインターンにいって来ました。
初一人東京！！！初一人飛行機！！！生まれて初めてのインターン！！！！って感じでした。

ぶっちゃけ行く前はちょービビってたよね。
こう、学歴の差とかそういうアレとか、初めてのことが多すぎて。

インターンで何したの

僕が配属されたチームでは、ECサイトをゼロから作った。他のこともやった。
僕がバックエンド側(DBのお世話とかAPIの作成)をやって、もう一人の方にフロント周りをやってもらった

色々あって、APIはRuby on Railsで、DBはMySQLを使うことに決定、因みにフロントはVue.jsでした。

頑張って作ったんだよ

ぼくがRuby on Railsを触り始めたのが先月くらいだったので、知識が浅いのもあり作業スピードはあんまし早くなかったです。


個人的にRails書いてて詰まった点

  • 既存テーブルに新しいcolumnを追加する時
  • 変数等の命名
  • 決済の実装

変数名は特に今後気をつけようと思っていて、下手な名前つけちゃうと自分でも何してるコードなのかわかんなくなっちゃうから。
決済機能は最終的に外部のAPIを使ったんですが、結構pay.jp使いやすかったです。

それ以外で困った点

  • Dockerの知識不足
  • API,DBの設計ミス
  • AWS周りの知識
  • Amazon Linux (CentOS)
  • 僕の机のディスプレイがDVIケーブルしかなくて使えなかった
  • メンターさんと物理的に距離が遠い
  • 誰かと一緒にものを作る時のコミュニケーション
  • 昼飯代が高すぎる

困った点の前半4つは結構解消できて、割と知見になったのでよかった。
東京マジで昼ごはん外食してるとお金が爆速でなくなるので怖いなぁって思いました。

得られた知見とか

  • Ruby on Railsの知識 => RESTFulAPI を1から作れるようになった
  • AWSのEC2のある程度の使い方
  • Dockerfile , docker-compose.yml , そこそこかけるようになった

=> Ruby on Rails && MySQLをDockerで立てて最初から連携させとくくらいは行ける！
Railsも総プレイ時間が180時間くらいは行ったので、そこそこ知見溜まって来たのかなぁなんて思います(まだまだ未熟ですが)

最後にはAPIをEC2でデプロイもできたし、フロント側とも連携が取れて、個人的には成功だったので満足度高いです!!!

その他雑に

多人数で1つのものを作る時、どんなにコミュニケーションに気をつけていても、伝達ミスや、解釈違いが起こるものなんだなぁって思いました。
設計の時とか、お互いに相違が生まれないようにがんばる(もし次があったら)

個人的には他のインターン生と喋るのも結構楽しくって、唐揚げをロボットアームで掴む研究してる人とか、Elm布教マンとか,プロ並みカメラマンとか、他にもすごい人ばっかでした。
インターン生の懇親会とか披露できる芸(記号コーディングとか)もっててよかったなぁって思いました。話すきっかけを作るのに黒魔術コーディングは効果的だからみんなやろうぜ。

欲を言えばなんですが、インターン先でコードレビューまであったら嬉しかったなぁって思います。(絶対いっぱい突っ込まれるけど)

今回作ったECサイト、目標の日までに完成させるのを優先して、セキュリティ的にがばがばな部分が多々あるので、これから開発をして行くときはある程度セキュリティにも配慮しながら作っていきたいなーって思います。

まとめ

  • パッケージチームのインターン個人的にはとてもよかった。計画力、現状把握とか得意な人は好きなこと学びながらお金もらえるのでおすすめ。
  • 社風を知るのにはとても効果的。他のインターンにも参加してみたいと思った。
  • 沖縄にいたら得られないような知見が溜まった。外に行ってインプットするのとてもいい。

ブログに乗せてもいいよとのことだったのでコードです　https://github.com/s17001/teamLabProject
強いエンジニアになりてぇ

ちょっとvueを使ってみた&&LTしてきた

宮崎 × 沖縄 × 山形 JSやらNight！第2回で登壇してきました

第1回のときは聞く側に回ったのですが、今回はご縁あってLTさせてもらう機会があって、良いタイミングだったのでtwitterでよく見るVue.jsを触ってみました

www.slideshare.net

ポケモン図鑑を作りました

お得意のポケモン図鑑を作りましたw(Reactでも作った)
github.com

vue触ってみての感想

  • 公式ドキュメント豊富だと思った
  • jsonっぽくて結構かける
  • dataが肥大化しちゃう => 辞書型とかリストにするので解決できなくもない
最後に

スライドにもあるのですが、Vueでポケモン図鑑作ってみたいかたいたら声かけてください！！教えられる範囲で教えます！

RESTfulAPIって？

restfulAPIって？

  • アドレス可能性(Addressability)

提供する情報がURIを通して表現できること。全ての情報はURIで表現される一意なアドレスを持っていること。

  • ステートレス性(Stateless)

HTTPをベースにしたステートレスなクライアント/サーバプロトコルであること。セッション等の状態管理はせず、やり取りされる情報はそれ自体で完結して解釈できること。

  • 接続性(Connectability)

情報の内部に、別の情報や(その情報の別の)状態へのリンクを含めることができること。

  • 統一インターフェース(Uniform Interface)

情報の操作(取得、作成、更新、削除)は全てHTTPメソッド(GET、POST、PUT、DELETE)を利用すること。

らしい(引用元: 　RESTful APIとは何なのか　)

上3つはなんとなくわかるけど、統一インターフェースとは？

情報の操作(取得、作成、更新、削除)を行うらしい => HTTPメソッド(GET、POST、PUT、DELETE)が対応

個人的なまとめ

post => create
get => select
put => update
delete => dalete

CRUDっていうらしい