記事一覧
FullStackOpen Part9-d React with Types メモ
ReactでTypescriptを使うと以下のようなメリットがある
余分/不要なpropを渡そうとするときにエラーを検知できる
必要なpropがないときに検知できる
異なるtypeのpropを渡したときに検知できる
Create React App with TypeScriptTypeScriptでreactアプリを作るときは以下のコマンドで始める
npx create-react-a
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-de
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" }, /
FullStackOpen Part9-a TypeScript background and introduction メモ
Main Principle
TypeScriptはJavascriptのスーパーセット。
以下の三つの構成要素からなる
1. The language (文法、キーワード、型注釈)
2. The compiler (Javascriptに変換する機能)
3. The language service (インテリセンス、型ヒント、リファクタリング)
TypeScript key langua
FullStackOpen Part7-d Webpack メモ
create-react-appのおかげで楽にReactの開発をすることができるが、それ以前は必要なファイルをまとめるのは非常に手のかかる作業だった。
webpackというツールを使ってその方法を見てみる
Bundling
ビルドするとJavascriptファイルが以下のように一つにまとめられる。
├── asset-manifest.json├── favicon.ico├── index
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のヘッド
FullStackOpen Part7-b Custom hooks メモ
Hooks
useStateやuseEffectなど。
使う上で以下のルールを守る
フックは:
ループ中・IF文・入れ子の関数中で呼ばない
Reactコンポーネント中・カスタムフック中から呼ぶこと
Custom hooks
カスタムフックとはコンポーネントのロジックを別の場所でも再利用するための機能
上記のルールに加えて、フックの名前はuseから始まる必要がある
例えば以下のようなカウン
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)
FullStackOpen Part4-d 演習の気づき
supertestのapi.postでヘッダの設定をするときは以下のようにする
const response = await api .post('/api/blogs') .set('Authorization', 'Bearer ' + token) .send(newBlog)
beforeEachは全テストの前にそれぞれ
FullStackOpen Part4-d Token Authentication メモ
トークン認証は以下のような仕組み
トークン機能を実装するためにjsonwebtokenを使用する
npm install jsonwebtoken
login用のエンドポイントを用意する。
./controller/login.js
const jwt = require('jsonwebtoken')const bcrypt = require('bcrypt')const loginRo
FullStackOpen Part4-c User Administration メモ
References across collections
ドキュメント型データベースでは複数のコレクションにまたがって参照するとき、以下のようにユーザーに対してノートオブジェクトをそのまま持たせることができる。
[ { username: 'mluukkai', _id: 123456, notes: [ { content: 'HTML is e
FullStackOpen Part4-b 演習の気づき
配列内に目的のオブジェクトを含むか確認するときは
expect(array).toContainEqual(item)
オブジェクトのプロパティがあるかどうかはtoBeDefinedでチェック
Updateのテストは以下のような感じで
superagentではput.sendでテストデータを送る
test('can update a blog', async () => { const