searchカテゴリー選択
chevron_left

カテゴリーを選択しなおす

カテゴリーのご意見・ご要望はこちら
cancel
プロフィール
PROFILE

utouto97さんのプロフィール

住所
未設定
出身
未設定

自由文未設定

ブログタイトル
うとうとしながら。
ブログURL
https://utouto97.hatenablog.com/
ブログ紹介文
Webの技術を学んでいて、学んだことをまとめています。
更新頻度(1年)

25回 / 25日(平均7.0回/週)

ブログ村参加:2021/06/30

本日のランキング(IN)
フォロー

ブログリーダー」を活用して、utouto97さんをフォローしませんか?

ハンドル名
utouto97さん
ブログタイトル
うとうとしながら。
更新頻度
25回 / 25日(平均7.0回/週)
フォロー
うとうとしながら。

utouto97さんの新着記事

1件〜30件

  • RailsでN+1問題を検出する - Bullet

    RailsでN+1問題を検出するBullet Bulletを実際使ってみる (Rails) N+1問題を発生させる (TodoとUser) Bulletをインストール N+1を検出するとアラート発生 RailsでN+1問題を検出するBullet N+1問題とその解消方法について、以前まとめました。 そんなN+1問題を検出するライブラリがRailsにはあります。 Bulletというライブラリです。 github.com Bulletを実際使ってみる (Rails) N+1問題を発生させる (TodoとUser) 以前にN+1問題をまとめた記事のTodoとUserのN+1を検出してみます。 uto…

  • N+1問題 解消方法 (Rails)

    対象のN+1問題 N+1問題を解消する 対象のN+1問題 前回、触れたN+1問題を今回は解消します。 utouto97.hatenablog.com ↓で起こっているN+1が対象です。 <% @todos.each do |todo| %> <div> <%= todo.title %> : <%= todo.user.name %> </div> <% end %> N+1問題を解消する RailsでN+1を解消するには、includesを使えばいいです。 変更前は、↓のようにTodo一覧を取得しています。 def index @todos = Todo.all end これにinclude…

  • N+1問題

    前回、ORMについてまとめました。 SQLを書かなくてもDB操作を簡単にできて便利なORMですが、 N+1問題という問題があります。 N+1問題とは RailsでN+1問題を試す N+1を確認する N+1問題とは N+1問題とは、ループ処理の中で、1回ずつクエリを発行してしまう問題です。 これにより、無駄なクエリが発行され、パフォーマンスの低下を招きます。 より具体的にいうと、Todoの一覧を取得し、Todo一つずつの担当ユーザー(User)を表示しようとするとき ループを使って記述すると、合計でN+1回のクエリが発行されます。 Todoの一覧を取得(1回) Todoの担当ユーザーを取得(N回…

  • ORMとはなんぞや

    ORM (オブジェクト関係マッピング) とは 各言語の有名ORM ORM (オブジェクト関係マッピング) とは ORMとは、Object-Relational Mappingの頭文字をとったものです。 その名前からわかる通り、オブジェクトと関係(関係データベース、RDB)とのマッピングを行うものです。 ここでの、オブジェクトとはオブジェクト指向におけるオブジェクトのことであり、関係とはRDBのことです。 多くのプログラミング言語はオブジェクトを扱うので、そのオブジェクトをRDBに保存できるように、対応付けを簡単にするためORMを使います。 もっと簡単にいうと、SQLを直接書くことなく、オブジェ…

  • Babel7の設定ファイル

    前回、Babelでトランスパイルを試してみました。 utouto97.hatenablog.com このとき、利用したBabelのバージョンは7です。 $ > ./node_modules/.bin/babel --version 7.14.5 (@babel/core 7.14.6) Babel7では、設定ファイルとして.babelrcファイルだけではなく、babel.config.jsファイルも利用できるようです。 そこで、.babelrcとbabel.config.jsの違いや使い分けについて調べてみました。 Babelのドキュメントで言及されていました。 babeljs.io Proj…

  • Babelでトランスパイル! - JavaScript入門

    Babelとは Babelを使ってみる Babelのインストール presetを設定 トランスパイルする Babelとは BabelはJavaScriptのトランスパイラです。 トランスパイラは、あるプログラミング言語で書かれているプログラムを違う言語もしくは違うバージョンの言語のプログラムに変換します。 Babelは、JavaScriptのプログラムをJavaScriptのプログラムに変換します。 より具体的には、新しいJavaScriptのプログラムを、古いJavaScriptのプログラムに変換します。 なぜ、新→古の変換の必要があるのか、というと、ブラウザの対応状況がそれぞれ異なるからで…

  • ES modules と CommonJS - JavaScript入門

    ES modules と CommonJS import/export (ES modules) と require/exports (CommonJS) ES modules と CommonJS JavaScriptで、モジュールという仕組みがあります。 外部ファイルの読み込み/書き出しを行うための仕組みです。 import/exportが、モジュールの仕組みの一つです。 モジュールの実現方法として、主なものがES modulesとCommonJSです。 ES modulesは、ES2015で策定された仕組みです。 ブラウザで実行されるJavaScriptでもNode.jsでも利用できます…

  • tmp

    tmp - うとうとしながら。

  • Expressでルーティング処理 (Node.js)

    Expressでルーティング処理を行う express.Router Expressでルーティング処理を行う ExpressのWebサーバーで、ルーティング処理を行うのはとても簡単です。 次のように初期化したappのgetメソッドやpostメソッドで設定できます。 var express = require('express') var app = express() app.get('/', (req, res) => { res.send('Hello world!') }) app.post('/', (req, res) => { res.send('Hello Post') }) a…

  • Expressでサーバー構築 (Node.js)

    Expressとは Expressをインストールする ExpressでHello world Expressとは Expressとは、Node.jsのWebアプリケーションフレームワークです。 RailsのNode.js版みたいなイメージです。 ルーティングやリクエストボディのパースなどもできます。 また、ミドルウェアを利用して認証なども行えます。 Expressには、多くのライブラリが存在し、npm等で簡単にインストールすることができます。 Expressをインストールする Expressはnpmを使って簡単にインストールすることができます。 まず、npmプロジェクトを作成します。 $ np…

  • DockerでNode.js環境構築

    はじめに Dockerを使ってNode.js環境を構築する はじめに Dockerを使ってNode.js環境を構築する 終わり

  • docker グループ

    Dockerを使うためには、dockerコマンドを多用しますね。 $ docker ps $ docker build $ docker run $ docker logs ですが、dockerコマンドを実行するためには、権限が必要です。 毎回sudoをつけるのも大変ですし、sudoユーザーじゃないユーザーはdockerを使えないことになってしまいます。 実は、Docker用のグループdockerが存在しています。 このdockerグループに入っているユーザーは、dockerコマンドを実行することができます。 次のコマンドで現在のユーザーをdockerグループに追加できます。 $ sudo g…

  • Node.jsでhttpサーバー - JavaScript

    Node.jsでhttpサーバーを秒で建てる GETパラメータを処理する。 Node.jsでhttpサーバーを秒で建てる 前提として、Node.jsがインストール済みであるとします。 では、速攻でhttpサーバーを構築します。 まず、ファイルapp.jsを作成します。 $ touch app.js ファイルを編集します。 次のようにします。 1 const http = require('http'); 2 3 const hostname = '127.0.0.1'; 4 const port = 3000; 5 6 const server = http.createServer((req…

  • Node.js とは - JavaScript入門

    JavaScriptはブラウザ上で動作する JavaScriptを実行できるアプリケーションNode.js Node.jsでHello world! JavaScriptはブラウザ上で動作する JavaScriptはHTMLやCSSで記述されたWebページに動きをつけるために、ブラウザ上で実行可能な言語でした。 ChromeやFirefoxなどのブラウザ毎に、JavaScriptを実行できるエンジンが実装されており、それによりJavaScriptは動作します。 JavaScriptというプログラミング言語を習得しても、ブラウザ上で動作するアプリケーションしか開発できませんでした。 JavaSc…

  • asyncとawait - JavaScript

    JavaScriptのasync JavaScriptのawait JavaScriptのasync JavaScriptで非同期処理を書く方法は、コールバック関数、Promise、そしてasyncがあります。 asyncは関数宣言につけることができ、asyncを付けた関数は非同期で処理されます。 async function f() { 何らかの処理 } asyncを付けた関数はPromiseを返すようになります。 そして、関数内でreturnした場合は、Promiseのresolveが呼ばれるように変換されます。 また、関数内でthrowした場合は、Promiseのrejectが呼ばれるよ…

  • 非同期処理 (Promise) - JavaScript入門

    JavaScriptの非同期処理 非同期処理とコールバック関数 JavaScriptにはPromiseがある JavaScriptの非同期処理 JavaScriptでは、非同期処理を行うことができます。 非同期処理とは、その処理の完了を待たずにほかの処理が実行される処理のことです。 タイマーや外部APIとの通信のように、待ちが発生してしまう処理を非同期で処理することで、処理が止まってしまわないようにします。 イメージを載せておきます。 そして、非同期処理の完了後に何か処理をしたい場合があると思います。 (例えば、APIをコールしてその結果を使いたい場合) そのようなときに、利用できる方法がJa…

  • コールバック関数 - JavaScript入門

    JavaScriptのコールバック関数と高階関数 高階関数とコールバック関数の例 コールバック関数は非同期処理で使われる setTimeoutの例 JavaScriptのコールバック関数と高階関数 JavaScriptでは、関数はオブジェクトの一種である。 そのため、関数の引数を関数とすることもできます。 そして、関数を引数にとる関数を高階関数といいます。 逆に、関数に引数として渡される関数をコールバック関数といいます。 ↓はコールバック関数のイメージです。 真ん中の白い関数は、引数の一つとして黄色い丸のfunctionを受け取っています。 つまり、真ん中白い関数が高階関数で、黄色い丸のfun…

  • varとletとconst - JavaScript入門

    JavaScriptの変数・定数 varとletとconstの比較 再代入と再定義 varとletとconst 巻き上げについて JavaScriptの変数・定数 JavaScriptにもほかの言語同様に変数と定数があります。 今回は、その変数と定数の宣言方法をみていきます。 変数の宣言はいくつか方法があります。 それらの違いで重要なものとして、再代入と再定義があります。 varとletとconstの比較 再代入と再定義 JavaScriptの変数・定数の宣言方法の違いで、再代入と再定義が重要になってきます。 再代入 再代入可能は、その変数への代入が何度でも許されていることになります。 逆に、…

  • 関数 (function) - JavaScript入門

    JavaScriptで関数を宣言する function を使う 無名関数 アロー関数を使う JavaScriptで関数を宣言する 関数は、引数をとり、処理を行い、値を返すものです。 イメージはこんな感じ 関数は、何かしらの処理をします。 ここでは、足し算を行う関数を考えます。 例えば、引数として2と3を渡した場合、関数は処理の結果5を返します。 JavaScriptで関数を宣言(定義)する方法はいくつかあります。 それらをまとめていきます。 ここでは、二つの引数をとり、それらを足した結果を返す関数を宣言します。 function を使う 一つ目の方法は、functionを使う方法です。 以下の…

  • forEachの使い方 - JavaScript入門

    JavaScriptのforEach forEachでインデックスも取得する JavaScriptのforEachから途中で抜ける (breakは使えるのか) JavaScriptのforEachでbreakは使えない breakの代替手段 continueについて JavaScriptのforEach JavaScriptでは、forEachを使ってループを記述することもできます。 ただし、JavaScriptのforEachは、配列(Array)のメンバメソッドであるため、配列(Array)でしか利用することができません 以下のように使います。 (arrは配列) arr.forEach(値…

  • 繰り返し処理あれこれ (for, while, for) - JavaScript入門

    JavaScriptの繰り返し処理 JavaScriptでforを使う for (基本) for ... in ~ for ... of ~ JavaScriptでwhileを使う JavaScriptの繰り返し処理 JavaScriptでは、ほかのプログラミング言語と同様に、forとwhileを使って繰り返し処理(ループ処理)を記述できます。 また、配列(Array型)なら、forEachを使って一つ一つ処理することができます。 forEachを使えば、インデックスと値のペアを一つずつ取得することもできます。 今回は、forとwhileの使い方をまとめます。 JavaScriptでforを使…

  • Git 入門④

    git merge Fast-forward Fast-forwardではないマージ コンフリクト git merge git mergeで複数のブランチを一つにまとめることができます。 前回↓も少し使ってみました。 utouto97.hatenablog.com Fast-forward 前回のマージは以下のパターンになります。 この場合だと、masterブランチをdocブランチのところまで進めるだけになります。 特に編集も必要ないです。 Fast-forwardではないマージ 以下のような場合、Fast-forwardとはなりません。 この場合は、masterブランチとdocブランチがそれ…

  • Git 入門③

    git branch 新しいブランチを作成 ブランチでファイルを編集する ブランチを統合する git branch Gitでは,変更の履歴をつないで管理します。 その一つ一つをブランチといいます。 ブランチは途中から分岐したり、また一つになったりすることができます。 これにより、開発がしやすくなります。 まず、ブランチの一覧を確認してみます。 この時点でファイルはREADME.mdのみで中身は空です。 $ git branch * master masterというブランチが一つあることが確認できました。 新しいブランチを作成 続いて、このmasterブランチからdocブランチを作ります。 $ …

  • rakeを使う 続き

    ↓の続き utouto97.hatenablog.com 試してみる デフォルトタスク ネームスペース cleanタスク 試してみる デフォルトタスク task default:を設定することで、デフォルトで実行されるタスクを設定することができます。 デフォルトタスクは、rakeコマンドが引数なしに実行された場合に実行するタスクです。 前回、作成したsample_task1をデフォルトタスクに設定してみます。 task default: :sample_task1 引数なしでrakeコマンドを実行してみます。 $ docker-compose run ruby sh -c "cd /work …

  • rakeを使う

    Rakefile 試してみる 実行環境 シンプルなタスク 依存のあるタスク 引数をとるタスク Rakefile rubyのmakeがrakeです。 そして、ruby版のMakefileがRakefileとなります。 このRakefileには、Rubyを使ってタスクを記述し、rakeコマンドから実行することが可能です。 試してみる 実行環境 まずはrakeを動かす環境を準備します。 Dockerを使って、サクッと準備します。 docker-compose.ymlを作り、以下のようにします。 version: "3" services: ruby: image: ruby volumes: - .…

  • idをランダムな文字列にする

    はじめに SecureRandom uuid hex base64 Railsでidをランダムな文字列にする はじめに Railsを使っているとデータのidは、デフォルトでは整数の連番になります。 この場合、URLにパラメータとしてidを含む場合 (例えば、https://hostname/api/v1/article/123) に、idの数字を前後の数字に変えることで、ほかのデータに簡単にアクセスできてしまいます。 また、idの最大値でエントリ数がわかってしまいます。 一つ例を挙げると、ユーザーのidの最大値がわかれば、そのサービスのユーザー数がわかってしまいます。 このような理由から、id…

  • railsコマンドとrakeコマンド

    Rails のこと調べてたら、よくrakeコマンドなるものが使われていました。 しかも、rakeコマンド使うように書かれているところも、railsコマンドでできてしまいます。 この二つのコマンド、何なんだろうと思い調べてみました。 まず、railsコマンドですが、こちらは基本的には新規Railsアプリケーションの作成を行うコマンドのようです。 アプリケーションに最低限必要なフォルダやファイルが自動的に生成されます。 次に、rakeコマンドですが、こちらはRubyで記述されたビルドツールです。 データベースの作成やマイグレーションなどのデータベース操作を実行できます。 その他、ライブラリのバージ…

  • Rails で ToDo アプリをつくる⑨ (Rails 入門)

    ↓の続き utouto97.hatenablog.com 今回やること Herokuアプリを作成 Postgresの追加 アプリをデプロイする 今回やること ここまで作ってきたToDoアプリをHerokuにデプロイします。 Herokuはクレジットカードを登録すると、フリープランでずっと無料で使うことができます。 (クレジットカード登録済でフリープランでは、一か月あたり1000dynoもらえます。 これは、一つのアプリで1000時間分ということになります。 ということで、アプリ一つであれば無料でずっと使えます。) 会員登録とクレジットカードの登録は完了してる前提で、ここから先を進めていきます。…

  • Rails で ToDo アプリをつくる(Rails 入門)目次

    Railsの練習として、ToDoアプリを作って記事にしたので、その目次を作っておきます。 ソースコード github.com アプリ https://rails-todo--app.herokuapp.com/ 目次 ① どんなToDoアプリを作るか & 環境構築 utouto97.hatenablog.com ② ToDo一覧を表示する (CRUDのR) utouto97.hatenablog.com ③ ToDoの新規作成 (CRUDのC) utouto97.hatenablog.com ④ ToDoの削除 (CRUDのD) utouto97.hatenablog.com ⑤ ToDoのス…

  • Rails で ToDo アプリをつくる⑧ (Rails 入門)

    ↓の続き utouto97.hatenablog.com 今回やること フィルタリング機能の追加 今回やること 今回はフィルタリング機能を追加します。 ToDoの状態 (status) によってフィルタリングします。 すべて表示、In progressのみ、Completeのみ、の3パターンを実装します。 フィルタリング機能の追加 まずは,コントローラがパラメータをインスタンス変数に保存します。 indexアクションの中に追記してます。(pre_editアクションも) @filter = params[:status] 次に、フィルタリングようのボタンを設置します。 現在のパラメータに応じて、…

カテゴリー一覧
商用