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 - うとうとしながら。
「ブログリーダー」を活用して、utouto97さんをフォローしませんか？
指定した記事をブログ村の中で非表示にしたり、削除したりできます。非表示の場合は、再度表示に戻せます。
画像が取得されていないときは、ブログ側にOGP(メタタグ)の設置が必要になる場合があります。
