Upgrade to Pro — share decks privately, control downloads, hide ads and more …

cookpad summer internship 2018 - JavaScript

18b12f8f7910445b2637f0f21f59d467?s=47 Kazuhito Hokamura
September 18, 2018
Technology
0
9k

cookpad summer internship 2018 - JavaScript

18b12f8f7910445b2637f0f21f59d467?s=128

Kazuhito Hokamura

September 18, 2018
Tweet

More Decks by Kazuhito Hokamura

See All by Kazuhito Hokamura
RailsエンジニアのためのNext.js入門
18b12f8f7910445b2637f0f21f59d467?s=48 hokaccha
6
9.4k
Cookpad Summer Internship 2021 Web Frontend
18b12f8f7910445b2637f0f21f59d467?s=48 hokaccha
0
6.1k
巨大なモノリシック Rails アプリケーションの マイクロサービス化戦略 / 2019 microservices in cookpad
18b12f8f7910445b2637f0f21f59d467?s=48 hokaccha
3
3.1k
巨大なRailsアプリケーションを「普通」にするための取り組み
18b12f8f7910445b2637f0f21f59d467?s=48 hokaccha
1
640
Web Frontend Improvement in Cookpad
18b12f8f7910445b2637f0f21f59d467?s=48 hokaccha
1
630
cookpad summer internship 2018 - Git
18b12f8f7910445b2637f0f21f59d467?s=48 hokaccha
1
9.2k
エンジニアのアウトプットと採用 / Engineer's output and recruiting
18b12f8f7910445b2637f0f21f59d467?s=48 hokaccha
0
1.4k
ログを活用したサービス開発
18b12f8f7910445b2637f0f21f59d467?s=48 hokaccha
2
6.5k
BdashにおけるFlux設計
18b12f8f7910445b2637f0f21f59d467?s=48 hokaccha
4
5k

Other Decks in Technology

See All in Technology
Persistence in Serverless Applications - ServerlessDays NYC
Fd55de4174accaf3b4f030e43a8a70c6?s=48 marcduiker
0
270
OPENLOGI Company Profile
5c588fdfe782f92fa6b081903edd82bb?s=48 hr01
0
750
令和４年資金決済法等改正を踏まえたステーブルコインに関する規制の動向
525442fc70ca92f82ae503f826956137?s=48 finengine
0
430
開発組織の生産性を可視化する State of DevOpsとFour Keysとは / deep dive into State of DevOps
21761f8bc6d1dac4e02fb04b799cb45c?s=48 yfcgpsebp
0
300
アーキテクチャを明文化して開発に臨んだ話
903c7dbf16067d22e7b03ead7d8acdc5?s=48 akkie76
0
360
Data in Google I/O - IO Extended GDG Seoul
3bd69093dbe39b14603242b96cfbd7c6?s=48 kennethanceyer
0
160
Building smarter apps with machine learning, from magic to reality
7e6a435700dda6cdb22105d601f20892?s=48 picardparis
4
3.2k
Autonomous Database Cloud 技術詳細 / adb-s_technical_detail_jp
3115a782126be714b5f94d24073c957d?s=48 oracle4engineer
PRO
10
18k
実際にリビルドを完遂してみて
7ad4f62b63fcd723eea7f690d4f5b65e?s=48 tmiura0203
0
110
HoloLens2とMetaQuest2どちらも動くWebXRアプリをBabylon.jsで作る
Bf0e54ea0d4ea19343ccfbe5d410a96b?s=48 iwaken71
0
210
Design for Humans: How to make better modernization decisions
4d71670118785e492d724ba8c0ae54ad?s=48 indualagarsamy
2
130
UIKitのアップデート 
#WWDC22
9d1961575e45a8286cdde5f86dbba312?s=48 akatsuki174
4
350

Featured

See All Featured
KATA
E9221b172e78e888355fa2fe4541b595?s=48 mclloyd
7
8.7k
JavaScript: Past, Present, and Future - NDC Porto 2020
3ab1249be442027903e1180025340b3f?s=48 reverentgeek
37
3.3k
How GitHub Uses GitHub to Build GitHub
78b475797a14c84799063c7cd073962f?s=48 holman
465
280k
Scaling GitHub
78b475797a14c84799063c7cd073962f?s=48 holman
451
140k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
C44e1f7e22c3f23cff7bc130871047ef?s=48 eileencodes
119
28k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
498
130k
Become a Pro
828ace851b606e1206900f26459f55ad?s=48 speakerdeck
PRO
3
850
Practical Orchestrator
168ccec72eee0530b818d44f3fedaacf?s=48 shlominoach
178
8.6k
A Tale of Four Properties
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
149
21k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
E195ae45320d9202eaa01c9f1d31a416?s=48 marktimemedia
15
950
Six Lessons from altMBA
766b9746b59e6f09e280cd33cf4ed419?s=48 skipperchong
14
1.4k
Principles of Awesome APIs and How to Build Them.
B47b288784fda77a94aeb234ca743c24?s=48 keavy
113
15k

Transcript

  1. JavaScript クックパッド サマーインターンシップ 10 Day Tech for service engineers

  2. Agenda 1. JavaScript 2. TypeScript 3. React

  3. https://code.visualstudio.com/

  4. JavaScript

  5. JavaScript •ブラウザで動作するプログラミング言語 •HTMLを動的に変更してインタラクティブなWebサイト を構築するために使われる •最近はNode.jsやReactNativeなどブラウザ以外でも動 作する環境も多くある

  6. https://developer.mozilla.org/ja/

  7. Development/Debug

  8. 基本文法

  9. // جຊతʹ͸constΛ࢖͏ const str = 'x'; const arr = [1,

    2, 3]; // ఆٛޙʹ࠶୅ೖ͕ඞཁͳ৔߹͸letΛ࢖͏ let message; if (err) { message = 'error!';
 } else { message = 'ok!';
 } 変数宣言

  10. const num1 = 100; const num2 = 3.141592; const str1

    = 'xxx'; const str2 = "yyy"; const str3 = `foo${str}bar`; const x = null; const bool = true; const re = /foo.+$/i; リテラル

  11. const arr = [1, 2, 3]; arr[0] //=> 1 //

    for-ofͰΠςϨʔγϣϯ for (const v of arr) { console.log(v); // 1, 2, 3 } // ֤छϝιουͰΠςϨʔγϣϯ arr.forEach((v) => { console.log(v); }) //=> 1, 2, 3 arr.map((v) => { return v * 2; }); //=> [2, 4, 6] arr.filter((v) => { return v > 1; }); //=> [2, 3] 配列

  12. const obj = { foo: 'bar', fn: () => {

    console.log('hello!') } }; obj.foo; //=> 'bar' obj.fn(); //=> hello! obj.a = 'b'; // Shorthand property names const x = 1; const y = 2; const obj2 = { x, y }; // { x: x, y: y } オブジェクト

  13. // function จ function square(x) { return x * x;

    } // function ࣜ const square = function(x) { return x * x; }; // Arrow function ࣜ const square = (x) => { return x * x; }; // Ҿ਺͕1ͭͷͱ͖͸ () ΛলུՄೳɻ{ } Λলུͨ͠৔߹୯Ұͷ͕ࣜॻ͚ͯͦͷࣜͷ஋͕return͞ΕΔ const square = x => x * x; square(5); //=> 25 関数

  14. class Greeter { constructor(name) { this.name = name; } greet()

    { return `Hello ${this.name}!`; } } const g = new Greeter('hokaccha'); g.greet(); //=> 'Hello hokaccha!'; Class

  15. Modules // lib/Greeter.js export default class Greeter { constructor(name) {

    this.name = name; } greet() { return `Hello ${name}!`; } } export function hello(name) { return `Hello ${name}!`; }

  16. Modules // app.js // default import import Greeter from './lib/Greeter';

    // named import import { hello } from './lib/Greeter'; // mixed import Greeter, { hello } from './lib/Greeter';

  17. 非同期処理

  18. 同期 // Ծʹwait͕ॲཧΛϒϩοΫͨ͠ͱ͢Δͱ଴͍ͬͯΔؒʹԿ΋Ͱ͖ͳ͍ wait(1000); doSomething(); 非同期 // ଴͕ͪ࣌ؒܦաͨ͠Β࣮ߦ͞ΕΔؔ਺Λొ࿥ wait(1000, ()

    => { doSomething(); }); // ܧଓͯ͠ॲཧΛଓ͚ΒΕΔ

  19. 非同期処理の実装 •callback •Promise •async/await

  20. callback http.get('/a', response => { // ... });

  21. callback http.get('/a', responseA => { http.get('/b', responseB => { http.get('/c',

    responseC => { // ... }); }); });

  22. callback http.get('/a', (err, responseA) => { if (err) { return

    handleError(err); } http.get('/b', (err, responseB) => { if (err) { return handleError(err); } http.get('/c', (err, responseC) => { if (err) { return handleError(err); } // ... }); }); });

  23. Promise function get(url) { return new Promise((resolve, reject) => {

    http.get(url, (err, response) => { if (err) { reject(err); } else { resolve(response); } }); }); } get('/a').then(response => { // do something }).catch(err => { // error handling });

  24. Promise get('/a') .then(responseA => { return get('/b'); }) .then(responseB =>

    { return get('/c'); }) .then(responseC => { // do something }) .catch(err => { // error handling });

  25. async/await async function req() { const responseA = await get('/a');

    const responseB = await get('/b'); const responseC = await get('/c'); return responseC; } async function f() { try { const res = await req(); // do something } catch (err) { // error handling } }

  26. DOM

  27. DOM •HTML文書をプログラムから扱うためのAPI仕様 •JavaScriptの言語仕様とは別に仕様が策定されている

  28. <!DOCTYPE html> <html> <head> <script src="app.js" defer></script> </head> <body> <button

    id="button">Click Me!</button> <div id="message"></div> </body> </html>

  29. // HTMLʹॻ͔Ε͍ͯΔ button ཁૉΛऔಘ const button = document.getElementById('button'); // click͞Εͨͱ͖ͷϋϯυϥʔΛొ࿥

    button.addEventListener('click', async () => { // HTTP RequestͰAPIΛݺͼग़͢ const response = await fetch('/message'); const body = await response.json(); // #messageͷ಺༰Λॻ͖׵͑Δ document.getElementById('message').innerHTML = body.message; });

  30. // HTMLʹॻ͔Ε͍ͯΔ button ཁૉΛऔಘ const button = document.getElementById('button'); // click͞Εͨͱ͖ͷϋϯυϥʔΛొ࿥

    button.addEventListener('click', async () => { // HTTP RequestͰAPIΛݺͼग़͢ const response = await fetch('/message'); const body = await response.json(); // #messageͷ಺༰Λॻ͖׵͑Δ document.getElementById('message').innerHTML = body.message; }); %0."1*

  31. TypeScript

  32. TypeScript •Microsoftによって開発されているプログラミング言語 •JavaScriptに静的型付けの機能を取り入れたAltJS •JavaScriptのスーパーセット

  33. JavaScript function greeter(person) { return "Hello, " + person; }

    const user = "hokaccha"; const message = greeter(user);

  34. TypeScript function greeter(person: string): string { return "Hello, " +

    person; } const user = "hokaccha"; const message = greeter(user);

  35. TypeScript function greeter(person: string): string { return "Hello, " +

    person; } const user = [1, 2, 3]; const message = greeter(user); //=> error TS2345: Argument of type 'number[]' is not assignable to parameter of type 'string'.

  36. Basic Types let str: string; let num: number; let bool:

    boolean; let arr: string[]; let fn: (a: string, b: string) => boolean; type StrOrArr = string | string[]; type StrOrNull = string | null;

  37. Generics class Queue<T> { private data: T[] = []; enqueue(item:

    T) { return this.data.push(item); } dequeue(): T { return this.data.shift(); } } const queue = new Queue<number>(); queue.enqueue(10); queue.enqueue('x'); // Error!

  38. Generics interface User { name: string; } async function getUser():

    Promise<User> { const response = await fetch('/user'); const body = await response.json(); return body; } async function f() { const user: User = await getUser(); }

  39. Gradual Typing

  40. Gradual Typing •静的片付けを部分的に導入することができる型システム •TypeScriptでは型検査をしないany型により実現される

  41. // Ҿ਺ͷܕ͕anyʹͳΔͷͰͲΜͳܕͰ΋௨Δ function greeter(person) { return "Hello, " + person;

    } const user = [1, 2, 3]; const message = greeter(user); //=> ok Gradual Typing

  42. Structural Subtyping

  43. •部分型かどうかを構造が同じかどうかで判定する •静的型におけるダックタイピング Structural Subtyping

  44. interface Person { firstName: string; lastName: string; } class User

    { firstName: string; lastName: string; } const user1: Person = new User(); // ok const user2: Person = { firstName: "Kazuhito", lastName: "Hokamura" }; // ok Structural Subtyping

  45. class User { name: string; } class Product { name:

    string; } const user: User = new Product(); // ok const product: Product = new User(); // ok Structural Subtyping

  46. React

  47. JavaScript Frameworks •jQuery •Backbone.js •Angular •Vue.js •React

  48. None

  49. class App extends React.Component { constructor(props) { super(props); this.state =

    { name: '' }; } handleInput(event) { this.setState({ name: event.target.value }); } render() { return <div> <input type="text" onInput={event => this.handleInput(event)} /> <div>Hello, {this.state.name}</div> </div>; } } ReactDOM.render(<App />, document.getElementById('app'));

  50. class Button extends React.Component { render() { return <button onClick={()

    => this.props.onClick()}> <i className={`icon-${this.props.icon}`} /> {this.props.label} </button> } } <Button label="Click Me" icon="caret" onClick={() => alert('Hi!')} /> JSX
  51. None

  52. Lists and Keys class App extends React.Component { render() {

    // users: [{ id: 1, name: 'foo' }, { id: 2, name: 'bar' }] const items = this.props.users.map(user => { return <li key={user.id}>{user.name}</li>; }); return <div>{items}</div>; } }

  53. interface State { name: string; } interface Props { defaultName:

    string; } class App extends React.Component<Props, State> { constructor(props: Props) { super(props); this.state = { name: props.defaultName }; } handleClick() { this.setState({ a: 'b' }); // Error } } <App foo="bar" />; // Error With TypeScript

  54. 設計パターン

  55. stateとprops •state: コンポーネント自身が管理している状態 •props: 親コンポーネントから受け取る不変なパラメータ

  56. Presentational Component •データを元にどういうviewを構築するかだけに専念する •状態を持たないStatelessなコンポーネントとして作る •親コンポーネントからもらうpropsのみに依存する

  57. class Greeter extends React.Component<{}, {}> { render() { return <div

    className="greeter">Hello, {this.props.name}</div>; } } // ୯ͳΔؔ਺ͱͯ͠΋ఆٛͰ͖Δ function Greeter(props) { return <div className="greeter">Hello, {this.props.name}</div>; } Stateless Component

  58. Container Component •ツリーのルートでstateを持つコンポーネント •子のコンポーネントに状態を渡してツリーを構築する •イベントをハンドリングしてstateの更新をおこなう

  59. class App extends React.Component { constructor(props) { super(props); this.state =

    { name: '' }; } handleInput(event) { this.setState({ name: event.target.value }); } render() { return <div> <input type="text" onInput={event => this.handleInput(event)} /> <Greeter name={this.state.name} /> </div>; } } Container Component

  60. Container Component Stateless Component

  61. 1. イベント発生

  62. 1. イベント発生 2. 更新通知

  63. 1. イベント発生 2. 更新通知 3. state更新

  64. 1. イベント発生 2. 更新通知 3. state更新 4. DOM更新

  65. Lifecycle

  66. Component Lifecycle

  67. Fetch data class App extends React.Component { constructor(props) { super(props);

    this.state = { name: '' }; } async componentDidMount() { const response = await fetch('/user'); const body = await response.json(); this.setState({ name: body.name }); } render() { // ... } }

  68. Practice

  69. 1. Rubyのサーバーから書籍のリストを取得して表示 2. タイトルでインクリメンタルサーチする機能を実装 3. 各フィールドでソートできる機能を実装 4. スタイルをいい感じにする

  70. 環境構築 $ npm install -g create-react-app $ create-react-app booklist-front \

    --scripts-version=@hokaccha/create-react-app-ts-dev $ cd booklist-front $ yarn start