Masa

FullStack Openを勉強しています。

Masa

FullStack Openを勉強しています。

FullStackOpen Part9-d React with Types メモ

ReactでTypescriptを使うと以下のようなメリットがある 余分/不要なpropを渡そうとするときにエラーを検知できる 必要なpropがないときに検知できる 異なるtypeのpropを渡したときに検知できる Create React App with TypeScriptTypeScriptでreactアプリを作るときは以下のコマンドで始める npx create-react-app my-app --template typescript create-

Masa

    • FullStackOpen Part9-c Typing an Express app メモ

      Setting up the projectTypeScriptを使って本格的にコードを書く。 今回のプロジェクトはFlight-diary。 必要なものを準備する これは他の一般的なプロジェクトにも流用可能 npm initする npm installする npm install express npm install --save-devする npm install --save-dev typescript eslint @types/express @type

      Masa

      • FullStackOpen Part9-b First steps with TypeScript メモ

        Setting things upVSCodeではネイティブでTypeScriptをサポートしている Nodeでtypescriptとts-nodeをインポートして追加しておく npm install -g ts-node typescript package.jsonにも追加しておく { // .. "scripts": { "ts-node": "ts-node" }, // ..} コマンドからファイルの実行をする場合は以下のように。 npm r

        Masa

        • FullStackOpen Part9-a TypeScript background and introduction メモ

          Main Principle TypeScriptはJavascriptのスーパーセット。 以下の三つの構成要素からなる 1. The language (文法、キーワード、型注釈) 2. The compiler (Javascriptに変換する機能) 3. The language service (インテリセンス、型ヒント、リファクタリング) TypeScript key language features Type annotation 変数や関数の引数にデー

          Masa

        FullStackOpen Part9-d React with Types メモ

        Masa

          FullStackOpen Part7-d Webpack メモ

          create-react-appのおかげで楽にReactの開発をすることができるが、それ以前は必要なファイルをまとめるのは非常に手のかかる作業だった。 webpackというツールを使ってその方法を見てみる Bundling ビルドするとJavascriptファイルが以下のように一つにまとめられる。 ├── asset-manifest.json├── favicon.ico├── index.html├── logo192.png├── logo512.png├── m

          Masa

          FullStackOpen Part7-d Webpack メモ

          Masa

          FullStackOpen Part7-c More about styles メモ

          Ready-made UI libraries 現在は数多くのUIライブラリが存在する メジャーどころだとBootstrapやMaterialUIがあり、これらにはReactバージョンのライブラリも存在する React Bootstrap react-bootstrapをインストールする npm install react-bootstrap ./public/index.htmlのヘッドに以下を追記する <head> <link rel="styleshe

          Masa

          FullStackOpen Part7-c More about styles メモ

          Masa

          FullStackOpen Part7-b Custom hooks メモ

          Hooks useStateやuseEffectなど。 使う上で以下のルールを守る フックは: ループ中・IF文・入れ子の関数中で呼ばない Reactコンポーネント中・カスタムフック中から呼ぶこと Custom hooks カスタムフックとはコンポーネントのロジックを別の場所でも再利用するための機能 上記のルールに加えて、フックの名前はuseから始まる必要がある 例えば以下のようなカウンターがあるとする import { useState } from 'reac

          Masa

          FullStackOpen Part7-b Custom hooks メモ

          Masa

          FullStackOpen Part7-a React Router

          Application navigation structure こんな感じにトップにルーティング用のリンクを用意したとする 以下のようにすれば確かに実現できるが、クリックしたとしてもひとつのページの中でとどまるため、戻るボタンなどが使えない。 なんらかのURLの変化が起きるようにしたい。 import { useState } from 'react'import ReactDOM from 'react-dom/client'const Home = () =>

          Masa

          FullStackOpen Part7-a React Router

          Masa

          FullStackOpen Part5-d End to end testing メモ

          Cypress cypressは近年使われだしたEnd to end(E2E)ライブラリ 今回はフロントエンド側にnpm install --save-devする npm install --save-dev cypress フロントエンド側のnpm scriptに追加 //frontend package.json{ // ... "scripts": { "start": "react-scripts start", "build": "react

          Masa

          FullStackOpen Part5-d End to end testing メモ

          Masa

          FullStackOpen Part5-c Testing React apps メモ

          Reactアプリのテストツールとして、テスト用にコンポーネントをレンダーするreact-testing-libraryやjest-domを使用する npm install --save-dev @testing-library/react @testing-library/jest-dom Rendering the component for tests テストはこんな感じで記述 ./components/Note.test.js renderで描画し、screen

          Masa

          FullStackOpen Part5-c Testing React apps メモ

          Masa

          FullStackOpen Part5-b props.children and proptypes メモ

          Displaying the login form only when appropriate スタイルdisplayを使用して表示・非表示をトグルできる const App = () => { const [loginVisible, setLoginVisible] = useState(false) // ... const loginForm = () => { const hideWhenVisible = { display: loginVisib

          Masa

          FullStackOpen Part5-b props.children and proptypes メモ

          Masa

          FullStackOpen Part5-a Login in frontend メモ

          Handling login ログイン機能を付けたフロントエンド側のApp.jsはこんな感じ const App = () => { const [notes, setNotes] = useState([]) const [newNote, setNewNote] = useState('') const [showAll, setShowAll] = useState(true) const [errorMessage, setErrorMessage]

          Masa

          FullStackOpen Part5-a Login in frontend メモ

          Masa

          FullStackOpen Part4-d 演習の気づき

          supertestのapi.postでヘッダの設定をするときは以下のようにする const response = await api .post('/api/blogs') .set('Authorization', 'Bearer ' + token) .send(newBlog) beforeEachは全テストの前にそれぞれ実施。 beforeAllは一回のみテスト前に実施

          Masa

          FullStackOpen Part4-d 演習の気づき

          Masa

          FullStackOpen Part4-d Token Authentication メモ

          トークン認証は以下のような仕組み トークン機能を実装するためにjsonwebtokenを使用する npm install jsonwebtoken login用のエンドポイントを用意する。 ./controller/login.js const jwt = require('jsonwebtoken')const bcrypt = require('bcrypt')const loginRouter = require('express').Router()const

          Masa

          FullStackOpen Part4-d Token Authentication メモ

          Masa

          FullStackOpen Part4-c User Administration メモ

          References across collections ドキュメント型データベースでは複数のコレクションにまたがって参照するとき、以下のようにユーザーに対してノートオブジェクトをそのまま持たせることができる。 [ { username: 'mluukkai', _id: 123456, notes: [ { content: 'HTML is easy', important: false, },

          Masa

          FullStackOpen Part4-c User Administration メモ

          Masa

          FullStackOpen Part4-b 演習の気づき

          配列内に目的のオブジェクトを含むか確認するときは expect(array).toContainEqual(item) オブジェクトのプロパティがあるかどうかはtoBeDefinedでチェック Updateのテストは以下のような感じで superagentではput.sendでテストデータを送る test('can update a blog', async () => { const blogsAtStart = await helper.blogsInDb()

          Masa

          FullStackOpen Part4-b 演習の気づき

          Masa