2018-03

react.js

Reactのinput部品をバリデートする

Reactのinput部品をバリデートする 「Reactでinput部品を扱う」を投稿しましたが、今度は入力値をバリデートしてみます。 入力値はstateを使用して管理するので、this.setStateする前に入力値をチェックします。 以...
react.js

Reactでinput部品を扱う

Reactでinput部品を扱う Reactコンポーネントでinput部品を扱ってみます。 とりあえずレンダリングしてみます。 class DynaForm extends React.Component { constructor(pro...
react.js

ReactのクリックイベントはonclickではなくonClick

ReactのクリックイベントはonclickではなくonClick Reactコンポーネントを定義する際は、onclickでは動作しません。 onClick(Cが大文字)を使用します。※Reactではイベントはキャメルケースになります on...
react.js

Reactコンポーネントのステート(状態)を管理する

Reactコンポーネントのステート(状態)を管理する Reactコンポーネントのステートとは、たとえばラジオボタンの何れがオンになっているかという状態を管理記憶するための機能です。 stateオブジェクトを使用することで実現します。 コンポ...
ECMA Script6

JSのvarはほぼ非推奨で良いと思う

JSのvarはほぼ非推奨で良いと思う JSの言語仕様がこれだけ変わっていくと、もはやvarなんて使うことはないような気がします。 letかconstで代用できます。さらに言うとconstだけでも良いような気がしてきます。 再代入するものに関...
ECMA Script6

ReactでES6のmapメソッドを使用してリストを作成する

ReactでES6のmapメソッドを使用してリストを作成する HTMLリストをレンダリングするReactコンポーネントを作成してみます。 class Test extends React.Component { render() { con...
spring boot

Spring BootでEntityManager.createQueryやcreateNativeQueryでデータベースアクセスする方法

Spring BootでEntityManager.createQueryやcreateNativeQueryでデータベースアクセスする方法 Spring Bootで@Repositoryアノテーションを付与したインタフェースで@Query...
react.js

Reactの仮想DOMを更新する

Reactの仮想DOMを更新する Reactには仮想DOMという機能があります。この機能はDOMの状態をメモリ上に保持して更新前後の変更箇所の実を更新するという仕組みらいしく、その為、レンダリングが非常に速いという特徴があるようです。 se...
react.js

Reactのプロジェクトを作成する

Reactのプロジェクトを作成する Reactのプロジェクトをfacebook公式のcreate-react-appコマンドを使用して作成してみます。 node.jsがインストールされていることが前提です。 参考:nodistからインストー...
ECMA Script6

ES6のexport default

ES6のexport default ES6のexport defaultのdefaultはimportする際に指定が無ければそのクラスまたはメソッドを呼ぶ、という意味があります。 export default class App { //...
spring boot

Spring BootでRestTemplateのClientHttpRequestFactory実装クラスをHttpComponentsClientHttpRequestFactoryに変更する

Spring BootでRestTemplateのClientHttpRequestFactory実装クラスをHttpComponentsClientHttpRequestFactoryに変更する
react.js

Reactのコンポーネントは再利用可能

Reactのコンポーネントは再利用可能 一度定義したコンポーネントはいくらでも作成して再利用することができます。 const Test = (attr) => {// アロー関数です(wordpressで上手く表示されないので) retur...
react.js

ReactのReact.Componentメソッド

ReactのReact.Componentメソッド Reactでコンポーネントを作成するには、React.Componentメソッドを使用します。(React15.5からReact.createClassメソッドは非推奨) ES6のclas...
react.js

ReactのReact.createClassメソッド

ReactのReact.createClassメソッド React.createClassメソッドを使用して、Reactのコンポーネントを作成することができます。 const Test = React.createClass({ rende...
react.js

Reactコンポーネントのファンクショナルコンポーネントとは

Reactコンポーネントのファンクショナルコンポーネントとは ファンクショナルコンポーネントとは、その名のとおり関数で定義します。 const Test = (attr) => { return <h1>hello, world</h1>;...
react.js

ReactのJSXとは

ReactのJSXとは JSXというのはJavaScriptの拡張言語のことで、このJSXでは、JS内にhtmlを記述することができます。 以下、例です。 <script type="text/babel"> const a = <h1>h...
react.js

Reactでhello world

Reactでhello world React.jsを使ってとりあえずレンダリングしてみましょう。習うより慣れろという感じで。 React.jsを使うには以下の3行をheadタグ内に記述する必要があります。(とりあえず) <script s...
戯言

人売りIT派遣企業(SES・客先常駐)はブラック企業ではない

人売りIT派遣企業(SES・客先常駐)はブラック企業ではない 今日、ネットサーフィンしてたらこの記事を見つけました。幾らなんでもちょっと言い過ぎじゃないか?と思いましたので人売りIT派遣企業(エンベデッドは社内開発でもやっていますが)で誇り...
Phalcon3

Phalcon3でPhalcon\Mvc\Microクラスを使用してRESTful APIを作ってみる

Phalcon3でPhalcon\Mvc\Microクラスを使用してRESTful APIを作ってみる 公式のチュートリアルにあるようにREST APIを作成する場合はマイクロアプリケーションで作成してみます。 public\index.p...
API Gateway

API GatewayでプライベートAPIを作成する方法

API GatewayでプライベートAPIを作成する方法 プライベートAPIを作成して、自分のアカウントのEC2からしかアクセスできないプライベートAPIを作成します。 エンドポイントの作成 まずVPCでエンドポイントを作成します。 セキュ...
コトバンク

ボーイスカウトの法則とは

ボーイスカウトの法則とは ボーイスカウトが来る前よりも来た後のほうがソースが奇麗になっていることを意味します。 逆のことをする人も時々います。
API Gateway

API Gatewayのオーソライザーの機能を確認してみる

API Gatewayのオーソライザーの機能を確認してみる API Gatewayのオーソライザー機能を利用すると、認可をすることができるようになります。 「トークン」タイプと「リクエスト」タイプがあるようです。 トークンタイプ トークンタ...
Putty

Putty,Pagentに秘密鍵を登録して踏み台サーバ経由でポートフォワーディングしてRDSに接続する方法

Putty,Pagentに秘密鍵を登録して踏み台サーバ経由でポートフォワーディングしてRDSに接続する方法 AWS EC2のポート22を開放して踏み台サーバを構築する、というケースはよくある構成だと思われます。 Puttyをインストールしま...
コトバンク

ブルックスの法則とは

ブルックスの法則とは 4年ほど前に、とある政令指定都市の国民健康保険のPJに参画していた時の話です。 私が参画した時には既に300名ほどいて、約380h/1か月働いてました。 エンジニアがどんどん投入され、ピーク時は500名強まで膨れ上がり...
Mattermost

SlackとMattermostを使ってみた感想

SlackとMattermostを使ってみた感想 最近SlackとMattermostを使う機会が増えました。 Mattermost(オンプレミス)を使う理由は「Slackでクラウド上に重要なやり取りをするのは怖い」という企業さんが多いです...
EC2

AWS VPC上のパブリックサブネット内にNATインスタンスを作成する

AWS VPC上のパブリックサブネット内にNATインスタンスを作成する パブリックサブネット内にEC2を作成しNATの機能を持たせます。 なぜパブリックサブネット内にNATインスタンスを置くかというと、プライベートサブネット内でWindow...
AWS

AWS EC2にはInspector導入して脆弱性を検知する

AWS EC2にはInspector導入して脆弱性を検知する EC2の脆弱性を検知してくれるInspectorというサービスがあります。 「今すぐ始める」をクリックします。 「EC2 インスタンスへのタグの付加」をクリックします。EC2は作...
AWS

AWS VPCのプライベートサブネット上にEC2を起動する

AWS VPCのプライベートサブネット上にEC2を起動する プライベートサブネットは構築済みとします。詳細は、AWS VPCを使用してネットワーク構築する方法を参照ください。 EC2インスタンス生成時にプライベートサブネットを指定しておく必...
AWS

AWS VPCを使用してネットワーク構築する方法

AWS VPCを使用してネットワーク構築する方法 AWSのVPCサービスを使用してバーチャルプライベートクラウドのネットワークを構築してみます。 「VPCウィザードの作成」をクリックします。 説明用にシンプルな「1個のパブリックサブネットを...
AWS

AWS Route 53の使い方

AWS Route 53の使い方 Route 53とはスケーラブルなDNSのようです。DNSをスケーラブルにするというのがインフラエンジニアではない私にはピンときませんが、、。 Route 53で出来ることは、EC2上のWebサーバに独自ド...
AWS

AWS EC2にElastic IPで固定IPアドレスを割り当てる

AWS EC2にElastic IPで固定IPアドレスを割り当てる AWS EC2でWebサーバを起動するで、Webサーバ起動してみましたが、EC2を再起動するとパブリックIPが変わってしまいます。 これだと再起動するたびにWebサーバのI...
AWS

AWS EC2でWebサーバを起動する

AWS EC2でWebサーバを起動する EC2とはクラウド上の仮想サーバのことで、インスタンス(OS)を作成する事ができます。ここではAmazon Linuxサーバを作成してみます。 「インスタンスの作成」をクリックします。 「選択」をクリ...
Mac

MacのQuickLookでJSONファイルをプレビューする

MacのQuickLookでJSONファイルをプレビューする MacでQuickLookと言う便利な機能がありますが、JSONファイルをプレビューするにはプラグインをいれないと見る事は出来ません。該当ファイルをアクティブにしてスペースを押す...
VirtualBox

VirtualBoxのゲストOSからマウスカーソルをホストOSに戻す方法

VirtualBoxのゲストOSからマウスカーソルをホストOSに戻す方法
マークダウン

MacのMacDownエディタでマークダウンを覚える

MacのMacDownエディタでマークダウンを覚える MacDownはマークダウン用のエディタで、Homebrew-caskからインストールできます。 brew cask install macdown でインストールします。 DockにM...
Python

pyenvのインストールと設定(Mac,WSL2,Windows)

pyenvのインストールと設定(Mac,WSL2,Windows) Pythonのバージョンを確認します。 takahashi$ python --version Python 2.7.10 Macにpyenvをインストール pyenvをい...
Mac

Macのパッケージ管理システムHomebrew

Macのパッケージ管理システムHomebrew よくHomebrewと言うのを見かけますが、これはAppleが提供していないソフトウェアのパッケージ管理システムといったところでしょうか。 yumやaptと同じとイメージするとわかりやすいと思...