MacでVueCLIを使うまでの最速手順
2021年09月04日現在
目標
前提条件
ターミナルが使用しているシェルは「zsh」を前提とする。
「bash」を使用している場合は「.zshrc」を「.bashrc」に読み替えてください。
何を言っているのかわからないという人は以下のサイトを参考にしてください。
シェルってなに？bashとzsh、自分のMacはどっちを使ってるの？ 新macOS Catalina が zsh を標準にするって聞いたので Mojave のまま移行してみた
XCodeをインストールする
AppStoreでXCodeを検索してインストールする
homebrewをインストールする
homebrewはでデファクトスタンダードなパッケージマネージャーです。 対応するアプリケーションのインストールやバージョン管理ができるアプリケーション
詳しくは公式サイトを確認してください。
ターミナルで下記のコマンドからインストールできます。
$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
パスワードを尋ねられた場合は、インストールしているMacのパスワードを入力してください。
インストール後は下記のコマンドで確認することができます。
$ brew --version Homebrew 2.4.6 Homebrew/homebrew-core (git revision 5218; last commit 2020-07-14)
nodebrewをインストールする
Nodeのバージョンを管理するnodebrewをインストールします。 Vue CLIはnpmでインストールします。 npmはnodebrewをインストールすることで使用可能になります。
~/.nodebrew/srcを作成しないとエラーになります。
$ mkdir -p ~/.nodebrew/src $ nodebrew install-binary latest $ nodebrew list v14.5.0 current: v14.5.0
インストールしたバージョンを使えるようにします。
$ nodebrew use 14.5.0 use 14.5.0
npmコマンドを設定する
nodebrewをインストールしただけでは、ターミナルでnpmコマンドが認識されません。 パスを通してnpmコマンドを使えるようにします。
$ ls $HOME/.nodebrew/current/bin node nodebrew npm npx $ open ~/.zshrc
.zshrcに以下を追加して保存する。
export PATH=$PATH:$HOME/.nodebrew/current/bin
npmコマンドが有効か確認する
npm -v 6.14.5
Vue CLIをインストールする
$ npm install -g @vue/cli
Vueのパスを通す。
このままではターミナルでvueコマンドが使えないので下記のコマンドを実行してパスを通す。 XXXXXXXはログインしているユーザー名に変える
$ open ~/.zshrc
.zshrcに以下を追加して保存する。保存後にターミナルを再起動する。
export PATH=$PATH/Users/XXXXXXX/npm/bin:$PATH
Vueのパスが通ったか確認する
$ vue --version @vue/cli 4.4.6
以上
ざっくり理解するSSL/TLSとHTTPSの関係
これまでSSLとTLSの違いが曖昧だったので、ざっくり調べてみた。
そもそもSSLとTLSって何？
SSL(Secure Sockets Layer)もTLS(Transport Layer Security)も、データを暗号化して通信する為のプロトコル(決まり事)である。 以下のようなバージョンがある。
- SSL1.0
- SSL2.0
- SSL3.0
- TLS1.0
- TLS1.1 ↑これ以下はもう使用は非推奨。IE11もデフォルトでは非対応
- TLS1.2 ↓これから使うならTLS1.2以上
- TLS1.3
SSL と TLSの違いって何よ？
結論：SSL→古い TLS→新しい
以上、終わり。
元々はSSLという名前だった。 仕様変更後にTLSと名称を変更した。 しかし、SSLは既にと広く認知されている。 そのため「SSLを設定する」といわれることが多い。 混乱しがちだが、良く知られている古い名前を使用しているくらいの認識でOK。
何がうれしいのSSL/TLS
前述の通りSSLもTLSもプロトコルである。 SSL/TLSはWebサイトを提供するサーバー（以下、サーバー）とクライアント(IEとかのWebブラウザ)をセキュアに通信する時に使用する。 SSL/TLSに準拠したHTTPをHTTPSと言う。
HTTPとHTTPSについて
HTTP:Webサイトを構成するテキストを通信する為のプロトコル HTTPS:セキュアなHTTP。HTTP over SSL/TLSともいう。
HTTPでは、サーバーとクライアントは平文で通信する。 通信中に内容を読み取られる可能性がある。
HTTPSは通信を暗号化することで内容を読み取れることがなくなる。 HTTPを暗号化するための方法や、安全に通信するための手順は、SSL/TLSで定義された内容に従っている。
SSL/TLSの手順として、サーバーには「サーバー証明書」を設定必要がある。
サーバー証明書とは
信頼されている認証局が、サイトの証明書を発行する。 発行された証明書のことを「SSLサーバー証明書」という
以上
デバック中のWebApiにローカルネットワーク上の別端末からリクエストを送る方法
環境
目的
IIS Expressに対してデバック中の端末以外のローカルネットワーク上からリクエストを送ることができるようになる。
流れ
- VisualStudioでWebApiのデバックを開始する
- IIS Expressのコンテキストメニューから構成をクリックする
- 自分のIP＋新しいポート番号を追加する。
- 強化されたファイアウォールから新しいポートを受信設定に追加する。
詳細
1. VisualStudioでWebApiのデバックを開始する
VisuauStudioのデバック開始ボタンを押すか。F5キーを押してデバックを開始する。
2. IIS Expressのコンテキストメニューから構成をクリックする
タスクトレイに表示されているIISEexpresあいこんのコンテキストメニューのすべてのアプリケーションを表示をクリックする
サイト名をクリックして下に表示される構成をクリックする
3. 自分のIP＋新しいポート番号を追加する。
※重要：新しいポートはlocalhostのポート番号とは別にすること
もう一度デバックを開始した時に追加したIP：ポート番号が表示されていれば成功
- 追加したIPが表示されない時
- VisualStudioを閉じる
- ソリューション直下のbinとobjフォルダを削除する
- もう一度デバックを開始する
- 追加したIPが表示されない時
1. 強化されたファイアウォールから新しいポートを受信設定に追加する。
- タスクバーのテキスト入力にに「強化された」とする。表示されていない時はタスクバーの虫眼鏡をクリック
セキュリティ強化されたファイアウォールをクリックする
受信の規則から新しい規則をクリックする
ポートを選択して次へ
TCP 特定のローカルポートに「3. 自分のIP＋新しいポート番号を追加する」で追加したポートを入力する
あとは次へを繰り返して完了
以上
小話
なぜこれが必要になったのかというと、Xamarin.FormsでAndroidを開発している時にサーバーサイドはAsp.NetWebApiで開発していた。当初はローカルで用意したサーバーにわざわざリリースして確認していたのだが、開発効率落ちるし異常終了したときに追いずらいしでさんざんだった。 そんな時に、VisualStudioで同じソリューション内であれば、複数プロジェクトを同時にデバックできることを知った。しかし、今回の設定をしなければ、Androidがローカルネットワークを経由して、自分のPCに立っているWebApiに通信できないので、設定を行ったという流れだ。
NLogでEventLogを出力する最短方法
達成事項
- C#のコンソールアプリやWindowsFormsなどでNLogを使ってEventLogを出力する
前提条件
- .Net Framework 4.6.1
- powershellがインストールされていること
まとめ
- NLogをインストールする
- paworshellのコマンドファイルを作成する
- batファイルを作成する
- batファイルを管理者で実行する
- App.ConfigにNLog用のターゲットを設定する
- コードを書く
1. NLogをインストールする
プロジェクトを右クリックして「Nugetパッケージの管理」をクリックする
参照タグからNLogを検索してインストールする
2. paworshellのコマンドファイルを作成する
下記の内容とファイル名でコマンドファイルを新規作成する ファイル名「CreateEventLogSource.ps1」
New-EventLog -LogName Application -Source "NLogTest"
ここに同じファイルを用意した。
3. batファイルを作成する
下記の内容とファイル名でコマンドファイルを新規作成する ファイル名「CreateEventLogSource.bat」
powershell -NoProfile -ExecutionPolicy Unrestricted C:\CreateEventLogSource.ps1
ここに同じファイルを用意した。
失敗しない為のポイント
- 「C:\CreateEventLogSource.ps1」の部分は絶対パスで指定すること
4. batファイルを管理者で実行する
- 作成したCreateEventLogSource.batを右クリックしたメニューの「管理者として実行」をクリックする
5. App.ConfigにNLog用のターゲットを設定する
<?xml version="1.0" encoding="utf-8" ?> <configuration> <configSections> <section name="nlog" type="NLog.Config.ConfigSectionHandler, NLog"/> </configSections> <startup> <supportedRuntime version="v4.0" sku=".NETFramework,Version=v4.6.1" /> </startup> <nlog xmlns="http://www.nlog-project.org/schemas/NLog.xsd" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" autoReload="true" throwExceptions="false"> <targets> <target name="eventlog" xsi:type="EventLog" source="NLogTest" /> </targets> <rules> <logger name="*" minlevel="Debug" maxlevel="Fatal" writeTo="eventlog" /> </rules> </nlog> </configuration>
失敗しない為のポイント
- 「configSections」は先頭に挿入する
- targetsのsourceは2. paworshellのコマンドファイルを作成するで指定したSourceと同じにする
6. コードを書く
ここからソースをダウンロードできる。
using NLog; using System; namespace NlogEventLogSample { internal static class Program { private static Logger Logger = LogManager.GetCurrentClassLogger(); private static void Main(string[] args) { try { Logger.Info("Hello World"); } catch (Exception ex) { Logger.Error(ex); } } } }
結果
- イベントビュワーに正しく表示された
以上
インプット大全のアウトプット
精神科医の樺沢紫苑著書のインプット大全を読んだ自分なりのまとめをアウトプットする。本の内容を正確にまとめた内容ではなく個人の感想なので注意してほしい。
よくあるまとめ系の記事だと、まとめは最後に書くものだが、私はダラダラと感想を書かれていると、早くまとめだけ読ませてくれと思う事があるので、そんな人向けてまとめから書こうと思う。
まとめ
- インプットは量より質を重視する
- 必要な情報以外は捨てる勇気を持つ
- 記憶に留めて初めてインプット
- インプットはアウトプット前提で行う
- インプットと目標はセット
- 興味・関心のアンテナを意識する
- 情報は自分で探しに行かない
- 休憩中にスマホはNG
以上
1. インプットは量より質を重視する
自分にとって質の低いインプットを積み重ねるより、質の高いインプットを少しでも積み重ねる方がより成長できる。Twitterとかインスタを何時間見たって試験には受からない。質の低いインプットとは見たり聞いたりしても自分にとって興味や関心がなく、ただ見ているだけ、聞いているだけのインプット。見てるだけのSNS全般はこれ、Youtubeも面白いけど、自分の糧になるような物を選んで見よう。YouTubeなどSNS全般はいかにユーザーを中毒にするかを考えて作られているので、それに負けない。質の高いインプットとは気付き、すべき事、得られる事が多いインプットの事。 得た情報に、なるほど。と納得して自分が良い方向に向かって行けるようなインプットが質の高いインプット。
2. 必要な情報以外は捨てる勇気を持つ
ある実験によるとネットニュースなどから得られた質の低いインプットは１週間後に約97％を忘れていたとのこと。Twitterのタイムライの内容はほぼ覚えてないでしょって事。自分にとって本当に必要な情報・知識に時間を集中する事でインプット効率が上がる。こればっかりだと疲れるからバランスが大事だけど意識しておかないといつも通りダラダラ携帯を眺めて、あー時間がない。とか言っちゃう人になる。 必要でない情報は「見ない」「接続しない」。これも意識的に情報から鎖国する事で自分の目標に集中する。
気がついて、スマホチェックは、無駄だから
3. 記憶に留めて初めてインプット
- 偽のインプット
- 再生不可：手に入れた情報を思い出せないなど
- 説明不可：手に入れた情報を説明する事ができない
→ 自己満足
- 真のインプット
- 再生可能：手に入れた情報を思い出す事ができる
- 説明可能：手に入れた情報をまとめて説明する事ができる
→ 自己成長
4. インプットはアウトプット前提で行う
ある実験で、インプットした後にテストをすると伝えたグループと、インプットをした後に人前で説明してもらうと伝えたグループに分けてインプットを行った。結果は後者の方がより、多くの情報を記憶していた。人前で説明しなければならないため細部まで注意深くインプットしていたことと、緊張感を持っていたために記憶に残ったと推測していた。つまり、アウトプット前提のインプットの方が学びの効率が高い。 私も、インンプット大全でアウトプット前提にと読んでから、まず、メモを取りながら読んだ。その後に知人に内容を伝えた。そして、このプログにアウトプットしている。これくらいアプトプットすると嫌でも内容を覚える。私はこの手の自己啓発本が好きで、よく読んでいたのだが、読んでも身につかない事が悩みだった。友人は身につかないからもう読まないとさえ言っていた。大学生の頃から自己啓発の本を読んでいるのでまぁまぁな数を読んでいるはずだ。しかし、全く覚えていない。 まさに、偽のインプットを質より量でこなしてしまった状態だ。これからは量より質をアプトプット前提でインプットして行こうと決めた。
5. インプットと目標はセット
量より質が大事なのはわかった。アウトプット前提でインプットした方が記憶に残りやすいのもわかった。では、なぜ、インプットは目標とセットで行うのか。それは目標までの道のりが決まると、インプットの方法が具体的に決まるからである。例えば、1年後に英語で日常会話ができるようになるという目標を設定した時に、じゃあ、半年で個人レッスンができるくらいに英語が話せるようになる。３ヶ月でグループレッスンで話せるようになるなど、目標達成に必要な精度の高いインプットの方法を決める事ができるようになる。その結果、自己成長速度が早くなる。 私はこの本を読んでから、そんなに日数が経っていないので自己成長ができているかは判断が難しいところだが、少なくとも読んで終わりではなく本の内容に従ってこの記事を書いているので、自分としては良い方向に向かっていると思う。他の本も読んでいるので、近いうちに感想をブログにしようと思う。
6. 興味・関心のアンテナを意識する
人は自分が興味を持っている情報をキャッチしやすい。この自分が興味を持っている情報をキャッチすることを、選択的注意というらしい。筆者は選択的注意のことを「興味・関心のアンテナ」と名付けている。 街中でCMが流れている時に、同じ場所にいてもよく覚えていたり、全く覚えていなかったりする。人は無意識のうちに「興味・関心のアンテナ」で情報の取捨選択を行っているのだ。 自分のアンテナを意識してアンテナの強化をしよう。具体的に興味・関心がある分野を3つあげることを筆者は勧めている。
7. 情報は自分で探しに行かない
最もやってはいけない情報の探し方はネットサーフィンと筆者は言っている。目的なく情報を探していても重要な情報は一割ほどしか手に入らない。30分ネットサーフィンをしていた場合、27分は無駄な時間を過ごしているということになる。最近はネット通販が当たり前になってきて、商品が自宅に届く時代だ。情報も同じように、自分の元に届くようにした方がいい。具体的な方法としてTwitterで自分にとって有益な情報を発信している人物をフォローするなどを例に上げていた。
8. 休憩中にスマホはNG
脳の80％は視覚情報を処理している。休憩時間にスマホを見ていては脳が休まらない。脳は視覚情報を遮断した瞬間から休憩状態になるので、数分間目を閉じるだけでも疲労が回復する。 また、スマホを長時間使用するほど、集中力は低下する。その結果、注意散漫になり仕事の効率や、学力低下、幸福度低下などのデメリットが発生する。ある実験では、スマホの使用時間が１時間増えるごとに数学の点数が5点下がるという実験結果がある。スマホ、テレビ視聴、ゲームを長時間行うと、その後、３０分間は脳の機能が低下する。この時にいくら一生懸命勉強しても記憶には残り難いためだ。さらに人間は睡眠中に記憶を整理する。寝る15分前が記憶のゴールデンタイムと言われている。よくある、勉強して寝る前にベットでSNSをチェックなどを行うと、インプット同士が衝突して記憶が整理されない。さらにスマホのブルーライトで睡眠効率が低下までする。
最後に
文頭でも伝えたがあくまで、個人的感想であり本の内容を正確に伝えているものではない。書いてある内容を信じるかどうかはしっかりと自分で調べてから判断してほしい。今回紹介した内容は、私がインプット大全を読んで、私のアンテナに引っかかった内容である。本はもちろんこのブログより、丁寧にわかりやすく、そしてもっと詳しく、多くの情報が書かれていた。少しでも興味を持ったなら躊躇する必要はないので、買ってみて欲しい。
以上。
StreamReaderで指定したレコードに自動分割する
目的
手動でファイルを分割して名前を指定して保存するのが面倒なので、ファイルを自動で分割して保存するようにした。
環境
- C#
- Windows10 64bit
- .Net Framework 4.6.1
詳細
実際のコードはここを参考にしてほしい。実際に使用しているので最低限のチェック処理が書いてある。
ポイント1：必要ファイル数を計算する
読み込むファイルの行数が不明なので、ファイルをいくつ分けるか判断する必要がある。 「ReadAllLines」メソッドを使って読み込み元のファイルを読み込んでその件数を取得している。件数をdoubleで宣言しているのがキモ。次のファイル数を計算する箇所で明示的にdoubleで宣言していない場合、暗黙的にintで宣言される。そのため、小数点部は必ず0になり切り上げしたくても狙った数にはならない。
//読み込み元のファイルレコード数 var RecordCount = (double)File.ReadAllLines(FilePath).Count(); //作成するファイル数を取得する var LoopCount = Math.Ceiling(RecordCount / (double)MaxFileRecord);
ポイント2：途中ファイルの読み込みは指定行数まで
よくあるサンプルでは「while (sr.Peek() > -1)」で最終レコードまで読み込んで、1行ずつテキストに出力しているものが多い。そのままでは指定した行数毎にファイルを分割できないので、事前に計算していした1ファイルの最大行数(MaxFileRecord)までレコードを読み込んでからファイルに出力してループを抜けるようにしている
//読み込んだ回数が指定したレコード数の時は
if (ReadCount == MaxFileRecord)
{
//新しいファイルに書き込んで
sw.WriteLine(NewText);
//while (sr.Peek() > -1)を抜ける
break;
}
ポイント3：最後はReadToEndで一気に読み込む
ReadToEndを使うことでファイルの終端まで読み込むことができる。StreamReaderを使用したファイル読み込みのサンプルでよく見る。便利なので通常の読み込みであればこれで十分だ。ReadToEndの読み込み開始位置はPositionから読み込む。Positionは読み込みを行うことで１文字ずつ移動していく。今回はStreamReader.WriteLineを使用して行単位で読み込んでいるので1行づつ移動していくことになる。 そのため最後のファイル以外を読み込んだ後にReadToEndを使用すると残りの行数が一気に取れる。
//最後のファイルの時は
if (i == LoopCount)
{
//StreamReader.ReadToEndで最後の行まで読み込む
sw.WriteLine(sr.ReadToEnd());
}
ファイル作成の主要部分を抜粋
//読み込み元のファイルレコード数
var RecordCount = (double)File.ReadAllLines(FilePath).Count();
//作成するファイル数を取得する
var LoopCount = Math.Ceiling(RecordCount / (double)MaxFileRecord);
//引数のファイルパスからフォルダパスを取得する
var DirPath = Path.GetDirectoryName(FilePath);
//引数のファイルパスからファイル名を取得する
var BaseFileName = Path.GetFileNameWithoutExtension(FilePath);
//読み込み元のファイルをStreamReaderで開く
using (var fs = new FileStream(FilePaFileMode.Open, FileAccess.Read, FileShare.R)
using (var sr = new StreamReader(Encoding.UTF8))
{
//作成するファイル数分繰り返す
for (int i = 1; i <= LoopCount; i++)
{
//1ファイルに書き込むテキストを保持する変数を宣言
var NewText = string.Empty;
//新しいファイルのパスを生成する
var NewFilePath = Path.Combine(DirP string.Format("{0}_{1}.csBaseFileName, i));
//処理した行数をカウントする変数を宣言する
var ReadCount = 0;
//新しいファイルをStreamWriterで開く
using (var newfs = new FileSt(NewFilePath, FileMode.OpenOrCreaFileAccess.ReadWriFileShare.ReadWrite))
using (var sw = new StreamWriter(ne Encoding.UTF8))
{
//最後のファイルの時は
if (i == LoopCount)
{
//StreamReader.ReadToEndで最後の行まで読み込む
sw.WriteLine(sr.ReadToEnd());
}
else
{
//レコードが読み込めなくなるまで繰り返す
while (sr.Peek() > -1)
{
//読み込んだレコードを保存用の変数に追加する
NewText = NewText + sr.ReadLine() + Environment.NewLine;
//読み込んだ回数をカウントする
ReadCount++;
//読み込んだ回数が指定したレコード数の時は
if (ReadCount == MaxFileRecord)
{
//新しいファイルに書き込んで
sw.WriteLine(NewText);
//while (sr.Peek() > -1)を抜ける
break;
}
}
}
}
}
}
余談
ここは余談なので興味がない人は読み飛ばしてもらってかまわない。なぜこの機能が必要になったのかというと、業務で数万行のCSVファイルを取り込む処理を定期的に実行していた。取込に問題はなかったのだが取込後のチェックSQLでタイムアウトが頻発していた。原因は特定していたが業務にクリティカルな修正になるので修正できなかった。そのため、一時的な逃げとして数万行のファイルを１万行に分割して取り込んでいた。当初は別の人間が対応していたのだが、なんやかんやで自分にお鉢が回ってきた。素直に手作業でやるのが面倒だったのでドラッグ＆ドロップでファイルが分割できる機能を開発した。調べて見ると開始からN行までとか。N行目から最後までとかは割と出てきた。しかし、指定した行で自動分割する記事は見つからなかった。なので、もし同じ処理を行いたい人が出てきた時の参考になればいいなと思い記事にした。正直、コードのプラッシュアップはしていないので冗長な書き方になっているかもしれないがご容赦願いたい。
まとめ
- 必要ファイル数を計算する
- 途中ファイルの読み込みは指定行数まで
- 最後はReadToEndで一気に読み込む
