さあ、車を作ることを想像してみてください。 まず、必要な部品を考えてみます。 エンジン 車体 シャーシ シャフト タイヤ などなど はじめに、これらの部品の一つ一つを製造します。 そして、これらの部品を組み立てると、車が完成しました。 では、完成した車にのってドライブに行こうと、車に乗り込んでエンジンキーを回しました。 しかし、なにも起こりません。そう、エンジンが点かないのです。 さて、エンジンが点かない原因はどこにあるでしょうか。 車に使ったいずれかの部品が故障しているのか、もしくは、それぞれの部品を組み合わせた相性が悪かったのか。 組み立てる前に一つ一つの部品に不具合がないか確認をしてから…
TL;DR CMD ["command", "param1", "param2"]の形式で記述する execコマンドを使う Dockerコンテナの終了が遅い 原因 解決策 まとめ Dockerコンテナの終了が遅い docker-compose downやdocker stopしたときに、Dockerコンテナの終了が遅いことがあります。 (数秒の時間がかかることがあります。) しかも、docker-compose ps で確認してみると、xxxxx exited with code 137となっており、SIGKILLにより終了しています。 docker-compose down が遅いと、作業に…
TL;DR docker runでは-itオプションをつける docker-composeではyamlにtty: trueとstdin_open: trueを書く 処理が終わるとDockerコンテナは終了 Dockerコンテナを起動したままにするにはitオプション Docker Compose の場合は設定ファイルに書く まとめ 処理が終わるとDockerコンテナは終了 通常、dockerコンテナは起動したらそのまま終了してしまいます。 DockerfileにCMDを指定することで、コマンドを実行させることができますが、その指定されたコマンドが終了すると、やはりdockerコンテナは終了してし…
オープンソースでFirebaseの代替となる？ 「Supabase」
Friebase は Google のサービスですが、オープンソースで利用できる Supabase というサービスがあります。 TL;DR Supabase使うと簡単にバックエンド構築可能 Postgres Database, Authentication, instant APIs, Realtime subscriptions, Storage が使える Functions も近く実装予定 無料枠も結構ある！ Supabase とは Supabase と Firebase との違いは？ Supabase の料金プランは？無料枠はある？ Supabase とは Supabase は、オープン…
Firebase APIKey は公開してもいい？危なくない？
Firebase の API Key は公開してもいい 何なら誰でも見れる場所に公開されている ただし、権限の設定には注意（特に Firestore)
約半年ほど学んできて WEBの勉強を始めて半年以上が経ちました。 そこで一番考えたことは、「何をどの順で学べばいいか？」ということです。 私は独学で、本も買わずにネットの情報を拾いつつ手を動かして勉強をしてきました。 その第一歩の目標としては、バックエンドもフロントエンドも開発し、AWS等にデプロイし、動くものを作ることでした。 そこで、さっそく取り掛かろうと思うのですが、いきなり迷いがありました。 使う言語とフレームワークの選択肢が多すぎて、何を選んでいいのかわからない、ということです。 結局のところ、自分が使ったことある言語、または、自分が使ったことある言語に似ている言語を使うことにきめ、…
TL; DR 何も考えず無料で使いたい + Cloud Functions は使わない → Spark (無料) プラン きちんと管理する → Blaze (従量課金) プラン Cloud Functions を使う → Blaze (従量課金) プラン Firebase のプランは二つ Firebase で Cloud Functions を使うなら、Blaze (従量課金) プラン Firebase の Blaze (従量課金) プランは要注意 ! 何も気にせず無料で使うなら Spark プラン Cloud Functions 使うなら Blaze プラン Firebase のプランは二つ…
Firebaseって聞いたことはありますか？ ウェブアプリを開発するのに非常に役立つサービスが勢揃いのクラウドサービスです。 Firebaseとは Firebaseが提供するサービス Firebaseとは Firebaseとは、Googleが提供するBaaS (Backend as a Service) で、 Webアプリやスマホアプリの開発プラットフォームです。 Ruby on Rails 等のフレームワークを使って開発されることの多いバックエンドを、Firebaseを使うことで容易に構築することができます。 プログラムを書く必要もなく、Firebaseコンソールでポチポチとしていくだけです…
TypeScript きほんの「き」 TypeScriptを書く上でとりあえずこれを知っておけばいいというのをまとめてみました。 変数に型をつける 配列の型宣言 自分で型を宣言する 変数に型をつける TypeScriptは、JavaScript + 型 みたいなものです。 utouto97.hatenablog.com ですので、JavaScriptのプログラムに型をつけていきましょう。 まずは、変数からみていきます。 変数には、その変数の宣言時に型をつけることができます。 その方法は非常に簡単で、変数名の後ろに : を挟んで型名を書くだけです。 const msg : string = "H…
TL;DR TypeScriptは静的型付けなJavaScriptで、保守性向上に貢献 TypeScriptとは TypeScriptはコンパイラ!? どうしてTypeScriptが必要？ TypeScriptとは TypeScriptとはなんでしょうか。 とりあえず、Wikipediaを見てみましょう。 TypeScript はマイクロソフトによって開発され、メンテナンスされているフリーでオープンソースのプログラミング言語である。TypeScriptはJavaScriptに対して、省略も可能な静的型付けとクラスベースオブジェクト指向を加えた厳密なスーパーセットとなっている。 TypeScri…
Composition APIを使って開発をするとき、はじめの一度だけ実行したい処理の記述方法をまとめていきます。 マウント直後に実行する ライフサイクルフック マウント直後に実行する はじめの一度だけ実行したい場合、DOMが作成されマウントされた直後に、処理を実行することで、はじめの一度だけ実行できます。 そして、Composition API では、onMountedを利用することで、マウント直後に実行する処理を記述することができます。 onMountedは、Compostion API の setup()内に記述します。 そして、onMountedには、実行したい関数を渡すことで、マウン…
Vue 3 でComposition API が追加され、ロジック毎にまとめて記述できるようになりました。 そんな Composition API の基本的な使い方をまとめていきます。 HTML は <template>タグ内に記述 変数や関数を使う HTML は <template>タグ内に記述 まずは、HTMLの記述ですが、これはVue 2の時と変わらず、テンプレートを使用することができます。 <template></template>内に、HTMLをほぼ通常通り記述することができます。 Reactのように、JSX記法を新たに覚える必要はありません。 一般的なHTMLと、記述が異なる点もあ…
Vue はバージョン3がリリースされていますが、Vue 2 もまだまだ使われているようです。 Vue CLI でプロジェクト作成時も、Vue のバージョンを2にするか3にするか、問われます。 Vue のバージョン3でどんな機能が追加されたのでしょうか。 バージョン3での変更点 Composition API Teleport バージョン3での変更点 Vueはバージョン2からバージョン3へのアップデートにより、新機能の追加、破壊的な変更がいくつも行われています。 注目すべき新機能の中に、Composition API や Teleport などがあります。 また、Global API も破壊的な…
■ - うとうとしながら。
Vue Router Vue Router Vueでは、シングルページアプリケーション (SPA) をつくることができます。 SPAでは、ページは1枚だけです。 しかし、URLをもとに複数の画面を表示したいときもあります。 そんなときに、Vue Router を使ってルーティングを行います。 router.vuejs.org Vue Router は、VueにおけるSPAで、ルーティングを制御するためのプラグインです。 Vue Routerを使うことで、SPAに複数ページを疑似的に実現することができます。 Vue Routerのインストールは、Vue CLI を使って簡単にできます。 一つは、…
■ - うとうとしながら。
Vuetifyを使ってみる② コンポーネント（ボタンとカード）
ドキュメントに詳しく書いてある 試してみる ボタン (Button) カード (Card) 前回、Vuetifyをインストールしたので、今回はコンポーネントをいくつか使ってみたいと思います。 utouto97.hatenablog.com ドキュメントに詳しく書いてある Vuetifyには、ボタンやリスト、表（table）など様々なコンポーネントがあります。 これらのコンポーネントの使い方は、ドキュメントに詳しく書かれています。 vuetifyjs.com 試してみる ボタン (Button) まずは、ボタンを試してみます。 シンプルなボタンは以下のように記述します。 <v-btn>シンプルな…
Vuetifyを使ってみる 環境はVue 2 Vuetifyをインストールして使ってみる Vuetifyを使ってみる 環境はVue 2 今回は、Vuetifyを導入していきます。 VuetifyはVueで使えるマテリアルデザインフレームワーク (UIフレームワーク) です。 github.com 公式のドキュメントも充実していて、導入は簡単に行えます。 vuetifyjs.com VuetifyはVue 3には対応しておらず、Vue 2のみに対応しているようです。 Vuetifyをインストールして使ってみる Vue CLI で Vue 2をインストールし終わった状態から作業を始めることを想定し…
Vueでスタイルを設定 Vueで使えるUIフレームワーク Vueでスタイルを設定 Vueでスタイルを設定するには、<style></style>を追加してその中に書いていくことができます。 また、テンプレート内のタグにクラスやIDを設定して、クラスやIDに対するスタイリングを<style></style>に書くこともできます。 <template> <div> <h1>Vue あかいろ</h1> </div> </template> <script> export default { name: 'App', } </script> <style> h1 { color: red } </st…
Dockerとdocker-composeでVueプロジェクトを作成 Dockerfile docker-compose.yml Dockerイメージをビルド Vue CLIを使ってプロジェクト作成 コンテナを起動 Dockerとdocker-composeでVueプロジェクトを作成 Dockerとdocker-composeを使って、Vueプロジェクトを作成してみます。 Vueプロジェクトの作成は、Vue CLI を使うと簡単にできます。 まずは、Dockerfileとdocker-compose.ymlの二つのファイルを準備します。 Dockerfile FROM node:alpine …
v-forを使ってみる v-forを使ってみる v-forを使って、リストを表示してみます。 まずはリストを準備します。 data() { return { items: [ { id: 1, name: "apple" }, { id: 2, name: "orange" }, { id: 3, name: "peach" }, { id: 4, name: "grape" }, { id: 5, name: "melon" }, ] } } v-forを使って、↑をリスト表示します。 <ul> <li v-for="item in items" :key="item.id"> {{ ite…
t
v-for v-forをオブジェクトに使う v-for Vueでは、v-forを使うことで、配列の要素を一つずつ処理することができます。 例えば、v-forを使うことで、配列の要素をリスト表示するための<li>タグを繰り返し生成することができます。 v-forでは、value in list のようにすることで、listの要素を一つずつvalueにバインドして利用できます。 いくつかのプログラミング言語にあるforeachのようなイメージです。 実際には↓のように記述します。 <ul id="example-1"> <li v-for="item in items" :key="item.me…
v-if v-ifを使ってみる v-if v-ifで条件を指定することで、その条件がTrueの場合のみ、その要素が描画されます。 つまり、v-ifを使うことで、表示する要素を切り替えることができます。 v-ifは、v-elseやv-else-ifと組み合わせて使うことができます。 条件を満たしている場合はA、それ以外の場合はBを表示するといったことが実現できます。 参考 条件付きレンダリング — Vue.js v-ifを使ってみる 前回作ったカウンターに、v-ifで何かを表示してみます。 前回のカウンタは↓ utouto97.hatenablog.com カウンターの値が10以上のとき、「10…
Vue でカウンタコンポーネントを作る コンポーネントで使うデータを宣言 コンポーネントで使うメソッドを宣言 カウンタ完成 Vue でカウンタコンポーネントを作る カウンタコンポーネントを作成していきます。 ファイルは、src/components/Counter.vueとします。 コンポーネントで使うデータを宣言 Vueのコンポーネント内で使うデータは、export default内で、data()メソッドの返り値とする必要があります。 ここでは、カウンタ用のcountを宣言します。 data() { return { count: 0 }; }, これで、テンプレートの中で、countを利…
Vue CLI で作ったプロジェクトのファイルを見てみよう カスタマイズしてみる Vue CLI で作ったプロジェクトのファイルを見てみよう まずは、main.jsを見てみましょう。 import { createApp } from 'vue' import App from './App.vue' createApp(App).mount('#app') createApp() は、Vueのインスタンスを作成することで、Vueのアプリケーションが始まります。 App.vueをインポートして、mount()してますので、App.vueを見てみます。 <template> <img alt="…
tmp - うとうとしながら。
tmp - うとうとしながら。
Vueでルーティング - うとうとしながら。
tmp - うとうとしながら。
Vue.js Vue.jsの特徴 テンプレート構文 リアクティブシステム Vue.js Vue.jsはシングルページアプリケーションを構築できるWebフレームワークです。 Vue.jsはオープンソースなフレームワークで、コミュニティ主体で開発が進められています。 Vue.jsを実行するには、Node.jsを必要とします。 Vue.jsのインストールは、Node.jsのパッケージマネージャーであるnpmを使ってインストールできます。 また、公式CLIツールが提供されており、それを利用することで簡単にプロジェクトの作成等が行えます。 Vue.jsの特徴 テンプレート構文 Vue.jsではHTMLベ…
SPA - うとうとしながら。
Webサーバー Webサーバー Webサーバーは、ユーザー（クライアント）からのリクエストを受けて、処理を行い、結果を返します。 結果としては、HTML,CSS,JSなどのファイルが返されてます。 ブラウザからインターネット上のWebページにアクセスした場合、Webページがファイルを返します。 その返ってきたファイルをブラウザで表示することで画面に表示されています。 ユーザーからのリクエストでは、どのファイルが欲しいかを指定します。 するとWebサーバーはそのファイルを返します。 また、スクリプトを実行し、その結果を返すようにすることもできます。 サーバーサイドで処理が必要な場合は、このような…
CORS RailsでCORSを設定する CORS CORSは、別のオリジンからのリクエストを許可するかどうかを決める仕組みです。 utouto97.hatenablog.com RailsでCORSを設定する RailsでCORSの設定をします。 RailsでAPIサーバーを構築したときに、別のオリジンからのリソースアクセスを許可するように設定します。 RailsでCORSの設定をするには、rack-corsを利用します。 github.com インストールはGemでできるので、Gemfileに書いて、bundle installでインストールできます。 gem 'rack-cors' 設定…
Origin （オリジン） 同一生成元ポリシー CORS Origin （オリジン） Origin （オリジン）は、URLのスキーム、ホスト、ポートの組み合わせで決まります。 これら（スキーム、ホスト、ポート）がすべて同じときのみ、同じオリジンであるといえます。 スキームとは、httpやhttpsなどプロトコルのことです。 http://example.com/api1とhttp://example.com/api2は、スキーム（http）、ホスト（example.com）、ポート（80）がすべて同じなので、同一オリジンです。 つまり、ディレクトリ以下はオリジンとは無関係ということです。 ht…
Hot Module Replacement (HMR) webpack-dev-server Hot Module Replacement (HMR) Hot Module Replacement (HMR) は、ファイルの更新を自動でブラウザに反映する仕組みです。 HMRでは、ページ全体を更新することなく、変更したモジュールのみを置き換えることで画面を更新します。 HMRにより、ファイルの変更を自動で、ブラウザに反映してくれるため、開発の手助けとなります。 また、差分だけの変更をすることで、変更を素早く反映することができます。 webpack-dev-server webpackでHMRを…
webpackとは 「webpackはなぜ必要？」 「webpackとBabelの違いは？」 webpackとは webpackとは、JavaScriptのモジュールバンドラです。 モジュールバンドラは、複数のモジュールをまとめるものになります。 webpackでは、JavaScriptを主に、HTMLやCSS、画像などもバンドルできるようです。 「webpackはなぜ必要？」 webpackを利用することで、複数のモジュールの依存関係や読み込み順序を自動で解決してくれます。 人の手で行う場合、モジュールの数が増えると複雑度が増し、ミスも増えてしまいます。 また、ファイルを一つにまとめることで…
tmp - うとうとしながら。
tmp - うとうとしながら。
RESTful API REST REST APIの特徴 URIでリソースを指定 HTTPメソッドで処理を指定 REST APIの例 RESTful API RESTful API (REST API) は、RESTに基づいたAPIのことです。 REST RESTとは、REpresentational State Transferのことで、ロイ・フィールディング氏によって提唱されました。 RESTには、次のような原則があります。 ステートレスなクライアント/サーバプロトコル HTTPメッセージの一つ一つが、そのリクエスト（メッセージ）を理解するために必要な全ての情報を含む。そのため、クライアン…
tmp - うとうとしながら。
Mongoid 実際に試してみる Mongoid 実際に試してみる 終わり
MongoDBに認証を設定する 管理ユーザーを作成する 管理ユーザーでログイン 一般ユーザーを作成 認証をONにしてMongoDBを起動 mongoコマンドでログインする MongoDBに認証を設定する MongoDBはデフォルトでは認証が設定されていません。 つまり、MongoDBに接続できれば、誰でもDBを操作することができてしまいます。 このままでは、セキュリティ的に大問題なので、ユーザー認証を設定し、ログインしないとDB操作できないようにします。 管理ユーザーを作成する まず、はじめに、データベース全体を管理する管理ユーザーを作成します。 管理ユーザーはadminデータベースに作成しま…
終わり
MongoDBを触る準備 MongoDBを触ってみる DB作成・選択 コレクションの作成 データの追加 データの一覧を取得 データの更新 MongoDBを触る準備 今回は、Docker-Composeを使ってMongoDBをセットアップしました。 docker-compose.ymlの中身は↓です。 version: '3' services: mongo: image: mongo あとは、docker-compose upしたら、MongoDBのサーバーが立ちました。 docker-compose exec mongo bashで中に入り操作していきます。 MongoDBを触ってみる Mo…
MongoDB 「MongoDBでは、どのようにデータを保存・管理しているの？」 「MongoDBの強みと弱みは？」 MongoDB MongoDBは、ドキュメント型のNoSQLデータベースです。 C++で開発されていて、人気のあるデータベースの一つです。 「MongoDBでは、どのようにデータを保存・管理しているの？」 MongoDBはドキュメント型のNoSQLです。 MongoDBでは、JSONのような「ドキュメント」という形式でデータを格納します。 RDBのテーブルとは異なりスキーマがないため、柔軟なデータを格納することができます。 そして、「ドキュメント」を集めたものが「コレクション」…
NoSQL 「NoSQLの強みは？」 「NoSQLって具体的にはどんなものがある？」 NoSQL このブログでも、ここまで何度か出てきたデータベースのPostgreSQLは関係データベース（リレーショナルデータベース、RDB）です。 MySQLなどもリレーショナルデータベース（RDB）です。 リレーショナルデータベース（RDB）では、テーブルでデータを管理し、整合性を保つために正規化の必要もあります。 また、データ数が多くなってきた場合に、クエリに時間がかかるようになるといった問題点もあります。 そこで、リレーショナルデータベースではないデータベースとして、NoSQLがでてきました。 NoSQ…
tmp - うとうとしながら。
tmp - うとうとしながら。
tmp - うとうとしながら。
PostgreSQLでインデックスを試してみる 「インデックスなしの場合はどれくらいの処理時間は？」 「インデックスを作成したらどれくらい変わる？」 PostgreSQLでインデックスを試してみる PostgreSQLでインデックスを試してみて、その効果を見てみます。 テーブル名tblのテーブルを用意しました。 カラムは、SERIAL PRIMARY KEYであるidとINTEGERであるnumからなります。 データは、idは自動インクリメントでnumに0~100の乱数で、100万件挿入しています。 mydb=# SELECT COUNT(*) FROM tbl; count --------…
インデックスとは 「インデックスを作成するとどんないいことがあるの」 「じゃあ、全カラムにインデックス作成すればいいのでは？」 「どのカラムにインデックスを作成すればいいの？」 インデックスとは インデックスは、検索のときに参照するもので、検索にかかる時間を短縮します。 インデックスには、DBに格納されているデータの特定のカラムの値とそれに対応するデータが格納されている場所を示すポインタからなります。 「インデックスを作成するとどんないいことがあるの」 普通、DBに格納されているデータはを検索しようとしたとき、インデックスがない場合、先頭のデータから一つずつチェックしながら検索する必要がありま…
システムスペック (System Spec) - RSpec
システムスペック Capybara システムスペック RSpecには、システムスペック (System Spec) というテストがあります。 システムスペックでは、複数のモデルやコントローラーを統合してテストします。 APIの呼び出しであったり、あるURLにアクセスしたときに返ってくるビューであったり、をテストします。 このようなシステムスペックをする上で便利なフレームワークがあります。 それがCapybaraというフレームワークで、UIのテスト等を簡単に書くことができます。 Capybara Capybaraは、ユーザーがアプリを操作することをシミュレーションすることで、実用途に近い形でウェ…
Railsでモデル作成 モデルをテストしてみる Railsでモデル作成 Railsでモデルを作成します。 $ rails g model User name:string これで、モデルを作成できました。 次のようなログがでました。 Running via Spring preloader in process 83 invoke active_record create db/migrate/20210804132134_create_users.rb create app/models/user.rb invoke rspec create spec/models/user_spec.rb…
RailsでRSpecを利用する rspec-railsのインストール rspecの初期設定 ディレクトリ構成 RailsでRSpecを利用する RSpecには、rspec-railsというRails用のGemがあります。 これを使うことで、RailsもRSpecでテストできます。 rspec-railsのインストール rspec-railsはGemでインストールできます。 ここでは、Gemfileに記述し、bundle installでインストールします。 group :development do gem 'rspec-rails' end group :test do gem 'rspe…
RSpecでスタブを使う方法 RSpecでスタブを試す RSpecでスタブを使う方法 RSpecでスタブを使うには、allow(オブジェクト).to receive(:メソッド名).and_return(返り値)のようにします。 allowで対象のオブジェクトを，receiveで対象のメソッドを指定します。 それに続けて、and_returnで返り値を指定します。 and_returnの部分は、and_raiseとして例外を発生させることもできます。 このほかにも、and_yieldというのもあります。 RSpecでスタブを試す 実際に、RSpecでスタブを試してみます。 まず、今回利用したテ…
tmp - うとうとしながら。
テストを書く上で、「モック」と「スタブ」といったものを利用します。 「モック」と「スタブ」についてまとめます。 前提 「モック」とは 「スタブ」とは 前提 ここでは、テストしたい対象オブジェクトをオブジェクトAとします。 そして、オブジェクトAはオブジェクトBを持っています。 オブジェクトBはメソッドfを持ちます。 「モック」とは テスト対象はオブジェクトAです。 そして、オブジェクトAではオブジェクトBのメソッドfを呼び出しているとします。 このとき、オブジェクトBのメソッドfの挙動をテストする必要はありません。 なぜなら、この場合のテスト対象は「オブジェクトA」であるからです。 ここでは、…
前回RSpecを使ってみました。 utouto97.hatenablog.com その中で、eq を使いました。 RSpecには、eq以外にも多くのMatcherが用意されています。 基本的なMatcherの使用例 a = b aとbが等しい a ≠ b aとbが等しくない a < b aがbより小さい a >= b aがb以上 a = 0 aが0 aが空 aがt型 aはtのインスタンス 基本的なMatcherの使用例 a = b aとbが等しい expect(a).to be eq(b) a ≠ b aとbが等しくない expect(a).not_to eq(b) a < b aがbより小さ…
Rubyテスティングフレームワークで人気の高いRSpecを使ってみます。 RSpecのインストール テスト対象のクラス RSpecでテストしてみる テストの記述 テストの実行 テスト失敗 RSpecのインストール RSpecを使ってテストしてみたいと思います。 まず、第一歩としてインストールからやっていきます。 Ruby環境は次の通りです。 $ ruby -v ruby 3.0.1p64 (2021-04-05 revision 0fb782ee38) [x86_64-linux] RSpecのインストールは、Gemでインストールすることができます。 ここでは、Gemfileに記述し、bund…
Ruby用テスティングフレームワーク RSpec Ruby用テスティングフレームワーク テストをRubyで書きたい、となったときに利用するフレームワークとしてどのような選択肢があるのでしょうか。 Ruby用ユニットテストのフレームワークです。 Test::Unit Rubyに標準搭載されている シンプル minitest Railsのデフォルト シンプル RSpec 高機能 Test::Unitやminitestは、RubyやRailsのデフォルトとなっており、テストもシンプルに記述できる。 ただし、機能面において、高機能でなんでもできるRSpecの人気が高いようです。 RSpec RSpec…
tmp - うとうとしながら。
utouto97.hatenablog.com 準備 同名のユーザーを追加してみる ApplicationRecord.transactionを試す 準備 以下のようなUserモデルを作成します。 validatesで:nameがユニークであることを確認します。 class User < ApplicationRecord validates :name, uniqueness: true end 同名のユーザーを追加してみる :nameがKenであるユーザーを追加します。 > User.create!(name: "Ken") 確認してみます。 >User.all.select("name"…
トランザクションとは Railsでトランザクション トランザクションとは トランザクションは処理のまとまりです。 銀行の振り込みがトランザクションの例としてよく挙げられると思うので、ここでも銀行振り込みを例にします。 AさんからBさんの口座への振り込みを考えると、 Aさんの口座額を減らす Bさんの口座額を増やす という、二つの処理をする必要があります。 そして、これらの処理はひとまとまりである必要があります。 「1. Aさんの口座額を減らす」だけ処理されて、「2. Bさんの口座額を増やす」が処理されなかった場合、おかしなことになります。 そのため、これら二つの処理はひとまとまりで処理されるべき…
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問題 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…
前回、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とは、Object-Relational Mappingの頭文字をとったものです。 その名前からわかる通り、オブジェクトと関係（関係データベース、RDB）とのマッピングを行うものです。 ここでの、オブジェクトとはオブジェクト指向におけるオブジェクトのことであり、関係とはRDBのことです。 多くのプログラミング言語はオブジェクトを扱うので、そのオブジェクトをRDBに保存できるように、対応付けを簡単にするためORMを使います。 もっと簡単にいうと、SQLを直接書くことなく、オブジェ…
前回、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とは 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 - うとうとしながら。
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とは 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を使うためには、dockerコマンドを多用しますね。 $ docker ps $ docker build $ docker run $ docker logs ですが、dockerコマンドを実行するためには、権限が必要です。 毎回sudoをつけるのも大変ですし、sudoユーザーじゃないユーザーはdockerを使えないことになってしまいます。 実は、Docker用のグループdockerが存在しています。 このdockerグループに入っているユーザーは、dockerコマンドを実行することができます。 次のコマンドで現在のユーザーをdockerグループに追加できます。 $ sudo g…
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…
JavaScriptはブラウザ上で動作する JavaScriptを実行できるアプリケーションNode.js Node.jsでHello world! JavaScriptはブラウザ上で動作する JavaScriptはHTMLやCSSで記述されたWebページに動きをつけるために、ブラウザ上で実行可能な言語でした。 ChromeやFirefoxなどのブラウザ毎に、JavaScriptを実行できるエンジンが実装されており、それによりJavaScriptは動作します。 JavaScriptというプログラミング言語を習得しても、ブラウザ上で動作するアプリケーションしか開発できませんでした。 JavaSc…
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のコールバック関数と高階関数 高階関数とコールバック関数の例 コールバック関数は非同期処理で使われる setTimeoutの例 JavaScriptのコールバック関数と高階関数 JavaScriptでは、関数はオブジェクトの一種である。 そのため、関数の引数を関数とすることもできます。 そして、関数を引数にとる関数を高階関数といいます。 逆に、関数に引数として渡される関数をコールバック関数といいます。 ↓はコールバック関数のイメージです。 真ん中の白い関数は、引数の一つとして黄色い丸のfunctionを受け取っています。 つまり、真ん中白い関数が高階関数で、黄色い丸のfun…
JavaScriptの変数・定数 varとletとconstの比較 再代入と再定義 varとletとconst 巻き上げについて JavaScriptの変数・定数 JavaScriptにもほかの言語同様に変数と定数があります。 今回は、その変数と定数の宣言方法をみていきます。 変数の宣言はいくつか方法があります。 それらの違いで重要なものとして、再代入と再定義があります。 varとletとconstの比較 再代入と再定義 JavaScriptの変数・定数の宣言方法の違いで、再代入と再定義が重要になってきます。 再代入 再代入可能は、その変数への代入が何度でも許されていることになります。 逆に、…
JavaScriptで関数を宣言する function を使う 無名関数 アロー関数を使う JavaScriptで関数を宣言する 関数は、引数をとり、処理を行い、値を返すものです。 イメージはこんな感じ 関数は、何かしらの処理をします。 ここでは、足し算を行う関数を考えます。 例えば、引数として2と3を渡した場合、関数は処理の結果5を返します。 JavaScriptで関数を宣言（定義）する方法はいくつかあります。 それらをまとめていきます。 ここでは、二つの引数をとり、それらを足した結果を返す関数を宣言します。 function を使う 一つ目の方法は、functionを使う方法です。 以下の…
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 merge Fast-forward Fast-forwardではないマージ コンフリクト git merge git mergeで複数のブランチを一つにまとめることができます。 前回↓も少し使ってみました。 utouto97.hatenablog.com Fast-forward 前回のマージは以下のパターンになります。 この場合だと、masterブランチをdocブランチのところまで進めるだけになります。 特に編集も必要ないです。 Fast-forwardではないマージ 以下のような場合、Fast-forwardとはなりません。 この場合は、masterブランチとdocブランチがそれ…
git branch 新しいブランチを作成 ブランチでファイルを編集する ブランチを統合する git branch Gitでは，変更の履歴をつないで管理します。 その一つ一つをブランチといいます。 ブランチは途中から分岐したり、また一つになったりすることができます。 これにより、開発がしやすくなります。 まず、ブランチの一覧を確認してみます。 この時点でファイルはREADME.mdのみで中身は空です。 $ git branch * master masterというブランチが一つあることが確認できました。 新しいブランチを作成 続いて、このmasterブランチからdocブランチを作ります。 $ …
↓の続き utouto97.hatenablog.com 試してみる デフォルトタスク ネームスペース cleanタスク 試してみる デフォルトタスク task default:を設定することで、デフォルトで実行されるタスクを設定することができます。 デフォルトタスクは、rakeコマンドが引数なしに実行された場合に実行するタスクです。 前回、作成したsample_task1をデフォルトタスクに設定してみます。 task default: :sample_task1 引数なしでrakeコマンドを実行してみます。 $ docker-compose run ruby sh -c "cd /work …
Rakefile 試してみる 実行環境 シンプルなタスク 依存のあるタスク 引数をとるタスク Rakefile rubyのmakeがrakeです。 そして、ruby版のMakefileがRakefileとなります。 このRakefileには、Rubyを使ってタスクを記述し、rakeコマンドから実行することが可能です。 試してみる 実行環境 まずはrakeを動かす環境を準備します。 Dockerを使って、サクッと準備します。 docker-compose.ymlを作り、以下のようにします。 version: "3" services: ruby: image: ruby volumes: - .…
はじめに SecureRandom uuid hex base64 Railsでidをランダムな文字列にする はじめに Railsを使っているとデータのidは、デフォルトでは整数の連番になります。 この場合、URLにパラメータとしてidを含む場合 (例えば、https://hostname/api/v1/article/123) に、idの数字を前後の数字に変えることで、ほかのデータに簡単にアクセスできてしまいます。 また、idの最大値でエントリ数がわかってしまいます。 一つ例を挙げると、ユーザーのidの最大値がわかれば、そのサービスのユーザー数がわかってしまいます。 このような理由から、id…
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] 次に、フィルタリングようのボタンを設置します。 現在のパラメータに応じて、…
Rails で ToDo アプリをつくる⑦ （Rails 入門）
↓の続き utouto97.hatenablog.com 今回やること 編集用フォームの準備 編集用アクションの追加 今回やること 今回は、CRUDのU (Update) として、ToDoの内容の編集を実装していきます。 あらかじめ用意していたEditボタンに機能を実装していきます。 編集用フォームの準備 まずは、編集用のフォームを作ります。 ToDo一覧で、Editボタンを押すと、そのToDoが編集フォームに変わるようにします． はじめに、ルーティングを設定します。 GETメソッドで/:idにアクセスした場合、通常通りToDo一覧を表示しますが、idに対応するToDoは編集フォームを表示しま…
Rails で ToDo アプリをつくる⑥ （Rails 入門）
↓の続き utouto97.hatenablog.com Rails ストロングパラメータ require と permit ToDoアプリのソースコード変更 Rails ストロングパラメータ Rails には、ストロングパラメータというものがあります。 ストロングパラメータとは、安全性が検証されたパラメータということになります。 つまり、パラメータに不正な値がないかをチェックする必要があります。 そして、不正な値は無視します。 不正な値をチェックし、無視できるようにする理由は、マスアサインメント脆弱性による、意図しないデータの追加や編集が行われる可能性があるから、です。 参考: qiita.…
Rails で ToDo アプリをつくる⑤ （Rails 入門）
↓の続きです。 utouto97.hatenablog.com 今回やること ルーティングの設定 コントローラーのアクション追加 ボタンの追加（ビューの編集） 今回やること 今回は、CRUD の U をやっていきます。 ただし、ToDoの編集ではなく、ToDoの状態（status）を変更できるようにしていきます。 現在、'In progress' と 'Complete' の2状態あります。 これらを交互にトグルできるようにします。 基本的にやっていくことは前回と同じです。 ルーティングの設定、コントローラーのアクション追加、ビューを編集といった流れになります。 ルーティングの設定 まず、ルー…
Rails で ToDo アプリをつくる④ （Rails 入門）
↓の続きです。 utouto97.hatenablog.com 今回やること ルーティングの設定 コントローラーのアクション追加 ボタンの変更 今回やること 今回は CRUD の D (Delete) を実装していきます。 つまり、ToDoの削除ということになります。 ルーティングの設定 まずは、DELETEメソッドに対応するルーティングの設定を行います。 ルーティングなので、config/routes.rbファイルに追記します。 delete '/:id' => 'todos#destroy' idをURLで指定するようにしています。 コントローラーのアクション追加 続いて、ルーティングの設…
Rails で ToDo アプリをつくる③ （Rails 入門）
↓の続き utouto97.hatenablog.com 今回やること フォームの作成 ルーティングの設定 コントローラーのアクション追加 バリデーション 今回やること 今回は、CRUD の C (Create) をやっていきます。 つまり、ToDo の新規作成をできるようにします。 フォームの作成 まずは、新規 ToDo の情報を入力するフォームを作成します。 HTMLとBootstrapで、フォームを作ります。 ビューの app/views/todos/index.html.erbのToDo一覧の上に、↓のフォームを追加しました。 <form action="/" method="post…
Rails で ToDo アプリをつくる② （Rails 入門）
↓の続き utouto97.hatenablog.com 今回やること トップページを作成する コントローラーの作成 ルーティングの設定 ビューファイルの作成 ToDo モデルの作成 & テストデータ追加 ToDo 一覧を表示 コントローラーでデータ取得 ビューでTodo一覧表示 今回やること 今回は、CRUD の R (Read) ということで、ToDo の一覧を表示するところまでを開発していきます。 トップページを作成する まず初めに、タイトルだけのシンプルな HTML を表示できるようにしていきます。 そのために、 コントローラーの作成 ルーティングの設定 ビューファイルの作成 を行って…
「ブログリーダー」を活用して、utouto97さんをフォローしませんか？
指定した記事をブログ村の中で非表示にしたり、削除したりできます。非表示の場合は、再度表示に戻せます。
画像が取得されていないときは、ブログ側にOGP(メタタグ)の設置が必要になる場合があります。
