SQL整形ツールを作成した

2020-09-30
mysqloraclepostgresqlvue.jsnuxt.js
    

目次

概要

SQL整形ツールを作成しました。

URLはこちらです。

SQL 整形ツール - うぇぶでゔツール

sql pretty

特徴

  • フロントのみで完結するサービスなのでサーバにソースを送ったりすることはありません。
  • シンタックスハイライト機能
  • アッパーケース対応
  • インデント変更可能
  • リアルタイム変換
  • その他、各種機能追加の検討中

使い方

例えば次のような入力値が

select * 
from foo_table foo 
where foo.id > 100 order by foo.name;

このように変換されます。

SELECT
  *
FROM
  foo_table foo
WHERE
  foo.id > 100
ORDER BY
  foo.name;

インデントは2スペース、4スペース、タブを選択することができます。

FW/ライブラリ等

nuxt

ページの作成にvue nuxtを利用しています。

sql-formatter-plus

SQLの整形に sql-formatter-plus を使っています。

SQL Formatter Plus

Monaco Editor

エディタ部分の実装はMonacoEditorを利用しています。

Monaco Editor

おまけ

ソース

サンプルコードです。

<template>
  <div>
    <v-row no-gutters>
      <v-col sm="6">
        <h3>Input</h3>
        <div class="monacoCover">
          <MonacoEditor
            ref="srcEditor"
            v-model="srcCode"
            :language="language"
            :diffEditor="false"
            :theme="dark ? 'vs-dark' : 'default'"
            :style="{ width: clientWidth, height: clientHeight }"
            :readOnly="true"
            :options="{
              scrollBeyondLastLine: true,
              wordWrap: 'on',
              fontSize: fontSize,
              enableSplitViewResizing: false,
              ignoreTrimWhitespace: false,
            }"
            @editorWillMount="onSrcEditorWillMount"
          />
        </div>
      </v-col>
      <v-col sm="6">
        <h3>Output</h3>
        <div class="monacoCover">
          <MonacoEditor
            ref="dstEditor"
            v-model="dstCode"
            :language="language"
            :theme="dark ? 'vs-dark' : 'default'"
            :style="{ width: clientWidth, height: clientHeight }"
            :readOnly="true"
            :options="{
              scrollBeyondLastLine: true,
              wordWrap: 'on',
              fontSize: fontSize,
              enableSplitViewResizing: false,
              ignoreTrimWhitespace: false,
            }"
            @editorWillMount="onDstEditorWillMount"
          />
        </div>
      </v-col>
    </v-row>
    <h3>Option</h3>
    <v-row style="height: 35px">
      <v-col>Indent</v-col>
      <v-col>
        <v-radio-group v-model="formatOpt.indent" row>
          <v-radio label="2 spaces" value="0"></v-radio>
          <v-radio label="4 spaces" value="1"></v-radio>
          <v-radio label="tab" value="2"></v-radio>
        </v-radio-group>
      </v-col>
    </v-row>
    <v-row style="height: 35px">
      <v-col>Uppercase</v-col>
      <v-col>
        <v-checkbox
          v-model="formatOpt.uppercase"
          label="Uppercase"
          hide-details
        ></v-checkbox>
      </v-col>
    </v-row>
  </div>
</template>

<script>
import MonacoEditor from "vue-monaco";
import SqlFormatter from "sql-formatter-plus";

export default {
  components: { MonacoEditor },
  data: () => ({
    srcCode:
      "select * from foo_table foo where foo.id > 100 order by foo.name;",
    srcMonaco: null,
    dstMonaco: null,
    language: "sql",
    dark: false,
    fontSize: 12,
    clientWidth: "99%",
    clientHeight: "300px",
    formatOpt: {
      indent: "0",
      uppercase: true,
    },
  }),
  methods: {
    onSrcEditorWillMount(monaco) {
      this.srcMonaco = monaco;
    },
    onDstEditorWillMount(monaco) {
      this.dstMonaco = monaco;
    },
    resize(el) {
      this.$refs.srcEditor.getEditor().layout();
      this.$refs.dstEditor.getEditor().layout();
    },
  },
  mounted() {
    window.addEventListener("resize", this.resize);
  },
  destroyed() {
    window.removeEventListener("resize", this.resize);
  },
  computed: {
    dstCode: function () {
      const indentType = ["  ", "    ", "\t"];
      try {
        return SqlFormatter.format(this.srcCode, {
          language: "sql",
          indent: indentType[Number(this.formatOpt.indent)],
          uppercase: this.formatOpt.uppercase,
          linesBetweenQueries: 2,
        });
      } catch (e) {
        return "";
      }
    },
  },
};
</script>

<style scoped>
.monacoCover {
  background-color: #9f9f9f;
  padding: 1px;
}
</style>
    
s-yoshiki
s-yoshiki
githubtwitterqiita
Web作ってますが、インタラクティブなプログラミングも好きです。
JavaScript / Vue / node.js / PHP / AWS / OpenCV

関連記事

Vue.jsで作成された、ちょっと面白くて役立ちそうなサービス
UIコンポーネント VueSocial CKEditor 5 Vue.Draggable Vuetable 2 vuejs-datepicker Kalendar Vue Apexcharts Vue.js Google Charts vue-cart WebIDE…

WordPressのDBから記事データを抽出する
WordPressのDB関連図 公開記事一覧の取得 タグ・カテゴリの取得 サムネイルの取得 おまけ: PHPスクリプト化しました 参考にしたところ WordPressにため込んだデータMarkdown化しGatsby…

Firebase + Nuxt で認証付きページを作るときに参考にしたいところ
Webアプリケーションのセッション管理にJWT導入を検討する際の考え方 Service Worker によるセッション管理 ユーザー セッションの管理 Nuxt.jsとFirebaseでSPA×SSR×PWA×サーバーレスを実現する CookieとセッションとJWT SSR…

Macでも利用できるDBクライアント MySQL PostgreSQL Oracle など
デスクトップ系ツール TablePlus DBeaver MySQL Workbench Sequel pro Webアプリケーション phpMyAdmin Adminer 参考 Macで利用できるDB (MySQL PostgreSQL Oracle…

DockerでMySQL5.1.73を利用する。docker-composeから起動
Dockerのインストールから実行まで docker-compose から起動 詳細 Docker から MySQL 5.1.73 を利用する。 Dockerのインストールから実行まで docker imageの pull。 119MB…

phpMyAdminをDockerで起動する設定
docker-compose の設定 phpMyAdminのコンテナイメージ GitHub phpMyAdminはPHPで実装されているMySQLの管理ツールです。サーバに配置しブラウザから操作するのが特徴です。このphpMyAdminをdocker…

Ubuntu18.04にApache MariaDB PHP7.2 をセットアップ
環境情報 モジュール類の更新 Apacheのインストール PHP7.2のインストール インストール 動作確認 MariaDBのセットアップ MariaDBのインストール データベースと作業用ユーザの作成 参考 AWS の EC2 の Ubuntu18.0…

shields.io用アイコンジェネレータを作ってみた
デモ 情報 参考 ソース shields.io用アイコンジェネレータを作ってみました。 デモ 情報 Vue + codesandboxで作ってみました。 詳しい作り方はここを参考にしてください。 参考 https://tech-blog.s-yoshiki…

MonacoEditor + Vue を使ってエディタを実装
紹介 セットアップ Vue vue-monaco Usage サンプルコード ポイント テーマカラーについて エディタのリサイズ エディタの変更の検知 Vue + MonacoEditorでJS…

VIEWの作成 ORACLE MySQL
VIEWの作成 構文 VIEWから抽出する 参考 VIEWの作成の基本文法。 SQLで毎回結合したクエリを生成するのが面倒だった場合VIEWを使います。 VIEWの作成 OracelもMySQLも同じようです。 構文 VIEWから抽出する VIEW…

最新の投稿

SQL整形ツールを作成した
特徴 使い方 FW/ライブラリ等 nuxt sql-formatter-plus Monaco Editor おまけ ソース SQL整形ツールを作成しました。 URLはこちらです。 SQL…

ファイルの1行目を表示 Linuxコマンド head
head コマンド例 headコマンドでファイルの 1行目もしくは指定した行数だけ表示する方法。 head 利用できるオプション コマンド例 の 1行目だけを表示 の 5行目までを表示 カレントディレクトリ以下の全てのtxtファイルの1行目を表示

Amazon S3 と ローカルファイルのチェックサムの比較
s3apiでEtagを取得 検証 マルチアップロード時の注意点 Amazon S3 の Etagを使ってファイルの整合性チェックをする。 s3apiでEtagを取得 S3 APIを利用するとEtagを取得します。この値はmd5のハッシュ値になります。 検証 MD…

github.io / gitlab.ioで公開されている質の高い技術ドキュメント
AWSによるクラウド入門 Pythonプログラミング入門 普通の人が資産運用で99点をとる方法とその考え方 2018年の段階で私が知らないこと github.io / gitlab.io で無料で公開されている興味深いドキュメントのmemo AWS…

10進数から2進数 2進数から10進数への変換 JavaScript
10進数から2進数 2進数から10進数 テスト 10進数から2進数、2進数から10進数への変換を行うJavaScriptのコードの紹介。 JSの場合、10進数から2進数への変換はメソッド。2進数から1…

JavaScriptの配列ショートハンド (AtCoder用)

JavaScriptでワーシャルフロイド法を実装
AtCoder ABC012 D問題 D - バスと避けられない運命 解説 実装 AtCoder ABC012 の D問題でワーシャルフロイド法が利用できる問題が出てきたので、 JavaScriptで実装しました。 AtCoder ABC012 D問題 D…

GitHub Actions で Gatsby をビルドし Amazon S3 にデプロイする
GitHub Actions について あらかじめ準備しておくもの AWS IAM ユーザを環境変数にセットする workflowの記述 ビルド バッジを利用する 終わりに 参考にしたところ Gatsbyで作った静的サイトを、GitHub Actions…

cloudinaryによる画像ファイルの管理 はじめてみる
目的 cloudinary について 他のサービスとの比較 料金プラン アカウントの登録 利用してみる ダッシュボード 画像の編集 APIベースでのアクセス 感想 参考 画像の管理や配信、さらには加工といった事ができるsaas型のcloud…

JavaScriptによる2分探索(バイナリサーチ) のサンプルコード
2分探索について ソース 参考 JavaScriptで2分探索(バイナリサーチ)を実装してみました。…

Tags

Dates

© 2020   404 motivation not found