What's New Qiita

20190228のNode.jsに関する記事は6件です。

  • 投稿日：2019-02-28T23:01:35+09:00

オリジナルKdB(科目検索)を作ってみよう -番外1- FaaS下準備編

これまでの記事

スクリーンショット 2019-02-22 16.11.47.png

この記事を読む前に

ある特定の人にしかわからない単語が出現する可能性が高いです。あらかじめご了承ください。

この記事での開発環境

  • MacOS 10.14.3
  • Visual Studio Code 1.31.1
  • Node.js LTS 10.15.1

はじめに

「オリジナルKdB(科目検索)を作ってみよう」の番外編です。これまではExpress.jsは使わず、サーバレスなシステムを作っていきましょう。シリーズでやっていたようにExpress.jsでエンヤコラはやらずに、関数を作るだけで簡単にサービスを作ることができます。

FaaS について

IaaS,BaaS,PaaS,SaaSなどに連なるサービスの1つがFaaS(Function as a Service)です。関数のみを記述するだけで良く、サーバ周りの記述を省略できる画期的なサービスです。

「サーバ周りに関するコードを書かない → サーバを用意する必要がない」ことからサーバレスアーキテクチャと呼ばれます(縮めて「サーバレス」と呼ばれることが多いです)。

  • lambda関数を用意する。
  • FaaSにアップロードする。

たった2ステップで簡単です。しかも、サーバを持たないのでDDoS攻撃によってサーバが落ちることがありません。データベースに直接接続していないため「サーバに侵入されて個人情報が...!?」というケースもありません。しかもサーバを24時間365日稼働しているわけではありません。リクエストが来た時だけ稼動するのでコストを抑えることができます。

簡単・安全・安いがFaaSのウリです。

FaaSを提供しているサービス

FaaSを提供しているサービスはいくつかあります。

AWS lambda

スクリーンショット 2019-02-28 22.13.48.png

AWS(Amazon Web Service)で提供されているFaaSです。
さすがAWSというだけあって、毎月100万リクエスト、400,000 GB-秒まで無料とめちゃめちゃ太っ腹です。Node.js以外にPython, C#(.NET Core), Go, Java, Rubyと多様な言語に対応しています。まず始めるならオススメしたいFaaSと言えます。

また、AWSが提供する他のサービスとの連携に優れており「S3(AWSの提供するクラウドストレージ)にファイルをアップロードしたら自動的に圧縮する」ような処理を簡単に組み立てることができます。

Google Cloud Functions

スクリーンショット 2019-02-28 22.27.18.png

GCP(Google Cloud Platform)で提供されているFaaSです。
こちらも200万リクエスト、計算時間100万秒まで無料と太っ腹。こちらはNode.js限定(Go, Pythonがベータ版)です。専用のライブラリを入れる必要がありますがlambda関数の書き方が簡潔であり、日本語のレファレンスが充実しています。

GCPの他のサービスと連携しやすいのも利点です。GCPのサービスは欲しいところに欲しい説明をくれるので、初心者から上級者まで使いこなせるのがいいですね。

IBM Cloud Functions

スクリーンショット 2019-02-28 22.40.37.png

IBM Cloud で提供されているFaaSです。
使ったことがないので料金体系がわかりませんが、見た感じとても安いです。何よりもNode10.XやSwift4.X, PHP 7.X, Python3.Xと、新しいバージョンに対応しているのが素晴らしいです。実行環境で最新の機能が使えるのが最高です。

Zeit Now

スクリーンショット 2019-02-28 22.48.24.png

爆速デプロイをウリにしているFaaSです。料金体系がわかりやすく、個人サイト程度の規模なら無料で使うことができます。課金をすれば激安定額なのに商業利用に耐えるスペックで利用できます。また、lambda関数をアップロード時に本番環境を想定したサーバに一旦保存されるので「本番にデプロイしたら不具合が起きた！！！」なんてことを事前に検証することができます。

とりあえず完全無料でFaaSを初めてみたいという方にはオススメです。

上記の他にもいくつもFaaSを提供しているサイトがあります。自分好みなサービスを見つけてがっつり使っていきましょう??

ところで今回すること → 下準備

Lambda系のサービスに共通する特徴にファイル入出力周りが安定しないことが挙げられます。そのため、これまで使っていたfsモジュールでのファイル読み込みは使わないように調整しましょう。

参考記事 → AWS Lambdaでファイル入出力をしてみる

module.exportsしたファイルはちゃんと読み込んでくれるので、CSVファイルに書かれている全ての情報をjavasctiptファイルに書き出しましょう。

まずは必要なパッケージをインストールします。

$ npm install iconv-lite csv

そしたら、以下のようにdump.jsを作ります。

dump.js
const fs = require('fs');
const iconv = require('iconv-lite')
const parse = require('csv').parse;

// CSVファイル(Shift_jis)を読み込んでパース
const dataGet = () => {
    const text = fs.readFileSync("kdb.csv")
    const ret = iconv.decode( Buffer.from(text), "Shift_JIS");
    const dataArray = []
    parse(ret, (err, data) => {
        if (err) console.log(err.message)
        else {
            data.forEach( (element) => {
                dataArray.push(element)
            });
        }
    });
    return dataArray
}

// 配列をもらってJSON化
const dataToJson = async (dataArray) => {
    const dataJson = { subjects: [] }
    dataArray.forEach( (element) => {
        dataJson.subjects.push( 
            {
                id: element[0],
                name: element[1],
                lessonType: element[2],
                credit: element[3],
                level: element[4],
                semester: element[5],
                period: element[6],
                place: element[7],
                teachers: element[8],
                summary: element[9],
                remarks: element[10],
                otherCourseStatus: element[11],
                otherCourseInfo: element[12],
                engName: element[13],
                engId: element[14],
                searchOption: element[15],
                timestamp: element[16],
            }
        )
    })
    return dataJson
}

// 即時関数でdata.jsを生成
(async () => {
    const data = await dataGet()
    const json = await dataToJson(data)
    const myJs = `const json = ${JSON.stringify(json)};
module.exports = json;`
    fs.writeFileSync("data.js", myJs)
})()

※async/awaitについて説明してると記事が爆発的に大きくなってしまうので割愛します。
async/awaitについての参考サイト(Promiseと一緒に覚えると楽です)

実行して、新しくdata.jsが作られていることを確認しましょう。

$ node dump.js
$ ls
dump.js               kdb.csv         package.json
package-lock.json     node_modules    data.js

data.jsの中身をみればわかりますが、kdb.csvの情報が全て書き出されていることがわかります。もしうまく書き出せていなかったら、ごめんなさい...コメントにお願いします。

とりあえず今回はこの辺で

下準備だけで内容のない記事となってしまいましたが、次回からがっつりFaaSを使っていきますので許してください。
ちなみに、AWSとGCPの2つを触る予定です。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-02-28T20:39:37+09:00

Coordinates before the release of produce-320

OpenStreetMap の planet.osm.pbf から直接に、かつなるべく速く、また柔軟にベクトルタイルを生産するコマンドラインツールである produce-320 が形を見せてきたので、そろそろ私の個人 GitHub アカウント所属から、un-vector-tile-toolkit 組織 GitHub アカウントに移管できないかと思っています。

その移管の前に、少し考察をしてみたものを共有してみます。

次期リリースの構成

前回リリースの総括

国連ベクトルタイルツールキットの組織アカウントの前回リリースは、OSGeo.JP Workshop for the UN Vector Tile Toolkit のハンズオン資料としての、spinel および spinel-produce のリリースでした。spinel がベクトルタイルサーバで、spinel-produce がベクトルタイル生産ツールです。

この時には、計算機環境の前提条件をなるべく低くするために、例えば HTTP/2 の使用も避けるといった、教材であることに徹した設計にしています。また、スタイルに関する知見も溜まっていなかったので、スタイルも非常に素朴なものになっています。

次回リリースの構成

私のプロジェクトは、（１）まず個人アカウントでコードを大量に書き捨てながら成果物を特定していき、（２）落ち着いた段階で組織アカウントに移す、というアプローチで進めています。次回の組織アカウントからのリリースは、次の２点になるでしょう。

  • onyx: シンプルな HTTP/2 ベクトルタイルサーバ（４代目）
  • produce-320: planet.osm.pbf からのベクトルタイル生産ツール

onyx については、すでに組織アカウントに移管を済ませています。

produce-320 については、近いうちに「リリースの機会に行う掃除」を行なって組織アカウントに移したいと思います。

名前、どうしましょうかね。私はプロジェクト名になるべく意味がこもらないものを選ぶので、現在の名前は onyx と produce-320 になります。

あまり名前に気合を入れすぎると、次のリリースがやりにくくなるので、この二つの名前のままでいくと思います。

onyx については、あえて次の機能は積み残している状態です。

  • タイミングをずらしながらサーバを再起動していき、クラスタとしては落とさないながらも気軽に再起動ができるようにする工夫の追加。ベクトルタイルの入れ替えのところで、まだぎこちないところがあるので、運用ツールに近いレベルで整える必要があるでしょう。
  • ArcGIS Server Vector Tile Service に互換させるための route の追加。適当なタイミングを選んで、pietra に実装済の route をコピーします。ベクトルタイルサーバは、tile-block -> pietra -> spinel -> onyx と進んできているので、onyx で４代目となります。

produce-320 について

produce-320 は（外付けの 500GB 程度の SSD を装備した）Macbook Pro 程度の計算機で５日以内に全世界分のベクトルタイルを生産することを目指したツールになっています。

結果的に、それほど大きくない一国程度の領域であれば、$200 PC で１日以内に生産ができる、ということも目指すことになります。

アフリカを含む優先領域のモジュールの個数を数えたら 320 だったというのがきっかけで、320 という数字が入った名前になっています。

非力な計算機環境でなんとか全世界を回すために、次のような工夫をしています。

  • いまの planet.osm.pbf のサイズは 42GB 程度ですが、これのスキャンというのは今の計算機にはそこそこ重たいです。このため、生産バッチが対象とする、大陸程度規模以下の領域をまず切り出して、そこから z=6 のタイルの領域ごとにモジュールを作っていくというアプローチをとります。この大陸程度規模以下の領域のことを、miniPlanet と呼んでいます。
  • 世界の７割は海です。planet.osm.pbf をスキャンすることで、「地物がまったく存在しない z=6 のタイルの領域」を 1500 以上特定することができます。z=6 の領域の総数は 4096 ですから、この 1500 をスキップすることで性能を稼ぐことができます。この 1500 程度の領域を nfm (no-feature-module) と呼び、そのタイル番号をみたら後続の処理はしないという工夫をしています。
  • Tippecanoe と osmium と modify.js をパイプで繋いでおき、そのパイプラインを、計算機環境に応じた個数だけ並列に並べることで、計算機の性能を限界まで発揮させることを目指します。

リリースまでにやる整理

  • OSM に依存した設定については、tapioca という別レポジジトリで開発作業をしていましたが、リリースの機会に produce-320 側にコピーして、tapioca を deprecated にすると思います。具体的には、modify.js と osmium-export-config.json を移すことになると思います。
  • no-feature-module は nfm という別レポジトリで管理していますが、これも必要なコードをコピーします。ただし、nfm というプロジェクト自体は生かしているという整理をし、nfm.json や nfm.js が更新された時には、適宜 produce-320 に上書きするということにするのだと思います。npm のモジュールにする、ということは、たぶん大げさなのでやりません。

再び10万レベルの応用領域へ

produce-320 は 1:5000 の内容を持つ領域もあるという OpenStreetMap を主要対象としていますが、もう少し縮尺が小さく、よってデータ量も少ない領域への展開についても興味があります。

そこで、神戸市「地域の範囲」データを２枚のベクトルタイルにする方向の展開もやっていくのだろうなと思っています。

なお、神戸市ベクトルタイルについては、その後、minzoom を 7 に、maxzoom を 14 に変更して再生産し、拡大しても図形が崩れないように改善しています。図形が崩れた原因は、オーバーズームを効かせ過ぎたことです。

これにより、神戸市ベクトルタイルは２枚ではなくなりましたが、「CMS に気軽に掲載できる静的ファイル」という性質は保っています。現在のタイルデータの量は、1.4MB です。詳細は、hannibal レポジトリを clone してご覧ください。

2016 年夏の状況との比較

自分で 2016 年夏に書いた zero-server maps 日本語版 を見直す機会がありました。2016 年夏に、2018年を想定して書いたものですが、2019年という現在位置から見ると、現在の私の方針について、こういうことが言えると思います。

  1. 私は現在は 10GB を超える領域を扱っているので、サーバ環境は gh-pages のようなものというよりも、より IaaS 的な環境を想定して動いているところですね。コミュニティサイドの実験では、Digital Ocean の Droplet を使っています。たまたま私の作業環境では、安いオブジェクトストレージにアクセスできるというわけでもないので、mbtiles モジュールで送り込んで express サーバの中で引っ張り出してサーブする、というやや保守的な設計を onyx シリーズで使っています。
  2. mvt (vector-tile-spec) と Tippecanoe を選択したのは間違っていません。ベクトルタイルは画像タイルよりも速くなって初めて意味があります。まずは最も性能が出せる環境で確かな性能を出した上で、相互運用を確定していくべきです。
  3. Tangram は Mapzen のシャットダウンとともに、結果的には力を失ってしまいました。まずは Mapbox GL JS の上で確かな性能と成果を出すのが先決です。他方で、OpenLayers の 6 ではベクトルタイルを頑張られるようですね。
  4. データについては、地球地図を扱う段階から、OpenStreetMap を使う段階に進むことができました。
  5. その後、vt-optimizer と、tile-join に出会うことができたので、mbtiles や pbf のファイルを直接自分のスクリプトで扱うことは少なくなりました。fan_out という名前のツールを書く必要は、もうなくなってしまいました。
  6. また、FOSS4G Asia 2018 の機会に、ローカル言語で考えて発信することの重要性に気がついています。共通言語（英語）ですらすらと書けなくて悩む暇があれば、まずはローカル言語で殴り書きでも書く、そこから得たものを使って共通言語で書いていく、というアプローチをとることが有効な場合も多い、と思うに至っています。だから、2016 年のこの時のように、英語で書かなければならないから言葉少なになる、ということは避けるべきなのだろうと思います。英語で書こうとも、ローカル言語で書こうとも、そもそも専門性が高い話です。最終的な成果を除いては、ほぼ自分自身と、近い友人のために書くことになるというのが実際でしょう。どんどん書きましょう。
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-02-28T17:24:34+09:00

nodejsのサンプルページをherokuで公開する

・模索しながら書くぞ
・環境はubuntu、バージョンはわからないが多分最新
・言葉の使い方がわかっていない
・Glitchというサイトが使いやすかったが、socket.ioが使えないためherokuでやることに。ここに備忘としてメモ。

参考にしたページ、無断リンクだけど
https://developer.salesforce.com/events/webinars/nodejs_heroku_0525/
http://tacamy.hatenablog.com/entry/2013/02/16/235127
https://devcenter.heroku.com/articles/heroku-cli
https://qiita.com/chihiro/items/5c3ff400f6cb99deb945
https://qiita.com/yoh-nak/items/80e51197410c7f956ccd
https://qiita.com/sayama0402/items/e2c9e65786259dc55e11

やったこと

1, herokuに登録

2, gitに登録（githubに登録すればgitに登録したことになるの？過去に色々やってわからなくなってしまった）

3, gitをインストール

$sudo apt-get install git-all

4, herokuのtoolbeltをインストール
（わからなければ、https://devcenter.heroku.com/articles/heroku-cli にアクセスするとなんかうまく行く）
つまり、このページの言うとおりに、

$ sudo snap install --classic heroku

を実行

(もしいろいろやって入ってるかどうか分からなくなっちゃったら

$ heroku -v

でOK）

5, それから下記を実行、ブラウザに飛ばされてログインする

$ heroku login

6, プロジェクトを作る
プロジェクトがあるディレクトリにcdで移動してから、

$ heroku create [任意の名前]

でプロジェクトができる。$ heroku apps とかherokuホームページのマイページみたいなところでプロジェクトの一覧を確認できる

ここから手探り、すでにあるアプリのディレクトリ内で作業しているがそれが正しいのか？
それから

7, git リポジトリを初期化

$ git init

$ git status

8, それからProcfileを作成

Procfile
web: node bin/www

9, それからgitの操作

$ git add Procfile *.js *.json public views routes bin
  //これが先にできた

$ git config --global user.email "[任意のメアド]"
　//ログインをここでした

$ git commit -m "[任意のコメント]"
  //コミットをした

最後のをすると、コマンドにこんなのが出る

[master (root-commit) ea77c2d] 2/28にコミット
 10 files changed,  180 insertions(+)
 create mode 100644 Procfile
 create mode 100644 app.js
 create mode 100755 bin/www
 create mode 100644 package.json
 create mode 100644 public/stylesheets/style.css
 create mode 100644 routes/index.js
 create mode 100644 routes/users.js
 create mode 100644 views/error.jade
 create mode 100644 views/index.jade
 create mode 100644 views/layout.jade

多分うまく行っている

10, それから、「.gitignore」という名前のファイルを作り、中に

.gitignore
node_modules

とだけ書く。.から始まるファイルは隠しファイルなので、デフォルトでは表示されていない。

11, gitにリモートリポジトリを作成

$ git remote add heroku git@heroku.com:[プロジェクトの名前].git

※[プロジェクトの名前]のところには、heroku create []でいれたやつを入れる

実行しても何も応答がないのでやや怖い

（以下でリモートリポジトリ削除

git remote remove heroku

）

（以下のように出たら
```
fatal: 'heroku' does not appear to be a git repository
fatal: Could not read from remote repository.

Please make sure you have the correct access rights
and the repository exists.
```
、11をすれば良い）

.git/configもうまく行っているっぽいのを確認し、気を取り直して、

12, gitにpush

$ git push heroku master

を実行

13, それから

$ heroku start

を実行。startではなくrestartだと怒られたが知らんしどっちでもいい

・そしてheroku createのときに返されたurl（herokuapp.comで終わるやつ）にアクセスすると

・うまくいった！！

・更新する

・以下の３つを実行

$ git add .

$ git commit -m "message"

$ git push heroku master

うまくいかない
sshkeyが無いせいかと思い
https://qiita.com/SomeyaNaoki/items/fbd359b20c1b479692f9
に則って操作

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-02-28T00:22:26+09:00

angular.jsよりもAngularを推奨してもらったので、さっそく勉強してみた。

Angular.jsよりもAngularを推奨してもらったので、さっそく勉強してみた。

今日の勉強時間

一通り実行してみた結果、実際にかかった時間は３０分ぐらいかも。
Angular.jsよりサンプルプログラムをインストールして実行するまでの時間は短く感じました！

前提

・npmがインストールされていること
・Node.jsのバージョン8.xまたは10.xがインストールされていること

僕は昨日の記事の中でインストール済みなので飛ばします。

参考:ANGULAR.JS公式チュートリアルのPhoneCat Tutorial Appはじめました。
https://qiita.com/ryuutamaehara/items/4f095b264f5e688ef1c1#comment-54fb8b28131e1bbf3996

なぜAngular？昨日はAngular.jsだったじゃん。

昨日の記事を見ていただいた方にコメントをいただきました。

「angularJS はもう古くなってしまっている」

ﾅﾝﾄ(´･ω･｀)

WEB開発って時代の流れが速いっていうけど本当なんですね。

いままで顧シス担当やらメインフレームの運用とか〇〇みたいな現場しか回ったことなかった私はこの事に感動を覚えました。いいね。web系。
これからちょこっとずつ頑張っていきたいと思います('ω')ノ

では、今日から実際にオススメをいただいた「Angular」を勉強してみたいと思います。

さっそく公式サイトをチェック！

まずは公式サイトから！
驚くなかれ！な、なんと日本語だァァァァァァァ！('ω')ﾜｰｲ

参考:https://angular.jp/

トップページに「モバイルとデスクトップ、ひとつのフレームワーク」なんてオシャンなキャッチフレーズを見てわかる通り、Angularでは今の主要なデバイスのシステムを１つのフレームワークで構築可能な事が強みのようです。

では、まずはじめに

Angular.jsと同じくNode.jsとnpmを使うみたいですね。
この二つはこの記事の頭にも書きましたが、すでにインストール済みなので飛ばします。

Angular CLIをインストールする

ここも記事通りに進めてみます。
Angularは主にCLI(コマンドラインインタフェース)で操作を進めるみたいですね。
CUI嫌いだからwindows使っているんだけどなぁ...。

文句言っちゃダメですよね。はい。

コマンドプロンプトから以下のコマンドを実行します。

npm install -g @angular/cli

ワークスペースと初期アプリケーションを作成の作成

ワークスペースと初期アプリケーションを作成します。
次のコマンドを実行する前に作成したいディレクトリに移動しておいてくださいね。

ng new my-app

ng newコマンドでアプリケーションのひな型を作成されるようです。
my-appが作成されるアプリケーション名になります。

作成されるひな型プロジェクトは以下の構成を含むようです。
・my-appという名前のルートフォルダをもつ新しいワークスペース
・my-appと呼ばれる最初のスケルトンアプリケーションプロジェクト（srcサブフォルダ内）
・エンドツーエンドのテストプロジェクト（e2eサブフォルダ内）
・関連する設定ファイル

このアプリの中にはすぐに実行できるアプリが入ってるみたいですね。

サーバを起動する

作成したひな型の中にはサーバも含まれるみたいですね！
さっそく起動してアプリの動作を確認してみます。

cd my-app
ng serve --open

serverではなくserveですよ。（笑）
成功するとhttp://localhost:4200/が自動的にブラウザで開かれます。

Angularのアイコンとともに「Welcome to my-app! 」といった表記が画面が表示されていたら成功です。

Angularコンポーネントを編集してみる

./src/app/app.component.tsのファイルがAngularの構成管理ファイルらしいです。
画面上のデータ表示からユーザからの入力に基づいたアクションなどもここに記載するっぽいです。

この中に「my-app」という記載があるので、「My First Angular App」という文字列に変更してみます。
この状態で先ほど起動したアプリ画面を更新すると、「Welcome to my-app! 」といった表記が、「Welcome to My First Angular App! 」に変わったことが確認できます。

次にcssの設定をしてみます。

/src/app/app.component.css
h1 {
  color: #369;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 250%;
}

元のブラウザに戻ると、cssが適用されたことが確認できます。

ここまでで今日の分のチュートリアルは完了です。

明日のおはなし

次のステップとして公式サイトには次のように記載されています。

・Tour of Heroesチュートリアルでは、実践的な追加学習が提供されています。それは、人材派遣会社がスーパーヒーローの従業員のグループを管理するのに役立つアプリを構築する手順を順を追って説明します。

なんか聞き覚えがあるような無いような…
タイバニ？なんだ？記憶が…ｗ

・アーキテクチャガイドでは、モジュール、コンポーネント、サービス、依存性の注入（DI）などの重要な概念について説明します。特定のAngularの概念と機能に関する詳細なガイドの基礎を提供します。

今日は以上です！！眠い！(:3 」∠)

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-02-28T00:22:26+09:00

#ngular.jsよりもAngularを推奨してもらったので、さっそく勉強してみた。

Angular.jsよりもAngularを推奨してもらったので、さっそく勉強してみた。

今日の勉強時間

一通り実行してみた結果、実際にかかった時間は３０分ぐらいかも。
Angular.jsよりサンプルプログラムをインストールして実行するまでの時間は短く感じました！

前提

・npmがインストールされていること
・Node.jsのバージョン8.xまたは10.xがインストールされていること

僕は昨日の記事の中でインストール済みなので飛ばします。

参考:ANGULAR.JS公式チュートリアルのPhoneCat Tutorial Appはじめました。
https://qiita.com/ryuutamaehara/items/4f095b264f5e688ef1c1#comment-54fb8b28131e1bbf3996

なぜAngular？昨日はAngular.jsだったじゃん。

昨日の記事を見ていただいた方にコメントをいただきました。

「angularJS はもう古くなってしまっている」

ﾅﾝﾄ(´･ω･｀)

WEB開発って時代の流れが速いっていうけど本当なんですね。

いままで顧シス担当やらメインフレームの運用とか〇〇みたいないな現場しか回ったことなかった私はこの事に感動を覚えました。いいね。web系。
これからちょこっとずつ頑張っていきたいと思います('ω')ノ

では、今日から実際にオススメをいただいた「Angular」を勉強してみたいと思います。

さっそく公式サイトをチェック！

まずは公式サイトから！
驚くなかれ！な、なんと日本語だァァァァァァァ！('ω')ﾜｰｲ

参考:https://angular.jp/

トップページに「モバイルとデスクトップ、ひとつのフレームワーク」なんてオシャンなキャッチフレーズを見てわかる通り、Angularでは今の主要なデバイスのシステムを１つのフレームワークで構築可能な事が強みのようです。

では、まずはじめに

Angular.jsと同じくNode.jsとnpmを使うみたいですね。
この二つはこの記事の頭にも書きましたが、すでにインストール済みなので飛ばします。

Angular CLIをインストールする

ここも記事通りに進めてみます。
Angularは主にCLI(コマンドラインインタフェース)で操作を進めるみたいですね。
CUI嫌いだからwindows使っているんだけどなぁ...。

文句言っちゃダメですよね。はい。

コマンドプロンプトから以下のコマンドを実行します。

npm install -g @angular/cli

ワークスペースと初期アプリケーションを作成の作成

ワークスペースと初期アプリケーションを作成します。
次のコマンドを実行する前に作成したいディレクトリに移動しておいてくださいね。

ng new my-app

ng newコマンドでアプリケーションのひな型を作成されるようです。
my-appが作成されるアプリケーション名になります。

作成されるひな型プロジェクトは以下の構成を含むようです。
・my-appという名前のルートフォルダをもつ新しいワークスペース
・my-appと呼ばれる最初のスケルトンアプリケーションプロジェクト（srcサブフォルダ内）
・エンドツーエンドのテストプロジェクト（e2eサブフォルダ内）
・関連する設定ファイル

このアプリの中にはすぐに実行できるアプリが入ってるみたいですね。

サーバを起動する

作成したひな型の中にはサーバも含まれるみたいですね！
さっそく起動してアプリの動作を確認してみます。

cd my-app
ng serve --open

serverではなくserveですよ。（笑）
成功するとhttp://localhost:4200/が自動的にブラウザで開かれます。

Angularのアイコンとともに「Welcome to my-app! 」といった表記が画面が表示されていたら成功です。

Agularコンポーネントを編集してみる

./src/app/app.component.tsのファイルがAgularの構成管理ファイルらしいです。
画面上のデータ表示からユーザからの入力に基づいたアクションなどもここに記載するっぽいです。

この中に「my-app」という記載があるので、「My First Angular App」という文字列に変更してみます。
この状態で先ほど起動したアプリ画面を更新すると、「Welcome to my-app! 」といった表記が、「Welcome to My First Angular App! 」に変わったことが確認できます。

次にcssの設定をしてみます。

/src/app/app.component.css
h1 {
  color: #369;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 250%;
}

元のブラウザに戻ると、cssが適用されたことが確認できます。

ここまでで今日の分のチュートリアルは完了です。

明日のおはなし

次のステップとして公式サイトには次のように記載されています。

・Tour of Heroesチュートリアルでは、実践的な追加学習が提供されています。それは、人材派遣会社がスーパーヒーローの従業員のグループを管理するのに役立つアプリを構築する手順を順を追って説明します。

なんか聞き覚えがあるような無いような…
タイバニ？なんだ？記憶が…ｗ

・アーキテクチャガイドでは、モジュール、コンポーネント、サービス、依存性の注入（DI）などの重要な概念について説明します。特定のAngularの概念と機能に関する詳細なガイドの基礎を提供します。

今日は以上です！！眠い！(:3 」∠)

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-02-28T00:17:47+09:00

ローカルからnode.jsを削除する

node.jsをインストーラからインストールしてしまった

node.js１日目です。

何も考えずnode.jsをインストーラ経由でインストールしてしまいました。
@gaikitan です。 (本業はiOSエンジニアをやっています。)

node.jsのローカルからの削除ですが、非常に簡単です。
node.jsの削除は５秒で終わったのですが、当記事の作成には1時間かけております。はい。

この度node.jsを使う事になりまして、「とりあえずnode.js入れといたらいいんやろ」 みたいな感じで適当にインストーラからインストールしてみました。
しかし様々な記事で、 「node.jsのバージョン管理は面倒だから、今すぐnodebrewに変えたほうがいいよ」 と言われました。

「そんなに言うなら、一旦ローカルのnode.js消してnodebrew経由にするか」

ローカルのnode.jsを削除する

検索して沢山出てきたこのコマンド

$ lsbom -f -l -s -pf /var/db/receipts/org.nodejs.pkg.bom \
| while read i; do
  sudo rm /usr/local/${i}
done
sudo rm -rf /usr/local/lib/node \
     /usr/local/lib/node_modules \
     /var/db/receipts/org.nodejs.*

(参考資料)How do I uninstall nodejs installed from pkg (Mac OS X)?
https://stackoverflow.com/questions/9044788/how-do-i-uninstall-nodejs-installed-from-pkg-mac-os-x

これで本当に消せた人いるんですか？
コピペしましたが

can't open /var/db/receipts/org.nodejs.pkg.bom: No such file or directory
**** Can't open /var/db/receipts/org.nodejs.pkg.bom.

と言われました。コマンドの意味を理解せずに実行するのは絶対に辞めましょう(自戒)

node.jsの削除

node.jsの実行時のフルパス取得

$ which node
→ /usr/local/bin/node

実際の削除

$ sudo rm -rf /usr/local/bin/node

削除できたかどうかの確認

$ node -v
bash: command not found: node

ついでにnpmも削除

$ sudo rm -rf ~/.npm

削除できたかどうかの確認

$ npm -v
bash: command not found: npm

消えてた。　終わり。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

日付別

タグ一覧