りゅうくんの備忘録

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

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

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

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

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

インターンで何したの

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

色々あって、APIRuby 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っていうらしい

golangと触れ合ってきた

golang勉強会に参加してきました

ハッカーズチャンプルー(http://hackers-champloo.org/2018/)にて盛り上がっていたgolang、いったいどんなものなのかと興味を持ったので 第8回Golang勉強会 in Okinawa Tour of Go!(https://okinawa-go.doorkeeper.jp/events/76882)に参加してきました!

今日やったこと

Tour of Goってのを進めていく感じでした。

https://go-tour-jp.appspot.com/welcome/1

これが良くできたサイトで、webからgoを実行できるっていうチュートリアル的なサイト。

チュートリアルの説明もなかなかに丁寧&&かびさん(@d_ishitaka)の説明もわかりやすく、個人的には満足度高かったです!!

得られた知見的な

  • golangの基本的な文法
  • ポインタ周りをざっくりと
  • メモリ周りをふんわりと

僕個人としては、C言語を触ったことがない人間だったので、メモリ扱うあれこれや、ポインタってどんなものなのかーをふんわり理解できたので、それだけで勉強会参加した価値ありました◎

最後に

fizzbuzz書けたらいい感じって言ってたので素直な書き方で書いてみました

package main

import "fmt"

func main() {
	for i:=1 ; i<31 ; i++ {
		if i % 15 == 0{
			fmt.Println("FizzBuzz")
		} else if i % 3 == 0 {
			fmt.Println("Fizz")
		} else if i % 5 == 0 {
			fmt.Println("Buzz")
		} else {
			fmt.Println(i)
		}

	}
}

golangっぽい書き方のfizzbuzz見てみたいなーーーーーーーー(大声


それでは、今日はお疲れさまでした!ほんとたのしかったです!!

はかちゃんに参加してきた!

ハッカーズチャンプルーに参加してきました


http://hackers-champloo.org/2018
これに参加してきました!

開場とか去年よりいい感じになってて、おぉぉ...って感じでした
トークも面白いし、お弁当でるし、懇親会学生無料だし、いいところしかなかった。スタッフのかたはほんとお疲れさまでした!

面白かったなーってやつ雑にまとめ

  • esaデザインのはなし =>
    • 使う色の絞り込み方、色の固定観念周りのやつ
  • アプリケーションベンチマーカー =>
    • golang自体が良さそう + isucon周りに役に立ちそう
  • 学生フリーランス =>
    • わんちゃんがくせいでも300万稼げる可能性 かびさんすげぇってなった
  • 弱気なエンジニアの生存戦略 =>
    • すんごい方でも悩んでた時期があったんだっていうあれで少し自信ついた
  • hyperapp Libraryを作った話 =>
    • reactマンの僕の興味にどんぴしゃ Hyperapp使ってみたい感ある
  • Cloud native & cloud design patterns for small teams =>
    • 最新のトレンドキャッチ出来てよかった gRPC&golangへの興味 cloud designのあれこれ golang勉強会行く


僕がまとめてないけど、他の方のもめっちゃ面白かった!みんなでvtuberになれそうな話とか。

ハカチャンを終えて

ざっとこれから何したいかの目標的な

  • golang入門してisuconで使ってみたい感情が沸いてる
  • 僕も前でしゃべりたい!!のでネタにしやすいアプリケーションとかを作って運用とかしたい
    • その際はnodeとかgoを使ってみたい&&esaの方のデザインを参考に...
    • さぼさんの言うこれからのweb開発的なのも、かじっていきたい
  • 来年は僕もLTに出る!!!!!
わたくしごと

懇親会とかでうまくいろんな方としゃべれなかったなぁっていうのがほんと残念だったので、もっと人と喋れるようになりたいなぁって思った
楽しくお話したい感情はすごいあるんだけど、会話が繋ぎきれない大問題を改善して次のカンファレンス系イベントに参加しよう



ハッカーズチャンプルーお疲れさまでした!!また来年も行きたいです!!

codebase1期生の近況報告LTにて

codebase1期生のLT近況報告会(?)みたいなのに参加してきました。

これ↓に参加してきました!!めっちゃ楽しかったです◎

>>>宣伝<<<
これに似た内容を沖縄・宜野湾エンジニア勉強会(大LT大会)でもしゃべろっかなーって考えてます!よかったら参加してね
connpass.com

何を喋ったのか

javascriptで、勝手に型変換される性質を利用して、黒魔術コードがかけるよーっていうお話をしました。

(!""+"")[!""-[]]+(1/0+[])[7]+(""[""]+"")[false-0] //=> ryu

みたいなコードをプロジェクタ使ってそれでターミナルのnodeでリアルタイムで書いてました!!

0 == false // => true
1 == true // => true
!"" // => true 
-~[] // 1

みたいなあれこれを利用して楽しいコードを書いてたお話をさせてもらいました!!
LTなのに10分ちかく喋らせてもらってほんとありがとうございました。次までにはがんばって縮めなきゃ....

reduceとかそのへん

jsでのreduceとかmapのお話

とりあえずこの記事読みながらFizzBuzzが書けるくらいのとこまで使いこなそうの会

アジェンダ的な
  • 小話
  • まずreduceってなんだよ?
  • つぎにmapってなんだよ?
  • さいごにfilterってなんだよ?
  • そしてFizzBuzzする

こんなかんじ

小話

はてな記法おぼえた(ほめて)
ブログのタグ付おぼえた(とってもほめて)
TANO*C OKINAWAがめちゃくちゃ楽しかった(うでがいたい...)

jsでのreduceだったり、mapだったりは配列にしか使えないから気を付けてねっていうお話(有能要約)
python3とかなら普通に使えるらしい?paizaのスキルチェックとかでためしてみて僕に教えて

まずreduceってなんだよ?

とりあえず構文を見てみましょう 
Array.prototype.reduce() - JavaScript | MDN から

arr.reduce(callback[, initialValue])

reduceの()の中にはコールバック関数が入るわけなんすね
コールバック関数は関数の引数として渡される関数のことです。授業でいっぱいやったねたえちゃん
たとえば

const arr = [1,2,3,4,5]
arr.reduce( (x,y) => {return x+y},0)

ってコードがあった時には

(x,y) => {return x+y}

この部分がコールバック関数になってるの!(引数に関数がきてるでしょ)

配列の各要素に対して(左から右へ)そのコールバック関数を適用して、
最終的に1つの値を返すのが reduceです

(違ってたらおしえてほしい)

次に説明したいのが

arr.reduce( (x,y) => {return x+y},0)

の  

,0

ってぶぶん

arr.reduce(callback[, initialValue])

でいうinitialValueの部分ですね。英語わかる人なら英語の通りです。それだけ
えいごむずかし><ってひともいるとおもうので説明をば。
initialValueは初期値を表してます。

const arr = [1,2,3,4,5]
arr.reduce( (x,y) => {return x+y},0)

これになぞらえて考えると、callback関数は一番最初に0を呼びだすってわけですね。

このコードがどう動くか考えてみましょう

まず arr っていう 1から5までの数字が入ってる配列があります
そいで次に、その配列に .reduce( (x,y) => {return x+y},0) ってされてますね

配列の各要素に対して(左から右へ)そのコールバック関数を適用して、最終的に1つの値を返すのが reduceです

って上で言ったのでそれに当てはめて考えていきましょう

①(x,y) => return x+ y は最初引数に 0 をとりますね (なんで?って思った人は上もっかい読んで
なので x の最初の引数は 0 です、yからは配列の要素を引数で持ってくるので y は 1 を引数にとりますね

それで面白いのはここからで、 x は次に 0+1 を引数に取ります yは2を引数にします

③これと同じように、 xは 3を引数に((0+1)+2の結果) y は4を持ってくるーって感じで処理が続きます

xは初回initialValueを引数に取った後はそれまでの計算結果を引数とします!

//①
0 + 1
//②
(0 + 1) + 2
//③
((0 + 1)+ 2) + 3

中ではこんな感じで計算されてってるわけですね!

なので

const arr = [1,2,3,4,5]
const hoge = arr.reduce( (x,y) => {return x+y},0)
console.log(hoge) // => 15

となるのです(よかったらローカルでも書いてみてね)

つぎにmapってなんだよ?

とりあえず構文をm
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/map

arr.map(function callback(currentValue[, index[, array]]) {
    // Return element for new_array
}[, thisArg])

//上は詳しく正しいけどわかりにくいので
const array1 = [1, 4, 9, 16]
console.log( array1.map(x => x * 2) ) // => [2, 8, 18, 32]

mapは配列の要素をそれぞれcallback関数にかけます(個人的にはreduceよりわかりやすい)
上の説明に尽きるので、わかんないマンは僕に個人的に聞いてくれ!めーるでもついったーでもなんでも

Q: さいごにfilterってなんだよ?

A: フィルターです
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

const words = ['デビルマン', 'キャシャーン', 'タイガーマスク']
const result = words.filter(word => word.length > 6)

console.log(result) // => ['タイガーマスク']

filter()の()にはコールバック関数が入る
配列の各要素に対して、この関数が true を返した要素は残され、false を返した要素はフィルターにかかって取り除かれる

つまりデビルマン以外を表示したいなら

const words = ['デビルマン', 'キャシャーン', 'タイガーマスク']
const result = words.filter(word => word.length >= 6)

console.log(result) // => [ 'キャシャーン', 'タイガーマスク' ]

こうすればいいわけですね

そしてFizzBuzzする

ここまで読んだ読書力(?)さいつよのきみならもう手が勝手にfizzbuzzを書き始めているはずだ!!!
え?かいてない?
それなら早く(自分で)書くんだよ!!1

これ答え合わせです
0604の授業の成果です filter mapとか





FizzBuzz書けない助けてママーって人向け

reduce使わないやり方で解説していきます(やさしい)

まずFizzBuzzで使う配列を用意します

const arr = [...Array(31).keys()] //[0,1,2...30]

...ってなに?蟻さん?ってひとは 
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Spread_syntax 
のArray を連結するってところ読んでね。


つぎにfizzbuzzしていくための機構をつくっていきます

const fizzbuzz = x => x%3 == 0 ? x%5 == 0 ? "FizzBuzz" : "Fizz" : x%5 == 0 ? "Buzz" : x

三項演算が大嫌いでゆるせないかたはifぶんでかくといいとおもいます

const fizzbuzz = x =>{
    if(x%15==0){
        return "FizzBuzz"
    }else if (x%3==0) {
        return "Fizz"
    }else if (x%5==0) {
        return "Buzz"
    }else {
        return x
    }
}


そして、FizzBuzzするときに0から始まったらこまるので、0をはぶいていきます

arr.filter(x => x>0) //[1,2...30]

最後にこいつらを合体させていきます!

arr.filter(x => x>0).map(x => fizzbuzz(x))
//どうやらmap内の関数で引数1回しか使わない場合省略してかけるらしいので
arr.filter(x => x>0).map(fizzbuzz)//でいいらしい

以上!できあがり!!第三部完!!!!

最後に

ここまで読んでくれてありがとうございます。
ブログを書くことにまだまだ慣れていないので、誤字だったり、僕が解釈違いしてて、それをそのままブログに書いちゃってる箇所などあるかもしれませんが、見つけたときはそっと僕に伝えてくれると嬉しいです(こっそり修正します)

@engs17のみんな 
ちょっと難しいかもだけどまだまだ大丈夫(たぶん)
体壊さない程度にがんばりましょ....