Angular.jsのチュートリアルをして遊ぼう ①テンプレート構文
今回はAngular.jsの公式サイトのチュートリアルのテンプレート構文の箇所を実施して遊ぼうと思います。 Angular.jsは1.x時代に少し触っただけなので楽しみです。
1. 今日のお供
久しぶりのビールです！
![サッポロ 北海道生ビール [ 350ml×24本 ]](https://images-fe.ssl-images-amazon.com/images/I/51yUrhN59oL.jpg "サッポロ 北海道生ビール [ 350ml×24本 ]")
2. 今回参考にしたサイト
私はただ備忘録として、遊んだ結果を書きたいだけなので、本気でやりたい方はこちらを参考にされたほうが良いかと思います。
3. 新しいプロジェクトを作成する
ドキュメントの「Click here to create a new project in StackBlitz.」リンクを押下すると、ブラウザでStackBlitzのページが開きます。
このWEB上の環境で開発を進めていく形となります。
4. テンプレート構文を使用する
すでに定義されているproducts(商品情報）をテンプレート構文を使用して表示できるようにしていきます。
商品情報はproducts.tsに定義されています。
(1) product-list.component.htmlを開きます。
(2) ngForセレクタを使用し、繰り返し制御をします。
下記をproduct-list.component.htmlに記入すると、商品数分「商品」が表示されます。
<!-- 商品分繰り返す --> <div *ngFor="let product of products"> 商品 </div>
(3) 内挿構文{{}}を使用し、商品名を表示します。
下記をproduct-list.component.htmlに記入すると、商品数分の商品名が表示されます。
<!-- 商品分繰り返す --> <div *ngFor="let product of products"> <h3>{{ product.name }}</h3> </div>
(4) プロパティバインディング[]を使用し、アンカーのタイトルを表示します。
下記をproduct-list.component.htmlに記入すると、アンカーのタイトルが設定されます。
<!-- 商品分繰り返す --> <div *ngFor="let product of products"> <h3> <a [title]="product.name + ' details'"> {{ product.name }} </a> </h3> </div>
(5) ngIfセレクタを使用し、商品の説明を表示します。
下記をproduct-list.component.htmlに記入すると、商品説明が設定されている商品のみ、商品の説明が表示されます。
<!-- 商品分繰り返す --> <div *ngFor="let product of products"> <h3> <a [title]="product.name + ' details'"> {{ product.name }} </a> </h3> <p *ngIf="product.description"> Description: {{ product.description }} </p> </div>
(6) イベントバインディング()を使用し、イベントを紐付けます。
下記をproduct-list.component.htmlに記入すると、clickイベントにproduct-list.component.tsで定義されているshare()イベントが紐付けされます。
<!-- 商品分繰り返す --> <div *ngFor="let product of products"> <h3> <a [title]="product.name + ' details'"> {{ product.name }} </a> </h3> <p *ngIf="product.description"> Description: {{ product.description }} </p> <button (click)="share()"> Share </button> </div>
share()イベントの内容
5. テンプレート構文が使えました！
今回はチュートリアルにあるとおり、下記のテンプレート構文を使用しました。
① ngFor
② ngIf
③ 内挿{{}}
④ プロパティバインディング[]
⑤ イベントバインディング（）
次回はコンポーネントの作成・使用が出来たらいいなと思います。
TypeScriptを使用してNode.jsでhttpサーバーを建てて遊ぼう。
今回はTypeScriptを使用して、Node.jsでhttpサーバーを建てて遊ぼうと思います。 使用している各バージョンはこちらになります。
・node v12.3.1
・npm 6.9.0
1. 今日のお供
暑くなったりじめじめしてくると、日本酒の辛口が飲みたくなりますよね。
この日本酒は嘘偽り無く辛口なので冷やしてきりっと頂きます。
2. 今回参考にしたサイト
私はただ備忘録として、遊んだ結果を書きたいだけなので、本気でやりたい方はこちらを参考にされたほうが良いかと思います。
3. TypeScriptプロジェクトの作成
プロジェクトフォルダを作成して、package.jsonを出力します。
mkdir node-type-server cd node-type-server npm init -y npm i -D typescript
Node.jsの型定義ファイルを取得します。
npm i -S @types/node
tsconfig.json（トランスパイル設定ファイル）を出力します。
node_modules\.bin\tsc --init
package.jsonを修正します。
{ "name": "node-type-server", "version": "1.0.0", "private":true, "scripts": { "build": "tsc", "watch": "tsc --watch" }, "devDependencies": { "typescript": "^3.5.1" }, "dependencies": { "@types/node": "^12.0.4" } }
tsconfig.json ファイルを修正します。
4. httpサーバーを建ててみよう
main.tsファイルを作成します。
import * as http from "http"; class Main { constructor() { // httpサーバーの設定をします。 const server: http.Server = http.createServer( ( request: http.IncomingMessage, response: http.ServerResponse ) => this.requestHandler(request, response) ); // サーバーを起動します。 server.listen('5000'); } private requestHandler(request: http.IncomingMessage, response: http.ServerResponse): void { response.end("Hello! Node.js With TypeScript!") } } const main = new Main();
コンパイルを実行します。
npm run build
コンパイルされたmain.jsをコマンドで実行します。
node main.js
http://localhost:5000にアクセスすると。。
5. TypeScriptを使用して、Node.jsでhttpサーバーを建てれました！
表示的にはシンプルなものですが、一応httpサーバーとしての役割を果たせました。
次回はAngular.js絡めるか、もうすこし深くnode.jsを触れたらよいなと思います。
Node.jsとTypeScriptでHello Worldを出して遊ぼう。
今回はTypeScriptとNode.jsでHello Worldを出して遊ぼうと思います。
TypeScriptは前々から気になっていて、初めて使います。
Node.jsは本を買ってサーバーを建て、その後に概念を読んだ結果ぱっぱらぱーすぎてやめたのでリベンジ！
1. 今日のお供
旦那も私もライチが好きで、気がついたら旦那が箱買いしていた贅沢絞りのライチです。
![【季節限定】アサヒ贅沢搾りライチ 缶 500ml×24本 [ チューハイ ]](https://images-fe.ssl-images-amazon.com/images/I/41fHfxXmuYL.jpg "【季節限定】アサヒ贅沢搾りライチ 缶 500ml×24本 [ チューハイ ]")
2. 今回参考にしたサイト
私はただ備忘録として、遊んだ結果を書きたいだけなので、本気でやりたい方はこちらを参考にされたほうが良いかと思います。
3. TypeScriptプロジェクトの作成
プロジェクトフォルダを作成して、package.jsonを出力します。
mkdir ts-sample cd ts-sample npm init -y
参考サイトにしたがって、package.jsonを編集します。
プロジェクトに必要なディレクトリを作成します。
mkdir .vscode src test config
4. TypeScript実行環境をインストール
TypeScriptトランスパイラと実行ツール（ts-node）をインストールします。
npm i -DE typescript ts-node
tsconfig.json（トランスパイル設定ファイル）を出力します。
node_modules\.bin\tsc --init
tsconfig.jsonを修正します。
5. いざ、Hello World！
main.tsを作成します。
const message: string = "world";
console.log(`Hello ${message}`);
コンパイルを実施します。
node_modules\.bin\tsc
buildディレクトリ下にmain.jsが出力されていることを確認します。
main.jsの中身はこうなっています。
実行してみます。
node build/main.js
6. Hello World！完了
ただ参考サイトを見ながら実行して行っただけなので、特に深く理解とかはしていませんが、まぁ最初はそんなもの！
次回はTypeScriptを使用してサーバー建てたいなぁ。
Node.jsのアップデートをして遊ぼう。
今回はWindows環境にインストールしてある、Node.jsのアップデートをしようと思います。
Node.jsインストールしたのいつだっけ。。。
1. 今日のお供
ビール買い忘れたのでハイボールです。
我が家はトリスクラシックの2.7リットルを常備しています。
![サントリー ウイスキー トリス クラシック [日本 2700ml ]](https://images-fe.ssl-images-amazon.com/images/I/417A6B6nmmL.jpg "サントリー ウイスキー トリス クラシック [日本 2700ml ]")
2. 今回参考にしたサイト
私はただ備忘録として、遊んだ結果を書きたいだけなので、本気でやりたい方はこちらを参考にされたほうが良いかと思います。 qiita.com qiita.com
3. まずは現在のバージョン確認
全然いじってなかったのでとっても古いです。
4. nodistのインストール
nodistはNode.jsのインストールやバージョン管理が行えるツールです。
githubにあがっているnudistをダウンロードし、インストールしていきます。
github.com
ますはダウンロードします。
ダウンロードできたらインストールしていきます。
PATHの更新に失敗したようです。
ひとまずインストールを完了させてPATHの更新を手動でしていきたいと思います。
インストール先のbinのパスを環境変数に追加します。
今回の場合は「C:\Program Files (x86)\Nodist\bin」
システム環境変数を新規追加していきます。
nodistが使用できるようになりました。
5. Node.jsのアップデート
インストール可能なNode.jsのバージョンの一覧を表示します。
nodist dist
12.3.1が最新版とのことなので、それをインストールしていきます。
nodist + 12.3.1
使用するバージョンを指定します。
nodist 12.3.1
設定の確認！アップデート完了しました！
node -v
6. npmのアップデート
npm update -g npm
7. Node.jsアップデート完了！
nodistを使って、Node.jsのアップデートが完了しました。
次回はNode.jsとかやりたいなぁ。
VSCodeをインストールして遊ぼう。
今日は巷で話題のVSCodeをインストールして、
HTMLを書くところまでやっていこうと思います。
最近全然新しいエディタとか触っていなかったので楽しみです。
1. 今日のお供
最近ちょっと気に入ってます。
炭酸で割るだけで簡単にゆずレモンサワーの完成です。
![小正醸造 小鶴サワー専用ゆずレモン 瓶 25度 1800ml [ リキュール ]](https://images-fe.ssl-images-amazon.com/images/I/31E%2BiUZdcmL.jpg "小正醸造 小鶴サワー専用ゆずレモン 瓶 25度 1800ml [ リキュール ]")
2. 公式サイトからダウンロード
まずは公式サイトからダウンロードします。
code.visualstudio.com
3. インストール
ダウンロードしたexeファイルを実行し、インストールしていきます。
4. 起動！＆日本語化
起動すると、まぁシンプルな画面が登場します。
英語のままでも良いのですが、やっぱり分かりにくいので、ここは日本語化しましょう。
画面左側のアイコンの一番下（Extensions）をクリックします。
拡張機能検索用の入力エリアに「Japanese Language Pack」と入力すると、Visual Studio Code用の日本語化パックが検索結果として表示されます。
そこのInstallをクリックし、インストールが完了したらVSCodeを再起動します。
日本語化が出来ました。
5. Emmet使ってHTMLでも書いてみましょう。
Ctrl＋nで新規作成を実施すると、まぁシンプルなエディタが開きます。
htmlとして認識してほしいので、まずは保存し、htmlと入力してみるとびっくり、
コードスニペットでEmmetがでる！（びっくり
もちろん選択すると展開されます。
ではEmmet記法で書いて。。
Tabを押下したら。。展開されたー！
6. langはjaがいいですよね。
というわけで設定していきましょう。
メニューから「ファイル(F)」＞「基本設定」 > 「設定」をクリックします。
右上の{}のアイコンをクリックします。
setting.jsonが開きますので、そこに下記を追記し,保存します。
"emmet.variables": { "lang": "ja" }
VSCodeを再起動して再度、html:5を展開してみると。。
lang="ja"になりました！
7. VSCodeインストール完了！
Emmetが標準で入っているのは本当に良いですね。
今後はVSCodeをメインエディタとして使っていこうかなぁ。。
AzureでSQL Server2016を建てて遊ぼう。
今回は、AzureにSQL Server2016を建てて遊びたいと思います。
前回WEBサーバーを建てたので、今回はDBサーバーを！
これが終わったら新しいVisual Studio2019ダウンロードしてあるので、
それを使って遊べたらいいなと思っています。
1. 今日のお供
なんかさっぱりしたいので、今日はウーロンハイです。
中身はやっぱ金宮ですよね。
![宮崎本店 キッコーミヤ焼酎 [ 焼酎 25度 720ml ]](https://images-fe.ssl-images-amazon.com/images/I/41a4EfAFrrL.jpg "宮崎本店 キッコーミヤ焼酎 [ 焼酎 25度 720ml ]")
2. 今回参考にしたサイト
私はただ備忘録として、遊んだ結果を書きたいだけなので、本気でやりたい方はこちらを参考にされたほうが良いかと思います。 docs.microsoft.com
3. 仮想マシンの作成
まずはSQL Server2016が搭載された、Windows Server2016の仮想マシンを作成していきます。
(1) リソースの作成→対象マシンの検索
まずはリソースの作成を押下します。
検索フィールドに「SQL Server 2016 on Windows Server 2016」と入力してEnterを押します。
(2) SQLServerの選択→作成
一覧に出てきた「SQL Server 2016 SP1 on Windows Server 2016」を選択します。
作成ボタンを押下します。
(3) 設定情報の入力
仮想マシンの基本情報を入力し、「SQLServerの設定」タブを押下します。
SQL Serverの設定情報を入力し、「確認および作成」ボタンを押下します。
「作成」ボタンを押下します。
(4) 仮想マシンのデプロイ
デプロイ中。。
約10分ぐらいでデプロイが完了しました。
4. 日本語化＆SQL Serverに接続
接続と日本語化の方法は下記記事参照。 uchiko.hatenablog.com
サーバーのSQL Server Management Studioで接続してみます。
ログイン情報を入力します。
接続完了！
5. SQL Server2016構築完了！
これまたあっさりと完了しました。
以前上司から聞いた「Azureだと簡単に建てられちゃうから勉強にならない」という言葉の意味が身にしみました。
本当、食わず嫌いでハードルが高かったのですが、超簡単でした。。
Azureで建てたWindows Server 2016にWEBサーバを建てて遊ぼう。
今回は、前回Azureに仮想マシンとして建てたWindows Server 2016にWEBサーバを建てて遊びたいと思います。
WEBサーバ建てると一気にできることが広がりますよね。楽しみです。
1. 今日のお供
大好きな華みやびです。
これ居酒屋でおいてくれるところが増えたらうれしいなぁ。。
![2017年度版 サッポロ ヱビス 華みやび [ 350ml×24本 ]](https://images-fe.ssl-images-amazon.com/images/I/51iha6H770L.jpg "2017年度版 サッポロ ヱビス 華みやび [ 350ml×24本 ]")
2. 今回参考にしたサイト
私はただ備忘録として、遊んだ結果を書きたいだけなので、本気でやりたい方はこちらを参考にされたほうが良いかと思います。 www.atmarkit.co.jp
3. IISのインストール
サーバーマネージャーの管理メニューにある「役割と機能の追加」を押下します。
開始する前にの説明がでるので「次へ」ボタンを押下します。
インストールの種類の選択画面で「役割ベースまたは機能ベースのインストール」を選択し、
「次へ」ボタンを押下します。
対象サーバーを選択して「次へ」ボタンを押下します。
役割の一覧から「Web Server（IIS）」を選択します。
選択すると、「必要な機能を追加するか」とメッセージが出てくるので追加します。
優しいですね。
サーバーと役割の選択画面の「次へ」ボタンを押下します。
機能の選択画面では、とりあえず、デフォルトのままで「次へ」ボタンを押下しました。
Webサーバーの役割の説明が出てくるので、読んで「次へ」ボタンを押下します。
役割の選択画面では、とりあえず、デフォルトのままで「次へ」ボタンを押下しました。
インストールオプションの確認画面で、オプションを確認し、「インストール」ボタンを押下します。
インストール中。。
インストールが完了しました。
インストールが出来ているか確認するために、
サーバー上のIEでlocalhostにアクセスすると。。インストールできてました！
4. コンテンツの配置
デフォルトでは、「C:\inetpub\wwwroot」がルートディレクトリとのことなので、
そこに資産を配置して確認したいと思います。
Windows同士ならコピペで追加できます。すごい。
もう一度、サーバーのIEで確認すると、配置できました！
5. サーバー以外からも見れるようにする
今のままではサーバー外から見ることは出来ないので、
外部からも見れるようにしていきたいと思います。
見れない原因としては、前回のリモートデスクトップが接続できなかった原因と同様、
HTTP通信用のポートが開いていないことが原因なので、あけて行きたいと思います。
すべてのリソースからネットワークセキュリティグループを選択します。
「受信セキュリティ規制」を押下します。
「追加」を押下します。
受信セキュリティ画面の「Basic」を押下します。
サービスにHTTPを選択して、そのほかを入力して追加を押下します。
ポートが開いているかを確認するために、自分のパソコンからアクセスすると。。
接続できました！
6. WEBサーバー構築完了！
構築というか、ただボタンを押しただけのような気もするというぐらい、
あっさり、WEBサーバの構築が完了しました。
実際使用する上で、他に細かい設定は色々必要でしょうが、
そこらへんはこれから遊びつつ学んでいけたらと思います。
