Skip to content

Commit fc5b53c

Browse files
mizchimizchi
committed
Update
1 parent 73878b1 commit fc5b53c

12 files changed

Lines changed: 1273 additions & 0 deletions

‎.vscode/setting.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"editor.wordWrap": "on"
3+
}

‎docs/202005271609-react-app-context.mdx‎

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
---
2+
title: React Context を用いた簡易 Flux
3+
created: 1590563363484
4+
tags: []
5+
---
6+
7+
## 課題
8+
9+
- redux を引っ張り出すと大仰になる。Context 下に共有ステートを持ってそこに setState できるだけでよい。
10+
- なので、次の 2 つを用意する
11+
- 現在の state を参照する `const appState = useAppState()`
12+
- 現在の state を更新する `const setAppState = useSetAppState()`
13+
- `React.useState()` と違って分割している理由は、主にパフォーマンス上の理由
14+
- 大域な参照なので、可能な限り参照したくない
15+
- `setState()` の API は `(prevState: State) => State` も取れるので、状態更新用途に限ってはそもそも `useAppState()` せずに済むことが多い
16+
- でも毎回書いてるけどボイラープレート感強い上に忘れるのでここにメモする
17+
18+
## 毎回書いてるボイラープレート
19+
20+
```tsx
21+
// src/contexts/AppStateContext.tsx
22+
import React, { Dispatch, SetStateAction, useContext, useState } from "react";
23+
24+
export type AppState = {
25+
value: number;
26+
};
27+
28+
const initialState = {
29+
value: 0,
30+
};
31+
32+
const AppStateContext = React.createContext<AppState>(initialState);
33+
const SetAppStateContext = React.createContext<
34+
Dispatch<SetStateAction<AppState>>
35+
>(() => {});
36+
37+
export function useAppState() {
38+
return useContext(AppStateContext);
39+
}
40+
export function useSetAppState() {
41+
return useContext(SetAppStateContext);
42+
}
43+
44+
export function AppStateProvider(props: {
45+
initialState?: AppState;
46+
children: React.ReactNode;
47+
}) {
48+
const [state, setState] = useState<AppState>(
49+
props.initialState ?? initialState
50+
);
51+
return (
52+
<AppStateContext.Provider value={state}>
53+
<SetAppStateContext.Provider value={setState}>
54+
{props.children}
55+
</SetAppStateContext.Provider>
56+
</AppStateContext.Provider>
57+
);
58+
}
59+
```
60+
61+
## 使い方
62+
63+
```tsx
64+
import React from "react";
65+
import ReactDOM from "react-dom";
66+
import {
67+
AppStateProvider,
68+
useAppState,
69+
useSetAppState,
70+
} from "./contexts/AppStateContext";
71+
72+
function Counter() {
73+
const state = useAppState();
74+
const setAppState = useSetAppState();
75+
return (
76+
<div>
77+
{state.value}
78+
<button
79+
onClick={() => {
80+
setAppState((s) => ({ value: s.value + 1 }));
81+
}}
82+
>
83+
++
84+
</button>
85+
</div>
86+
);
87+
}
88+
89+
function App() {
90+
return (
91+
<AppStateProvider>
92+
<Counter />
93+
</AppStateProvider>
94+
);
95+
}
96+
97+
ReactDOM.render(<App />, document.querySelector("#root"));
98+
```

‎docs_wip/202005200249-engineer-career-pattern.mdx‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
---
2+
title: エンジニアになった人のパターン
3+
created: 1589910599048
4+
tags: []
5+
---
6+
7+
## きっかけ系
8+
9+
- 大学の授業で興味を持った
10+
- wordpress のカスタマイズで php
11+
- CGI ゲームの改造のために perl
12+
- ブログのカスタマイズで HTML / CSS
13+
- メディアアートをやってみたくて Flash
14+
- メディアアートをやってみたくて Processing
15+
16+
## 日常効率系
17+
18+
- Excel VBA で効率化
19+
- ブラウザ拡張を作りたかった
20+
21+
## ゲーム系
22+
23+
- ゲームを作りたくて Unity
24+
- ゲームを作りたくて HTML5 Canvas
25+
- RPG ツクールでは満足できなくて C#
26+
27+
## 性欲駆動系
28+
29+
- アダルトサイトのクローラを作りたかった
30+
- エロサイトの広告にイライラしてブラウザ拡張で消すために勉強
31+
- エロサイトの広告にイライラして作る側になった
32+
33+
## 不可避系
34+
35+
- ホームページ時代から
36+
- 研究のツールを改造するために覚える羽目になった
37+
- たまたま得意でたまたまコスパよく稼げたので、
38+
39+
## アングラ系
40+
41+
- 大規模 FTP ファイル交換サーバーの運用
42+
- ラグナロクオンラインの BOT ファームの運用
43+
44+
## 傾向
45+
46+
最近ほど真っ当にアカデミックで勉強した人が多く、昔ほど自学した人が多く感じる。(そもそも情報系の学部が少なかったのでパイがない)
47+
48+
自分の世代はちょうど中間ぐらいで、

‎docs_wip/202005212041-javascript-for-starter.mdx‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
---
2+
title: javascript-for-starter
3+
created: 1590061300128
4+
tags: []
5+
---
6+
7+
import Doc0 from "../fragments/nextjs/00.mdx";
8+
import Doc1 from "../fragments/nextjs/01.mdx";
9+
import Doc2 from "../fragments/nextjs/02.mdx";
10+
import Doc3 from "../fragments/nextjs/03.mdx";
11+
import Doc4 from "../fragments/nextjs/04.mdx";
12+
import Doc5 from "../fragments/nextjs/05.mdx";
13+
14+
<Doc0 />
15+
16+
<Doc1 />
17+
18+
<Doc2 />
19+
20+
<Doc3 />
21+
22+
<Doc4 />
23+
24+
<Doc5 />

‎fragments/nextjs/00.mdx‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
このドキュメントは Rails ガイド、
2+
3+
昨今、プログラミングスクールで教えられているカリキュラムを見ると、 HTML/CSS/JavaScript の次が Rails という展開が多く、
4+
5+
- Node.js エコシステムのキャッチアップのし辛さ
6+
- Rails ガイドの完成度
7+
8+
個人的には next.js の生産性は眼を見張るものがあると思っているのですが、
9+
10+
もちろん、 Rails と Next.js はカバー範囲が微妙に違うので比較できる対象ではありません。 ただし、
11+
12+
---
13+
14+
# はじめに
15+
16+
## この本を読むと何がわかるようになるか
17+
18+
本書のゴールは、 node.js によるフロントエンドツールチェインを理解し、TypeScript を用いて React / Next.js のアプリケーションが開発できるようになることです。また、モダンなフロントエンド / Node.js がどういうものかを紹介するという目的があります。
19+
20+
第一部では、 next.js の構成要素を分解しながら、モダンなフロントエンドツールチェインについて学びます。
21+
22+
第二部では、第一部で学んだフロントエンド / Node.js の知識を前提に、実践的な next.js。
23+
24+
Next.js の開発にゴールを設定する意図としては、 Next.js 自体がフロントエンド技術と Node.js の複合的なアプリケーション開発フレームワークです。個別の機能を理解せずに使うことも可能ですが、最小の環境からスタートして、ボトムアップに個別の要素を理解することで、Node.js / フロントエンドへのエコシステムの理解が進むことを期待しています。
25+
26+
また、 next.js 上で React を TypeScript を使って記述していきます。これは HTML / DOM というものの意味論とコンポーネント概念、そして JavaScript 処理系そのものへの理解と洞察が身につくはずです。
27+
28+
本書では、next.js のミニマムな環境からスタートして、TypeScript / Webpack / React / Node.js と段階的に理解を深めながら、 next.js が裏側でやっていることを理解できるようになるのが目的です。なので、この本は next.js を最速で使えるようになる本ではありません。最速で使うだけなら、公式ドキュメントの GETTING STARTED を読んください。
29+
30+
next.js の内部要素を個別に分解しながら、フロントエンドと node.js というものへの理解を深めることを目的とします。
31+
32+
## 本書のターゲット
33+
34+
- 言語としての JavaScript は知っているが、 node や npm を使い方に詳しくない人
35+
- フロントエンドツールチェインに詳しくなりたい人
36+
- サーバーサイド node.js として、 Web Application Framework というものを触ってみたい人
37+
- next.js に詳しくなりたい人
38+
39+
## 前提
40+
41+
本書では ES2019 と呼ばれる仕様をターゲットにします。これは tc39(JavaScript の仕様を決める委員会) の定める、2019 年度に勧告された仕様のことです。この仕様は、Safari / Chrome / Firefox などのブラウザで問題なく動作します。Internet Exproler 11 では動作しませんが、この本を読み終わった頃には、ES2019 を ES5 と呼ばれる水準(IE がサポート)に変換することも可能になるはずです。
42+
43+
ES2019, EcmaScript 2019 Edition, これはつまり、EcmaScript ≒ JavaScript は毎年、文法や機能が追加される言語ということです。毎年変化する言語を学ぶ必要はあるのか？と思う人がいるかも知れません。安心してください。今書いたコードが動かなくことは、セキュリティ問題が発覚したなどの稀な例外()を除いて、とても稀です。「今書いたコードが将来動くこと」を後方互換性といい、JavaScript はこの後方互換性を守ることに、とても注意が払われている言語です。
44+
45+
## この本で書かないこと
46+
47+
- JavaScript の基本的な文法についての解説: [JavaScript Primer \- 迷わないための入門書 \#jsprimer](https://jsprimer.net/) を参照してください
48+
- CSS のコーディング: 本書で解説するのは最小限です。
49+
- データベース: next.js の発展形として、blitz を用いたアプリケーションの解説をしますが、データベースそのものは取り扱いません。
50+
51+
## 読み方
52+
53+
1 章はハンズオン風に next.js を vercel にデプロイして、動くものを少ない手数で作れる、という体験を重視しています。
54+
55+
2 ~ 5 章も同じく、写経で動かしながら、雰囲気を掴むことに注力しています。気になる場合は自分で改造してみてください。
56+
57+
6 章は 2 ~ 5 章 を前提に、実践的な next.js アプリケーションを実装することに注力します。
58+
59+
7 章は blitz というフレームワークを使いますが、まだ実験的なフレームワークなので、軽く紹介、という感じです。これは、 next.js に Rails を置き換えることを期待している人向けに紹介する、ということを意図しています。blitz 自体の開発の進捗や、同じコンセプトのフレームワークが出現した場合、変更したり削除する可能性もあります。
60+
61+
文法上、理解が追いつかないものがある場合、 [JavaScript Primer \- 迷わないための入門書 \#jsprimer](https://jsprimer.net/) を参考にしてください。

‎fragments/nextjs/01.mdx‎

Lines changed: 128 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
# 第 1 章: Hello, Next.js!
2+
3+
## インストールと環境構築
4+
5+
node/npm のインストール
6+
7+
[ダウンロード \| Node\.js](https://nodejs.org/ja/download/)
8+
9+
vscode のインストール
10+
11+
[Visual Studio Code – コード エディター \| Microsoft Azure](https://azure.microsoft.com/ja-jp/products/visual-studio-code/)
12+
13+
## next.js プロジェクトの作成
14+
15+
TODO: Windows での環境構築の説明
16+
17+
ターミナルアプリを起動するか、 vscode 内で `Terminal > New Terminal` でターミナルを起動してください
18+
19+
```
20+
$ mkdir hello-next-app
21+
$ cd hello-next-app
22+
$ npm init -y
23+
24+
# ライブラリのダウンロード
25+
$ npm install next react react-dom --save
26+
$ code . # vscode でプロジェクトを開く
27+
$ code pages/index.js # エディタで開く
28+
```
29+
30+
`pages/index.js` を次のように編集してください
31+
32+
```jsx
33+
export default () => {
34+
return <h1>Hello, Next</h1>;
35+
};
36+
```
37+
38+
ここでは、JavaScript の標準仕様に含まれない jsx という文法を使っています。詳しくは後で解説します。一旦は、ただの HTML を JavaScript の中で書くテンプレート記法だと思ってください。
39+
40+
この時点では、こういうファイル構成になっているはずです。
41+
42+
```
43+
node_modules/
44+
pages/
45+
index.js
46+
package-lock.json
47+
package.json
48+
```
49+
50+
## next サーバーの起動
51+
52+
```
53+
$ npx next
54+
```
55+
56+
ブラウザを開いて、 `http://localhost:3000/` を入力してください
57+
58+
次の画面が見えたら成功です。
59+
60+
TODO: 画像を貼る
61+
62+
## 解説
63+
64+
next.js は `pages/foo.js` というファイルを作成すると、 nqext は `/foo` という URL にそのファイルで `export default` されたコンポーネントを表示します。
65+
66+
今回作成した `pages/index.js` というファイル名は少し特別扱いされていて、`/index` もしくは `/` に対応します。
67+
68+
ついでに `/about` という URL のページを作ってみましょう。
69+
70+
```jsx
71+
// pages/about.js
72+
export default () => {
73+
return (
74+
<div>
75+
<h1>About</h1>
76+
<p>built by next.js</p>
77+
</div>
78+
);
79+
};
80+
```
81+
82+
これで、ブラウザで `http://localhost:3000/about` というページにアクセスできるようになります。
83+
84+
next.js の基本的な規約として `pages/` 以下に置いたファイルの、「ファイル名から拡張子を省いたもの」が、URL に対応します。
85+
86+
## vercel に公開してみよう
87+
88+
vercel は next.js の開発元が運営しているホスティングサービスです。vercel の提供する CLI ツールを使って、 next.js アプリケーションを vercel に公開してみましょう。
89+
90+
```
91+
$ npm install -g vercel
92+
93+
$ vercel
94+
# ユーザー登録/メールアドレス が求められるので入力
95+
Vercel CLI 19.0.1
96+
? Set up and deploy “~/plg/hello-next”? [Y/n] y
97+
? Which scope do you want to deploy to? mizchi
98+
? Link to existing project? [y/N] n
99+
? What’s your project’s name? next-js-tutorial
100+
? In which directory is your code located? ./
101+
Auto-detected project settings (Next.js):
102+
- Build Command: `npm run build` or `next build`
103+
- Output Directory: Next.js default
104+
- Development Command: next dev --port $PORT
105+
? Want to override the settings? [y/N] N
106+
🔗 Linked to mizchi/next-js-tutorial (created .vercel and added it to .gitignore)
107+
🔍 Inspect: https://vercel.com/mizchi/next-js-tutorial/2yh1nfshh [3s]
108+
✅ Production: https://next-js-tutorial-iota.now.sh [copied to clipboard] [31s]
109+
📝 Deployed to production. Run `now --prod` to overwrite later (https://zeit.ink/2F).
110+
💡 To change the domain or build command, go to https://zeit.co/mizchi/next-js-tutorial/settings
111+
112+
$ vercel --prod
113+
Vercel CLI 19.0.1
114+
🔍 Inspect: https://vercel.com/mizchi/next-js-tutorial/2yh1nfshh [2s]
115+
✅ Production: https://next-js-tutorial-iota.now.sh [copied to clipboard] [4s]
116+
```
117+
118+
これは自分の環境での実行例です。最後に表示された、 Production の URL を開いてみてください。(ここでは [https://next-js-tutorial-iota.now.sh/](https://next-js-tutorial-iota.now.sh/)) を開いてみてください。
119+
120+
この URL は誰でもアクセスすることができます。つまり、あなたが作ったウェブサイトが vercel 上で公開されました！おめでとうございます！
121+
122+
## 解説しなかったこと
123+
124+
- npm とはなにか package.json とはなにか
125+
- next.js がどのようにうごいているのか
126+
- React とはなにか
127+
- JSX の文法
128+
- vercel はどのように動いているのか

0 commit comments

Comments
 (0)