Ruby 〜Stringオベジェクト覚書編〜
RubyのStringオブジェクトについて
文字列を扱うオブジェクトでシングルクオートかダブルクオートで囲んだ文字列がStringオベジェクト
$ pry [1] pry(main)> '文字' => "文字" [2] pry(main)> "文字" => "文字" [3] pry(main)>
Stringオブジェクトのクラスの確認
[4] pry(main)> '文字'.class => String [5] pry(main)>
Stringクラスの機能について
upcaseメソッド(小文字を大文字に変換する)
※メソッドとは特定の処理を行う機能のこと
[6] pry(main)> 'sample'.upcase => "SAMPLE" [7] pry(main)>
ちょこっとメモ
Rubyは()を省略できる。
[8] pry(main)> 'sample'.upcase() => "SAMPLE" [9] pry(main)> 'sample'.upcase => "SAMPLE" [10] pry(main)>
Rubyの場合は引数がない場合は()を付けないのが好ましい
sliceメソッド(文字の切り出し)
[12] pry(main)> '文字列です。'.slice(0,3) => "文字列" [13] pry(main)>
sliceメソッドに引数を渡しました。
ここでの第一引数の「0」はシングルクオートで囲った文字列の1つ目を指し、
第二引数は第一引数からどこまでを切り出すかの値を指す。
つまり、(0,3)とは「文字列」の3文字が切り出されます。
downcaseメソッド(大文字から小文字変換)
[14] pry(main)> 'SAMPLE'.downcase => "sample" [15] pry(main)>
sizeメソッド(文字数のカウント)
[16] pry(main)> 'sample'.size => 6 [17] pry(main)>
to_iメソッド(StringクラスからIntegerクラスへの変換)
[19] pry(main)> '100'.class => String [20] pry(main)> '100'.to_i => 100 [21] pry(main)> '100'.to_i.class => Integer [22] pry(main)>
to_fメソッド(StringクラスからFloatクラスへの変換)
[23] pry(main)> '10.5'.class => String [24] pry(main)> '10.5'.to_f => 10.5 [25] pry(main)> '10.5'.to_f.class => Float [26] pry(main)>
文字列の末尾に文字列を追加
[27] pry(main)> '文字の' + '連結' => "文字の連結" [28] pry(main)>
変数を使っての連結も可能
[31] pry(main)> str = '文字の' => "文字の" [32] pry(main)> str << '連結' => "文字の連結" [33] pry(main)> str << 'です。' => "文字の連結です。" [34] pry(main)> str => "文字の連結です。" [35] pry(main)>
変数を使った際の「+」と「<<」の動作の違いについて
[35] pry(main)> str + 'プラス' => "文字の連結です。プラス" [36] pry(main)> str => "文字の連結です。" [37] pry(main)>
「+」での連結では変数「str」の中身に変更はありません。
「<<」を使った場合は下記の通り、変数「str」の中身が変更されています。
[37] pry(main)> str << '追加' => "文字の連結です。追加" [38] pry(main)> str => "文字の連結です。追加" [39] pry(main)>
同じことを「+」でも行う場合は連結した結果を変数に格納する。
[39] pry(main)> str = str + 'プラス' => "文字の連結です。追加プラス" [40] pry(main)> str => "文字の連結です。追加プラス" [41] pry(main)>
これをより簡単に書くと次のような書き方ができる。
[41] pry(main)> str += 'プラス' => "文字の連結です。追加プラスプラス" [42] pry(main)> str => "文字の連結です。追加プラスプラス" [43] pry(main)>
これは「自己代入」と呼ばれるもので動作的にはstr = str + 'プラス'と同じですが、
シンプルに書くことが出来るのでこちらを推奨します。
同じ文字列を複数回表示する
[43] pry(main)> '文字' * 10 => "文字文字文字文字文字文字文字文字文字文字" [44] pry(main)>
・文字列の中で式を展開する
※非常によく使用される!!
[45] pry(main)> two = '二' => "二" [46] pry(main)> "1+1は#{two}" => "1+1は二" [47] pry(main)>
注意点として文字列の中で式を展開する場合はダブルクオートで括る必要があります。
シングルクオートだと式が展開されません。
[47] pry(main)> three = '三' => "三" [48] pry(main)> '1+2は#{three}' => "1+2は\#{three}" [49] pry(main)>
ちょこっとメモ
#{}の中に直接式を書くことも出来る。
[49] pry(main)> "1+1は#{1+1}" => "1+1は2" [50] pry(main)>
以上Stringオブジェクトの覚書でした〜
Vue.jsとFirebaseで作るミニWebサービス 2回目
えー前回のVue .js云々の記事からの続きです。
今回はFirebaseを使ってWebページを公開するところまでやってみたいと思います。
Firebaseのアカウント作成
まずはFirebaseのアカウントを作りましょう。
firebase.google.com
↑のリンクからアクセスしてログインしてアカウントを作成しよう。
プロジェクトの作成
下記の画面からお好きなプロジェクト名つけ、プルジェクトを作成する。
プロジェクト作成が完了すれば以下のような画面が表示されます。
クリックするとscriptタグで囲まれた数行のコードが表示されますのでコピーします。
コピーしたscriptをmymarkdown直下のindex.html内に貼り付けます。
貼り付け後のindex.htmlです。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>test_markdown</title> </head> <body> <div id="app"></div> <script src="https://www.gstatic.com/firebasejs/5.8.2/firebase.js"></script> <script> // Initialize Firebase var config = { apiKey: "AIzaSyCUQ5gnAAi4TCXikx****************", authDomain: "mymarkdown-50743.firebaseapp.com", databaseURL: "https://mymarkdown-50743.firebaseio.com", projectId: "mymarkdown-50743", storageBucket: "", messagingSenderId: "908132487349" }; firebase.initializeApp(config); </script> <script src="./build.js"></script> </body> </html>
firebase-toolsのインストール
npm install -g firebase-tools
firebase initの実行
firebase init
init時には初めにどの機能を利用するか聞かれるので、カーソルをHostingに合わせスペースキーを押して選択状態にし、エンターをおす。
? What do you want to use as your public directory? dist
↑のように聞かれるのでdistと入力する。
? Configure as a single-page app (rewrite all urls to /index.html)? No
その後また↑のように聞かれるのでエンターを押す。そのままのエンターは「No」の意味である。
設定ファイルの修正(webpack.config.js)
下記3箇所を修正する。
1箇所目
module.exports = { entry: './src/main.js', output: { path: path.resolve(__dirname, './dist'), publicPath: '/', #★ここのパスを変更 filename: 'build.js' },
2、3箇所目
devServer: { contentBase: 'dist', #★追加 historyApiFallback: true, noInfo: true, overlay: true }, performance: { hints: false }, devtool: '#eval-source-map' } if (process.env.NODE_ENV === 'production') { module.exports.devtool = '#source-map' // http://vue-loader.vuejs.org/en/workflow/production.html module.exports.plugins = (module.exports.plugins || []).concat([ new webpack.DefinePlugin({ 'process.env': { NODE_ENV: '"production"' } }), new webpack.optimize.UglifyJsPlugin({ sourceMap: false, #★falseに変更 compress: { warnings: false } }), new webpack.LoaderOptionsPlugin({ minimize: true }) ]) }
設定ファイルの修正(dist.index.html)
まずはdist/index.htmlがfirebase_cliで自動生成されたので削除します。
rm dist/index.html
その後mymarkdown直下のindex.htmlをdistディレクトリに移動させる。
mv index.html dist/
移動後、index.htmlの修正
firebase.initializeApp(config); </script> <script src="./build.js"></script> #★このように変更する </body> </html>
設定ファイルの修正(gitignore)
index.htmlをgit管理する為に以下のように修正する。
.DS_Store node_modules/ dist/ !dist/index.html #★追加 npm-debug.log yarn-error.log # Editor directories and files .idea *.suo *.ntvs* *.njsproj *.sln
buildの実行
npm run build
特段エラーなど表示されなければOK
デプロイの実行
firebase deploy
私はここでエラーが表示されました。
Error: No project active. Run with --project <projectId> or define an alias by running firebase use --add
なのでエラーの指示通りに下記コマンドを実行
$ firebase use --add ? Which project do you want to add? mymarkdown-50743 ? What alias do you want to use for this project? (e.g. staging) mast Created alias mast for mymarkdown-50743. Now using alias mast (mymarkdown-50743)
その後再度デプロイすると「Deploy complete!」と表示され、公開用のURLが表示されましたのでブラウザでアクセスするとmacから実行していた「npm run dev」と同じようにブラウザ上でVue.jsの画面が表示されました。
HTTPサーバ構築メモ
やってきました!サーバ系構築シリーズ第2回!
前回はTFTPサーバの構築メモをやりましたが、今回はHTTPサーバです!
NW機器の検証業務でOSのインストール項目ってのがあって、まぁ簡単に言うとHTTPサーバからOSのイメージを取ってきて問題なくOSのインストールが可能かどうか調べるって感じです。
んで、その検証の為にHTTPサーバを拵えたのでその時の手順をメモしようというお話です。
では早速いってみよう!
httpdモジュールのインストール
[root@localhost ~]# yum -y install httpd 読み込んだプラグイン:fastestmirror Loading mirror speeds from cached hostfile base | 3.6 kB 00:00 centosplus | 3.4 kB 00:00 extras | 3.4 kB 00:00 updates | 3.4 kB 00:00 依存性の解決をしています --> トランザクションの確認を実行しています。 ---> パッケージ httpd.x86_64 0:2.4.6-88.el7.centos を インストール --> 依存性の処理をしています: httpd-tools = 2.4.6-88.el7.centos のパッケージ: httpd-2.4.6-88.el7.centos.x86_64 --> 依存性の処理をしています: /etc/mime.types のパッケージ: httpd-2.4.6-88.el7.centos.x86_64 --> トランザクションの確認を実行しています。 ---> パッケージ httpd-tools.x86_64 0:2.4.6-88.el7.centos を インストール ---> パッケージ mailcap.noarch 0:2.1.41-2.el7 を インストール --> 依存性解決を終了しました。 依存性を解決しました ================================================================================ Package アーキテクチャー バージョン リポジトリー 容量 ================================================================================ インストール中: httpd x86_64 2.4.6-88.el7.centos base 2.7 M 依存性関連でのインストールをします: httpd-tools x86_64 2.4.6-88.el7.centos base 90 k mailcap noarch 2.1.41-2.el7 base 31 k トランザクションの要約 ================================================================================ インストール 1 パッケージ (+2 個の依存関係のパッケージ) 総ダウンロード容量: 2.8 M インストール容量: 9.6 M Downloading packages: (1/3): httpd-tools-2.4.6-88.el7.centos.x86_64.rpm | 90 kB 00:00 (2/3): mailcap-2.1.41-2.el7.noarch.rpm | 31 kB 00:00 (3/3): httpd-2.4.6-88.el7.centos.x86_64.rpm | 2.7 MB 00:00 -------------------------------------------------------------------------------- 合計 3.3 MB/s | 2.8 MB 00:00 Running transaction check Running transaction test Transaction test succeeded Running transaction インストール中 : mailcap-2.1.41-2.el7.noarch 1/3 インストール中 : httpd-tools-2.4.6-88.el7.centos.x86_64 2/3 インストール中 : httpd-2.4.6-88.el7.centos.x86_64 3/3 検証中 : httpd-tools-2.4.6-88.el7.centos.x86_64 1/3 検証中 : mailcap-2.1.41-2.el7.noarch 2/3 検証中 : httpd-2.4.6-88.el7.centos.x86_64 3/3 インストール: httpd.x86_64 0:2.4.6-88.el7.centos 依存性関連をインストールしました: httpd-tools.x86_64 0:2.4.6-88.el7.centos mailcap.noarch 0:2.1.41-2.el7 完了しました! [root@localhost ~]#
テストページの作成
[root@localhost ~]# touch index.html /var/www/html/ [root@localhost html]# cat index.html <html> <body> hello world </body> </html> [root@localhost ~]#
httpアクセスを許可
[root@localhost ~]# firewall-cmd --add-service=http --zone=public --permanent success [root@localhost ~]# firewall-cmd --reload success
SElinuxをOFF
[root@localhost html]# setenforce 0
httpdの起動
[root@localhost ~]# systemctl start httpd
テストページにアクセスしページ情報を取得できるか確認
[root@localhost html]# wget http://192.168.151.2/index.html --2019-01-17 11:38:42-- http://192.168.151.2/index.html 192.168.151.2:80 に接続しています... 接続しました。 HTTP による接続要求を送信しました、応答を待っています... 200 OK 長さ: 45 [text/html] `index.html.1' に保存中 100%[======================================>] 45 --.-K/s 時間 0s 2019-01-17 11:38:42 (2.33 MB/s) - `index.html.1' へ保存完了 [45/45] [root@localhost html]# ls index.html index.html.1 [root@localhost html]# cat index.html.1 <html> <body> hello world </body> </html> [root@localhost html]#
以上!終わり!
本当に検証するだけに立てたサーバなので色々と設定を省略してますww
TFTPサーバ構築メモ
先日TFTPサーバを構築したのでその時の手順やらのメモ書きです。
TFTPサーバのモジュールインストール
[root@localhost ~]# yum install tftp tftp-server 読み込んだプラグイン:fastestmirror Determining fastest mirrors base | 3.6 kB 00:00 centosplus | 3.4 kB 00:00 extras | 3.4 kB 00:00 updates | 3.4 kB 00:00 updates/7/x86_64/primary_db | 1.3 MB 00:00 依存性の解決をしています --> トランザクションの確認を実行しています。 ---> パッケージ tftp.x86_64 0:5.2-22.el7 を インストール ---> パッケージ tftp-server.x86_64 0:5.2-22.el7 を インストール --> 依存性解決を終了しました。 依存性を解決しました ================================================================================ Package アーキテクチャー バージョン リポジトリー 容量 ================================================================================ インストール中: tftp x86_64 5.2-22.el7 base 38 k tftp-server x86_64 5.2-22.el7 base 47 k トランザクションの要約 ================================================================================ インストール 2 パッケージ 総ダウンロード容量: 85 k インストール容量: 117 k Is this ok [y/d/N]: y Downloading packages: (1/2): tftp-5.2-22.el7.x86_64.rpm | 38 kB 00:00 (2/2): tftp-server-5.2-22.el7.x86_64.rpm | 47 kB 00:00 -------------------------------------------------------------------------------- 合計 227 kB/s | 85 kB 00:00 Running transaction check Running transaction test Transaction test succeeded Running transaction インストール中 : tftp-5.2-22.el7.x86_64 1/2 インストール中 : tftp-server-5.2-22.el7.x86_64 2/2 検証中 : tftp-server-5.2-22.el7.x86_64 1/2 検証中 : tftp-5.2-22.el7.x86_64 2/2 インストール: tftp.x86_64 0:5.2-22.el7 tftp-server.x86_64 0:5.2-22.el7 完了しました! [root@localhost ~]#
xinetdのインストールも忘れずに
[root@localhost ~]# yum install xinetd 読み込んだプラグイン:fastestmirror Loading mirror speeds from cached hostfile 依存性の解決をしています --> トランザクションの確認を実行しています。 ---> パッケージ xinetd.x86_64 2:2.3.15-13.el7 を インストール --> 依存性解決を終了しました。 依存性を解決しました ================================================================================ Package アーキテクチャー バージョン リポジトリー 容量 ================================================================================ インストール中: xinetd x86_64 2:2.3.15-13.el7 base 128 k トランザクションの要約 ================================================================================ インストール 1 パッケージ 総ダウンロード容量: 128 k インストール容量: 261 k Is this ok [y/d/N]: y Downloading packages: xinetd-2.3.15-13.el7.x86_64.rpm | 128 kB 00:00 Running transaction check Running transaction test Transaction test succeeded Running transaction インストール中 : 2:xinetd-2.3.15-13.el7.x86_64 1/1 検証中 : 2:xinetd-2.3.15-13.el7.x86_64 1/1 インストール: xinetd.x86_64 2:2.3.15-13.el7 完了しました! [root@localhost ~]#
xinetdの設定変更
[root@localhost ~]# cat /etc/xinetd.d/tftp # default: off # description: The tftp server serves files using the trivial file transfer \ # protocol. The tftp protocol is often used to boot diskless \ # workstations, download configuration files to network-aware printers, \ # and to start the installation process for some operating systems. service tftp { socket_type = dgram protocol = udp wait = yes user = root server = /usr/sbin/in.tftpd server_args = -s /var/lib/tftpboot disable = no ←★デフォルトだとyesなのでnoに変更する per_source = 11 cps = 100 2 flags = IPv4 }
ファイアウォールの設定
[root@localhost ~]# firewall-cmd --zone=public --add-port=69/udp --permanent←ポートで指定する場合 [root@localhost ~]# firewall-cmd --add-service=tftp --zone=public --permanent←サービスで指定する場合 [root@localhost ~]# firewall-cmd --reload←ファイアウォールの再読み込み
xinetdサービスの起動
[root@localhost ~]# systemctl start xinetd
動作確認
TFTPサーバに向けてテキトーなファイルのアップロードを行う。
今回は192.168.2.161の別サーバからtest.cfgと言うファイルをアップロードしてみます。
192.168.2.161側の操作
[root@localhost ~]# tftp -v 192.168.151.2 -c put test.cfg Connected to 192.168.151.2 (192.168.151.2), port 69 putting test.cfg to 192.168.151.2:test.cfg [netascii] Sent 17618 bytes in 0.0 seconds [4469595 bit/s] [root@localhost ~]#
TFTPサーバ側の操作
[root@localhost tftpboot]# ll 合計 24 -rw-rw-rw-. 1 nobody nobody 17618 1月 16 13:53 test.cfg -rwxrwxrwx. 1 root root 5 1月 16 11:30 test.txt [root@localhost tftpboot]#
jinja2を使ってコンフィグの自動生成をやってみた
最近業務で似たような検証環境をいくつも構築する事が多くなり、構築するたびにコンフィグを用意するのは面倒になっていました。
なのでjinja2を使って自動でコンフィグを生成するようにしてみました。
実行環境
- Winodows7 64bit
- Python 3.7.0
- pip 18.1
- jinja2 2.10
jinja2のインストール
pip install jinja2
テンプレートファイルの準備
※一部のコンフィグのみ載せています。
★OSPF設定 set protocols ospf area {{area_number}} interface lo0.0 passive set protocols ospf area {{area_number}} interface lo0.0 metric 10 set protocols ospf area {{area_number}} interface ge-0/0/0.0 interface-type p2p set protocols ospf area {{area_number}} interface ge-0/0/0.0 metric 100 ★BGP設定 set routing-options router-id {{Loopback}} set routing-options autonomous-system {{AS_number}} set protocols bgp group VPN local-address {{Loopback}} set protocols bgp group VPN cluster {{Loopback}} set protocols bgp group VPN peer-as {{AS_number}} set protocols bgp group VPN neighbor {{Opp_address}} import passall set protocols bgp group VPN neighbor {{Opp_address}} export passall
jinja2で生成するスクリプトの準備
#! /usr/bin/env python # -*- coding: utf-8 -*- from jinja2 import Template, Environment, FileSystemLoader env = Environment(loader=FileSystemLoader('.')) template = env.get_template('template.txt') data = { "area_number": "0.0.0.0", "Loopback": "192.168.27.129", "AS_number": "65000", "Opp_address": "192.168.27.3", } rendered = template.render(data) print(str(rendered))a
実行結果
$ python config_generate.py ★OSPF設定 set protocols ospf area 0.0.0.0 interface lo0.0 passive set protocols ospf area 0.0.0.0 interface lo0.0 metric 10 set protocols ospf area 0.0.0.0 interface ge-0/0/0.0 interface-type p2p set protocols ospf area 0.0.0.0 interface ge-0/0/0.0 metric 100 ★BGP設定 set routing-options router-id 192.168.27.129 set routing-options autonomous-system 65000 set protocols bgp group VPN local-address 192.168.27.129 set protocols bgp group VPN cluster 192.168.27.129 set protocols bgp group VPN peer-as 65000} set protocols bgp group VPN neighbor 192.168.27.3 import passall set protocols bgp group VPN neighbor 192.168.27.3 export passall
以上です。
上手くコンフィグが生成されていますね。
本当はこのコンフィグを機器に流し込むところまでやりたいんですが、それはまたの機会と言う事で!
Juniper QFXでdel intを実行する際は注意しよう!
タイトル通りQFXでdelete interfaceを実行する際は注意しましょうって話です。
まぁQFXに限らず、deleteコマンドを実行する際は注意は必要なんですけどね。。。
私は業務中にdelete interface実行後、commitを実行してしまい見事にマネージメントインタフェースの設定を消してしまい、SSH接続を弾き出された経験があります。
その後はサーバ室まで走ってコンソールケーブルでマネージメントインタフェースの再設定を行い復旧しました。
もしdelete interfaceを実行するならコミット前に再度マネージメントインタフェースの設定を投入して、それからコミットの実行する事で今回の減少は回避できますので次回からはそうしましょう。
そもそも何故delete intefaceを実行する事になったかと言うと、QFXに設定を入れようとコンフィグを確認するとすでに別のコンフィグが設定されていて一度設定を消す必要があったからですね。
大量にインタフェースの設定がされていて個別に消すのが面倒で、delete intefaceで横着してしまったわけです。。
いやー反省ですね。
次からは十分注意したいと思います。
Vue.jsとFirebaseで作るミニWebサービス 1回目
2019年あけましておめでとうございます。
最近ブログ更新しなさ過ぎて、運営様からそろそろ記事を書けとメールをいただきました。
2019年はなるべく更新できるよう頑張りたいと思います。
そんなわけで、今日からVue.jsを使ってミニWebサービスを作ってみたいと思います。
今回参考にさせて頂く参考書はこちら
【Vue.jsとFirebaseで作るミニWebサービス】です。
改訂新版 Vue.jsとFirebaseで作るミニWebサービス (技術書典シリーズ(NextPublishing))
- 作者: 渡邊達明
- 出版社/メーカー: インプレスR&D
- 発売日: 2018/10/05
- メディア: Kindle版
- この商品を含むブログを見る
簡単に本書の紹介から
はじめにこの本の目的とターゲット
本書のターゲットとしては次のように明記されています。
・HTML,CSS,Javascriptを利用して、簡単なWebサイトを作ったことがある人
・複数のページや状態管理をJavascript使って自力で行い、ごちゃついてしまい消耗している人
・普段デザイナーとしてマークアップしており、フロントエンドの新しめな環境でのサイト構築を経験してみたい人
・シングルページアプリーケーション、Vue.jsってものを触ってみたい、またはそれらの挫折経験がある人
・やったことないけどとにかくWebサービスを作ってみたい人
・FirebaseのWeb版を使ってみたい人、どんなことができるのか知りたい人
・普段サーバーサイドやネイティブアプリを作っていて、Webフロントエンドをさらっと触ってみたい人
私の場合は「やった事ないけどとにかくWebサービスを作ってみたい人」に当てはまります。
ターゲット層を見てわかる通り、初心者向けにも対応しています。
気になる方は是非お手にとってご覧になって下さい。
SPA(シングルページアプリケーション)について
そもそもシングルページアプリケーションってなんなの?
簡単に要約すると、Webページを遷移させずに情報を更新する事、今までのWebサイトの仕組みだとページのURLやセッションの情報に紐付き、サーバから出力するHTMLを変更する事でコンテンツ(情報)を切り替えていた。
SPAフレームワークを使うメリット
ページの再読み込みがなくてもサイトの内容を切り替える事ができるです。
そのためにURLやキャッシュにページの内容を記録しておくような機能、それらに応じて適切なデータを返すといった仕組みが必要になってきます。
そのあたりの機能を使いやすまとめたものがSPAフレームワークとなっています。
Firebaseで何ができるのか
今までWebサービスを作る上でサーバサイドプログラムが必要だった部分の一部が、コードを書かずに利用できる。
・Hosting:静的サイトのホスティング及びSSL対応
・Authentication:Googleアカウントを利用してログイン、アカウント情報の取得
・Realtime Database:NoSQLなデータベースの読み書き
これらの機能を利用する事で、Webサービスを公開まで開発することが非常に簡単に可能になっている。
作業用端末(Mac)で事前準備
macにbrewをインストールする
brew本家サイトにアクセスすると下記のようにコマンドが紹介されているのでそのままコピーしてmacのターミナルで実行する。
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
実行後、以下コマンドで確認する。
$ which brew /usr/local/bin/brew
nodebrewのインストール
下記コマンドでnodebrewをインストールしよう。
$ brew install nodebrew
コマンド実行後、下記コマンドで確認
$ brew list nodebrew
nodebrewのセットアップ
下記コマンドでnodebrewをセットアップしよう
$ nodebrew setup
セットアップ実行時のターミナルログにPATHを追加するような指示が出るのでPATHの追加を行い.bash_profileの反映を行う。
$ export PATH=$HOME/.nodebrew/current/bin:$PATH $ source .bash_profile
Node.jsとnpmのインストール
現在の安定板をインストールするのでオプションは「stable」を使う。実行後「Installed Successfully」と出ればOK
$ nodebrew install-binary stable
問題なく任意のバージョンがインストールされていることを確認する。
$ nodebrew list v10.15.0 v11.6.0 current: none
私は安定版と最新版の2つを入れておきました。
今回は安定版を使用する。下記コマンドで安定版を有効にしよう。
$ nodebrew use v10.15.0
下記コマンドでNode.jsとnpmがインストールされている事を確認する。
$ node -v v10.15.0 $ npm -v 6.4.1
開発環境のセットアップ
ここから本書に沿って手順を進める。
vue-templateのダウンロードとセットアップ
下記コマンドで「vue-cli」をインストールする
$ npm install -g vue-cli
問題なくインストールできたか次のコマンドで確認する
vue -h
作業用ディレクトリに移動して、テンプレートダウンロードの準備を進める
$ cd 作業ディレクトリ名 $ vue init webpack-simple Test_Markdown
いくつか質問されますが、最後の「Use sass?」以外はそのままEnterでOK
ちなみに私の場合はこんな感じでした。
Project nameの箇所だけ小文字にしています。
最初大文字にしていたんですが、大文字は使えないみたいで怒られました・・・
$ vue init webpack-simple Test_Markdown ? Project name test_markdown ? Project description A Vue.js project ? Author ? License MIT ? Use sass? Yes
作成したプロジェクトディレクトリに移動し、npmのインストールを実行
$ cd Test_Markdown/ $ npm install
最後にnpmを起動させる
$ npm dev run
するとブラウザが立ち上がりVue.jsの画面が表示されます。
ひとまず今日はここままで。
頑張って2回目の更新ができるように努力します!
ではでは〜