しん

勉強したことを書き連ねます

しん

勉強したことを書き連ねます

  • プログラミング

    プログラミングの学んだことの発信

  • 新規体験

    いろいろ体験して感じたことを記述する。

[TypeScript, JavaScript] Promise.allで特定の関数の返り値を受け取る方法

TypeScriptやJavaScriptを書いてる人はPromise.allを多く使うと思います。 その中で一つのメソッドだけ返り値を受け取りたい時ってあると思います。 そんな時は以下のようにすればOK。 const {2: hogehoge} = await Promise.all([ addHogeHoge(), addFugaFuga(), getHogeHoge(),]); このようにすればgetHogeHoge()メソッドだけ返り値を受け

しん

    • [AWS] PCのChromeからEC2へのアクセスのみなぜか遅かったが解決した

      公開したサイトにChromeからアクセスしたら画面表示まで2分くらいかかった。NuxtやDockerみたいな今時技術をうまく使えてないのかな。。。と思ってましたが原因は違うところにありました。 ズバリ原因はELBで設定したサブネット二つのうち一つがインターネットゲートウェイに接続されていなかったからでした。 直しましたマネジメントコンソールにログインして、VPC->サブネット->ELBに設定されているサブネットをクリック->ルートテーブル設定で両方のサブネットをインターネ

      しん

      • [Nuxt.js] font-awesomeをNuxtで使用する

        基本的には公式ドキュメントに載っていますが、まとめます。 以下、公式HP セットアップNuxtプロジェクトで以下のコマンドを実行し、インストールします。 $ npm i nuxt-fontawesome$ npm i @fortawesome/fontawesome-svg-core @fortawesome/vue-fontawesome もしかしたら2行目のコマンドはいらないかもしれませんが、自分は行いました。 つづいてnuxt.config.jsに以下を追記しま

        しん

        • [JavaScript, TypeScript] async/awaitで非同期処理を同期処理のように順番に実行する

          javascriptって非同期での処理が多いため、上に書いてある処理が終わったら次の処理にいくといった具合に実行されるわけではないというのを最近知りました。実際にこれではまったときがありました。 しかし、asyncとawaitを使用すると簡単に同期処理っぽく順番に処理させることができます。 まずは順番通りに行かない例こんな感じです。 const example1 = () => { setTimeout(()=>{ console.log("example1") }

          しん

        [TypeScript, JavaScript] Promise.allで特定の関数の返り値を受け取る方法

        しん

        • [AWS] PCのChromeからEC2へのアクセスのみなぜか遅かったが解決した

          しん

        • [Nuxt.js] font-awesomeをNuxtで使用する

          しん

        • [JavaScript, TypeScript] async/awaitで非同期処理を同期処理のように順番に実行する

          しん

        マガジン

        • プログラミング
          21本
        • 新規体験
          2本

        記事

          [JavaScript] ドット3つの意味 {...foo}みたいなやつ

          ドット3つで{...foo}みたいに表しているものがあったので意味を調べました。 スプレッド構文スプレッド構文というみたいです。 使い方は const foo = [1, 2, 3]const bar = [...foo, 4, 5]console.log(bar)// => [1, 2, 3, 4, 5] って感じです。オブジェクトでも使えます。 const foo = {a: "A", b: "B"}const bar = {...foo, c: "C"}con

          しん

          [JavaScript] ドット3つの意味 {...foo}みたいなやつ

          しん

          [JavaScript] 展開代入について const { data } = ...ってやつ

          Vue.jsやReactでよく見かけるconst { data } = ほにゃららってやつがどういう処理を行なっているのか調べました。 展開代入 展開代入と呼ぶらしいです。 実際の式を見て内容を理解しましょう。 まずはこの式 const user = { name: "shin", email: "shin@gmail.com", password: "0000"}const name = user.nameconsole.log(name) u

          しん

          [JavaScript] 展開代入について const { data } = ...ってやつ

          しん

          [Nuxt.js × Rails API] axiosでRailsへ通信する際はCORSの設定が必要

          NuxtとRails APIモードを用いたアプリ作成法を学んでいるのですが、NuxtからRailsへアクセスする際にはCORSと言われるものが重要みたいです。 CORSとはCORSとはCross-Origin Resource Sharingの略です。 AJAX通信でことなるドメインへアクセスする際に、手軽に安全にアクセスするための仕様となります。 より詳しい説明は以下が参考になります。 Nuxt側の記述Nuxt側はaxiosでPostリクエストを送ります。 ユーザ

          しん

          [Nuxt.js × Rails API] axiosでRailsへ通信する際はCORSの設定が必要

          しん

          [Nuxt.js] propsの使い方

          備忘録としてvue.jsのpropsの使い方を記録します。 propsの役割propsは親から子へデータを伝える際に使用します。 使い方// index.vue (親コンポーネント)<template> <div> <AddTodo @submit="addTodo" /> <TodoList :todos="todos" /> </div></template><script>import AddTodo from '@/components/AddTodo';

          しん

          [Nuxt.js] propsの使い方

          しん

          [Nuxt.js] $emit使い方

          備忘録のために$emitの使い方を簡単にまとまる。 $emitの役割$emitは子コンポーネントから親コンポーネントへの通信です。 イメージ的には子コンポーネントでイベントを定義するものです。 使い方ボタンがクリックされ、投稿内容を親コンポーネントへ渡す例です。 // AddTodo.vue (子コンポーネント)<template> <v-form> <v-container> <v-row> <v-col cols="12" md="4">

          しん

          [Nuxt.js] $emit使い方

          しん

          [Git] Commit failed - exit code 1 receivedが出た時

          備忘録として残します。 なぜ起こったか？Nuxt.jsとRailsのAPIモードを用いてフロント、サーバーを分けたアプリケーションを作ろうとしたら表題のエラーが出てコミットできなくなりました。 つまり $ mkdir spa-app$ cd spa-app して spa-app $ rails new rails-project-api --apispa-app $ npx create-nuxt-app nuxt-project をしたってことです。 これでs

          しん

          [Git] Commit failed - exit code 1 receivedが出た時

          しん

          [Ruby] nilガードの使い方

          nilガードがリファクタリングに使えそうなので調べてみました。 nilガードとは？nilガードは左辺がnilもしくはfalseの場合に代入を行い、左辺にそれ以外の値が入っているときは特に代入を行わない文法となります。 age ||= 12 のような書き方をします。 ageがnilなら12を代入し、すでに何かしらの値が入っている場合は代入を行いません。 ここで気をつけるべきはnilかfalseでないと代入が行われないということです。 ""や{}などがすでに入っている場

          しん

          [Ruby] nilガードの使い方

          しん

          [Ruby] 配列の後ろ側要素のシンプルな呼び方

          配列の末尾をlengthやsizeメソッドを使って呼び出していませんか？ もっと簡単に指定できます。 例えば以下の配列から9を呼び出すとき nums = [1,2,3,4,5,6,7,8,9]puts nums[nums.length - 1]#=> 9 こうやってませんか？ 実は nums = [1,2,3,4,5,6,7,8,9]puts nums[-1]#=> 9 これでできます。 範囲指定も nums = [1,2,3,4,5,6,7,8,9]puts

          しん

          [Ruby] 配列の後ろ側要素のシンプルな呼び方

          しん

          [Ruby] ヒアドキュメントとは？調べてみた

          たまにRubyで <<"EOS"という記述を見るので調べてみました。 ヒアドキュメントどうやらこれはヒアドキュメントというものらしいです。 <<EOS ~ EOSの間を文字列として改行を含めて認識してくれるらしいです。 まとまった文字列を記載するのに便利みたいです。 name = "shin"puts <<EOS 私の名前は #{name} です。EOS これは puts " 私の名前は\n shin\n です。\n" と一緒です。 EOSをシングル

          しん

          [Ruby] ヒアドキュメントとは？調べてみた

          しん

          プログラミング言語のjavaの名前の由来

          #名前の由来 いろんなところで使用されているjavaというプログラミング言語。 この名前の由来を簡単に調べてみました！ 実は名前の由来は明確にはなっていないようなのですが、二つの説が有力のようです。 1. 開発者たちが集まっていたコーヒーショップのメニュー一番有力な説です。 タイトル通り開発者たちの集まっていたコーヒーショップに"java coffee"というコーヒーがあったようです。ジャワコーヒーと読むらしいですが、プログラミング言語はジャヴァと読みます。 そし

          しん

          プログラミング言語のjavaの名前の由来

          しん

          [Ruby] RGB値を色の三属性に変換するメソッド 明度編

          個人アプリ作成していて、RGB値、つまり色の三原色を、色の三属性に変換するメソッドを作成しました。 今回は明度を導くメソッドを紹介します。 色の三原色とは色の三属性とは色相、明度、彩度を表します。 色相とはその色の"色味"を表します。 明度はその色の明るさを表します。色の反射率に関係していて、白は明度が高く、黒は明度が低くなります。 彩度はその色の鮮やかさを表しています。オレンジなどの派手な色は彩度が高く、白や黒のようなくすんだ色は彩度が低くなります。 明度の計算

          しん

          [Ruby] RGB値を色の三属性に変換するメソッド 明度編

          しん

          [Ruby] RGB値を色の三属性に変換するメソッド 彩度編

          個人アプリ作成していて、RGB値、つまり色の三原色を、色の三属性に変換するメソッドを作成しました。 今回は彩度を導くメソッドを紹介します。 色の三属性とは色の三属性とは色相、明度、彩度を表します。 色相とはその色の"色味"を表します。 明度はその色の明るさを表します。色の反射率に関係していて、白は明度が高く、黒は明度が低くなります。 彩度はその色の鮮やかさを表しています。オレンジなどの派手な色は彩度が高く、白や黒のようなくすんだ色は彩度が低くなります。 彩度の計算

          しん

          [Ruby] RGB値を色の三属性に変換するメソッド 彩度編

          しん