Nakaya
https://lh3.googleusercontent.com/a/AATXAJzLaj4GGC3PkTrkHbyBLWSgNZrWF8X4c5Jyjbeo=s96-c#.png
知識情報・図書館学類 3年生
この春から3年次編入しました
主にWebサーバ・バックエンドをやっています
連絡先
Slack: Kuuya Niinobe
timesチャンネルもあります: #times-nakaya
Discord: Nakaya
DMなどでお気軽にお声がけください
開発経験
Webサーバ
Go言語
Python(Django、Flask、Bottleなど。大昔のことなので、もう覚えてないかも……
Ruby(Sinatra)
webフロントエンド
Reactに入門中
Vue/Nuxtは若干触った経験あり
Linux サーバ運用
ソロ活動中にやりたいこと
Go言語でのWeb開発
React Hookを使ったWebフロントエンド開発
Androidアプリケーション開発
ソロ活動でやったこと
やったこと
Go言語でのblogサーバ開発
gorm(Go言語のORM)をでのModel定義につまづく
Go側の型とSQL側の型をうまく変換してくれず、大半の時間をここに費やしてしまった
凝ったことするより、愚直に簡単な実装のほうがうまく行ったりする
signin処理の実装
sessionの管理
validation
次やりたいこと
blogサーバ開発の続き
React Hookでのフロントエンド開発
やったこと
Go言語でのblogサーバ開発
ユーザの投稿を機械可読性高いフォーマット(Atom Syndication Format)で出力したい
関数に引数の型でつまづく
code:go
func (h *Handler) UserFeed(w *http.ResponseWriter, r *http.Request){} //これだと動かない
func (h *Handler) UserFeed(w http.ResponseWriter, r *http.Request){}
Columnを検索する方法がわからなかってのでこのへんを参考に code:go
var user User //結果を代入するための変数
result := db.Where(&User{
//ここに検索条件を入れる
}).Find(&user)
if result.Error != nil {
// Errorが起きたときにこのへんで対処する
}
次やりたいこと
blogサーバ開発の続き(特に個々の記事表示)
React Hookでのフロントエンド開発
やったこと
JavaScriptのFileReader、Promise関連
JavaScriptの非同期処理はasync/awaitまたはPromiseを使う
のドラッグアンドドロップでファイルを扱う例が、上のblogサーバでメディアを取り扱う時に便利そう FileReaderがPromiseに対応してないのでwrapする必要がある
Promise Objectはメソッドチェーンで結果をバケツリレーできる.then()で成功した結果を扱い、.catch()でerrorをハンドリングする
やったこと
Go言語でXML(Atom)をどのようにserialize/deserializeするかを調査
ブログサーバで使うため
encoding/xmlを使う
名前空間の定義はどのようにして……?
ざっと読む程度ではわかりにくかった
上記ブログサーバの記事編集画面のテンプレート製作に着手
時間が足らない……。
いせゆう さんの「興味あるページ」の項がおもしろかった 次回目標
Go言語のブログサーバの実装(記事編集、AtomPubの実装)
できれば、JavaScriptのPromiseも実装して学んでみたい
Go言語でXMLのdeserialize方法を調べる
Rootな要素にはxml.Name型のfieldを定義する必要がある
code:go
type AtomEntry struct {
XMLName xml.Name xml:"http://www.w3.org/2005/Atom entry"
Title string xml:"http://www.w3.org/2005/Atom title"
Id string xml:"http://www.w3.org/2005/Atom id"
Updated string xml:"http://www.w3.org/2005/Atom updated"
}
以下のXMLに対応する:
code:xml
</entry>
code:go
type AtomEntry struct {
XMLName xml.Name xml:"http://www.w3.org/2005/Atom entry"
Title string xml:"title"
Id string xml:"id"
Updated time.Time xml:"updated"
}
以下のXMLに対応する:
code: xml
<title><title>
<id><id>
<updated></updated>
</entry>
goのencoding/xmlにはNewDecoder/NewEncoderがあったが、encoding/xmlにはあるのだろうか
Encoderは簡単に使えそうだが、Decoderは使いにくそう
なるほど、手動でParseしないといけなさそう
omitemptyタグあとで理解する
タグってどのようにparseされてるのか気になる。ASTとかにバラして解釈されてるのかしら?
http.RequestのBody(io.ReadCloser)からstructに起こすにはUnMarshalerinterfaceを実装する必要がある
かなり面倒
入れ子のstructはxml.DecodeElementに問題が起きないのか気になる
そんなことなさそう
余談だが xml.Unmarshal() 関数の中身は
func Unmarshal(data []byte, v interface{}) error {
return NewDecoder(bytes.NewReader(data)).Decode(v)
}
となっている。
単にNewDecoder(io.Reader).Decode(&struct)してやればよさそう
よくよく考えたらJSONのparseもこんな感じでやったような……
分報チャンネルをSlackに作った→ #times-nakaya
goのテスト
標準出力のテストができるらしい
// Output:に続けて書く(改行もアリ
code:hogehoge.go
package hogehoge
import (
"fmt"
)
func Hogehoge() { //関数名を大文字から始めないとpublicにならない
fmt.Printf("Hello\n")
}
code:hogehoge_test.go
package hogehoge
import (
"testing"
)
func TestHogehoge(t *testing) {
Hogehoge()
// Output:
// Hello
}
やったこと
Go言語でXMLをparseする話、続き
code:go
type AtomEntry struct {
XMLName xml.Name xml:"http://www.w3.org/2005/Atom entry"
Title string xml:"title"
Id string xml:"id"
Updated time.Time xml:"updated"
}
code:xml
<title><title>
<id><id>
<updated></updated>
<app:control>
<app:draft></app:draft>
</app:control>
</entry>
次回予定
JavsScriptのPromiseを書いて学ぶ
React Hooksの勉強
Goのブログサーバも進めたい
やったこと: ファイルの読み込みをPromiseでやりたい
Promiseの理解
code:javascript
function func1() {
return new Promise(function(resolve, reject) {
resolve(); // 成功したら呼び出す
reject(); // 失敗しらた呼び出す
});
}
func1()
.then(() => {
// 成功したら、ここが実行される resolve()の中身はこれ?
})
.catch(() => {
// errorを書く reject()の中身はこれ?
})
func1()
.then(() => {
// okなときの処理
},() => {
// NGなときの処理
)
React HooksのuseMemo()とuseCallback()
useMemoは関数の結果を保持するためのフックで、何回やっても結果が同じ場合の値などを保存(メモ化)し、そこから値を再取得します。
不要な再計算をスキップすることから、パフォーマンスの向上が期待出来ます。
useCallbackは関数自体をメモ化しますが、useMemoは関数の結果を保持します。
useCallbackはパフォーマンス向上のためのフックで、メモ化したコールバック関数を返します。
微妙に使い分けがわからない……。
code:javascript
const readFileAsync = useMemo()
blogサーバの件: GolangでXMLを取り扱うのがかなり厳しいことに気がついたので、言語を変えることを検討中……。
フィードバック
Keisuke Kuma.icon Java script何もわからない...。ちゃんと計画通りに進んでるなあ
tomoki.icon
非同期処理 頭が
Hugoにはお世話になってます
monokemonoke (川畑竜平).icon
promise難しい..
react hooksの useMemoはじめてきいた
higashi.icon
promise使える人は尊敬します...
同時進行で色々進められててすごい
次回の計画
Promiseを書いて体感
then()とcatch()をメソッドチェーンで繋げられるけど、順番などに制約はないのか?
Promise は一度エラーが発生すると、最初に ng_callback 関数が指定されるまで、then 処理をスキップします。
useMemoとuseCallbackの使い分けについて調べる
アジャイル開発入門を見た
ウオーターフォール開発は知ってたけどスパイラルは知らんかった
自然なソフトウェア(自分のために作られたソフトウェア)を作る人がハッカー、なるほど
対人リスクに関する4つの不安: 無知だと思われないか?、無能だと思われないか?、ネガティブだと思われないか?、邪魔だと〜
ギークの3本柱 HRT: 謙虚(Humility)、尊敬(Respect)、信頼(Trust)
自分の価値 != 自分の書いたコード
自分の問題は環境のせい、他人の問題は他人のせいと思うこと=「根本的な帰属の誤り」→気をつける
2枚のピザ理論: 打ち上げで食べる2枚のピザを食べるのに丁度いい人数(5~8人)にすべきだ (編集済み)
チームで重要なのは心理的安全性
チーム活動に必要な3つの道具
ミッションステートメント: 共通の理解を書き起こす
設計ドキュメント
コミュニケーションツール
ミッションステートメント
チームでやること、やらないことを定める
メンバー認識の違いを明らかに→方向性の提示
原点?
何度も見直す必要
検索すると企業のものが出てくる
設計ドキュメント
チーム内で理解できるようなラフなものでよい
書きながらどのようなものを作るかを考える(どうやって作る?)
内容
背景、目的
設計
メンバー
セキュリティ・プライバシーなどに関しての考察
テスト、モニタ計画
コミュニケーションツール
同期型(会って話す、ホワイトボード付箋紙を使うといい)
非同期型(オンラインツール
フロー(チャットツール
ストック(ファイル置き場
混合(wiki, issue
初期は同期型→非同期型への移行
都合に合わせて使い分け
非同期のほうがメンバーの都合を合わせやすい
議事録
同期コミュニケーションではログが残らない
岡島式議事録
日時
場所
出席者
目的
結論
アクション: 次の会議までにやることを書いておく
議論内容
次回予定
第三者からのアドバイスは的確なことがある(傍目八目) ≒ アジャイルコーチング
オープンクエスチョン(Y/Nで答えられない質問、Wh疑問文のような質問、Why?は攻撃的になりうるので注意)
やりたいこと
JavaScriptで巨大ファイルを扱いたい
File ObjectはBlobのサブクラス
.sliceを使い巨大なファイルをちまちま読む
Textとして読むのは簡単だけどUint8Arrayとして読むならば……?
Promiseと併用するならば……?
ReadableStreamなるほど
fetch API以外で使える方法があるのだろうか?
new ReadableStream()で使えるっぽい
TypeScriptでReadableStreamを使うとNodeJS.ReadableStreamのほうを認識するの……?
やりたいこと
JavaScriptで巨大ファイルを扱いたい(続き
NodeJS.ReadableStreamを使って実装してみた(下コード
うまく動作しない……。
TypeScriptで.thenの成功時の処理は(value: unknown) => void, (() => void), な関数が必要らしくそこでつまってた
code:typescript
new Promise(function(resolve, reject) {
const reader: FileReader = new FileReader();
const stream: NodeJS.ReadableStream = value.stream();
reader.onload = () => {
resolve(reader.result);
}
stream.on("data", (chunk) => {
console.log("stream on");
reader.readAsArrayBuffer(chunk);
});
})
.then(result: ArrayBuffer) {
}
20220617Feedback
ワイワイ
やりたいことが明確にあるの良さそう
最新の動向をキャッチアップできてるのすごいな...
次回の計画
TypeScriptでの.thenの型について勉強する
streamでの例が動作するかの確認
Webページを作ってみたい
やったこと
LaravelのDocsを読みながら、まとめる
the Basics
HTTPのMethod: GETとPOST
GET: HTMLを取得する時に使う
POST: 新規作成、変更、削除する時に使う
REST APIでは:
GET: 要素(blogやSNSだったら記事・投稿)の取得
POST: 要素の新規作成
PUT: 要素の修正
DELETE: 要素の削除
CSRF
対策: CSRF対策用のランダムな文字列を生成し、フォームに埋め込む
よくあるWebサイトへの攻撃
IPAの解説
controller
Database
pagenation
ページあたりに表示する件数を制限しながら
migration
DBのTableの構造(schema)を変えたりする
おまけ: SQL injectionの対策をしっかりと
Eloquent ORMを介してSQLを操作すれば基本的には問題はない
Eloquent ORM
security
passwordのhashing
暗号化するには
鍵を保持しておく必要
Hash関数
復号できない
フィードバック
naga.icon 人に教えると理解深まるやつだ。
Laravel!!
次回の計画
LaravelのDocs読み進めてまとめるを続ける