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

既存 Web アプリケーションへの React.js 適用/react for web app...

A1
February 19, 2019

既存 Web アプリケーションへの React.js 適用/react for web application

2019.2.19 Rakus Meetup Tokyo #2 フロントエンドNight発表資料

A1

February 19, 2019
Tweet

More Decks by A1

Other Decks in Programming

Transcript

  1. ϚʔΫΞοϓΛγϯϓϧʹอͯΔ ͨͩͰ͑͞ΰνϟ͍͍ͭͯΔKTQʹϑϩϯτΤϯυϥΠϒ ϥϦಠࣗͷه๏Λࠞࡏͤͨ͘͞ͳ͔ͬͨ ˞ίʔυ͸งғؾͰ͢ɻ 3FBDUKTΛબ୒ͨ͠ཧ༝ <!doctype html> <html ng-app> <head>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.7/angular.min.js"></script> </head> <body> <html:form styleId="" menuConfig="HOGE_LIST" queryString="save" method="post" enctype="multipart/form-data"> <label>Name:</label> <input type="text" ng-model="yourName" placeholder="Enter a name here"> <h1>Hello {{yourName}}! </h1> <c:out value="${foo}"/> </hoge:form> </body> </html>
  2. &OIBODFE0CKFDU-JUFSBMT ࣄલʹ͓͍֮͑ͯͨํ͕ྑ͍ϕετ̏ var foo = 0; var obj = {foo};

    // {foo: foo} ͱઃఆͨ͠ͷͱಉ͡ // Computed (dynamic) property names var key = "foo"; var obj = { [key]: 0, [key + "_bar"]: 1 };
  3. 4QSFBE0QFSBUPS ࣄલʹ͓͍֮͑ͯͨํ͕ྑ͍ϕετ̏ var obj = {a:1, b:2}; var obj2 =

    { ...obj, c: 3 }; // { a:1, b:2, c:3 } var [one, two, three] = [1, 2, 3] %FTUSVDUVSJOH TUBUFΛߋ৽͢Δͱ͖ʹΑ͘࢖ΘΕΔ
  4. SFOEFS͞Εͳ͍໰୊ ɾ$PNQPOFOUͷίϯετϥΫλ͕ຖճݺ͹ΕΔͱצҧ͍͍ͯͨ͠ɻ ɾTUBUFΛ௚઀ॻ͖׵͍͑ͯͨͨΊ࠶SFEOFS͞Εͳ͔ͬͨ ϋϚͬͨ͜ͱ class App extends Component { constructor()

    { super(); this.state = { input: “͜ΜʹͪΘ” }; } componentWillRecieveProps(nextProps) { this.setState({ input : nextProps.input }) } } ίϯετϥΫλ͸Ұ౓͔͠ݺ͹Εͳ͍ͷͰɺ ຖճॲཧ͍ͨ͠΋ͷ͸ϥΠϑαΠΫϧϝιου ʹॻ͔ͳ͍ͱμϝ 4UBUFͷߋ৽͸TFU4UBUF Λ࢖Θͳ͍ͱμϝ