月別: 2019年11月

WSL と VSCode を使って Vue の開発環境を整えてみる

こんにちは, Web事業部の西村です
今回はタイトルにもある通り WSL(Windows Subsystem for Linux) と VSCode(Visual Studio Code) を用いてVueの環境を整えてみたいと思います

目次

なぜWSLを使うの?

まず, なぜWSLを使うかというお話です
cross-env というnpmパッケージがあります
npmスクリプトを実行する際に, 任意の環境変数に変更できるというものです
しかし, このパッケージはWindowsでは正常に動作しません
そこで, WSL内のLinux環境を使って開発を進め, 快適に開発しようということです

この記事で取り扱わないこと

  • WSLに関する解説
  • Linuxの解説
  • cross-envの解説
  • Vueに関する解説

WSLのインストール

1: 設定を開き アプリ を選択します
2: 画面右側にある 関連設定プログラムと機能 を選択します
3: 新たに出たウィンドウにある Windowsの機能の有効化または無効化 を選択します
4: さらにウィンドウが出るので Linux用Windowsサブシステム にチェックを入れます
5: 再起動が促されるので再起動します

Linuxディストリビューションのインストール

下記のリンクからMicrosoft Storeに移動し好きなディストリビューションをインストールします
WindowsでLinuxを実行する

この記事では Ubuntu をインストールしたものとして解説します

VSCodeのインストール + 拡張機能のインストール

1: 下記のサイトからインストーラーをダウンロードしインストールします

⚠注意
インストール中 PATHへの追加 という項目がありますが, 必ずチェックを入れておいてください

2: インストール完了後起動させ, 左側のタブから Extensions を選択します
3: Remote と検索し Remote Development を追加します
4: VSCodeを閉じます

Linuxの準備

1: 先ほどインストールしたディストリビューションを起動させます (起動させるとターミナルが開き初期化が始まります)
2: ユーザ名 / パスワードの入力が促されるので設定します

Installing, this may take a few minutes...
Please create a default UNIX user account. The username does not need to match your Windows username.
For more information visit: https://aka.ms/wslusers
Enter new UNIX username: <ユーザ名>
Enter new UNIX password: <パスワード (表示されません)>
Retype new UNIX password: <パスワード確認 (表示されません)>
passwd: password updated successfully
Installation successful!
To run a command as administrator (user "root"), use "sudo <command>".
See "man sudo_root" for details.

ユーザ名@PC名:~$

3: 下記のコマンドを順番に実行しアップデートを行います

:~$ sudo apt update
:~$ sudo apt upgrade -y

⚠注意
アップデート中に YES/NO を聞かれる部分があると思いますが, YESを選択してください

4: 下記のコマンドを実行し Node.js をインストールします

:~$ curl -sL https://deb.nodesource.com/setup_13.x | sudo -E bash -
:~$ sudo apt install -y nodejs

5: 下記のコマンドを実行し Vue CLI をインストールします

:~$ sudo npm install -g @vue/cli

6: サンプルのプロジェクトを作成するために下記のコマンドを実行します

:~$ vue create sample_project

すると次のような表示が出ますのでそのまま Enter します

Vue CLI v4.0.5
? Please pick a preset: (Use arrow keys)
❯ default (babel, eslint)
  Manually select features

しばらくすると初期パッケージのインストールが完了します

7: インストールが完了したらVSCodeで先ほど作成したWSL内のプロジェクトを開きます

:~$ code sample_project/

⚠注意
ここでVSCodeが起動しない場合,パスが設定できていませんので再度インストールしてみてください

ここまでの手順がうまくいった場合, WSL内のプロジェクトがWindowsのVSCodeで見ることができるようになっているはずです
また, 先ほどまで利用していたターミナルは閉じても問題ないです

:~$ exit

追加の拡張機能と動作確認

1: 起動したVSCodeの ExtensionsVue と検索し, Vetur という拡張機能をインストールします
2: Ctrl + Shift + @ を押しターミナルを起動させ下記のコマンドを実行します

:~/sample_project$ npm run serve

するとビルドが始まり, 開発用のサーバが起動します

3: http://localhost:8080/ にアクセスし, 画面が表示されるかどうかを確認します

最後に

いかがでしょうか, Windowsのみを使い続けている人にはきつい内容かもしれませんが, 1度整えてしまうと使いやすい環境なのではないでしょうか?
Windowsだけれども, UbuntuやMacみたいに開発できるといった点ではメリットなのかもしれません
しかし, WSLでは動作が遅いため, 来年に一般公開される予定の WSL2 が待ち遠しい限りです(WSL2では速度面が大幅に解消されています)
ここまで読んでいただきありがとうございました

蛇足?

(A ・ω・)Dockerでもいいんじゃね?  うん(・ω・私)

デザインにおける余白の重要性

どうもこんにちは!Webデザイナーの衣笠です。

シーズに入社して、はや4ヶ月。
「仕事終わりのビールが美味しい」と思える日が来るなんて、大人になった…なんて思っています。

この4ヶ月間、実際の案件を通し先輩にフィードバックをもらうことで、デザインの考え方やノウハウなど、多くのことを学んできました。

タイポグラフィや配色など、デザインを構成する重要ポイントは様々ですが、今回はそのなかでも特に学びが多かった「余白の重要性」について書いてみたいと思います。

●余白とは?


「余白」というとその字から、「余った空白の部分」という認識をもたれるかも知れません。
しかしデザインにおける余白とは、デザインをする上で最終的に「余ったもの」ではなく、
デザインを行う最初の段階で設計し作り出すもの
といえます。

余白を上手く使うことで

  • ユーザビリティの向上
  • デザインの印象をつくる
    など、様々なメリットがあります。

制作物に適した余白を設計するためには、まずは余白の役割を知ることが大事です。

●余白の役割


・情報をグループ化する

f:id:seeds-std:20191111201906p:plain

余白を使うことで、コンテンツごとにまとまりを作り、情報を整理することができます。
コンテンツの内容を読む前でも、一目で同じ情報ということが、視覚的に分かります。

・文字の可読性を上げる

f:id:seeds-std:20191111201920p:plain

ユーザーにストレスを与えず、文章を読んでもらうために、文字周りの余白は大切です。
各要素間の余白(見出し、本文、テキストが入るボックス)のみならず、
文字間や行間なども、文字の可読性を上げる重要ポイントです。

・視線の誘導を行う

f:id:seeds-std:20191111201932p:plain

要素間の余白を調整することで、ユーザーの視線の動きをコントロールすることも可能です。
上の図においては、ユーザーの視線は左上から右下へと「Z」の字のように流れるように、余白の近接間を調整し、視線の流れを設計しています。

・ユーザーの行動を補助する(手順を示す)

f:id:seeds-std:20191111201946p:plain

重要なボタンの周囲には、余白を十分にとり他の要素を配置しないなど、目立たせたい要素を明確にすることで、ユーザーの行動を補助することも可能です。

余白を使用し、ユーザーが次に取るべき行動を分かりやすく提示することで、ユーザーの迷いをなくす・負荷のかからない設計を行えます。

・デザインの印象をつくる

余白の役割は、ユーザビリティの面だけでなく、デザインのビジュアルにも大きな影響を与えます。
まだ余白の感覚が掴めていない新人デザイナーは、余白を恐れて詰め込みがちなデザインをする傾向があるといいますが、余白を上手く取り入れることで、ゆったりとした高級感のあるデザインを作成することも可能です。

●余白は大事!


余白において一番大切な役割は、「ユーザビリティの向上」です。

  • 情報整理がされておらず、文字も読みづらい
  • 伝えたいことがひと目で明確に分からない

このようなデザインでは、どんなに良いコンテンツが掲載されていても、ユーザーには届きません。

「余白」が重要なのは、デザイン全般的に言えることですが、Webデザインだとその重要性がより顕著に現れると思います。
ユーザーはサイトをくまなくチェックするわけではなく、
「このサイトに自分が求めている情報はあるか?」と、情報を流し読みしています。

ユーザーの求める情報を掲載していたとしても、それが目に留まらず、
「自分の求めている情報が載っているか分からない」と判断されてしまうと、
サイトから離脱(→他のサイトに移る)となってしまいます。

明確に情報を提示し、ユーザーの視線を導くために、余白は大きな役割を果たします

●まとめ


以上、今回は「デザインにおける余白の重要性」というテーマでお送りいたしました。

デザイナーとしてレベルアップしていくためには、余白の使い方をマスターする必要がありそうですね!
より良いデザインができるように、日々精進していきたいと思います!

© SEEDS Co.,Ltd.