What's New Qiita

20200711のMacに関する記事は8件です。

  • 投稿日：2020-07-11T22:40:17+09:00

Electronでデスクトップアプリケーションのパッケージングまで

Electronでデスクトップアプリを配布できるようにするパッケージングまでmacでやっていきたいと思います。

Node.jsはインストールしている状態で始めるので、あらかじめインストールしておいてください。

必要なファイル、ディレクトリの作成

まずアプリを作成するために必要なファイル、ディレクトリを準備します。

アプリを作成したいディレクトリに移動したのち、以下のコマンドを実行します。

ターミナル
$ mkdir hoge
$ cd hoge

これでhogeのディレクトリ内に入りました。

次に以下のコマンドを実行します。

ターミナル
$ npm install -D electron

実行するとnode_nodules、package-lock.jsonが作成されました。

次に以下のコマンドを実行します。

ターミナル
$ npm init

このコマンドを実行するとpackage name: (hoge)のように表示されると思います。
ここで設定を決めることができますが、後でも変更することができるので、いまはEnterを押して進めてください。

進めるとpackage.jsonというファイルが作成されたと思います。

次にsrcというディレクトリとその中身を作成していきます。

まずディレクトリを作成して移動します。

ターミナル
$ mkdir src
$ cd src

srcの中にmain.js、index.html、package.jsonを作成します。

ターミナル
$ touch main.js index.html
$ npm init

これでアプリを実行するためのファイルが用意できました。
以下のようなファイルがあればOKです。

スクリーンショット 2020-07-11 21.43.10.png

アプリケーションを起動する

アプリを起動できるように設定します。

まずはsrcディレクトリ内にあるpackage.jsonを編集します。

"main":を以下のように編集してください。

package.json
{
  "main": "main.js"
}

次にmain.js、index.htmlに以下を追加してください。

main.js
const {app, BrowserWindow} = require('electron');

let mainWindow;

function createWindow() {
  mainWindow = new BrowserWindow({
    webPreferences: {
      nodeIntegration: true,
    },
    width: 800, height: 600,
  });

  mainWindow.loadFile('index.html');

  mainWindow.webContents.openDevTools();

  mainWindow.on('closed', () => {
    mainWindow = null;
  });
}

app.on('ready', createWindow);

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});
app.on('activate', () => {
  if (mainWindow === null) {
    createWindow();
  }
});
index.html
<html>
<head>
  <meta charset="UTF-8">
  <title>Hello World!</title>
</head>

<body>
  <h1>初めてのElectron</h1>
  We are using node <script>document.write(process.versions.node)</script>,
  Chrome <script>document.write(process.versions.chrome)</script>,
  and Electron <script>document.write(process.versions.electron)</script>.
</body>
</html>

これで表示するためのコードを書き終えたので、アプリを実行してみます。

hogeのディレクトリに移動して以下のコマンドを実行してください

ターミナル
$ npx electron src

スクリーンショット 2020-07-11 22.02.29.png

このように表示されたら成功です。

終了するためにはcontrol + cを押してください。

パッケージングする

アプリの起動を確認できたら次にパッケージングをします。

パッケージングをするためにelectron-packagerをインストールします。
インストールする場合はhogeディレクトリで実行してください。
srcディレクトリで実行しないようにしてください。

ターミナル
$ npm i -D electron-packager

インストールが終了したら以下のコマンドを実行します。

ターミナル
$ npx electron-packager src hoge --platform=darwin --arch=x64 --overwrite

パッケージングに成功すると、以下のようにファイルが作成されます。

スクリーンショット 2020-07-11 22.18.14.png

hogeと書いてあるアプリをクリックして、先ほど表示した画面と同じ画面が表示されたら成功です。

開発用にコマンドを簡略化する

ターミナルでアプリを起動する際にnpx electron srcというコマンドを実行しましたが、hogeディレクトリのpackage.jsonファイルのscriptsの項目を編集するとnpm startで起動できるようになります。

"scripts": {}の中に記載されているコードを以下のように書き換えてください。

package.json
"scripts": {
  "start": "electron ./src"
}

ターミナルで以下のコードを実行してアプリが起動できたら成功です。

ターミナル
$ npm start

参考サイト

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-07-11T22:25:36+09:00

新しいMacでNode.jsのインストールからVue.js + nuxt.js + Vuetifyで開発環境手順(zsh対応版)

概要

macOS Catalina におけるフロントエンドの開発環境作成
Catalinaからbashからzshが標準になったため、zshでの環境構築方法を記載
※ バージョンは全て2020年6月30日時点のものです
新しいものが入っていても基本的には問題ないはず

brew

Mac用のパッケージ管理ソフト

インストール
$ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"

coreutils

GNUコマンドを使用する

インストール
$ brew install coreutils

jq

JSONを成形、絞り込みを行う

インストール
$ brew install jq
例
$ echo ‘[{“hoge”: “hoge”, “fuga”: “fuga"}]’ | jq

xz

圧縮、解凍

インストール
$ brew install xz
例
$ xz -z hoge
$ xz -d hoge.xz

wget

ファイルのダウンロード

インストール
$ brew install wget
例
$ wget -r http://………/download.zip

確認

上記でインストールしたパッケージが表示されることを確認

$ brew list

nvm

Node.jsのバージョン管理ツール

nvmのGitHubを参照して最新バージョンをインストールする
https://github.com/nvm-sh/nvm#install-script

インストール
$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash
環境設定
$ vim ~/.zshrc

vimが起動するので~/.zhrcに下記を追加

~/.zshrc
export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"

ターミナルを再起動

バージョン確認
$ nvm --version

0.35.3

Node.js

JavaScript実行環境

インストール可能なバージョンを確認
$ nvm ls-remote --lts | grep Latest

v4.9.1 (Latest LTS: Argon)
v6.17.1 (Latest LTS: Boron)
v8.17.0 (Latest LTS: Carbon)
v10.21.0 (Latest LTS: Dubnium)
v12.18.1 (Latest LTS: Erbium)

お好きなバージョンをインストール
基本的には最新で良いと思います。

インストール
$ nvm install v12.18.1
バージョン確認
$ node -v

v12.18.1

npm

JavaScriptのパッケージ管理システム

yarn

npmと同じくパッケージ管理システム
今回はyarnを使用する

インストール
$ npm install -g yarn

serverless

Serverless Application(AWS, Azure, GCPなど)を構成管理デプロイするためのツール

インストール
$ npm install -g serverless

npmのライブラリを確認

バージョン確認
$ npm ls --depth=0 -g

/Users/[ユーザー名]/.nvm/versions/node/v12.18.1/lib
├── npm@6.14.5
├── serverless@1.74.1
└── yarn@1.22.4

Nuxt.js

vueのフレームワークの1つ
Routerの記述をする必要がなくなってめっちゃ便利

インストール
// プロジェクトを作成したいフォルダに移動
$ cd ***/*** 
$ yarn create nuxt-app <my-project>

上記コマンドを入力すると対話型のインストーラーが起動します
入力内容は下記を参考に自分に適したものを選択してください

? Project name: (my-project)

? Programming language: (Use arrow keys)
> TypeScript

? Package manager: (Use arrow keys)
> Yarn

? UI framework: (Use arrow keys)
> Vuetify.js

? Nuxt.js modules: (Press <space> to select, <a> to toggle all, <i> to invert selection)
 ◉ Axios
 ◉ Progressive Web App (PWA)
 ◯ Content

? Linting tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
 ◉ ESLint
 ◉ Prettier
 ◯ Lint staged files
 ◯ StyleLint

? Testing framework: (Use arrow keys)
> None 

? Rendering mode: (Use arrow keys)
> Single Page App 

? Deployment target: (Use arrow keys)
> Server (Node.js hosting) 

? Development tools: 
 ◉ jsconfig.json (Recommended for VS Code)
 ◯ Semantic Pull Requests

インストールが完了したら下記のコマンドを実行

$ cd <my-project>
$ yarn dev

? Are you interested in participation? (Y/n) 
n

http://localhost:3000/
アクセスしてVueのアイコンが表示されれば構築完了

あとはかっこいいWebサイトを作ってください！

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-07-11T22:07:36+09:00

Goでエラーだったときにlogrusでログ出力してみる

はじめに

GoでOpenWeatherMapAPI叩いてみたでやったものをちょっとだけ改良して、エラー時のログ処理を追加してみたものになります。

GitHubはこちら

環境

OS：maOS Catalina 10.15.5
Go:go version go1.14.4 darwin/amd64

手順

  • logrusをインストールする

※ログレベルを分けたい&速度を気にする必要がない&シンプルに使えそうだったのでlogrusを選択

$ go get github.com/sirupsen/logrus
  • init関数でログ設定を行う
 func init() {
    // Info以上のレベルを出力する設定
    log.SetLevel(log.InfoLevel)
 }

  • エラーだった場合にログを出力する

    • APIを叩いたとき
    res, resErr := http.Get(url)
if resErr != nil {
    log.Fatalf("Failed to Get API: %v", resErr)
}
    • レスポンスを取得したとき
    // レスポンスを取得
defer res.Body.Close()
body, redErr := ioutil.ReadAll(res.Body)

// レスポンスを読み込めなかった場合はログを出力
if redErr != nil {
    log.Warnf("Failed to read response: %v", redErr)
}
    • JSONをパースしたとき
    // 返却されたJSONをパース
if paErr := json.Unmarshal(body, &data); paErr != nil {
    log.Warnf("Failed to parse JSON: %v", paErr)
}

課題

  • ちゃんとテスト書くとどうやってやるんだろう・・・？
  • 全部mainに書いちゃってるので、リファクタリングが必要
  • API叩いたときにエラーだったらリトライ処理あってもよい
  • Goの例外処理の思想がJavaとだいぶ異なるのでそのあたり整理しておさえたい

参考にさせていただいたもの

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-07-11T19:58:03+09:00

Vueコマンドが使えない vue/cli [環境構築難民を救いたい]

挫折しそうな君を救う

HTMLやCSSの勉強も終わって、さぁ次はVue.jsやLaravel,Rubyの勉強だ！

そう思って、なんとかインストールし、いざコマンドを叩くと

zsh: command not found: vue

「どういうことだ？何をやってもこうなってしまう...」

せっかくやる気もあるのに...一体私が何をしたというのか...？

5分後、君はVue.jsを始めている

Vue自体はCDNを使えば簡単に体験できる。

本記事では、Vue/cliを使うための解説をする
前提としてnode.jsをインストールし、npmが使えているとする
なお、エディターはVSCodeを使う

参考書等にしたがって、Vue-cliで学習を進めようとした君
どうすれば良いのか？
結論から書こう

1.デスクトップに新規フォルダを作る
2.作ったフォルダをVSCodeのアイコンまでドラッグアンドドロップして、フォルダを開く
3.ターミナルを開く
4.コマンドを打つ

1,2の解説は不要だろう
3は画面上部を見るんだ。
ターミナルから、新しいターミナルをクリックだ

そして、4だ。次のコマンドを打つ

npm init -y

これでフォルダ内にpackage.jsonというファイルが出来上がるだろう
それを開くと、難しげな文字列が現れる。だが、大丈夫だ。全部事細かに理解する必要ない

次に

npm install vue -D

と打ち込もう。すると、package-lock.jsonとnode_modulesフォルダが生成され、
先ほど開いたpackage.jsonに
"vue": バージョン
が自動的に追記される。

これで、このローカル環境でvueが使えるようになった。
確認のために以下のコマンドを君は打つだろう

vue --version

ここで君を挫折させる憎き文字列の登場だ

zsh: command not found: vue

君を救うのはたった一文だ。

今開いているpackage.jsonに以下の文が確認できるだろうか？

package.json
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  }

ここに魔法の一文を追記する

package.json
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "vue": "vue"
  }

"test": ......
の末尾に,(カンマ)を書き忘れないようにしよう

しっかりと保存し、ターミナルに以下のコマンドを打ち込む

npm run vue --version

バージョンが表示されるはずだ。おめでとう、君の勝利だ

では、vue-cliをインストールしよう。
なお、インストールのコマンドは変わる可能性がある。
公式ページで確認しよう

npm install @vue/cli -D

その後、

npm run vue create myapp

myappの部分は君が決めていい。君の考えたイケてる名前をつけてあげよう
さぁ、あとは君の見ている参考書やサイトに書いてあることに従って進めてくれ

何が起きたのか？

「ちょ、ちょっと待ってくれよ！
-Dだとかinitだとか、"vue": "vue"だとかnpm runとか
意味が分からないじゃないか！進めたけど何も解決していないのではないか？」

落ち着け。本質を忘れてはならない。君が今したいのはVueの勉強だろう
そのためにせっせとググり、この記事までたどり着いたのだ。

ここまで示したことは、プログラミングを学習していけばなんとなく分かるようになってくる。
そう、私もよく分かってないからしっかり説明できないのだ。

だが、それでいい。君は振り返らず、存分にVueの勉強を初めてくれ。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-07-11T15:51:31+09:00

cask+anyenv+jenvを使ったJavaのバージョン管理

環境

OS：macOS Catalina 10.15.5
brew：2.4.3

caskを使ったJavaのインストール

brew caskをそのまま使うと古いバージョンのJavaをインストールができない。
そのため以下のコマンドでを使って古いバージョンもインストールできるようにする。

$ brew tap homebrew/cask-versions

各種バージョンをインストールする

// インストール可能なjavaのバージョンの確認
$ brew search java

// java14
$ brew cask install java

// java11
$ brew cask install java11

// java8
$ brew cask install adoptopenjdk8

// javaのバージョン確認
$ /usr/libexec/java_home -V

anyenvのインストール

anyenvは*envを管理することができる。今回の場合はjenvを管理するために導入する。

// brewでanyenvをインストール
$ brew install anyenv

// パス追加　zsh版
$ echo 'eval "$(anyenv init -)"' >> ~/.zshrc

// マニフェストディレクトリ作成
$ anyenv install --init
これで.anyenvディレクトリが作成される。

// SHELLの再起動
$ exec $SHELL -l

// anyenvコマンド
// インストールした*envのバージョン確認
$ anyenv versions

// anyenvでインストールできる*envのリスト
$ anyenv install -l

※うまいことzshrcの設定が反映されない場合はsource ~/.zshrcで反映する

便利なanyenvのプログインを入れる

プラグインは任意ですが入れておくと便利です。

// プラグイン用のディレクトリ作成
$ mkdir -p ~/.anyenv/plugins

// anyenv-update anyenvで入れた*envを一括でアップデートしてくれるプラグイン
$ git clone https://github.com/znz/anyenv-update.git ~/.anyenv/plugins/anyenv-update

// anyenv-git anyenvで入れた*envをgitコマンドで実行できるプラグイン
$ git clone https://github.com/znz/anyenv-git.git ~/.anyenv/plugins/anyenv-git

jenvのインストール

caskでインストールしたJavaを管理する

// jenvをインストール
$ anyenv install jenv

// SHELLの再起動
$ exec $SHELL -l

// 確認
$ anyenv versions
jenv:
  system
  1.8
  1.8.0.252
  11
  11.0
  11.0.2
  14
  14.0
* 14.0.1 (set by /Users/masa/.anyenv/envs/jenv/version)
  openjdk64-1.8.0.252
  openjdk64-11.0.2
  openjdk64-14.0.1

Javaをjenvで管理する設定

各種Javaのバージョンをjenvに登録して切り替える方法です。

// 紐付け jenvにaddする
$ jenv add `/usr/libexec/java_home -v "1.8"`
$ jenv add `/usr/libexec/java_home -v "11"`
$ jenv add `/usr/libexec/java_home -v "14"`

// jenvで管理しているjavaのバージョン確認
$ jenv versions

// global設定
$ jenv global 11.0.2

// javaのバージョン確認
$ java versions

// シェル起動
$ jenv exec zsh

// JAVA_HOMEを自動で設定するようにする
$ jenv enable-plugin export

// JAVA_HOME確認
$ echo $JAVA_HOME

// Topic 特定のディレクトリ内で別バージョンのJDKを利用する場合
$ jenv local 11.0.2

※JAVA_HOMEの設定がうまいこと反映されない場合はterminalを再起動等すれば反映されるときがあります。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-07-11T13:19:50+09:00

[Electron] macOS における 'open-file' イベント

目的

  • Finder でのファイルのダブルクリックで Electron アプリを立ち上げたい
  • 右クリックメニューからの このアプリケーションで開く でも同様

準備

bash
// electron-quick-start を取ってくる
$ npx degit git@github.com:electron/electron-quick-start.git myapp

// 依存パッケージ (electronのみ) をインストール
$ cd myapp/
$ npm install

// electron-builder のインストール
$ npm install --save-dev electron-builder

パッケージ化

electron-builderの設定を JS で書きます。

ここでは、とりあえず画像ファイルをあつかう（画像ファイルの右クリックメニューでこのアプリケーションで開くの候補に表示される）アプリとしてパッケージします。

実行は node ./build.js でOK。

build.js
const builder = require('electron-builder');

builder
  .build({
    config: {
      appId: 'com.example.myApp',
      productName: 'myApp',
      copyright: 'Copyright © 2020 ${author}',
      directories: {
        buildResources: '.',
        output: 'dist',
      },
      mac: {
        category: 'public.app-category.developer-tools',
        target: 'dir',
        extendInfo: {
          CFBundleName: 'myApp',
          CFBundleDisplayName: 'myApp',
          CFBundleExecutable: 'myApp',
          CFBundlePackageType: 'APPL',
          CFBundleDocumentTypes: [
            {
              CFBundleTypeName: 'ImageFile',
              CFBundleTypeRole: 'Viewer',
              LSItemContentTypes: [
                'com.microsoft.bmp',
                'com.microsoft.ico',
                'com.compuserve.gif',
                'public.jpeg',
                'public.png',
              ],
              LSHandlerRank: 'Default',
            },
          ],
        },
      },
    },
  })
  .then(() => console.log('Build Finished.'))
  .catch((err) => console.log(`Error: ${err}`));

npm run package でパッケージできるように npm script を追加します。

package.json
   "main": "main.js",
   "scripts": {
     "start": "electron .",
+    "package": "node ./build.js"
   },
   "repository": "https://github.com/electron/electron-quick-start",

メインプロセス

起動時（と起動後（後述））に開かれたファイルをダイアログで表示するように改造します。

main.js
 // Modules to control application life and create native browser window
- const { app, BrowserWindow } = require('electron');
+ const { app, BrowserWindow, dialog } = require('electron');
  const path = require('path');

+ // ready イベントより前に必要となるためグローバル変数に
+ let openfile = null;

 function createWindow() {
   // Create the browser window.

ready イベントより前に発火する will-finish-lauching イベントでの処理を追記します。

main.js
function createWindow() {
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
    },
  });

  // and load the index.html of the app.
  mainWindow.loadFile('index.html');

  // Open the DevTools.
  // mainWindow.webContents.openDevTools()
}

// mac では ready イベントより前に発火するイベント 'will-finish-launching' でしか
// 起動時のファイルパスを取得できない
app.once('will-finish-launching', () => {
  // mac のみに存在する 'open-file' イベント
  app.once('open-file', (e, argv) => {
    // 必須！
    // 何故かは知らない
    e.preventDefault();

    // ready イベントより前のため、まだ webContents を呼べない
    // いったんグローバル変数に預ける
    openfile = argv;
  });
});

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.whenReady().then(() => {
  createWindow();

  app.on('activate', function () {
    // On macOS it's common to re-create a window in the app when the
    // dock icon is clicked and there are no other windows open.
    if (BrowserWindow.getAllWindows().length === 0) createWindow();
  });
});

createWindow() 関数内で webContents の起動完了を待ってグローバル変数に納められたファイルパスを回収します。

また、アプリ起動「後」に発火した open-file イベントのための処理も追記します。

main.js
function createWindow() {
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
    },
  });

  // and load the index.html of the app.
  mainWindow.loadFile('index.html');

  // Open the DevTools.
  // mainWindow.webContents.openDevTools()

  // webConents がロード完了したとき
  mainWindow.webContents.once('did-finish-load', () => {
    // グローバル変数 openfile が NULL でなければ・・・
    if (openfile) {
      // ファイルパスを取得
      const filepath = openfile;

      // ダイアログでファイルパスを表示
      dialog.showMessageBox({
        type: 'info',
        message: filepath,
      });

      // グローバル変数を初期化
      openfile = null;
    }
  });

  // ready イベント「以後」の 'open-file' イベントを拾う
  app.on('open-file', (e, argv) => {
    e.preventDefault();


    // ウィンドウが最小化されていたらレストアしてフォーカスを当てる
    if (mainWindow.isMinimized()) mainWindow.restore();
    mainWindow.focus();

    // ダイアログでファイルパスを表示
    dialog.showMessageBox({
      type: 'info',
      message: argv,
    });
  });
}

パッケージング実行

bash
$ npm run package

dist ディレクトリ内に出来た myApp.app のアイコンへ画像ファイルをドラッグすれば、そのファイルパスがダイアログで表示されます。

参考資料

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-07-11T12:16:56+09:00

【超初心者用】MacでApacheのドキュメントルートを確認する方法（Apacheの設定ファイルを探すというミッション）

「ドキュメントルートってどこだっけ？」となることが多い。確認方法だけわかっていたらいちいち覚えていなくてもいいし、変更することがあれば確認方法を知らないと困ることになるので、メモしておきます。

ターミナルから確認するためのコマンド

ターミナルの起動を起動して次を入力すると出てきた！

$ cd /etc/apache2
$ ls
extra       magic       original    users
httpd.conf  mime.types  other

左下に発見しました。

httpd.confのディレクトリ

/etc/apache2/の中にあることがわかりました。
apache2の2はなんなんだろうと思ってしまいます。ターミネーター2の2とは意味が違うんでしょうけど。とりあえずapacheではなくapache2にあるということが注意点ですな。

httpd.confを開く

$ sudo vi httpd.conf

で開きます。

viの操作も全然なれていませんが、頑張って探します。

DocumentRootの記述を探す

コマンドラインに/Documentを入力すれば検索もできます。探すだけならこれでいいですね。

254 DocumentRoot "/Library/WebServer/Documents"
255 <Directory "/Library/WebServer/Documents">

ApacheはMacに標準で入っていたものを使っています。

こういう設定ファイル系がソフトごとにあるけど、結局どこにあるかわからなくなってしまう。これってエンジニアの方は覚えてるんですかね？メモってるんですかね？管理用のなんかがあるんですかね？どうなんでしょう？

参考にしたサイト

https://qiita.com/s2maeda/items/21d9458e44f86597d1ae

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-07-11T01:36:46+09:00

HTML,CSSだけでホームページ作成『開発環境編』「前編」

はじめに

HTMLとCSSでホームページを作成するためには

  • エディタ
  • ブラウザ

この2つが必要になってきます。

スクリーンショット 2020-07-11 0.28.00.png

グラフを見て分かるようにエンジニアの3人に1人がVisual Studio Codeを使用
していることになります。

なので、今回はVisual Studio Codeを使用していきます。

1.VisualStudioCodeをインストール

  • サイトにアクセス

今回はmacOSでやっていきます。
下記のリンクからアクセスして「Download for Mac」をクリック
https://code.visualstudio.com/
スクリーンショット 2020-07-11 1.01.19.png

  • ダウンロード

クリックすると自動でダウンロードが開始されます。
スクリーンショット 2020-07-11 1.04.51.png

  • zipファイルを解凍

画面右下の ① のアイコンをクリックすると、ダウンロードフォルダに入ったファイル一覧が出てくるので、該当の ② をクリックします。

※Finderから直接でも上記でもどちらからでも良いです
スクリーンショット 2020-07-11 1.08.31.png

  • アプリケーションフォルダに移動

ダウンロードフォルダVisualStudioCode表示されると思いますが、まだ開かないでおきましょう。
そのアイコンをドラッグアンドドロップで、サイドメニューの「アプリケーション」に移動させます。

スクリーンショット 2020-07-11 1.15.10.png

  • 認証ボタン押す

画面が表示されたら「認証」ボタンを押して、管理者のログイン情報を入力し認証してください。

スクリーンショット 2020-07-11 1.20.33.png

  • アプリケーションフォルダから「VisualStudioCode」を開く

スクリーンショット 2020-07-11 1.21.10.png

これでエディタの開発環境は終わりです。
お疲れ様でした！

まとめ

今回、ブラウザのことまで書きたかったんですが長くなりそうなので「前編」「後編」と言った形に分けさせてもらいます。

今回ご紹介したVisualStudioCodeは、デフォルトで便利な機能が備わっていますし、扱いやすさも抜群なので、初心者の方でも使っていて不便ということがほぼないと思います。

もし機能で困ったことがあっても、VSCodeは認知度が高く、ネットに多くの情報が載っているため、検索すればいくらでも解決策が出てきます。
※Qiitaを有効活用しましょう！！！！

ただ、初めのうちはどのエディタを使用しても違いがよくわからないと思います。

しかし、使っていくうちに『こんな機能をつけたい』『これが便利』と感じることが増えてくると思いますので、その後に自分に適したテキストエディタを見つけてどんどんコードを書いていきましょう！

参考文献

【2020年最新版】プログラミング効率を上げるテキストエディタ
https://frontend-diary.com/programming-editor/
MacOSでVisual Studio Codeをインストールする手順
https://qiita.com/watamura/items/51c70fbb848e5f956fd6

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

日付別

タグ一覧