ちょっとvueを使ってみた&<してきた
宮崎 × 沖縄 × 山形 JSやらNight！第2回で登壇してきました
第1回のときは聞く側に回ったのですが、今回はご縁あってLTさせてもらう機会があって、良いタイミングだったのでtwitterでよく見るVue.jsを触ってみました
0831lt from iha ryuuicih
www.slideshare.netポケモン図鑑を作りました
お得意のポケモン図鑑を作りましたw(Reactでも作った)
github.com
RESTfulAPIって？
restfulAPIって？
- アドレス可能性(Addressability)
提供する情報がURIを通して表現できること。全ての情報はURIで表現される一意なアドレスを持っていること。
- ステートレス性(Stateless)
HTTPをベースにしたステートレスなクライアント/サーバプロトコルであること。セッション等の状態管理はせず、やり取りされる情報はそれ自体で完結して解釈できること。
- 接続性(Connectability)
情報の内部に、別の情報や(その情報の別の)状態へのリンクを含めることができること。
- 統一インターフェース(Uniform Interface)
情報の操作(取得、作成、更新、削除)は全てHTTPメソッド(GET、POST、PUT、DELETE)を利用すること。
らしい(引用元: RESTful APIとは何なのか )
上3つはなんとなくわかるけど、統一インターフェースとは？
情報の操作(取得、作成、更新、削除)を行うらしい => HTTPメソッド(GET、POST、PUT、DELETE)が対応
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
これに参加してきました！
開場とか去年よりいい感じになってて、おぉぉ...って感じでした
トークも面白いし、お弁当でるし、懇親会学生無料だし、いいところしかなかった。スタッフのかたはほんとお疲れさまでした！
面白かったなーってやつ雑にまとめ
- アプリケーションベンチマーカー =>
- golang自体が良さそう + isucon周りに役に立ちそう
- 学生フリーランス =>
- わんちゃんがくせいでも300万稼げる可能性 かびさんすげぇってなった
- 弱気なエンジニアの生存戦略 =>
- すんごい方でも悩んでた時期があったんだっていうあれで少し自信ついた
- hyperapp Libraryを作った話 =>
- reactマンの僕の興味にどんぴしゃ Hyperapp使ってみたい感ある
- Cloud native & cloud design patterns for small teams =>
僕がまとめてないけど、他の方のもめっちゃ面白かった！みんなでvtuberになれそうな話とか。
ハカチャンを終えて
ざっとこれから何したいかの目標的な
- golang入門してisuconで使ってみたい感情が沸いてる
- 僕も前でしゃべりたい！！のでネタにしやすいアプリケーションとかを作って運用とかしたい
- その際はnodeとかgoを使ってみたい&&esaの方のデザインを参考に...
- さぼさんの言うこれからのweb開発的なのも、かじっていきたい
- 来年は僕もLTに出る!!!!!
わたくしごと
懇親会とかでうまくいろんな方としゃべれなかったなぁっていうのがほんと残念だったので、もっと人と喋れるようになりたいなぁって思った
楽しくお話したい感情はすごいあるんだけど、会話が繋ぎきれない大問題を改善して次のカンファレンス系イベントに参加しよう
ハッカーズチャンプルーお疲れさまでした！！また来年も行きたいです！！
codebase1期生の近況報告LTにて
codebase1期生のLT近況報告会(?)みたいなのに参加してきました。
これ↓に参加してきました！！めっちゃ楽しかったです◎
本日はプログラミング教育第1期の同窓会（LT大会）を開催しました！「教室卒業後にやっていること」をテーマに各自LTを行いました！久しぶりの再会に胸を躍らせつつ、、、和やかな雰囲気で進めることができました。定期的に開催したいと思いますので今回参加できなかった卒業生も是非ご参加ください！ pic.twitter.com/UiGut5MVPR
— CODE BASE＠プログラミングスクール3期生募集中 (@CODEBASE098) 2018年6月15日
>>>宣伝<<<
これに似た内容を沖縄・宜野湾エンジニア勉強会(大LT大会)でもしゃべろっかなーって考えてます！よかったら参加してね
connpass.com
何を喋ったのか
javascriptで、勝手に型変換される性質を利用して、黒魔術コードがかけるよーっていうお話をしました。
(!""+"")[!""-[]]+(1/0+[])[7]+(""[""]+"")[false-0] //=> ryu
みたいなコードをプロジェクタ使ってそれでターミナルのnodeでリアルタイムで書いてました！！
js型変換 from iha ryuuicih
0 == false // => true 1 == true // => true !"" // => true -~[] // 1
みたいなあれこれを利用して楽しいコードを書いてたお話をさせてもらいました！！
LTなのに10分ちかく喋らせてもらってほんとありがとうございました。次までにはがんばって縮めなきゃ....
reduceとかそのへん
jsでのreduceとかmapのお話
とりあえずこの記事読みながら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を書き始めているはずだ！！！
え？かいてない？
それなら早く(自分で)書くんだよ！！１
これ答え合わせです
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内の関数で引数１回しか使わない場合省略してかけるらしいので arr.filter(x => x>0).map(fizzbuzz)//でいいらしい
以上！できあがり！！第三部完！！！！
最後に
ここまで読んでくれてありがとうございます。
ブログを書くことにまだまだ慣れていないので、誤字だったり、僕が解釈違いしてて、それをそのままブログに書いちゃってる箇所などあるかもしれませんが、見つけたときはそっと僕に伝えてくれると嬉しいです(こっそり修正します)
@engs17のみんな
ちょっと難しいかもだけどまだまだ大丈夫(たぶん)
体壊さない程度にがんばりましょ....
最近の授業とかとか
書くにあたって経緯的な
最近の授業、関数型でSKIとかラムダ式とか、知らないこと+知らないこと で進んでて理解するの大変そうなーなんて思ったので、お助けになればなーって記事です。
この記事に書いてること、書いてないこと
書いてること
- 関数型の軽い説明
- true,falseの関数について
- 関数型での数字の定義について
書いてないこと
書いてないやつも僕が理解したり、みんながわからない！ってなってたらまとめるかもしれない。再帰はまた今度やるかも
自分も細部まで理解してるわけじゃないから、間違ってたら訂正お願いします🙇
関数型の軽い説明
プログラムを関数で構築する。僕も詳しくないので一緒におべんきょしよう... この辺の記事とか分かりやすそうだなって思いましたまる
javascriptは純粋な関数型の言語じゃあないけど、一応関数型の性質を持ってるよーってことで授業では使ってるぽい。
javaでSystem.out.printlnを変数に代入して使えないけどJSのconsole.logとかPython3のprintは変数に入れても使える的な感じだろうか
js
Python3
Javaでも出来るかもしれないけど、僕やり方知らないです...
true,falseの関数
これはif文と比べて考えるとちょっと分かりやすいです。
if(条件式){trueの場合の処理}else{falseの場合の処理}って書き方をします。
trueなら前をfalseなら後ろを返してます(語弊がありそう)
次に関数っぽくかくと
const T = x => y => x
const F = x => y => y
ってなります
trueなら1つめの引数を、falseなら2つめの引数を返してます。この動きをif文の挙動になぞらえて考えてみるとわかるかもしれない...
関数型での数字の定義について
omasせんせ曰く、関数型では数字も関数。数字も引数をとるそうです
数字を関数型で表すとこうなるそうです
const zero = s => z => z;
const one = s => z => s(z);
const two = s => z => s(s(z));
まずoneっていう関数のお話をします。
関数oneは引数を2つ取って、第一引数には(x => x+1),第二引数には(0)が入ります。 returnする形がs(z)なので、これに当てはめて考えてみると
(x => x+1)(0)ってなります！！
この式(x=>x+1)を見てみるとxって引数を取ってx+1を返すって見れるので、さらに当てはめて考えてみる
(x=>x+1)でxが0なので帰ってくる値は0+1で1が帰ってきます！
なので関数oneをone(x=>x+1)(0)って使うと、 1 って帰ってくる！！
同様に関数twoも考える
関数twoは関数oneと同じく引数を２つ取る。引数に入るものは一緒で,sには(x=>x+1),zには(0)が入る！
関数twoはs(s(z))を返し、sには(x=>x+1),zには(0)が入るので、(x=>x+1)(x=>x+1)(0)になるね。
これを書き下していこー。
(x => x+1)が(x => x+1)を引数に取るので,( (x => x+1)+1 )が返ってくる値になる
次に,(x=>x+1+1)が引数に(0)を取るので,(0+1+1)で最終的に返ってくる値は 2 ってなるんすよ
ついでにzeroは第二引数の(0)をそのまま返せばいいのでzero(x=>x+1)(0) から 0 って感じです
oneとtwoを比べてs()が増えたら+1されるってのがわかったからthreeの関数とかもう作れるね
最後にaddっていう足し算する関数を書いてみようーー
add(one)(two)(x => x+1)(0) って実行したら 3 って出力をもらう感じの関数を作ります。
addは引数を4つもってるので const add = n => m => s => z => { //処理の実装 } って感じの形になるます
肝心の処理の実装なんだけど、oneとtwoを比べてs()の数を増やせば、返ってくる値も大きくなることがわかった。ということは、10って関数を作りたいときは、zをsで10回囲めばよくて、100って数を関数で書きたいときは、s()でzを100回囲んでやればいいわけ。
つまり、nって数字を実装したいときはzをs()でn回囲めばいい！！！
この性質を利用して足し算する処理を作っていきます。
1+2は3です。1に1を2回足すから3になるんですよ。
つまり、n+mはnに1をm回足せば答えが出るわけですね！！(ここ大事)
add って関数は引数に(数字 == n)(足す数字 == m)(x => x+1)(0)を取るので、数字に1を足す数字分足せばいいわけです！
m(s(n(s)(z))) こうなりますね！！詳しく解説していきます。
n(s)(z)は上で説明した通りnという数字のを表しています。m(s ))でmという数字回分sするというって表現です。
sはx => x+1、sをざっくり説明すると1を足すこと,で,n(s)(z)でn回分0に1を足す,m(s( ))でm回分1を足す,と読めるようになります。
n回0に1を足した数字に,m回分1を足した数字を返す
つまり n + mを返すので足し算がこれで実装できます！！
あとがき
思い出しながら書いたので、ちょいちょいミスってるところがあるかもしれないので、見つけたら報告くれると嬉しいです!!
学校の方は、けっこー授業の内容が難しくなってきましたが、共に頑張りましょーー
