APIを叩く時にやりがちなミス

APIを叩く時にやりがちなミス いつ起こったのか CUICatalog: Invalid asset name supplied: ''のエラーが出ている

APIを叩いていると、上記のようなエラーが出ている。

何が原因だったのか。

APIから取ってくる名前(ここでは、APIの仕様どうりの名前)になってなかった。

または、SwiftはDecodableやCodableを扱う際に対応している型があってないと例外として処理されてしまうので気をつけておく。

また、そんなめんどくさいことは全部他に任せる。

https://quicktype.io/

また、画像を表示する際にも対応している物がないと出ると思われるので頑張ってください。

↑の解決方法としては、対応している画像を追加してあげることがいいかなと思われます。

上の2つのエラーを体験してみたい人はお天気アプリを作ってみると良さそう。

あとは、break Pointを設定して実際に値がきているのかを確認することも大切かも。

printデバックもいいけどね。

OOC2020 行ってきました(前半)

Youtube Liveはこちら

Object Oriented DiverCity

スピーカー 成瀬さん

メモ

多様性の話

・戦争になる時

→中身のないインターフェースとしてオブジェクト指向を扱っている。

ポリモーフィズム→文脈の表現

・モデル、エンティティ、ドメイン →Contextのはなし

Contextとは

感想

設計初心者の自分にも取り組みやすかった。

特に、抽象的な概念が出てきても、それを言語化して現実にあるものに置き換えられて話されていたのでとても聞きやすかったです

スライド

DDDはオブジェクト指向を利用してどのようにメンテナブルなコードを書くか

スピーカー 松岡さん

メモ

そもそもソフトウェアを作る目的とは

→何かの問題を解決するために作られる。

ソフトウェアで問題となっている対象

ドメイン

多分DDD内だけの話だと思う…

DDD

公式ドキュメント

https://domainlanguage.com/ddd/reference/

"ドメインモデル: ドメインの問題を解決する為のモデル

データモデル: データベースに何かを映像化するためのモデル"

いいモデルとは

→問題解決ができるのがいいモデルである。

抽象化

→明確に区別する必要がある

軽量DDDはリポジトリとか実践パターンだけ取り入れること

DDD導入の進め方。

まずお手本コード・決まりを作っちゃう。

次に「ドメインモデルに何をかくか?」となったら、少しづつドメインモデルをつくってみる。

原理を理解して実践より、お手本をもとに展開のほうが圧倒的に難易度が低い。

具体的なほうが必要性や価値を感じやすい。

  1. 既存MVCとの食い合わせ

  2. Rails など、思想が違うので別として考えるのがよいのではないか。

  3. 軽量DDDの場合、集約の見極めが難しいのでは。

  4. モデリングの段階で議論するか。見極めるコツは"トランザクションとしての大きさ"、"制約を保つ範囲"のバランス。

感想

 DDD聞いたことはあったけど、具体的にはよくわからなかったのでこのセッションを聞いてすこしはわかったかなって感じになれました。

また、このセッションを聞くことで、DDDに立つことができると思ったのでぜひお勧めします。

スライド

ランチセッション

f:id:tiking76:20200217144051j:plain

美味しいお弁当でした

内容は後半に書きます。

この一年の抱負

この一年の抱負

やりたいこと

  1. iosアプリの作成(60個)
  2. SCCPの課題の完成
  3. 夏のインターンに行けるぐらいの基礎力をつける
  4. 単位を取る

きっかけ

  1. 事の発端

    やらかしたと思う反面、美味しいなと思うところもあり、複雑な気持ちです。

    でも、これをやり切れば力はつくと思うので、一年間で作っていこうと思います。

    (一週間で1個のペースかぁ…)

    多分(絶対)ネタ切れを起こすのでリクエストを投げるかもしれないので、その際はよろしくお願いします。

    モチベが持つか不安なのでよくいじってくれると嬉しいです。

  2. こちらは、自分が配属される研究室の内容と合致するので、将来のこともかねて今頑張ろうかなと思ってます。今回はKerasとOpencvを使ってやっています。詳しくはGitHubに上げているのでそちらを参照ください。まだまだ勉強し始めたばかりなので、アドバイスなどいただけるとありがたいです。

  3. 先輩たちからインターンの重要性を聞いているので参加したいなと思いました。

    また、自分の力が現場でどこまで通用するのかを知るとてもいい機会なので参加したいなと思ってます。

    よかったら声かけてください。

  4. 不治の病五月病によって学校に行けなることがあるので、そのせいで出席数が足りず落単してしまうことがまれによくあるので

    留年

    してしまうので、単位とります。

    卒業したい…ほんと

    まとめ

    この一年死ぬ気で頑張ります!!

行ってきました!! ng-japan2019

 どうもこんにちは、チキングです。

今回はAngularのカンファレンスである、ng-Angular2019にClassiさんのScholaship制度を利用させてもらい参加してきました。

Classiさん、交通費と宿泊費、それに懇親会での美味しいお肉を出していただき、ありがとうございます。

what is ng-japan2019

これは日本最大級のJavascriptフレームワークであるAngularのカンファレンスです。

世界でも10本の指に入るくらいの大きさみたいです。

 

はじめに

会津大学学部二年のチキングと申します。

普段は、Vue.jsやNode.jsを使って色々遊んでます。

あと、英語できない人間なので今回のカンファレンスは精神的にも、能力的にもキツかったです。(誰かおすすめの教材あったら教えてください🙇‍♂️)

 

きっかけ

そろそろ2年だし、なんかやらないとな〜と思ってると、友人のgpioblink君がこのカンファレンスに誘ってくれたのがきっかけです。

あと、Vue以外のことも知っておこうと思ったのもありますね。

 

本編

今回のカンファレンスは六本木ヒルズGoogle Japanでやりました!!

めっちゃ広かったです(小並感)

こんなディスプレイ↓↓が前方に二枚も!!

f:id:tiking76:20190722051356p:plain

 

 まず、自分が一番面白いと感じたものから。

Angularでメトロノームを作った話と、 Angular + pixi JSでメトロノームにオープニングをつけた話

by kawakami0717 

自分なりに感じたことは以下の二つです。

・Angularのチュートリアルを終わらせたあとに何をすればいいか参考になった。

自分はVueで感じたことなんですが、最初はとりあえずチュートリアルやっとけばいいやって感じで、やるんですよ。

でも、そこからは何しようかってなるんですよ、はい。

何か作ればいいんです!

ハッカソンとかにも積極的に参加していこう。

ということを学びましたね。

 

・プログラミングをすることの面白さを思い出させてくれた。

最近は、クソつまらない授業でクソつまらないコードを書くことが多かったので、あれ、なんでこんなことしてるんだろうと思うことが少なくなかったので、

登壇者の人の話を聴くうちに「あーそうだ!プログラミングの楽しさってこうだった!!」ということを思い出させてくれました。

 

また、最新のメトロノームにはPixi.jsというフレームワークでアニメーション機能を追加していて、とても面白そうなことができるツールがあることが知れました。

www.pixijs.com

 

 

次は、技術的に関心があった話を、、、

 

NestJS + TypeORM + Angularで作るPure TypeScriptなアーキテクチャ

by 白石 俊平

ここでは、TechFeedってどうやってできてるの??という話でした。

まずは、Angularから、

・揺るぎない基盤

・いい設計ができる

・学習コストが高い

の3点があげられるみたいで、なんだか取っ付きにくそうだなという感じを受けました。

次に、NestJSから、

・TypeScriptベースのサーバーサイドFW

・デコレーターで宣言的にAPIを作成できる

・Angular

nestjs.com

見た感じ、Node.jsの上位互換という感じでした。

Angular+TypeScript+Node.jsを使っているなら、Node.js→Nest.jsに変えようかなというくらいにはよかったです。

 

最後に、TypeORMについて、

すいません、よくわかりませんでした。(強い人誰か教えてください🙇‍♂️)

しかし、便利ということはわかりました。また、TSをバックエンドで使っていているなら使った方がいいということはわかりました。

 

ご飯の時間 

飯テロじゃ〜〜〜

f:id:tiking76:20190722233432j:plain

f:id:tiking76:20190722233407j:plain

 

f:id:tiking76:20190722233211j:plain


この後無限に肉がサーブされました。

 

Classiさん

懇親会にて、美味しいお肉をご馳走していただいてありがとうございます。

ご馳走さまでしたヽ(*^^*)ノ

 

他のScholashipのメンバーとClassiさんの社員さんとの記念撮影↓

f:id:tiking76:20190722234212j:plain

f:id:tiking76:20190722234240j:plain
 

 

 

 

 

 

Redux入門

最近、Vue.jsを扱う機会が増えてきてそろそろデータフローのことについても勉強しようと思い、自分が忘れないように色々まとめておきました。

 

まず、Reduxとはなんぞやとなるのですが、

簡単に言えば、データフローの設計概念の1つです。

詳しくは、Reduxは3原則に則って、状態変化の流れを制限することで、

状態を管理できるようにしている。

 

3原則を紹介していきます。

1. ソースは1つだけ

これは、アプリケーション全体の状態(以下state)はツリーの形で、

1つのオブジェクトが作られて、1つのストアに保存される。

・stateが、保存しやすい。→ マルチデバイス対応のアプリケーションが作りやすい。

・stateが、1つだからデバックしやすく、開発しやすい。

→つまり、管理しやすいということ。

 

2. 状態(state)は読み取り専用

状態を変更する手段は、変更内容を持ったactionオブジェクトを作り実行するだけ。

actionオブジェクト

 → アクション内で、受け渡されるデータの実体がもつ属性全体のこと。

   E-R図もチェック!

・ビューやコールバックが状態を直接変更させることはできない。

・変更は一つずつ順番に行われる。

・actionはオブジェクトなので、保存可能であり、テストしやすい。

→つまり、1つのactionのデータを何回でも再利用でき、変更しやすいということ。

 

3. 変更は全てpureな関数で書かれている 

アクションがどのように変更するかを"Reducer"で行う。

→変更の処理する場所は、"Reducer"の認識でおけまる!

・"Reducer"自体は、(状態とアクション)を受け取って新たな状態を返す関数である。

・stateオブジェクトは、使い回さず、新しく作って返す。

・基本1アプリにつき、1"Reducer"としていくが、巨大化したら

 "Reducer"を分割する。

 

とりあえずはここまでにします。🙇‍♂️

 

参考にさせていただいた記事

https://qiita.com/kitagawamac/items/b001839150ab04a6a427

 

 

 

 

 

Vueについて勉強したこと

雑記

・vueでは、データを保管するところと、実行するところで、new Vueを分けてあげることが大切。

・map,reduce,filterをよく用いるみたい。

・Vue-watch-deepをすると、より深くまで、値(参照された)を監視できる。

 

computed(算出プロパティ)も積極的に使っていく。

・computedは、データを整理するところと考える。

・vuexの構造は↓

vuex

となっている。

これはFluxやReduxのデータ構造と似ている。

 

node.js は importは使えないので、requireを使う。

 

テンプレートまたは算出プロパティの中での $refs の使用は避けるべきです。

 

apiデータから日時を取得して、formatを整えたいときは、

javascriptのライブラリーにある、moment.jsを使えば良いです。

オススメのサイト→https://its-office.jp/blog/js/2016/04/02/moment.html

 

・ここで、本題のvueを用いた実装についてですが、実は、vueにも、

vue-momenrtというものが存在しており、これを用いれば簡単にデータをformatすることができます。

オススメのサイト→https://blog.photosynthesic.jp/2018/10/vue-js%E3%81%A8%E3%81%AA%E3%81%8B%E3%82%88%E3%81%8F%E3%81%AA%E3%82%8D%E3%81%86%EF%BC%9A%E6%97%A5%E6%9C%AC%E6%99%82%E9%96%93%E3%81%AE%E8%A1%A8%E7%A4%BA%E3%81%ABfilter%E3%82%92%E4%BD%BF%E3%81%A3/

 

・this.$store~~~とか書いている時はstoreをvuexを扱っている。