はじめに 自身のオリジナルアプリの作成により、JavaScriptを取り入れることで、「高機能なWebページ」を実装できることができました。 今回は、JavaScriptの「ライブラリ」と呼ばれる便利ツールのようなものを紹介したいと思います。 あくまで紹介のみですので、詳細や環境構築の説明は行いません。 実際の開発現場でよく使用するライブラリが中心であるため、今後開発を進める上での自身の備忘録としてここに記します。 私は初学者のため、間違いがございましたらお手数ですがご指摘いただけますと幸いです。 jQuery （ジェークエリー） 現在は下火傾向になるようですが、手軽に扱えることから今でも十分根強い人気があります。 特徴 ① HTMLの取得 & 追加削除がしやすい DOM操作（HTMLの取得や追加削除など）が容易で、コードを短く、かつ簡単に書くことができます。 ② Ajax処理の記述が簡単にできる 文字通りです。 Ajax（エイジャックス）という非同期通信技術の一つを用いるのですが、JavaScriptだけでサーバー通信を行い、 Ajax処理を容易に実行できるように設計されています。 ③ プラグインが豊富でさまざまな拡張が可能 プラグインすることにより、さまざまな処理や効果に対応できるようになります。 たくさんあるため、プラグインを導入すれば、自分が欲しい処理や効果を簡単に生み出すことができます。 無料で手に入るものもあるので、下記を参考にしてみてください。 【参考】 ④ ブラウザの影響を受けない JavaScriptは各ブラウザに搭載されたプログラムによって実行されます。 ChromeやSafari、FireFoxなどで、それぞれ微妙に対応可能なメソッドが異なります。 jQueryはブラウザ毎の記述の差異を自動的に吸収してくれるため、ブラウザの違いを意識せずプログラミングできます。 Node.js （ノード ・ ジェーエス） JavaScriptをサーバーサイドで動作させることができるプラットフォームです。 主に、リアルタイムで反応が必要なチャットアプリケーションの開発によく用いられています。 特徴 ① 接続を大量に処理できる イベント駆動型で、前の処理の完了を待たずに次の処理を開始します。 そのため、大量の同時接続が発生した場合でも処理を行うことが可能です。 ② 小規模な計算が速い JavaScript実行エンジンである「GoogleV8JavaScriptEngine」を採用しています。 そのため、非常に高速な動作が可能になり、小規模な計算であれば計算速度も速いです。 ③ リアルタイムの処理が速い シングルスレッドを採用しており、多くの接続があってもリアルタイムでレスポンスを返せるという特徴があります。 そのため、リアルタイムで動作するアプリケーションでの利用に適していると言えます。 ④ Webサーバーが軽量 Node.jsは非常に軽量な設計になっているため、複数の人が利用していても動作が重たくなることがありません。 そのため、チャットなどのサーバーであればNode.jsを利用すれば簡単に構築可能です。 TypeScript （タイプスクリプト） マイクロソフト社によって開発された、オープンソースのプログラミング言語になります。 Googleが開発するライブラリ（後述するAngular）にも導入されており、将来性がある言語の一つといえます。 特徴 ① JavaScriptで型の定義ができる let color: string = "gray" function log(message: string){ console.log(message) } 上記のような型を定義できる言語を静的型付け言語と言います。 ちなみに、Rubyや通常のavaScriptは動的型付け言語になります。 動的型付け言語は型を定義しなくて良いので、プログラムを記述するのは簡単ですが、エラーを起こす可能性もあります。 一方で、静的型付け言語は型を宣言して開発を行うので、事前に起こり得るエラーに対応できるというメリットがあります。 ② JavaScriptとの互換性が高い 他のAltJS同様に、記述したコードをコンパイルするとJavaScriptのコードに変換され、ライブラリ群を含め100%の互換性を持っています。 TypeScriptで拡張された機能は、コンパイラを通すことでJavaScriptのコードに変換されます。 現行のJavaScriptで記述されたプログラムはすべて、TypeScriptのプログラムとして実行が可能です。 React （リアクト） Facebookが開発をしたライブラリです。仮想DOMの概念によって、より早い高速なアプリケーション実装が実現できます。 また、AndroidやiOSのネイティブアプリケーション開発に、Reactを用いるフレームワークであるReact Nativeを使用することができます。 柔軟性も高いことから、最近大きく人気が増しています。 Vue.js （ビュー・ジェーエス） 近年JavaScriptのライブラリとして取り入れる現場が増えている人気のライブラリです。 Reactと同様に仮想DOMの概念があり、冗長な記述を減らして、HTMLやCSSを中心にしたWebアプリ開発が可能です。 Angular （アンギュラー） Google等が開発したライブラリです。 Angular自体もライブラリですが、さらにAngular内にも標準で多数のライブラリが用意されています。 したがって、外部の機能を使わずとも、公式の機能のみで十分な開発を行うことができます。 その機能の多さからAngularはフルスタックなライブラリと言われています。 また、Angularは推奨言語にJavaScriptではなく、TypeScriptを採用していることも特徴です。 過去にはAngularJSと呼ばれていましたが、大幅なアップデートを経てAngularと呼ばれるようになりました。 おわりに JavaScriptには、開発の目的に沿ってライブラリがいくつも存在することがわかりました。 そして、モダンな開発手法として、コンポーネント指向を取り入れているケースが多い傾向があることも理解しました。 特に仮想DOMの概念によって、より高速なアプリケーションが実現した背景があるからこそ、現在の形になっているのだと思いました。 参考

こんにちは、この前のインターンで培ったナレッジの覚書です。 StateとProps コンポーネントを制御するデータ　には、StateとPropsの２種類があります。 State Stateは、コンポーネントのデータを表す状態です。 プライベートに値を変更することができます。 子コンポーネントに値をあげる場合は後述するPropsをお使いください。 ・変えられるデータ ・プライベートな値 ・コンポーネントによってそれぞれ保持する Props プロパティの略称です。 ステートとは違い、値を変更出来ません。 例えば、ボタンをクリックしてオンオフの状態を変化させる場合はPropsで大丈夫です。 常にボタンを点滅させたい場合は、オンオフが時間と共に変化するのでステートにするべきです。 ・値を変えられない ・親から渡される ・渡ってきた値の検証、設定が可能 まとめ Stateは同一スコープ内で使い、コンポーネント分けする際はPropsを使うということだけ理解しておけば大丈夫だと思います。

はじめに 学習するに至った経緯 2020年より、未経験からエンジニアへの転職を目指し、某プログラミングスクールへ通う。入学後、『Ruby』を未経験から学ぶ人が多いのと『Ruby』の求人が思っていた以上に少ないので、卒業後、フロントエンドのエンジニアを目指す事に。 Reactの学習した事を言語化し、認識の深化による備忘録として記載。 useStateとは 関数コンポーネント内でstateを保持するためのフック。 フック(Hookとは) React16.8で追加された新機能で、関数コンポーネントにstateやライフサイクルといったReactの機能を"接続する(hook into)"ための関数のこと。 useStateを使うと何ができるのか useStateを用いることで、コンポーネントに状態(state)を持たせることができる。 状態(state)とは、コンポーネントに管理され、プライベートであるべき値のこと。 注意点 フックを呼び出すのはトップレベルのみ ・　フックは条件分岐等では呼び出さない。 ・　フックは呼び出される順番で状態を管理している。 ・　毎回同じ順番で呼び出さないとバグの原因となる。 クラスコンポーネントではフックは使えない 実際にコーディングしてみる useStateの動作確認用のアプリを用意 create-react-appのtypescriptテンプレートを使用 terminal npx create-react-app <ファイル名> --template typescript or yarn create react-app <ファイル名> --template typescript countアプリで基本の動きを理解 ① src / components / Counter.tsxを作成する ② App.tsxとCounter.tsxを作成する App.tsx import React from 'react'; import Counter from './components/Counter'; import './App.css'; function App() { return ( <div className="App"> <Counter /> </div> ); } export default App; Counter.tsx import React from 'react' const Counter: React.VFC = () => { return <div>Counter</div>; }; export default Counter; (1)：一般的な書き方 Counter.tsx import React, {useState} from 'react' const Counter: React.VFC = () => { const [count, setCount] = useState(100); return <button onClick={() => setCount(count + 1)}>{count}</button>; }; export default Counter; (2)：新しいstateが前のstateに基づいて計算される場合 Counter.tsx import React, { useState } from 'react'; const Counter: React.VFC = () => { const [count, setCount] = useState(100); return ( <button onClick={() => { setCount((prevCount) => prevCount + 1); setCount((prevCount) => prevCount + 1); }} > {count} </button> ); }; export default Counter; (3)：初期値の計算に時間がかかる場合 Counter.tsx import React, { useState } from 'react'; function initializeCounter() { for (let i = 0; i < 20000; i++) { console.log(i); } return 0; } const Counter: React.VFC = () => { const [count, setCount] = useState(() => { const initialValue = initializeCounter(); return initialValue; }); return ( <button onClick={() => { setCount((prevCount) => prevCount + 1); setCount((prevCount) => prevCount + 1); }} > {count} </button> ); }; export default Counter; 入力フォームをuseStateで管理する src / components / InputForm.tsx ①：１つのステートフックで複数の入力フォームの状態を管理 InputForm.tsx import React, { useState } from 'react'; const InputForm: React.VFC = () => { const [name, setName] = useState({first: '', last:''}); return ( <div> <input value={name.first} onChange={(e)=> setName((prevName)=>({ first:e.target.value, last:prevName.last, })) } /> <input value={name.last} onChange={(e)=> setName((prevName)=>({ ...prevName, last:e.target.value, })) } /> <p> {name.first} {name.last} </p> </div> ); }; export default InputForm; ②：複数のステートフックで複数の入力フォームの状態を管理 InputForm.tsx import React, { useState } from 'react'; const InputForm: React.VFC = () => { // const [name, setName] = useState({first: '', last:''}); const [firstName, setFirstName] = useState(''); const [lastName, setLastName] = useState(''); return ( <div> <input // value={name.first} // onChange={(e)=> // setName((prevName)=>({ // first:e.target.value, // last:prevName.last, // })) // } value={firstName} onChange={(e)=> setFirstName(e.target.value)} /> <input // value={name.last} // onChange={(e)=> // setName((prevName)=>({ // ...prevName, // last:e.target.value, // })) // } value={lastName} onChange={(e)=> setLastName(e.target.value)} /> <p> {/* {name.first} {name.last} */} {firstName} {lastName} </p> </div> ); }; export default InputForm; ①と②のどちらを使うか ②を使う。 理由：コードがシンプルになる。変数名でどんな状態を管理しているかわかりやすい。 参考サイト 【ReactHooks入門】第2回：useStateの理解 【React Hooks】useStateの基本を理解しよう

はじめに いのべこ夏休みアドカレで作成したアプリケーションをクラウドへ公開（デプロイ）してみます。 お決まりですが、目的はデプロイのみであり、他非機能要件に対してクラウドのセットアップ、設定は省いています。 従ってクラウドデプロイのアウトラインレベルであることをお断りしておきます。 また、本方法やコードの一部を用いる場合は自己責任でお願いします。 目的 上述の通り、ローカルで開発したアプリをクラウドデプロイします。 開発した時と同じように動作すればOKです。 コンテナイメージの手動デプロイ、プロキシ構築、コンフィグ等 開発したアプリを本番環境で動作させるときのイメージでしょうか？ 環境 AWSでまずはEC2を使いたいと思います。 プラットフォームは使い慣れているUbuntuを使います。 1. 環境構築 1. EC2インスタンス作成 先ずはEC2インスタンスを作成し立ち上げます。 とりあえずSSH接続用の鍵を作成し、インバウンドは22番はマイIP許可、443はALLにしておきます。 2. docker(compose)インストール SSHでEC2へ接続し必要なパッケージをインストールします。Ubuntuなのでaptを使います。 $ apt moo (__) (oo) /------\/ / | || * /\---/\ ~~ ~~ $ apt update $ apt upgrade $ apt install docker $ apt install docker-compose $ ~$ docker --version Docker version 20.10.7, build 20.10.7-0ubuntu1~20.04.1 $ docker-compose -version docker-compose version 1.25.0, build unknown 3. アプリケーション改修 ローカルではVSCode上でReact、NestJSの開発サーバーで起動させていましたが、 AWS上ではDockerイメージを使ってデプロイさせます。 また、各リクエストを受付るリバースプロキシをnginxで構成します。 あとは一応オレオレ証明書を使ってhttps対応します。 今は無料でいい証明書サービスがありますのでオレオレ不要かも docker-compose.yml version: "3" services: rev: image: sample-app-rev:latest container_name: rev ports: - "443:443" depends_on: - keycloak ... packages\rev\nginx\templates\default.conf.template server { listen 443; ssl on; server_name ms-sample-app.com; root /var/www/html; index index.html index.htm; ssl_certificate /etc/pki/tls/certs/server.crt; ssl_certificate_key /etc/pki/tls/private/server.key; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Host $host; proxy_set_header X-Forwarded-Server $host; proxy_set_header X-Forwarded-Port $server_port; proxy_set_header X-Forwarded-Proto $scheme; location / { proxy_pass http://web:3001; } location /auth { proxy_pass http://keycloak:8080; } location /api { proxy_pass http://api:3000; } } 4. docker-compose定義作成 各コンテナをdocker-composeを使って定義します。 アプリ、keycloakが利用するDBも定義します。 5. デプロイ 自動化まではしませんが、ローカルでDockerイメージをビルドして、tar.gz形式へセーブ、AWSにscpして AWS側でイメージをロードしてイメージを反映させます。 （AWSのECRなどは今後使って別記事でまとめたいと思います） 手順としては 1. Dockerイメージのビルド docker-compose build 2. タグ付け、save(エクスポート) docker save sample-app-rev | gzip -c > images/sample-app-rev.tar.gz ... 3. EC2へscpでファイル転送 scp -i "xxxx.pem" images/* user@myec2.compute.amazonaws.com:~/sample-app 4. EC2へSSH接続しDockerイメージのロード(docker load) ssh -i "xxxx.pem" user@myec2.compute.amazonaws.com cat sample-app-rev.tar.gz | gzip -d | sudo docker load 5. コンテナ群起動 $ sudo docker-compose up -d 7. 動作確認 最後に動作確認します。 コンテナが起動していて、httpsでブラウザからアプリが動作していればOK $ sudo docker ps CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES 7774c12a6126 sample-app-rev:latest "/docker-entrypoint.…" 2 days ago Up 9 minutes 80/tcp, 0.0.0.0:443->443/tcp, :::443->443/tcp rev 84806e8e0caf sample-app-web:latest "/docker-entrypoint.…" 2 days ago Up 9 minutes 80/tcp, 0.0.0.0:49155->3001/tcp, :::49155->3001/tcp web d40eb2a98cf5 quay.io/keycloak/keycloak:latest "/opt/jboss/tools/do…" 2 days ago Up 9 minutes 0.0.0.0:8080->8080/tcp, :::8080->8080/tcp, 8443/tcp keycloak d16bb66dd269 sample-app-api:latest "docker-entrypoint.s…" 2 days ago Up 9 minutes 0.0.0.0:49154->3000/tcp, :::49154->3000/tcp api 95cd18d0c039 postgres:latest "docker-entrypoint.s…" 2 days ago Up 9 minutes 0.0.0.0:5432->5432/tcp, :::5432->5432/tcp appdb f2fb70558718 postgres:latest "docker-entrypoint.s…" 2 days ago Up 9 minutes 0.0.0.0:49153->5432/tcp, :::49153->5432/tcp keycloakdb さいごに 簡単でしたね。これでサービスが世の中に公開できると考えると素晴らしい！！ もう少しインフラレイヤでの考慮事項（LB、SSL終端・・・）などもありますし、実際のプロジェクト、 業務で構築するには脆弱ですね。ただし、アプリの検証という意味ではこれで十分でした。 LB取り付けてみたり、S3使ってみたりとか色々試してみたいですね。

こんにちは、インターンで培ったナレッジを共有したくて書いています。 StateとProps コンポーネントを制御するデータ　には、StateとPropsの２種類があります。 State Stateは、コンポーネントのデータを表す状態です。 プライベートに値を変更することができます。 子コンポーネントに値をあげる場合は後述するPropsをお使いください。 ・変えられるデータ ・プライベートな値 ・コンポーネントによってそれぞれ保持する Props プロパティの略称です。 ステートとは違い、値を変更出来ません。 例えば、ボタンをクリックしてオンオフの状態を変化させる場合はPropsで大丈夫です。 常にボタンを点滅させたい場合は、オンオフが時間と共に変化するのでステートにするべきです。 ・値を変えられない ・親から渡される ・渡ってきた値の検証、設定が可能 まとめ Stateは同一スコープ内で使い、コンポーネント分けする際はPropsを使うということだけ理解しておけば大丈夫だと思います。