Visual Studio Codeで使用している拡張機能メモ
新しく開発環境を構築した際にVS Codeに追加した拡張機能を備忘録として残しておきます。
Web関係がメインです。
その他、使用する拡張機能の増減があったら、都度編集していきます。
本記事の内容です。
HTML
HTML Snippets
HTML Snippets - Visual Studio MarketplaceCSS
IntelliSense for CSS class names in HTML
IntelliSense for CSS class names in HTML - Visual Studio MarketplaceJavaScript
ESLint
ESLint - Visual Studio MarketplaceNode.js Extension Pack
Node.js Extension Pack - Visual Studio MarketplaceNode.js Modules Intellisense
Node.js Modules Intellisense - Visual Studio MarketplaceVue.js Extension Pack
Vue.js Extension Pack - Visual Studio MarketplaceVueHelper
VueHelper - Visual Studio MarketplaceReact Extension Pack
React Extension Pack - Visual Studio MarketplaceES7 React/Redux/GraphQL/React-Native snippets
ES7 React/Redux/GraphQL/React-Native snippets - Visual Studio MarketplaceBrowser Debug
Debugger for Chrome
Debugger for Chrome - Visual Studio Marketplace.NET
.NET Core Extension Pack
.NET Core Extension Pack - Visual Studio MarketplaceJava
Java Extension Pack
Java Extension Pack - Visual Studio MarketplaceTomcat
Tomcat for Java
Tomcat for Java - Visual Studio MarketplaceGit
Git Extension Pack
Git Extension Pack - Visual Studio MarketplaceDocker
Docker
Docker - Visual Studio MarketplaceServer
Live Server
Live Server - Visual Studio MarketplaceMarkdown
Auto-Open Markdown Preview
Auto-Open Markdown Preview - Visual Studio MarketplaceMarkdown Extension Pack
Markdown Extension Pack - Visual Studio MarketplaceJapanese
VSNotes
VSNotes - Visual Studio Marketplaceテキスト校正くん
テキスト校正くん - Visual Studio MarketplaceJapanese Word Handler
Japanese Word Handler - Visual Studio MarketplaceDocker on WSL(Ubuntu 18.04)環境の作り方(Windows10 ver 1809)
Windows10のバージョンを1809(October 2018 Update)にアップデートすると、Ubuntu18.04上でもDockerが動作するようになるとのことで試してみました。
本記事の内容です。
本記事の内容を試した環境
Host OS: Windows10 Professional (ver 1809) (Build 17763.195)Guest OS: Ubuntu18.04
Docker ver: 18.06.1-ce, build e68fc7a
インストール
下記の内容でスクリプトファイルを作成し、実行します。#!/bin/sh # install docker sudo apt-get update sudo apt-get upgrade sudo apt-get install -y docker.io sudo usermod -aG docker $USER # start docker service sudo cgroupfs-mount sudo service docker start # setting docker auto start echo 'sudo cgroupfs-mount' >> ~/.bashrc echo 'sudo service docker start' >> ~/.bashrc
管理者権限でUbuntuを再起動
一度Ubuntuの画面を閉じ、管理者権限で起動します。すると、Dockerの自動起動を行うために管理者ユーザのパスワードを聞かれるので入力します。
インストールしたDockerのバージョン確認
下記のコマンドを実行し、Docker version 18.06.1-ce, build e68fc7a
と表示されることを確認します。
docker -v
Hello Worldで動作確認
インストールしたDockerが正常に動作することを確認します。下記のコマンドを実行し、
Hello from Docker!
というメッセージが表示されればOKです。
docker run hello-world
参考にさせていただいたページ
https://xn--v6q832hwdkvom.com/post/windows10のバージョン1809のwslでdockerが動作する環境を構築した/これからUbuntu16.04から18.04に移行できるかどうか、実際の開発で使用して確認していきたいと思います。
2018年振り返りおよび2019年抱負
大晦日ですね。
というわけで、2018年を振り返りつつ2019年の抱負を書いていこうと思います。
本記事の内容です。
2018年振り返り
今年(2018年)に起こった出来事を、大体時系列順に並べて振り返っていきます。前職を退職
6月に前職を退職しました。詳細は退職エントリを読んでください。
j-levia.hatenablog.jp
ちなみに前職を退職するまでは病みながら社畜生活をしていたので、特に書くことはないです。
(記憶もあまり無い。)
退職後、フリーランス(個人事業主)化
前職を退職した後、本当は無職生活をenjoyするはずだったのですが、引継ぎ関係のアレコレでフリーランスとして前職から期間限定で仕事を受けることになりました。当時、フリーランスになるにあたり行ったことは、下記の記事に書いてあるので興味のある方は読んでみてください。
j-levia.hatenablog.jp
j-levia.hatenablog.jp
確定申告(青色申告)については年明けに確定申告が終わり次第、ブログ記事を書いて投稿予定ですので、お待ちください。
ちなみに、フリーランス化してからの最初の案件は、毎週月曜日の午前中1時間ほど出社する以外は自宅作業という、ほぼリモート勤務案件でした。
リモート勤務、良いですね。
出社する必要が無くなると、ずっと引きこもってしまい運動不足になり太りますが。
そして無職へ...
9月半ばに同じ会社から2件目の案件の話がきて、話を聞いた感じでは面白そうだったので受けることにしました。でも、蓋を開けてみると酷い炎上案件だったり、営業窓口の人の仕事が雑な関係で契約周りで揉めたりと大変でした...
結果、10月半ばにメンタルと体が壊れてマトモに体が動かせなくなるわ、病院でお医者さんからドクターストップが掛かるわでプロジェクトアウトすることに。
その後はずっと療養という名の無職生活を送っていました。
ここで得た教訓としては、揉め方やお互いの交渉の結果にもよりますが、契約周りで揉めたら取引しない方がいいですね。
その時はうまくいったとしても、その後、高確率で揉めることになるので。
(一概には言い切れませんが。)
勉強会やコミュニティ関係
今年は- Frontend Nagoyaさん
- CenterCLRさん
- NGK2018B
で、それぞれ1回ずつ、計3回LT枠で登壇させていただきました。
NGK2018Bで登壇した時に使用した資料については下記記事で公開していますので、興味のある方は見てください。
j-levia.hatenablog.jp
プライベート
語学留学に行くことを決めたり、友人が結婚したので結婚式に出席したりと、いろいろとありました。友人が結婚すると、周り(特に祖父母)からすごく圧力がかかるようになりますね。
ちなみに私は結婚する以前に恋人が居ないし、できる気配も無いし、残念な感じです。
総括
自分が今まで生きてきた中で一番濃かった1年間と言っても過言ではないほど、たくさんのイベントが起こりました。あらゆる方面で人生経験を積め、今までにないくらい成長できた気がします。
色々と相談に乗ってくださった方、背中を押してくださった方、
そして、こんな息子を良い意味で放置してくれている親に感謝です。
2019年抱負
来年は早々にオーストラリアへ語学留学へ行くので、そこから色々とつなげていきたいですね。というわけで、来年の抱負は下記の通りです。
語学留学中に行うこと
- プログラマとして働けるレベルの英語力を身につける
- オーストラリアでプログラミングのアルバイトに就く
- 海外で人脈をつくる
語学留学からの帰国後に行うこと
海外でもプログラマとして仕事をしてお金を稼ぎつつ、向こうのコミュニティに顔出しして登壇するなどして楽しくレベルアップしていきたいですね。
Docker on WSL(Ubuntu 16.04)環境の作り方
WSL + Ubuntu16.04にDockerをインストールし、
使用できる環境を作成したので備忘録がてら説明していきます。
本記事の内容です。
はじめに
今回はDockerのバージョンを指定してインストールします。何故、わざわざDockerのバージョンを指定するのかと言いますと、2018/12/30時点だとバージョンを指定しないと後述する環境で動作しないバージョン(18.06.0)でインストールされてしまうからです。
バージョンを指定しないインストール方法は、下記の通りです。
sudo apt update sudo apt upgrade sudo apt install docker.io
ですので、今回は後述する環境で動作するバージョン
17.09.0
を指定してインストールしています。
本記事の内容を試した環境
Host OS: Windows10 Professional (ver 1803) (Build 17134.472)Guest OS: Ubuntu16.04
インストール
Dockerのインストールのためにいちいちコマンドを実行するのは面倒なので、インストール用のスクリプトファイルを作成して一括で実行するようにします。下記の内容はインストールだけでなく、サービスの起動や自動起動設定もスクリプトファイル内で行うようにしています。
今回は
docker-ce17.09.0-install.sh
という名前でスクリプトファイルを作成しました。
内容は下記の通りです。
コピペしてお使いください。
#!/bin/sh # install docker (ver 17.09.0) sudo apt-get update sudo apt-get install -y apt-transport-https ca-certificates curl software-properties-common curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo apt-key add - sudo apt-key fingerprint 0EBFCD88 sudo add-apt-repository "deb [arch=amd64] https://download.docker.com/linux/ubuntu xenial stable" sudo apt-get update sudo apt-get install -y docker-ce=17.09.0~ce-0~ubuntu sudo usermod -aG docker $USER # start docker service sudo cgroupfs-mount sudo service docker start # setting docker auto start echo 'sudo cgroupfs-mount' >> ~/.bashrc echo 'sudo service docker start' >> ~/.bashrc
管理者権限でUbuntuを再起動
一度Ubuntuの画面を閉じ、管理者権限で起動します。すると、Dockerの自動起動を行うために管理者ユーザのパスワードを聞かれるので入力します。
インストールしたDockerのバージョン確認
下記のコマンドを実行し、Docker version 17.09.0-ce, build afdb6d4
と表示されることを確認します。
docker -v
Hello Worldで動作確認
インストールしたDockerが正常に動作することを確認します。下記のコマンドを実行し、
Hello from Docker!
というメッセージが表示されればOKです。
docker run hello-world
参考にさせていただいたページ
qiita.comqiita.com
qiita.com
VS Code on WSL(Ubuntu 16.04)環境の作り方
WSL + Ubuntu16.04にVS Codeをインストールし、
GUI起動できる環境を作成したので備忘録がてら説明していきます。
本記事の内容です。
本記事の内容を試した環境
OS: Windows10 Professional (ver 1803) (Build 17134.472)Windows側の準備
VcXsrvをインストール
下記ページからVcXsrvをインストールします。sourceforge.net
VcXsrvを起動
インストールされたVcXsrvを起動します。起動時に設定を行えますが、すべてデフォルトでよいので、
「次へ」→「次へ」→「次へ」→「完了」
と、ボタンをクリックして起動を完了させてください。
Ubuntu側の準備
初期起動時の準備
起動後、ユーザ名の設定が可能になるまで放置します。ユーザ名を聞かれたらユーザ名を設定します。
パスワードを聞かれたらパスワードを設定し、その後、パスワード再入力します。
管理者権限でUbuntuを再起動
一度Ubuntuの画面を閉じ、管理者権限で起動します。インストール用のスクリプトファイルを作成
VS Codeのインストールのためにいちいちコマンドを実行するのは面倒なので、インストール用のスクリプトファイルを作成して一括で実行するようにします。今回は
vscode-install.sh
という名前でスクリプトファイルを作成しました。
内容は下記の通りです。
コピペしてお使いください。
sudo apt-get install -y curl apt-transport-https libasound2 curl https://packages.microsoft.com/keys/microsoft.asc | gpg --dearmor > microsoft.gpg sudo install -o root -g root -m 644 microsoft.gpg /etc/apt/trusted.gpg.d/ sudo sh -c 'echo "deb [arch=amd64] https://packages.microsoft.com/repos/vscode stable main" > /etc/apt/sources.list.d/vscode.list' sudo apt-get update sudo apt-get install -y code echo 'export DISPLAY=localhost:0.0' >> ~/.bashrc
インストール用のスクリプトファイルを実行
下記コマンドでインストール用のスクリプトファイルを実行します。sh vscode-install.sh
.bashrcの設定を反映
上記のvscode-install.shで設定した.bashrcの設定を即時反映させるため、下記のコマンドを実行します。source .bashrc
本当はすべてvscode-install.sh内で完結させたいです。
sourceコマンドを'.'に置き換えればシェルスクリプト内でも実行できるらしいのですが、私の環境では動作しませんでした。
WSL上のVS Codeを起動
下記コマンドでVS Codeを実行します。code
使用感等
ホストOS上で動作させるよりは若干ラグがあったりするが、慣れれば問題無いかな?というレベルだと思います。後はWSL + Ubuntu上にDockerやgit clientの環境を構築したら本格的に使用可能な開発環境になりますね。
そこらへんは後日、記事を書いてアップ予定です。
参考にさせていただいたページ
www.karelie.netNGK2018Bで語学留学ネタで登壇した話 補足編
先日(2018/12/22)、NGK2018Bというイベントで登壇しました。
本記事では、そこで喋ることができなかったことや
喋らなかったことについて書いていきます。
本記事の内容です。
- NGK2018Bとは?
- 使用した資料
- 何故、語学留学へ行こうと思ったのか?
- エージェントはどこを利用したのか?
- 準備にどれくらい時間が掛かったのか?
- 何故オーストラリアを渡航先に選んだのか?
- 語学学校について
- 航空券はどこで手配したの?
- 留学保険の加入期間が語学学校に通う期間と違うのは何故?
- 海外へお金を持っていく方法は?
- 持病がある場合
- 海外でスマホを利用するには?
- 海外へ行っている間の国民年金について
- さいごに
NGK2018Bとは?
毎年、名古屋近郊のIT系コミュニティが合同で催す大忘年会です。ngk2018b.connpass.com
昼の部と夜の部に分かれており、
昼の部はLT大会、夜の部は懇親会(飲み会)という構成になっています。
※LTとは、自分で決めたテーマを元に持ち時間5分間で人前で喋るプレゼン的なもの
使用した資料
当日使用した資料については下記をご覧ください。speakerdeck.com
何故、語学留学へ行こうと思ったのか?
今年の6月いっぱいで当時の会社を退職する事が決まった後に「働きたくないなぁ...でも、せっかく時間とお金があるんだから
未来に繋がることをやりたいなぁ...」
となりました。
その時にちょうどインターネット上でワーキングホリデーの広告を見て興味を持ち、
「日本脱出できるように英語を勉強するか。しかも海外で働ける。」
となったのですが、後述するエージェントに相談したところ
「英語の勉強をメインにしたいなら語学留学の方が良いんじゃない?」
ということで、語学留学に行くことになりました。
ここまでが2018/06~07時点での考えです。
2018/08以降、いろいろ考えた結果、最終的には
「日本は全体的に労働に関する法令順守の精神がよろしくないし、
政治周りや高齢化社会化を見ていても、あまり未来が無いなぁ。」
という主観バリバリの考えの元に、
全世界どこへ行っても戦えるように準備をしたいという気持ちがつよくなりました。
エージェントはどこを利用したのか?
日本ワーキングホリデー協会さんを利用しました。www.jawhm.or.jp
料金5000円を支払うことで会員になれば3年間サポートしてもらえ、
さらに会員になれば、不安点や質問があればメールやカウンセリングで対応してもらえます。
※カウンセリングは事前予約が必要です。
※以降、ワーホリ協会と記述します。
準備にどれくらい時間が掛かったのか?
準備を始めてから渡航まで約半年間です。ザックリとした流れは下記の通りで、
海外渡航へ興味を持ったのが2018/06、
ワーホリ協会で初めて話を聞き、海外渡航をすることを決めたのが2018/07、
海外へ渡航するのが2019/01、
という感じです。
何故オーストラリアを渡航先に選んだのか?
理由は下記のとおりです。- 日本と時差が少ない(1時間しか無い)
- 渡航している日本人が多いため何があった時に頼れる
- ワーホリ協会さんの現地オフィスがあるので何かあった時に頼れる
- 気候が安定しているので過ごしやすい
- 公用語が学びたい英語
- 語学留学初心者やワーホリ初心者はオーストラリアへ行くのがお勧めという空気があった
語学学校について
選んだ語学学校は?
ILSCを選びました。下記の公式ページは英語表示ですが、日本語表示のページもあります。
https://www.ilsc.comwww.ilsc.com
その語学学校を選んだ理由は?
理由は下記のとおりです。- 厳格なイングリッシュオンリーポリシーがある
- 授業時間が数ある言語学校の中で一番長かった
- 授業内容を自分で選択でき、自分だけのカリキュラムを組むことができた
- 駅から徒歩2分というアクセスの良さ
- 日本人のサポートスタッフが居るので、何かあった時に頼ることができる
厳しい環境でかつガッツリと授業を受けることで、
自分を追い込み短期間で英語力を向上させたい、という感じですね。
選択したコースは?
Full Time Intensiveです。
航空券はどこで手配したの?
Jetstarを利用しました。航空券を手配する際、オプションは何も付けていないです。
www.jetstar.com
留学保険の加入期間が語学学校に通う期間と違うのは何故?
LTの資料上では半年間語学学校へ通う予定なのに、『最低限の準備に掛かった費用』のページでは7か月分の料金となっています。
これは何故かと説明しますと、学生ビザを取得する時に申請する期間に加え
学校から1か月間、政府から(最大)1か月間の休暇が与えられるからです。
保険は渡航先に滞在中の期間は加入している方がよいので、
そこらへんを加味して7か月間加入しています。
海外へお金を持っていく方法は?
キャッシュパスポートを利用します。キャッシュパスポートとはMasterCard加盟店で使用できるデビットカードです。
が、新たに銀行口座を開設する必要はありません。
海外へ渡航する前にお金を入れておき、
渡航後は基本的にカードで支払うことになります。
注意点として、入金したお金が尽きた場合、自分ではチャージできないので
他人に振り込んでもらうことになります。
事前に親族に話をしておくなどしておきましょう。
https://www.jpcashpassport.jpwww.jpcashpassport.jp
持病がある場合
薬は持ち込めるの?
持ち込めます。が、英語の処方箋が必要とのことです。
海外で常用している薬を入手するには?
英語の診断書や処方箋を持って病院へ駆け込めば入手できるらしいです。
海外でスマホを利用するには?
SIMフリースマホを持っていない場合
スマホをレンタルできるので、レンタルしましょう。ですが、手持ちのスマホをSIMロック解除をしておくか、
格安スマホを入手する方が安上がりです。
SIMフリースマホを持っている場合
渡航先の国によってはSIMカードを提供している会社が複数あるので、事前に調べておきましょう。
また、SIMカードは空港で契約できるようなので、
渡航先の国の空港に着いたら真っ先に窓口を見つけて駆け込みましょう。
海外へ行っている間の国民年金について
過去最大2年間分は後納できるらしいので、帰国後に支払いましょう。請求に関しては、出国前に住民票を渡航先に移すようにしたら止めることができるとのことです。
さいごに
登壇に使用し資料や本記事にて、海外へ渡航される方の不安を少しでも取り除けることができれば幸いです。
また、NGK2018Bを主催してくださったterurouさん(八木さん)を始めとする
運営の方々、ご協力いただいたスポンサーの皆様、
素敵な時間をありがとうございました。
来年もNGK....Bがあれば、私が日本に居る場合は普通に登壇で、
もし海外に居る場合はリモート登壇で実際に海外渡航をしてみての
感想や知見を発表できればと思います。
Webのフロントエンド技術に関する速習シリーズ書評
山田祥寛氏著の速習シリーズの内、
Webのフロントエンド技術に関する本を読んだので、
読んだ感想等を書いていきます。
対象の技術は下記の通りです。
- TypeScript
- ECMAScript
- Vue.js
- React
- webpack
ちなみに、山田祥寛著の速習シリーズはすべてKindle Unlimitedの対象になっており、
Kindle Unlimitedの会員の方は無料で読むことができます。
(2018/11/30時点)
本記事の内容です。
それぞれのタイトルをクリックすると、
各本の書評を読むことができます。
- 速習TypeScript: altJSのデファクトスタンダートを素早く学ぶ! 速習シリーズ
- 速習ECMAScript6: 次世代の標準JavaScriptを今すぐマスター! 速習シリーズ
- 速習ECMAScript2018: 次世代の標準JavaScriptを今すぐマスター! 速習シリーズ
- 速習Vue.js 速習シリーズ
- 速習 React 速習シリーズ
- 速習webpack 速習シリーズ
速習TypeScript: altJSのデファクトスタンダートを素早く学ぶ! 速習シリーズ
内容はTypeScriptの仕様や構文について一通り説明されており、また、リファレンスの様に使える形式になっています。
上記だけだと公式リファレンスで十分なのですが、
本書ではVSCodeでの開発方法についても触れられているので、
そこを考えると購入した方が良いと思います。
速習ECMAScript6: 次世代の標準JavaScriptを今すぐマスター! 速習シリーズ
本書の内容は後述する速習ECMAScript2018: 次世代の標準JavaScriptを今すぐマスター! 速習シリーズ
にすべて含まれているようなので、本書は読まなくても良いです。
速習ECMAScript2018: 次世代の標準JavaScriptを今すぐマスター! 速習シリーズ
内容はECMAScript2015以降で追加された機能についてのみとなっています。本書はリファレンスの様に使える形式になっているので便利なのですが、
ググればヒットする情報なので、特に購入しなくても良いかなと思います。
「いちいちググるのがつらい」という方は購入しても良いかもしれません。
速習Vue.js 速習シリーズ
内容はVue.jsの機能の使い方やvue-cliの使い方となっており、また、他の速習シリーズと同様にリファレンスの様に使える形式となっています。
本書だけでは、実際に開発や設計を行う際にどのようにしたらいいかは
掴めないと思いますので、
nextpublishing.jp
を読んで実際にアプリケーションを作ってみたり、
vuejs.org
vuejsexamples.com
あたりのサンプルコードを読み、感覚を掴んだ方が良いと思います。
購入した方が良いかどうかについてですが、
下記に該当する方は購入した方が良いと思います。
- 公式ドキュメントの英文を読むのがつらい
- 自分でググって情報を探すのがつらい
速習 React 速習シリーズ
内容は速習Vue.js 速習シリーズと同様にReactの機能について説明となっており、また、他の速習シリーズと同様にリファレンスの様に使える形式となっています。
本書ではReact NativeやReduxの説明はありません。
(React Nativeは名前だけ出てくる程度。)
これも本書だけでは、実際に開発や設計を行う際にどのようにしたらいいかは
掴めないと思いますので、
reactjs.org
あたりのサンプルコードを読み、感覚を掴んだ方が良いと思います。
購入した方が良いかどうかについてですが、これもVue.jsの本と同様に
下記に該当する方は購入した方が良いと思います。
- 公式ドキュメントの英文を読むのがつらい
- 自分でググって情報を探すのがつらい
速習webpack 速習シリーズ
内容は基本的な説明だけでなく、webpackを便利に使用されているテクニックが記載されています。
また、公式ドキュメントの解説があるのも良いです。
本書も他の速習シリーズと同様にリファレンスの様に使える形式となっています。
購入した方が良いかどうかについてですが、
webpackに精通していなければ購入した方が良いと思います。
個人的に、webpackを使う分には本書1冊あれば困らない気がします。
最後に
ここまで書いた時点で気づいたのですが、ブログで書評を公開するだけでなく、
Amazonの商品レビューも書いた方が良いですね。
そのうち、上記の内容を良い感じにまとめてAmazonの方にも投下しようと思います。