taisablog

taisa's engineer blog

「 投稿者アーカイブ:taisa831 」 一覧

no image

Vue.js+TypeScriptで外部APIを使ったTODOリストを作ってみた

2019/08/18   -JavaScript

Vue.jsで外部APIを使ったTODOリストを作ってみた に続き、それのTypeScript版を作ってみました。TODOリスト用のAPIは以前書いたこちらのAPI「Go言語 GORM+GinでTODOリストのAPIを作ってみた」を利用します。CORSを全て許可しているのでどこからでも叩けるようになっています。TypeScriptを書くのは今回が初めてなので、誤っている箇所やもっとよい書き方などがあれば指摘して頂ければと思います。 できたもの できたものはこちらです。http://vuejs-ts.taisablog.com/todo <div class=”graybox”> <div class=”clearfix”><figure><a href=”http://52.196.213.4/wp-content/uploads/2019/08/063dff08aea69d0ee7c6cea19de29030.png”><img class=”alignleft size-full wp-image-1684″ src=”http://52.196.213.4/wp-content/uploads/2019/08/063dff08aea69d0ee7c6cea19de29030.png” alt=”” width=”600″></a></figure></div> </div> APIのエンドポイント APIのエンドポイントは以下としました。 URL http://gin.taisablog.com/api/v1/ GET /todo // 一覧表示 POST /todo // 新規作成 GET /todo/:id // 編集画面表示 PUT /todo/:id // 編集(今回未使用) DELETE /todo/:id // 削除 プロジェクト作成 vue-cliを使ってプロジェクト作成をしました。プロジェクト作成のコマンドを打つと、色々と聞かれますが、TypeScriptを利用する為にManually select featuresを選択し、TypeScriptをONにします。ここではRouterもONにしました。 % npm install -g @vue/cli % vue create my-project default (babel, eslint) ❯ Manually select features vue-cliでできたプロジェクトのsrc配下の構成は以下となっています。今回はそこにTodo.vueとTodoList.vueを追加して実装しました。views配下で実装するだけでも大丈夫ですが、今回はあえてviews/Todo.vueからTodoList.vueコンポーネントを呼び出す形としました。 . ├── App.vue ├── assets │   └── logo.png ├── components │   ├── HelloWorld.vue │   └── TodoList.vue ← 新規追加 ├── main.ts ├── router.ts ├── shims-tsx.d.ts ├── shims-vue.d.ts └── views ├── About.vue ├── Home.vue └── Todo.vue ← 新規追加 views/Todo.vue TodoList.vueコンポーネントを呼び出します。 …

Vue.jsで外部APIを使ったTODOリストを作ってみた

2019/08/14   -JavaScript

APIを使ったTODOリストをVue.jsで作ってみました。TODOリスト用のAPIは以前書いたこちらのAPI「Go言語 GORM+GinでTODOリストのAPIを作ってみた」を利用します。CORSを全て許可しているのでどこからでも叩けるようになっています。 できたもの できたものはこちらです。http://vuejs.taisablog.com/todo APIのエンドポイント APIのエンドポイントは以下としました。 URL http://gin.taisablog.com/api/v1/ GET /todo // 一覧表示 POST /todo // 新規作成 GET /todo/:id // 編集画面表示 PUT /todo/:id // 編集(今回未使用) DELETE /todo/:id // 削除 TODOリストの処理 プロジェクトはvue-cliで作成し、APIはaxiosを利用しました。componentsにTodo.vueファイルを作成しそこにすべての処理を書いています。 インポート import axios from ‘axios’ const NOT_STARTED = 1 // 未対応 const STARTED = 2 // 対応中 const FINISHED = 3 // 完了 data function name: “Todo”, data() { return { todoList: [], inputField: ”, isActive: false, baseUrl: ‘http://gin.taisablog.com/api/v1/’ } }, created function created() { this.getTodo() }, methods : 一覧を取得する async getTodo() { try { let response = await axios.get(this.baseUrl + ‘todo’) this.todoList = response.data } catch (e) { console.log(e) …

no image

2019年前半の振り返り

2019/07/08   -未分類
 

2019年が半年を過ぎたので振り返ります。 2019年の抱負 本業頑張るのはもとより、2019年の抱負がある程度固まってきたので書いておきます。 これまでAWSを自分で多く触るケースはあまりありませんでしたが、GCPを使うケースが増えてきたので今年からはAWSではなくGCPをたくさん触っていこうと思います。 … Google Cloud Platformを使う Firebaseを触る機会があって、FirestoreやCloud Functionsを扱いました。あとGCEに migro instance を使って sandbox ページ( http://sandbox.taisablog.com/)を立ててみたりしました。 FirebaseもGCEもかなりいい感じなので今後は個人でちょくちょく使っていくと思います。 Firebase Cloud Firestore 使い方の勘ドコロ 数学をやる 間に合わせ程度に以下の投稿にある内容をやりました。次はまたしばらく必要になりそうなタイミングになったら進めてみようと思います。 小学校6年間の算数から中学3年間の数学までを復習してみた 宅建をとる いろいろと調べたり少しやってみたりしたところ、以下をやればなんとか合格できる気がしましたが状況が変わってきたので受験するのはやめました。 宅建みやざき塾でテキストを購入(テキストだけの購入は不可) 何回か講義を受ける 3月頃にはじめて10月に向けて通勤時間などを活用して約300時間くらい費やす 直前に対策講義を受ける 体力をつける 相変わらず走れていませんが軽い筋トレをしつつ体重は4キロ程減らせました。あと3キロ減が目標です。 ブログ記事 1月から6月末までで11記事でした。年間月2記事で24記事を目安にしているので1記事程足りないペースでした。 2018年振り返り、プレイングマネージャーは難しく 2019年の抱負 PHPの empty, isset, is_null の違いをしっかり理解する PHPライブラリをPackagistに登録する方法 GitLabのprivateなPHPライブラリをcomposer installするには C言語初級者がMacのコンソールで実行可能なテトリスを作ってみた PHPによるDBUnit超入門 私はこうしてGoogleに入社/退社しました系記事まとめ 小学校6年間の算数から中学3年間の数学までを復習してみた Firebase Cloud Firestore 使い方の勘ドコロ Go言語 ORMライブラリ GORMの使い方 7月の記事 Go言語 GORM+GinでTODOリストを作ってみた Go言語 GORM+GinでTODOリストのAPIを作ってみた 目標の見直し 2019年後半は以下をがっちり身に着けることを目標にします。目標の詳細については違うタイミングで少しブレイクダウンする予定です。 技術系 JavaScript(Vue.js) Go CSS / Stylus AWS その他 健康体を維持する / 体力をつける

Go言語 GORM+GinでTODOリストのAPIを作ってみた

2019/07/04   -Go, 未分類
 

前回の「Go言語 GORM+GinでTODOリストを作ってみた」に続いて「GORM+Gin」でTODOリストのAPIを作ってみました。ソースコードは前回からの差分だけを記載しています。できたものは下記URLから確認できます。 http://sandbox.taisablog.com/api/v1/ GinのGithub 事前情報 Webフレームワーク:Gin (https://github.com/gin-gonic/gin) ORM:GORM (https://gorm.io/docs) DB:MySQL ルーティングは今回はAPIなので以下としました。モデルをtasksにすればよかったと思いましたが一旦このままにしておきます。 [GIN-debug] GET /todo –> main.main.func1 (3 handlers) // 一覧表示 [GIN-debug] POST /todo –> main.main.func2 (3 handlers) // 新規作成 [GIN-debug] GET /todo/:id –> main.main.func3 (3 handlers) // 編集画面表示 [GIN-debug] PUT /todo/:id –> main.main.func4 (3 handlers) // 編集 [GIN-debug] DELETE /todo/:id –> main.main.func5 (3 handlers) // 削除 ディレクトリ構成 . ├── api │   └── v1 │   └── todo.go ├── controllers │   └── todo.go ├── db │   └── db.go ├── main.go ├── models │   └── todo.go ├── router    └── router.go router.go router.goにr.Group(“/api/v1”)のAPI用のグループを追加してルーティングを追加しました。 package router import ( “github.com/gin-contrib/cors” “github.com/gin-gonic/gin” “github.com/jinzhu/gorm” v1 “github.com/taisa831/sandbox-gin/api/v1” “github.com/taisa831/sandbox-gin/controllers” …

Go言語 GORM+GinでTODOリストを作ってみた

2019/07/02   -Go
 

前回の「Go言語 ORMライブラリ GORMの使い方」に続いて「GORM+Gin」でTODOリストを作ってみました。使い方は「GitHubのREADME」を参考にしました。できたものは下記URLから確認できます。装飾は別途やれればと。 http://gin.taisablog.com/todo 事前情報 Webフレームワーク:Gin (https://github.com/gin-gonic/gin) ORM:GORM (https://gorm.io/docs) DB:MySQL ルーティングは通常のフォームだとPUT/DELETEが使えないので以下のようにしました。 [GIN-debug] GET /todo –> main.main.func1 (3 handlers) // 一覧表示 [GIN-debug] POST /todo –> main.main.func2 (3 handlers) // 新規作成 [GIN-debug] GET /todo/:id –> main.main.func3 (3 handlers) // 編集画面表示 [GIN-debug] POST /todo/edit/:id –> main.main.func4 (3 handlers) // 編集 [GIN-debug] POST /todo/delete/:id –> main.main.func5 (3 handlers) // 削除 main.goだけで作成した場合 main.goに全ての処理を記述しています。 package main import ( “github.com/gin-gonic/gin” “github.com/jinzhu/gorm” _ “github.com/jinzhu/gorm/dialects/mysql” “net/http” “strconv” ) type Todo struct { gorm.Model Text string Status uint64 } func main() { db, err := gorm.Open(“mysql”, “gorm:gorm@/sandbox_gin?charset=utf8mb4&parseTime=True&loc=Local”) if err != nil { panic(“データベースへの接続に失敗しました”) } defer db.Close() db.LogMode(true) db.AutoMigrate(&Todo{}) r := …

Go言語 ORMライブラリ GORMの使い方

2019/06/26   -Go
 

Go言語 ORMライブラリのGORMの簡単な使い方を確認してみました。また、公式ドキュメントにしっかりと使い方が書いてありますので基本的にはそちらを参考にしてもらえればと思います(すべてではないですが日本語訳もされています)。その上でクイックスタートを元に簡単な使い方と挙動を確認してみます。 http://gorm.io/ja_JP/docs/ インストール 以下のコマンドでインストールできます。 go get -u github.com/jinzhu/gorm クイックスタート 公式ドキュメントにあるクイックスタートを実行してみました。DBだけsqliteではなくmysqlに変更しています。 package main import ( “github.com/jinzhu/gorm” // _ “github.com/jinzhu/gorm/dialects/sqlite” _ “github.com/jinzhu/gorm/dialects/mysql” ) type Product struct { gorm.Model Code string Price uint } func main() { // db, err := gorm.Open(“sqlite3”, “test.db”) db, err := gorm.Open(“mysql”, “gorm:gorm@/sandbox?charset=utf8mb4&parseTime=True&loc=Local”) if err != nil { panic(“データベースへの接続に失敗しました”) } defer db.Close() // スキーマのマイグレーション db.AutoMigrate(&Product{}) // Create db.Create(&Product{Code: “L1212”, Price: 1000}) // Read var product Product db.First(&product, 1) // idが1の製品を探します db.First(&product, “code = ?”, “L1212”) // codeがL1212の製品を探します // Update – 製品価格を2,000に更新します db.Model(&product).Update(“Price”, 2000) // Delete – 製品を削除します db.Delete(&product) } 実行してみるとproductsテーブルが作成され、以下のカラムとレコードができました。structでは宣言していない、id、created_at、updated_at、deleted_atカラムができ、deleted_atに日付が入りソフトデリートが行われています。 go run main.go gorm.Model gorm.Modelを宣言するとid、created_at、updated_at、deleted_atカラムが自動的に注入されます。また,deleted_atカラムがある場合、Deleteはソフトデリートになります。 参考: http://gorm.io/ja_JP/docs/conventions.html …

Firebase Cloud Firestore 使い方の勘ドコロ

2019/06/18   -JavaScript
 

FirebaseのCloud Firestoreを扱う際、本家ドキュメントが充実していて検索すればすぐに出てくるのでそれほど困ることはありません。ただ、最初の入りとしてFiresotreのDocumentって何? となったり、doc、docRef、cityRef、cityDocRef、snapShot、docs など、本家ドキュメントの中でも若干変数名の書き方が異なっていたりします。その為、慣れてくれば大丈夫ですが、慣れるまで毎回どう書くんだっけ?と検索することが多かったので、自分なりに解釈して整理してみました。Firestoreを扱える言語は様々用意されていますが、ここでは、JavaScript(Nuxt.js)を例に進めていきます。(セットアップは省きます) 参照元:https://firebase.google.com/docs/firestore/manage-data/add-data?hl=ja Firestoreの基本的な考え方 基本的な考え方は、正にこの図にあるように「フォルダ(collection)」「ドキュメント(document)」「データ」という構成になっています。 参照元:https://firebase.google.com/docs/firestore/data-model これをFirestoreの管理画面でみるとこのようになります。 これを「フォルダ(collection)」「ドキュメント(document)」「データ」に当てはめてみるとこのようになります。イメージとしては、本棚にフォルダが並んでいてフォルダを選択するとフォルダの中のファイル一覧がみることができ、あるファイルを選択するとそのファイルに書かれている内容をみることができるという感じです。 ◯◯Refとは 本家ドキュメントをみると、◯◯Refという変数がよく出てきます。これはその名の通り「参照」です。つまり本棚にあるフォルダ(collection)やフォルダ内のドキュメントを選択した状態です。この時点ではまだ参照なので取得はしていません。usersコレクションを選択した状態であればuserRef、usersコレクションのドキュメントを選択した状態であればuserDocRefといった変数をつけると分かりやすいと思います。(本家ドキュメントではそのようなルール決めはありません。) userRef = db.collection(‘users’) userDocRef = db.collection(‘users’).doc(‘YLu7bG7PcRNYhAg3F6MY’) これらを踏まえて、実際にデータの取得、追加、更新、削除のコードを書いてみます。ここではあえて◯◯Refのように変数を使っています。 コレクション配下のドキュメントデータをすべて取得する usersコレクションを参照した状態で、get().then()を呼び出すとその時点のドキュメント一覧(snapShot)が取得できます。ドキュメントは1つしか存在しない可能性もありますが、ドキュメント一覧なのでforEachでループすることで全データを取得することができます。ユーザIDはデフォルトでドキュメントに振られるIDです。 const db = firebase.firestore(); let userRef = db.collection(‘users’) userRef.get().then((snapShot) => { snapShot.forEach((doc) => { this.users.push({ user: doc.data(), user_id: doc.id }) }) }) ユーザID ユーザ名 ユーザメールアドレス {{user.user_id}} {{user.user.name}} {{user.user.email}} 参考:https://firebase.google.com/docs/firestore/query-data/get-data?hl=ja コレクション配下のドキュメントデータをフィルタして取得する フィルタするのにwhereを利用することができます。whereで対象を絞った後、同様にget().then()を呼び出すとフィルタしたドキュメント一覧が取得できます。 const db = firebase.firestore(); let userRef = db.collection(‘users’) userRef.where(‘name’, ‘==’, ‘山田太郎1’).get().then((snapShot) => { snapShot.forEach((doc) => { this.filteredUsers.push({ user: doc.data(), user_id: doc.id }) }) }) ユーザID ユーザ名 ユーザメールアドレス {{user.user_id}} {{user.user.name}} {{user.user.email}} 参考:https://firebase.google.com/docs/firestore/query-data/get-data?hl=ja 単一のドキュメントデータを取得する 単一のドキュメントデータを取得するには、doc()にIDを渡し、get().then()を呼び出すと指定したドキュメントのデータが取得できます。この場合、doc()で単一のドキュメントを指定しているので、取得できるのは一覧ではなく指定したドキュメントの値となります。 const db = firebase.firestore(); let userRef = db.collection(‘users’) userRef.doc(‘YLu7bG7PcRNYhAg3F6MY’).get().then((doc) => { this.user = doc.data() this.user.user_id …

小学校6年間の算数から中学3年間の数学までを復習してみた

2019/05/30   -未分類

はずかしながら小学校算数から中学校数学までを復習してみたのでまとめておきます。 動機 もともとはこちらの「文系エンジニアが機械学習に入門するために小学校の算数から高校数学までを一気に復習してみました。」の記事を見たのがきっかけでした。復習しようにもどうアプローチしたらよいかわからなかったからです(私の場合は機械学習よりかはただの興味という感じです)。もともと高校数学を少しやってみようかと思っていましたが、そもそも高校入ってからは真面目に授業を受けていなかったので高校数学などほとんど覚えていません(高校入るまではそれなりに勉強していましたが..)。それで高校数学をやるとすぐくじけそうなので、中学数学までをやってみることにしました。タイトルに時間があるのも心理的にとっつきやすくてよかったです。 教材 教材は記事にあった以下の教材を使いました。公立高校受験レベルですがとても分かりやすくまとまっていてよい本でした。ほとんど通勤時間にみていたのでかかった時間は分かりませんが、小学校算数は6時間もかからず、中学校数学は大体6時間くらいだったかと思います。ただ読んでいるだけだと分かった気になるだけなので、こちらの問題「都道府県別 公立高校入試[問題・正答]」を少し解いたりしました。 小学校6年間の算数が6時間でわかる本 中学3年間の数学を8時間でやり直す本 目次 小学算数 PART1 分数の計算 PART2 少数の計算 PART3 面積図・線分図・方程式 PART4 すばやく計算 PART5 割合 PART6 比 PART7 単位量あたりの大きさ PART8 速さ・時間・道のり PART9 平面図形 PART10 立体図形 PART11 比例・反比例 PART12 場合の数 中学数学 PART1 正の数と負の数 PART2 文字式 PART3 1次方程式 PART4 連立方程式 PART5 因数分解と展開 PART6 平方根 PART7 2次方程式 PART8 確率 PART9 1次関数 PART10 関数y=ax2 PART11 図形 PART12 三平方の定理 おまけ ついでに暗算も少しは早くできるようになりたいということで検索して一番にヒットした「暗算を簡単にする10の方法」も少しやってみました。他にもよい暗算の方法があれば教えてほしいです。 左から右に 細かい文字をシンプルに 分数、少数のきまりを覚えておく 数字の「0」と「5」を利用する 倍数を使いこなす 大まかな数字を出す 数字を”リフレーズ”と”リアレンジ”する 答えが合えばそれでいい 億単位の数字にも計算方法はある チップを計算する簡単な方法 まとめ まだまだ先ですが子供らの高校受験まではある程度教えられるかなという気持ちになりました。ただ実際にはちょっと問題を解いただけなので、またその頃になったら復習しているかもしれません。次は時間を見つけて高校数学で面白そうな分野(機会学習にも役立ちそうな?)を選択してやってみようと思います。

私はこうしてGoogleに入社/退社しました系記事まとめ

2019/04/02   -未分類

  ここ最近少しブームになっていた、「私はこうしてGoogleに入社/退社しました」系の投稿が、どれも興味深い内容だったので、あとから見返しやすいようにまとめてみました。 記事一覧 Google退職します|eqsan|note2019/3/15が最終出社日でした。インターン期間も含めると4年ちょっと勤めたことになります。 ちょうど昇進してプロジェクトも一区切りついたタイミングで他にすごくやりたいことができたので転職という形です。 素晴らしい環境なのに情報が少なくて、入ると良さそうなのに敬遠している人を何度か見たので、この記事が参考になれば幸いです。辞める人が言うのも変な話ですが。 … 私はこうやってGoogleに入った (ソフトウェアエンジニア、中途採用編)( 人にお願いするだけじゃなくて自分も貢献しろよということで昔話を書いてみました。 kazawa フォーマット に従っています。) 学生時代 … 私はこうやって(12年前) Google に入った書け、という天の声 が聞こえたので書いてます。 私は修士まで物理学を専攻していて、情報系の勉強は特にしていませんでした。ただ、実験結果をまとめるために awk を使ったり(256倍本とか知っています?)、シミュレーションをするために Fortran 書いたり(関数名の長さに制限ありました)はしていました。 … 私はこうして Google に入った (SWE・新卒編) – ふしみのブログ最近、 Google や大学が開催しているキャリアイベントなどに参加する機会がおおかったので、そこで話したことをまとめて書いてみました。2017年4月入社なので、現在2年目が終わろうとしているところです。 なるべく汎用的に、具体的な対策を中心に書いたので、他の 外資 系企業の採用面接にも役立つかもしれません。参考にしていただければ幸いです。 こうしてGoogleに入社した(kumagi編) – Software Transactional MemoTL;DR AtCoder やろうぜ Google の(僕から見て)偉い人が立て続けにブログを書いており ここ数件の僕のブログへの反響を読んでも「Googlerだから特別」みたいな意見が散見され、入社へのハードルが変に高く見られてしまっている気がするので、僕が Google に入社する準備として取り組んでいた事とそのレベルを紹介する。程度の低さに安心して欲しい。 英語 … こうしてGoogleに落ちた – Easy to typeTL;DR Leetcodeをもっとやる必要がありました Googleの社員が選考過程についてブログを書いています。ちょっと前にNTTブームを引き起こした id:kumagi さんとか。 ところで、僕も Google … 私はこうやってGoogleに入った(新卒ソフトウェアエンジニア) – n-yoda’s blog長い記事を書く人が多いので短くて簡潔なものをと思って書きました、が、思ったより長くなりました。 小さい頃からやっていたところが強みです。周りに聞ける人が一人もいなかったので ググる のが得意。大学で習う以上の強そうな知識とかはあまり無いです。 研究室の先輩方がホームページに載せているものを参考にして書きました。 何もしませんでしたが、何度かやった TopCoder は多分役に立ちました。 TOEFL ITP 547/677点。 私はこうやってGoogleに入りました(Reiko編)プログラミングスキルは? プログラミングは仕事用のコードを自己流で書きちらかしてるだけだったのでコーティングには全く自信がなく、そのリクルーターさんからいくつか資料が送られてきたので、参考にして勉強しました。Cracking the Coding Interview、プログラミングコンテストチャレンジブック、あといくつかアルゴリズムの本(思い出したら書きます)などをやりました。 … Google に入るまでの話Google に入るまでの話. GitHub Gist: instantly share code, notes, and snippets. いかにしてわたしは Google に入社し、そして退職したか – The Decisive Strike長山です。2019 …

PHPによるDBUnit超入門

2019/03/29   -PHP

例えば簡単なWebサービスでMVCのフレームワークを使っていてビジネスロジックを書く用にコントローラとモデルの間にサービス層を追加して開発している場合、コントローラやサービスはモックを駆使しながらテストを書いていくことができます。ただ、例えばフレームワークをバージョンアップしたい、PHPをバージョンアップしたいなどの場合に既存のモデル層に影響がないかをテストで確認したいなんてことがあります。そのような場合には、DBUnitを導入してみてもいいかもしれません。ということで本記事ではPHPによるDBUnitの使い方を書いてみます。 事前情報 今phpunit/dbunitをインストールしようとすると以下の文言が出力されます。詳しくはこちらのissueに書いてありますが、どうもSebastianさんはdbunitのメンテナンスをやめるようです。ただそれを受けてforkしたプロジェクトが出てきているようなので大丈夫かと思います。今回はSebastianさんの純正dbunitを使っています。 Package phpunit/dbunit is abandoned, you should avoid using it. No replacement was suggested また、DBUnitに関する詳しい情報はマニュアルにありますのでご確認ください。https://phpunit.de/manual/6.5/ja/database.html#database.implementing-getdataset 作成したサンプルプロジェクト 今回は、dbunitの確認だけをしたいので、dietcakeのmessage-boardというサンプルプロジェクトを利用しました。今回作成したDBUnit用のサンプルプロジェクトは GitHub からダウンロードして確認できます。 git clone git@github.com:taisa831/phpunit-dbunit-sample.git cd phpunit-dbunit-sample composer install # mysqlサーバを立て`app/config/sql/board.sql`を実行する(SQLは下記に記載しています) # テスト実行 ./vendor/bin/phpunit PHPUnit 7.5.8 by Sebastian Bergmann and contributors. ….. 5 / 5 (100%) Time: 207 ms, Memory: 4.00 MB OK (5 tests, 14 assertions) アプリ用のDDLです。開発用DBとは違うのでboard_dbunitというテーブル名にしています。 — — — Create database — CREATE DATABASE IF NOT EXISTS board_dbunit; GRANT SELECT, INSERT, UPDATE, DELETE ON board.* TO board_root@localhost IDENTIFIED BY ‘board_root’; FLUSH PRIVILEGES; — — Create tables — USE board_dbunit; CREATE TABLE IF NOT EXISTS thread ( id INT UNSIGNED …