2021-08-27

Promiseで使う【async/await】の学習

asyncとawaitの学習

ポイント

asyncはpromiseを（正常動作と異常動作の準備）を簡単に記述する。
awaitはpromiseで使われる正常動作と異常動作の記述に.thenを使わなければいけないところ、awaitで一文で簡潔に書ける。

fetch('http://example.com/movies.json')
  .then(response => response.text())
  .then(data => console.log(data));

fetchはpromiseで実装されていてresponseオブジェクトを含むため.thenからresponseをアロー関数で受け取ることができる。

awaitを使う場合は

fetch('http://example.com/movies.json')
  await response.text();
  await console.log(data);

こうしたい気もするけど fetchからのpromiseオブジェクトが.thenで繋がらずにawaitで省略しているため、responseが何も入っていない状態のためjsonで呼び出せない。省略したい場合は

let response =fetch('http://example.com/movies.json')
  let data = await response.text();
  await console.log(data);

しっかり変数に入れてその変数から取り出す処理を書く。

しかし、fetchを変数に入れるとawaitは基本的にasync関数の中で機能するため

async function show(){
let response = fetch('http://example.com/movies.json')
  let data = await response.text();
  await console.log(data);
}

show();

asyncでラップする（囲う）。でもでもこれだと、async関数の中でfetchが機能しないので、

async function show(){
      let response = await fetch('http://example.com/movies.json')
      let data = await response.text();
      await console.log(data);
}

show();

このようにawaitでfetchを起動させなければいけない。

と、こんな感じでfetchはpromiseオブジェクトを含むのでawaitを使って綺麗に書こうと思ったら、asyncを使わないといけないし、asyncを使ったらfecth自体もawaitで書かなければいけないしで色々重ねて書く必要がある。

見た目は綺麗。

async/awaitはruby使ってる時の作業に若干近いと感じた。

2021-08-23

【JavaScript】Promiseで使用するあれこれや仕組みを学ぶ。

【JavaScript】Promiseで使用するあれこれや仕組みを学ぶ。
- コールバック関数と決められた書き方
- Promiseを使う
インスタンスメソッド
Promiseを学んでいて気づいたこと

コールバック関数と決められた書き方

前日の記事では、JavaScriptで非同期処理を行うときはコールバック関数が多いと引用しました。そしてJavaScriptのコールバック関数にはルールがあり、第一第一引数にはエラーの処理を行うオブジェクトを渡す事です。

そいで、promiseでは

//この行より上で定義したであろうpromiseオブジェクトgetPromiseを入れる。
let samplePromise = getPromise(); 

samplePromise.then(function(result){
// 取得成功時の処理
}).catch(function(error){
// 取得失敗時の処理
});

このようにpromiseのオブジェクトを準備してそれに対して失敗時、成功時の処理を用意する。また、promiseオブジェクトで用意されたメソッドしか使えないため処理のパターン化ができる。

といってもパターン化ができるが実感できるほど色々書き方が思いつかないのでふーんそうなんだぐらいでおいておく

Promiseを使う

Promiseを使うときはコンストラクタ関数Promise（rubyでいう組み込みライブラリ的な、すでに準備されているやつ）を使いpromiseオブジェクト（インスタンス）を作成して利用します。

let promise = new Promise(function(resolve, reject) {  //　ここの無名関数が慣れないので辛い。。
// 非同期の処理
// 処理が終わったら、resolveまたはrejectを呼ぶ
});

インスタンスメソッド

newで生成したpromiseオブジェクトは.thenとか.catchとかが使える。

JavaScript Promiseの本(v1) こちらを参考にそれぞれのメソッドには失敗した時や成功したときなど、決められた処理を引数に渡す。

Promiseを学んでいて気づいたこと

そもそも関数宣言、即時関数、アロー関数などの認識が甘いため自分の頭に読み込みにくくなっていることに気づく。

明日は初心に戻って、書籍『初めてのJavaScript』を読み込むことにする。

ただ断然昨日よりは割合あぁーやってることは割と単純そうだなと思えるようになってきたこともあるのでちょっとずつ学ぶ。

2021-08-22

【JavaScript】Promiseとasync/awaitを学ぶ

【JavaScript】Promiseとasync/awaitを学ぶ

JavaScriptでPromiseとasync/awaitを学んでいます。

しかし、これがわからないことだらけなので自分なりに噛み砕いて記事に残したいと思います。

学習参考urlはこちら。

Promise, async/await

JavaScript Promiseの本(v1)

Promiseとは？

Promiseは非同期処理を抽象化したオブジェクトとそれを操作する仕組みのことをいいます。

この時点でわからないの噛み砕きます。

同期処理？非同期処理？

非同期処理とは？同期処理との違い、実装方法について解説 | システム運用ならアールワークスへ

プログラミングにおいてコードは上から順に処理されていきます。

そこでいくつかの処理の塊が`順番`に処理されていくことを同期処理。

言い換えると順次処理と言います。

非同期処理はその順番の処理を待たずして並列で処理していくこと。

多分もっと複雑で深いと思うんですが、今は同期は順番に。非同期は並列にぐらいの感覚で掴んでおけばいいんではないでしょうか。

Promiseとは、その並列処理を操作する仕組みのこと。

最初に発見されたのは E言語におけるもので、並列/並行処理におけるプログラミング言語のデザインの一種です。

JavaScript Promiseの本(v1)

ということは念頭においておいた方が良さそうです。

そしてJavaScriptにおいてのPromiseはコールバックを利用する事が多いそうです。

コールバックとは？

コールバックとはある関数から、別の関数を引数として受け取り実行すること。

以下のページの動画がわかりやすかったのでどうぞ。

参考URL

コールバック関数とは何か？どういう時に使うの？

では改めてもう一度

改めてPromiseとは？？？

実行される処理に対してrejectとresoleveの処理分けを行tたり、Promiseで準備されているメソッドをコールバックされる側の関数で使ったりする処理の仕組みを持っているのがPromise。

並列するために使用されるオブジェクト。

とりあえずPromiseの概要は掴めたので明日はPromiseで使用するあれこれや仕組みを学ぶ。

2021-08-04

フィヨルドブートキャンプでの面談

学習中どうしても不安であったり、焦りが出て居たりして、学習にいい影響が出て居ないと感じて居たため、メンターさんに面談をお願いしてみました！

@rihoさん有難うございます！！

自分の現状や、やる事が自分の中で整理できた気がします！

自分の現状整理

・コード書いて考えるのは楽しい。

・今まで関わってきた仕事に何か貢献はしたい。

・もくもくと調べたり深掘りするのは好き。

・転職するまでにスピード重視のギアが入っているため、普段引っかかるような疑問も無意識に感覚で理解してスルーする傾向にある。

・無意識の自分と理解の自分の乖離

やること

・卒業までのスケジュールを逆算しきる。
漠然と不安に駆られて、スピード重視になってしまい、自分の悪い癖や見落とし、深堀の後回しが発生していることに対する対策。

・自分に返す言葉を作る
スピード重視になってしまったりする時や不安に駆られてしまったりする時に自分に言い聞かせて冷静に取り組めるように自分を仕向ける言葉を作る。

・もくもく会に参加する
しっかり他の人との交流する機会を作って自分の思考や傾向を自分の中で留めない。相互影響を出せる環境を自分で作る。

2021-08-02

railsアプリでフォロー機能

フォロー機能に苦戦中

実装ポイント

1. 自己結合のリレーションを作る

2. 多対多のリレーションを作る

3. 一意性をつける

4. dependentをつける

5. ルーティングをネストさせる

この中でややこしいのが1~3

自己結合の多対多を作るとき感じたのが

VPSを使ってる時みたいだなーと

一つのリソースを分割して違う役割を持たせたい。だけどリソース自体は一緒だから仮想でクラスを立ててリレーションをつける。

仮想で立てるしか似てないですね😅

フォロー機能はかなり難易度高めと感じます。

2021-07-24

sinatraでミニアプリを作成

フィヨルドブートキャンプでSinatraでミニアプリを作成中です。

・sinatraのルーティングを把握

Sinatra 入門 - Qiita

こちらを参考に把握。

・ルーティングの準備各それぞれのアクション(index, new, create, edit, update)

を仮定義。

・ビューファイルを準備

とりあえず簡単な物でいいので準備。後ほどインスタンスなどをビューファイルで使いたいのでerbファイルで作成。

・要件にDBを使用しないと条件があったため、何でやるか考える。

これが1番悩ましい。。とりあえずデータベースがないので投稿したメモはテキストベースでファイルに書き込むのが良いので、rubyでテキストファイルに書き込む手法を取り入れることを考える。

・indexアクションの定義

テキストファイルを準備したら、indexで表示させるサンプルを作り文字を取得しインスタンス変数を準備し格納。ビューファイルへeachを使用して展開させる。

ここら辺はrailsでの動きをそのままイメージしながら作る。

・newアクションの定義

form要素をnewのビューで準備してhttpメソッドやactionにurlを入れる。

2021-07-19

アウトプット記事に関する注意点

アウトプット記事を書く目的でブログを書いていました。

当初はやることが大事！！って思っていましたが、

これらの記事をみて

Qiitaで記事を公開するときに気を付けるべきマナーについて〜無断でネットや書籍の内容を丸写しするのはやめよう〜 - Qiita

ブログに技術書の内容を丸写しする問題点と、オリジナルなコンテンツを書くためのアイデア - give IT a try

ブログで「本の要約」は著作権法上ダメなのか？記事を書くときに気を付けること。 | 冷静と情熱のアイダ

ブログやYouTubeで本の紹介をする時の著作権。要約は違反？ - ガハック

マナーよくちゃんと書けてなかったんじゃなかろうかと不安にかられました。

めんどくさがらずちゃんと自分の言葉で落とし込む。

めんどくさがらず頂いた知識の場所を書く。

何事もめんどくさがってはだめ！

いやいや知らなかったんですで済まされない事ってニュース見ててもたくさんあるある。

全く悪い事してると思ってなかった事がそもそも悪い。

自分の意識してない行動で人を不快にはさせたくないものです。

今後肝に銘じてしっかり丁寧に誠実に真摯に生きよ。。

あんまり気にしすぎてもストレスになったりするので、気にするさじ加減も色々ですが、、、