ゆるふわエンジニアのブログ

やったこと、調べたこと等をつらつらと書いていくかもしれません。

Babelのインストールおよび使用方法

本記事では、Babelのインストール方法および使用方法について紹介していきます。
Babelは、ES2015やES2017形式で記述したJavaScript
ソースコードをES5以前の形式に変換するツールです。

本記事の内容です。

package.jsonを作成する

下記のコマンドを実行し、package.jsonを作成します。

npm init -y

Babelをインストールする

下記のコマンドを実行し、Babelやプリセットをインストールします。

npm install --save-dev babel-cli babel-preset-env

ソースコードを変換する

下記のコマンドを実行し、ソースコードをES5以前の形式に変換します。
今回は、jsフォルダ下のファイルすべてを変換し、
その結果をdistフォルダへ出力しています。

.\node_modules\.bin\babel js --out-dir dist

参考にしたWebサイト

babeljs.io

無償でフル機能が使用できるC++ Builder(C++ Builder Community Edition)

本記事では、WindowsAndroidMac向けアプリのソースを
1つのソースコードでかつC++で開発可能、さらに、フル機能を無償で使用できる
統合開発環境である、C++ Builderについて紹介していきます。

本記事の内容です。

C++ Builderの特徴

クロスプラットフォーム開発

上記でも書いた通り、

向けのアプリを、1つのソースコードで開発できます。

参照しているDLLをEXEに含めることができる

参照しているDLLを別途配布ではなく、EXEに含める形でビルドできます。

ダウンロードの方法

下記Webサイトでアカウント登録を行った後、ダウンロードできます。
www.embarcadero.com

注意点としては、
Delphi Community Editionと同一の環境で共存させることはできない
ので、ご注意を。

webpackでconfigファイルの共通部を外部ファイルへ切り出す

本記事では、webpackでconfigファイルの共通部を
外部ファイルへ切り出して管理、使用する方法を紹介していきます。

本記事の内容です。

webpack-mergeをインストール

webpack-mergeを使用するので、下記コマンドを実行し、インストールします。
ライセンスはMITです。

npm i webpack-merge

configファイルの共通部を別途ファイル化

今回は、webpack.config.base.jsという名前で共通部分をファイル化します。
内容は下記の通りです。

webpack.config.base.js

const config = {
  // メインとなるJavaScriptファイル(エントリーポイント)
  entry: `./js/index.js`,
  
    // ファイルの出力設定
    output: {
      //  出力ファイルのディレクトリ名
      path: `${__dirname}/dist`,
      // 出力ファイル名
      filename: 'main.js'
    },
}

module.exports = config;

各環境毎のconfigファイルで共通configファイルを読み込む

それぞれ、開発用(webpack.config.development.js)と
本番用(webpack.config.production.js)のファイル内で
共通のconfigファイル(webpack.config.base.js)を読み込み、
共通以外の部分をそれぞれ設定します。

内容は下記の通りです。

開発用configファイル(webpack.config.development.js)

const merge = require('webpack-merge');
const baseConfig = require('./webpack.config.base.js');

const config = merge(baseConfig, {
  // 開発モードに設定
  mode: 'development',

  // 使用するソースマップの開発ツールを設定
  devtool: 'cheap-module-eval-source-map'
});

module.exports = config;

本番用configファイル(webpack.config.production.js)

const merge = require('webpack-merge');
const baseConfig = require('./webpack.config.base.js');

const config = merge(baseConfig, {
  // 本番モードに設定
  mode: 'production'
});

module.exports = config;

後は、過去の
j-levia.hatenablog.jp
で紹介した通り、それぞれのconfigファイルを指定してビルドを実行します。

参考にしたWebサイト

qiita.com

webpackで使用するconfigファイルを指定(選択)する方法

本記事では、webpackで使用するconfigファイルを指定する
(選択する)方法を紹介していきます。

本記事の内容です。

webpackのconfigファイルを準備する

下記の通り、使用するwebpackのconfigファイルを複数準備します。

開発用(webpack.config.development.js)

module.exports = {
 
    // メインとなるJavaScriptファイル(エントリーポイント)
    entry: `./js/index.js`,

    // 下記の1行を追加する
    mode: 'development',
   
    // 下記の1行を追加する
    // 値はお好みで
    devtool: 'cheap-module-eval-source-map',

    // ファイルの出力設定
    output: {
      //  出力ファイルのディレクトリ名
      path: `${__dirname}/dist`,
      // 出力ファイル名
      filename: 'main.js'
    },
  };

本番用(webpack.config.production.js)

開発用configファイルのmodeをproductionに書き換えただけです。

ビルド時に使用するconfigファイルを指定する

下記の通り、ビルド時にオプションで使用するconfigファイルを指定します。
[使用するconfigファイルのファイル名]に、使用するconfigファイルの名前を入力します。

npx webpack --config [使用するconfigファイルのファイル名]

上述したそれぞれのファイルを指定する場合は、下記の通りとなります。

開発用configファイル(webpack.config.development.js)を使用してビルド

npx webpack --config webpack.config.development.js

本番用configファイル(webpack.config.production.js)を使用してビルド

npx webpack --config webpack.config.production.js

Visual Studio CodeでVue.jsの開発を行うためにインストールしているプラグイン

本記事では、Visual Studio Codeを使用してVue.jsを用いた開発を行うために
インストールしているプラグインについて紹介していきます。

本記事の内容です。

vetur

Vue.jsのコードスニペットです。
入力補完などを行ってくれるのですが、触ってみたところ、
JavaScriptファイルにしか対応していないようです。

VueHelper

veturと同じく、Vue.jsのコードスニペットです、
こちらは、HTMLファイルやJavaScriptファイルの入力補完も行ってくれます。
正直、こちらだけインストールしておけばいい様な気がするのですが、
veturと競合して変な動作等をしないようなので、両方インストールしています。

Visual Studio CodeでHTML+CSS+JavaScriptの開発を行うためにインストールしているプラグイン

本記事では、Visual Studio Codeを使用して
HTML + CSS + JavaScriptを用いた開発を行うために
インストールしているプラグインについて紹介していきます。

本記事の内容です。

HTML関係

HTML Snippets

HTML5に対応したスニペットです。

HTML Hint

HTMLの静的解析ツールです。


CSS関係

IntelliSense for CSS class names in HTML

CSSクラスの入力補完プラグインです。


JavaScript関係

ES Lint

JavaScriptの静的検証ツールです。

その他

Open in browser

HTMLファイルを右クリックすると、デフォルトブラウザで開くか
その他のブラウザで開くかを問われるメニューが追加されます。

Windows10(Build1803)でGoogle Chromeが正常に動作しない件

新しくPCを購入し、Windows10をBuild1803にアップグレードした結果、
Google ChromeVivaldiが正常に動作しなくなったため、メモがてら書いておきます。

結論から言ってしまうと、本記事には起こった出来事が書かれているだけで、
解決策は記載していません。

皆さん、Windows10のアップグレードにはご注意を。

本記事の内容です。

何が起こったのか?

Windows10を2018/04あたりの時期に降ってきた
Build1803にアップグレードした結果、Google Chrome
Vivaldiが正常に動作しなくなりました。

具体的には、Webサイトへアクセスしても、
応答時間が長すぎる関係で「このサイトへはアクセスできません。」と
表示されるようになりました。

下記の情報からすると、どうやら証明書周りが正常に動作していないらしく、
2018/05のWindows Updateで直るようなのですが、私の環境は直りませんでした。
https://productforums.google.com/forum/#!topic/chrome-ja/QGwBg1f74vI;context-place=topicsearchin/chrome-ja/1803
https://productforums.google.com/forum/#!topic/chrome-ja/K3DdvG87870;context-place=topicsearchin/chrome-ja/1803

どうしたらいいのか?

諦めて、今年の秋ごろに降ってくるであろう大型アップデートを待ちましょう。
もしくは、IE11やEdgeといったMicrosoft製のブラウザを使用しましょう。


迂闊にアップグレードした結果、こういうことになるとは。
Microsoftには、こういった時のために、サポート期間中は大型アップデート過去分の
OSイメージ(ISO)を公式サイトで公開および配布していただきたいですね。