ログイン周りとセキュリティ関連の情報収集 - kouの技術的メモ こちらの記事ではログインをセッションで実現すると書いたんですが、XSSとCSRFなどのセキュリティがやはり心配なのでまるっと任せられる認証プラットフォームを利用することにしました。 ・有…

SPAでのログイン・ログアウト機能実装方法のベストプラクティスが分からなかった事と、脆弱性についての知識が不足しているので情報収集。 session認証とトークン認証の違い。 cookiesを使ったsession認証 Cookieとは、Webサーバーがクライアント（PC等）に…

XSS（クロスサイトスプリクティング） ウェブアプリケーションの中には、検索のキーワードの表示画面や個人情報登録時の確認画面、掲示 板、ウェブのログ統計画面等、利用者からの入力内容や HTTP ヘッダの情報を処理し、ウェブページとし て出力するものが…

知らずに違法行為をしてしまうのもまずいので、まずEコマースサイトを構築する際に必要な法律関係について情報を収集しています。 ECサイト関係の法律と内容と具体的な施策について。 2021年4月1日から総額表示義務が適用される。 消費税込みの価格を表示し…

今回はAWSを使ってみたいのですが、EC2やらECSやらlambda、fargate等どれを使えばいいか検討したいと思います。 クラウドインフラ EC2 特徴 おそらく最も広く使われている。通常のサーバ構成。 ローカル開発環境はコンテナ、本番環境EC2という構成は多い。 …

ECサイトを０から作ることになった。 技術習得も兼ねているので構成はフロントReact+Railsを使ってSPAで今っぽいサイトを作って行こうと思います。 SPAでフロント、サーバサイド、インフラの全てを設計から実装まで自分一人でするのは初めて、かつ決済にStri…

コンポーネント設計 役割によるコンポーネントの分離 Presentialコンポーネント 見た目の部分を担当するコンポーネント。どのようにUIを描画するかの部分に責務を持ち、Propsを受け取りそれをどのように表示するかを担当する。 state(状態)は持たないことが…

babel 超簡単に言うとJavaScriptのコードを新しい書き方から古い書き方へと変換するツール。 JavaScriptは頻繁に言語仕様が変化していて、最新の書き方をすると一部のブラウザしかその仕様に対応していないと言う状況がよくある。 最新のECMAScript構文やJSX…

コンポーネントの組み立て方 React らしくて一番きれいなコンポーネントの作り方としては まず関数コンポーネントで見た目だけを整えた Presentational Component を作る。それをインポー トして Hooks や HOC で必要な機能を追加していって、…

関数コンポーネント Reactのコンポーネントはクラスでも関数でも書けるが Facebook の React 開発チームの公式的な見解としては関数を使うように勧めている。 過去の関数コンポーネントの欠点 クラスコンポーネントではそのままではクラスとして実装できて…

コンポーネントで大事な３要素 ・ Props ・ Local State ・ ライフサイクル Props 親コンポーネントから子コンポーネントのデータを受け渡す際に、親コンポーネントから受け取る値のこと。 Local State コンポーネント内部の状態を規定するもの。 下は関…

Reactの基本思想でよく取り上げらられるのは３つ ・ 仮想 DOM(Virtual DOM) ・ コンポーネント指向 ・ 単方向データフロー 仮想DOM React では JavaScript オブジェクトで DOM と同じ構造のノードツリーを再現 しておき、一連の処理結果の最…

ReactのJSX記法 create-react-appを少しいじったもの。 import React, { Component } from 'react'; import logo from './logo.svg'; import './App.css'; class App extends Component { render() { const logoOptions = { alt: "logo", className: "App-lo…

関数の型宣言 戻り値は型推論で省略可能だが、引 数は必ず指定する必要がある 関数の引数のかっこのすぐ後ろに型を書く > const add = (n: number, m: number): number => n + m; > add(1, 3); 4 > function subtr(n: number, m: number): number { re…

ジェネリクス(Generics)とは データの型に束縛されず、型そのものをパラメータ化して扱うこと。 例えば以下のような二つの関数を一つにまとめたいとする。 しかし、型が違うので一緒にすることができない。 function a(x: string) { alert(x); } function b(…

TypeScriptの利点 静的型付け、型推論、Null 安全性という最近のプログラミング言語のトレ ンドを押さえつつ、それ以外の部分はまんま JavaScript と文法が同じなので使いやすい。 TypeScript のプリミティブ型 ・ number ・ string ・ bool…

Reactで関数型プログラミングの知識も必要そうなので、こちらもざっと学習した内容をメモ。 高階関数 引数に関数をとったり、戻り値として関数を返したりする関数のこと。 下記だと(4 + 1) × 2 = 10 が実行される。 英語では Higher Order Function という…

非同期処理とPromise構文 JavaScript では時間のかかる処理は、ほぼ非同期なのが前提。（通信とかローカルファイルの読み込みとかの外部アクセス処理） 以下のものは起きた、の遅延によりおやすみ、おはよう、起きたの順番で表示されてしまう。 const …

アロー関数 const fn = (a, b) => { return a + b; }; // 単一式の場合はブラケットやreturnを省略できる const fn = (a, b) => a + b; // ブラケットやreturnを省略してオブジェクトを返したい場合は`()`で囲む const fn = (a, b) => ({ sum: a + b }); 分…

前々から周りのエンジニア仲間の中でTypeScriptが流行っていて、前々から興味があったのと静的型付け言語を使えるようになりたかったので、学習してみます。 また、業務でReactから少し離れてしまっていたので、こちらも再学習。 とりあえず学習環境を立ち上…

Railsチュートリアルで覚えが悪かったところや、分かりにくかったところの更なる理解を目的としてブログを書いていこうと思います。 僕のように今RubyやRails勉強中という初学者の方も多いと思うので、多少はそういう方の参考になればいいなと。 基本的には…

ついに今回で完成です！ 今回は全体のコーディングを整えたり、文章を読みやすくしたり誤字脱字を修正したり。 一週間ちょいぐらいしか掛かってないはずなのに、自分で考えるたり、問題を解決したりする時間が多かったせいか、凄く長く感じた気がします。 モ…

今回は全体のインテグレーションテストを作り込んでいきます。 まずはヘッダーレイアウトのインテグレーションテストです。 omniauthを使ったログイン部分を実装していきます。 minitestでテストを書いているのですが、日本語で検索してもomniauthのテスト方…

今回は細かいバグを取り除くために、コントローラのbeforeアクションとテストを書いていこうと思います。 minitestを使っています。 beforアクションの追加 今のままだと未ログイン状態でも誰がログインしていようと、お構いなしにいろんなURLにアクセスでき…

今回は登録ユーザー数が増えても大丈夫なようにユーザー一覧のページネーション機能追加、 それから、好き勝手にアクセス出来ないように、コントローラのbeforeアクションの追加を行っていこうと思います。 ページネーション まずgemの追加とbundeleインスト…

前々回のモデル作成は3回ほど作り直したり、グラフ部分の作成もも試行錯誤の連続で結構時間が掛かかったのですが、 今回は表示部分なので、割とサクサク進められました。 今回はフォーム画面とスケジュール画面が雑多、かつ不必要な情報も多かったので、整え…

グラフ表示部分の導入です。 ライブラリはchartkickを使おうと思います。 公式サイトを見ながら勧めていきます。 https://chartkick.com/ 表示するグラフのタイプは選べるのですが、何がいいかは試行錯誤しながら決めていきます。 おそらくtimelineかpie cha…

スケジュール関係のモデルの実装です。 今回もissueを作ります。 DBモデル作成 モデルですが、これがかなり悩んで紆余曲折試行錯誤した結果以下で行くことにしました。 Userモデル（登録ユーザ情報）omniauth-twitterに合わせて中身を作ります。 主キー 名前…

まず、ログインした後にリダイレクトされるスケジュールページを簡単に作り、ユーザーページの原型も作っていきます。 まず、githubにissueします。 #○と番号が出ますので、 ローカルリポジトリと紐付けるために開発環境でgit checkut -b #〇でその番号と同…

方法はいくつかあると思いますが、今回はgemのomniauthでツイッター認証しようと思います まずgemファイルを追加 gemfile gem 'omniauth' gem 'omniauth-twitter' そしてbundle install ツイッターで開発するアプリをここのCreate New Appで作成します。 htt…