行ってきました!! 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を扱っている。

 

 

 

めっちゃQOL上がった!!!!!!

今日は、インターン先にていい刺激を受けることができました。

特に、普段耳にしない技術系の話題についてたくさん得ることができました。

その中の一つのに、学生であることを最大限利用することの大切さについて学べました。

また、地元を知ることの大切さも知ることができました。

最後に、正式にインターン先のプロジェクトに参加することが決定しました。

眠いのか、文が乱れていたらすいません。

 

当面の目標

とりあえず、何しよう.....

とりあえず、授業でます。

はい、本当にすいません。

 

webアプリの進捗

Djangoのドキュメントを見てみたけど、何言ってるのかwakaran!!

これから

ドキュメントを読んでいきます。

とりあえず次はなに作ろうか.....

課題発生しました。ごめんなさい

他の端末でログインできなかったです。

課題1

他の端末でログインできるようにする。

他にやりたいこと

paizaのスキルチェックにて、bランクになりたい。

atcoderにも参加して行きたい。

 

やっとDjangoのチュートリアルおわたンゴ

5月18 日(土曜日)

正直言ってコピペに近かったです。(すいません)

でも、pythonを使っての初めてのものが作れました。

なんか、実際に目に見えるものができるといいですね(笑)

これからは、テストケースを追加して拡張させて行きたいですね。