taisablog

taisa's engineer blog

スクリーンショット 2019-06-26 19.58.04

投稿日:

-

執筆者:

関連記事

no image

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

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コンポーネントを呼び出します。 …

no image

2019年 振り返り

2019年の抱負から今年を振り返ってみます。子供らが遊んでいる中で書いているのでかなり雑です。あとできれいにします。 Google Cloud Platformを使う 2018年後半から2019年前半にかけて副業でFirebaseでスマホアプリのサーバサイドをやりました。感じたことはGCPめっちゃいいということ。メインで利用したのはCloudFirestoreとCloud Functionsでしたが他にも色々できるのですごい進化を感じました。 数学をやる 2019年前半に中学レベルの数学までを復習しました。やってみて思ったことは業務で必要にならない限りは継続が難しいことでした。 宅建をとる 以下で書いたので割愛 http://3.115.145.106.xip.io/archives/1629 体力をつける 会社でランニング部があり今年は多少ですが走ることができました。また、久しぶりに筋トレも再開することができました。2020年はこれらの活動を増やして継続していきたいです。 やらなくてよかったこと 何年かやってみてやらなくてよいことが見えてきました。というより実務で必要にならない限り習得が難しいです。重要だしやりたいけどサブでやるには継続が難しく思ったような成長曲線が描けません。逆に英語のリーディングは日常で使うのでそっちに極振りしています。 機会学習数学英語のスピーキング アウトプット ブログ:22記事QIITA:2記事 合計24記事ということで月2記事のペースは維持できました。特別気にしていませんが月間PVも約1万と少しずつ伸びてきていていい感じ。 まとめ ここ数年はテックリード、スクラムマスター、マネージメント業務が多く業務で開発をする機会が減っていましたが、今年の後半は最高の会社・メンバー・プロダクト・技術スタックでいろんなことがとても充実した1年になりました。 VueJSTypeScriptGolangAWSMicro Servicesコーチング

PHPライブラリをPackagistに登録する方法

PHPのライブラリをPackagistに登録する方法を書いておきます。PackagistはPHPのパッケージリポジトリで、登録しておくとcomposerを使ってプロジェクトへインストールすることができます。ここではとあるプロジェクトをPackagistに登録する前提の流れで進めていきます。 Packagistに登録するプロジェクトを作成する 新規でプロジェクトを作成しcomposer initを実行します。 mkdir amazon-photo-formatter cd amazon-photo-formatter composer init composer initを実行すると色々と聞かれるので順番に進めていきます。まずはパッケージ名が聞かれます。<vendor>にはGitHubのアカウント名を指定し、<name>にはライブラリ名を記載します。ここではtaisa831/amazon-photo-formatterと記載しました。 Package name (/) [taisa831/packagist]: Descriptionはライブラリについての説明文なので、Format amazon photo file name to amazon photo’s format.と書きました。その他についてもサジェストされている内容とするか必要な内容を決めて進めていきます。 Description []: Author [Masaki Sato , n to skip]: Minimum Stability []: Package Type (e.g. library, project, metapackage, composer-plugin) []: library License []: MIT 次にこのライブラリが依存しているものがあればこの時点で指定することができます(後から手動で記載することも可能)。ここではphpunitを利用するのでrequire-devでphpunitを指定しました。 Would you like to define your dependencies (require) interactively [yes]? no Would you like to define your dev dependencies (require-dev) interactively [yes]? Search for a package: phpunit Found 15 packages matching phpunit [0] phpunit/phpunit [1] phpunit/phpunit-mock-objects Abandoned. Use instead. [2] phpunit/php-token-stream [3] phpunit/php-timer [4] phpunit/php-text-template [5] phpunit/php-file-iterator [6] phpunit/php-code-coverage [7] …

Rust+WebAssembly で Hello, World!

以前 Rust をはじめてみよう!という記事を書いた。今回は Rust + WebAssembly を使って Hello, World!の出力をやってみた。 WebAssembly について まず WebAssembly とは何か。本家サイトの Overview をみてみる。ここにある通り、WebAssembly(WASM)は C/C++/Rust などの高級言語を使って開発をしバイナリ形式で動かすことができる。その為 Web 上で高速に動かすことができる。とりわけゲームなどの実行速度が求められるような分野で有効になる。Chrome、Firefox、Safari、Edgeで利用が可能。 WebAssembly (abbreviated Wasm) is a binary instruction format for a stack-based virtual machine. Wasm is designed as a portable target for compilation of high-level languages like C/C++/Rust, enabling deployment on the web for client and server applications. https://webassembly.org/ よくデモに出てくる Unity を使った動画 https://webassembly.org/demo/Tanks/ Youtube動画 再生回数が一番多い動画をあげておく。2018年2月の動画ですごく分かりやすく説明されている。 Rust+WebAssembly のドキュメント https://rustwasm.github.io https://github.com/rustwasm ここからは以下の記事を実際にやってみる。実際にほぼそのまま実行しているだけなので以下についてはリンクをチェックするだけでも良いです。 https://rustwasm.github.io/book/game-of-life/hello-world.html 事前準備 参考URL:https://rustwasm.github.io/book/game-of-life/setup.html rustup を使って rust をインストールする curl https://sh.rustup.rs -sSf | sh source $HOME/.cargo/env source $HOME/.cargo/envは .zshrc などに記述しておくとよい wasm-pack インストール wasm-pack を使うとビルド・テスト・公開などが簡単にできる curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh cargo-generate インストール cargo-generate を入れるとcargo …

no image

2017年の振り返り

2017年も残りわずかとなったので年を越してしまう前に振り返る。結論から言うと今年は近年稀に見るいい年になった。というのも今年立てた目標や中長期的に立てていた目標を達成することができたから。今年立てた目標はこちら。これらの内容について簡単に振り返る。 2017年の抱負 2017年になって1Qが終わろうとしているけど、年末に考えた2017年の抱負を書こうと思う。 2017年の抱負 いろんなことはできないので3つ+サブ目標で考えた。 生産性 ビックデータ ビジネス・インテリジェンス サブ目標 フロントエンド 英語 生産性 これまでも開発の生産性を意識した活動をしてきたが、全員の開発効率アップ、品質アップのような守備的な活動が多かった。けど今年はスクラム体制にして攻撃的な面も加えていきたいと思う。 去年までの振り返り 去年までは2人1組のような小さなチームで開発し、できたらリリースするというサイクルで開発していたが、以下の問題が細かく積み重なってきていた。(サービスの規模がそういった状況に陥る状況にまで成長したとも言える。) マネージャーの管理コストが高い 要件定義して開発に仕事を振る側の負担が大きい 開発者が指示待ちになる 開発した機能が属人的になる 開発メンバーが他のメンバーが何をしているか把握できない(チーム感がない) 開発・営業・運用で足並みを揃えるのが難しい これらの問題を一気に解決する為に2017年からはスクラム体制で開発を進めることした。 スクラムのチーム構成 最初のスクラムチームの構成は以下の7人体制 プロダクトオーナー スクラムマスター(自分) 開発チーム デザイナー兼コーダー 中堅エンジニア 2~3年目のベトナムメンバー(2人) 新卒エンジニア スクラムを始めるあたり読んだ資料と書籍 Wikipedia まず最初に見たのがWikipedia。スクラム自体はある程度決まった型があるので、ここを見るだけでも大体の流れを確認することができた。また、スクラムガイドがリンクされているので合わせて読んだ(こちらも17ページ程)。 SCRUM BOOT CAMP THE BOOK 次に読んだのがこちら この本はスクラムについての概要はわかったけど実際どんな風に進めたらよいかが分からないという方におすすめ。実際の流れを漫画を交えて説明してるので読みやすいし一連のスクラムの流れがわかる。個人的にはスクラムガイドとこの本を読めばスクラムを開始できると思う。 スクラム実践入門 他の書籍も一応見ておこうと思って呼んだのがこちら 生産性 今年の大きな目標の柱として、生産性というのをあげていた。これまでも意識していたことではあるが今年は具体的にスクラムという取り組みを取り入れて実践した。生産性を意識する背景は、主に人口減少・人手不足などがある。とにかく時間をかけて仕事すれば結果がついてくるという時代ではなくなっている今、あたらめて生産性を意識して仕事することにした。結果的にはスクラムマスターとして約1年間スクラム開発をし、一定の成果を出すことができたと思う。スクラムがどんなものか、スクラムを導入するとどんな結果が得られるかが把握できたのでこれからに生かせる経験をすることができた。 ビッグデータ ビッグデータに関する知見はほぼ皆無に等しかったが、今年はAWSを利用してビッグデータに関するサービスをやろうと考えていた。そんな折ちょうどその文脈で新規サービスを立ち上げることになり約5ヶ月位かけてスクラム体制で開発をした。ビッグデータに関しては、AWSサミットに参加したことでどのようなアーキテクチャにすればよいかが考えられたのが大きかった。具体的にはデータレイクという手法を取り入れた。サービスについてもスクラム体制がなんとか機能してスケジュールを大きくはずすことはなかった。実際ビッグデータに関してはデータがたくさんたまるというところまではいけなかったが、それでも1年前にはまったくなかった経験と知見を得ることができた。 ビジネス・インテリジェンス ビジネス・インテリジェンスに関しては、ビッグデータとほぼ同様の文脈なので特記することはないが、ただビッグデータを扱うだけでなくしっかり示唆を出せるものをつくることができた。ただ、機械学習やデータサイエンスといったことを取り入れるところまでは至らなかったのでこれらは来年の主軸の目標にする。 フロントエンド フロントエンドは、今年ようやく本格的にモダンな技術を取り入れることを決意してチーム一丸となって脱jQueryを果たした。業務外でVueJS、React、Angularの勉強会などを行い最終的にはVueJSを採用した。VueJSでやったことをすべてjQueryでやってたらめっちゃ大変な上にサービスの更新も大変だっただろうと思う。本当に導入できてよかった。 英語 英語までは絶対手が回らないだろうと思ってサブ目標にしていたが、案の定英語は他と比べると一番手をつけることができなかった。ただ、2017年の目標は以下の2つだったのでこれについてはしっかり達成することができた。そして2018年は2017年よりも時間を割いて、英語を少しでも楽に使えるようにしたいと考えている。 英語の勉強をするというよりは英語を使う環境に身をおける状態にする 英語の技術系podcastを聞く まとめ ここに書いていない中長期的に立てていた目標も今年で達成することができたので総じて2017年は良い年になった。無理に目標を立てすぎないというのがよかったのだと思う。自分の体調やキャパを考えるとできることはどうしても限られてしまうのでその中でできることを来年も考えてやっていこうと思う。