SQL整形ツールの作成方法を解説するブログ用アイキャッチ画像

開発ガイド

SQL整形ツールの作り方 | コピペで簡単！初心者も作れるWebアプリ開発の第一歩

「あの便利なSQL整形ツールって、一体どうやって作られているんだろう？」

もしかしたら、あなたはそんな素朴な疑問を抱いたかもしれません。プログラミングと聞くと、「難しそう」「自分には無理…」と感じる人もいるかもしれませんね。でも、安心してください！実は、Webアプリ開発の「基本のキ」は、思っているよりもずっとシンプルなんです。

この記事では、あなたが普段使っている、あるいはこのブログでご紹介したSQL整形ツールの基本的な作り方を、コピペするだけで形になるように、超分かりやすく解説していきます。複雑な知識は一切不要！「これなら自分にも作れるかも！」という小さな成功体験が、あなたのプログラミング学習への大きな一歩になるはずです。

さあ、一緒に「自分でツールを作る」という楽しい体験を始めてみませんか？

「sql-formatter」って何？魔法のライブラリを解説

私たちがこれから作るSQL整形ツールの心臓部とも言えるのが、「sql-formatter」という便利な「JavaScriptライブラリ」です。

「ライブラリって何？」と疑問に思った方もいるかもしれませんね。簡単に言うと、ライブラリとは「特定の機能をまとめて提供してくれる、便利な道具箱」のようなものです。たとえば、料理をする際に、わざわざ包丁や鍋を一から作るのではなく、スーパーで買ってきた調理器具を使うのと同じです。

この「sql-formatter」ライブラリは、まさに「SQLコードをきれいに整形する」という複雑な処理を、私たちの代わりにやってくれる優秀な調理器具なんです。私たちは、このライブラリに「このSQLをきれいにしたいな」と伝えて、あとは「スペースを4つ開けてね」「キーワードは大文字にしてね」といった簡単な指示を出すだけでOK。複雑な整形ルールを自分で考える必要はありません。

そして、この「sql-formatter」は、「CDN」という形式で手軽に使うことができます。CDNとは、簡単に言えばインターネット上に公開されているファイルに、URLを指定するだけでアクセスできる仕組みのこと。わざわざファイルをダウンロードしたり、自分のパソコンにインストールしたりする手間は一切なく、WebページのHTMLにたった1行URLを書き加えるだけで、すぐにその機能を利用できるんです。とても便利ですよね！

この魔法のライブラリがあるからこそ、プログラミング初心者でも、驚くほど少ないコードで本格的なSQL整形ツールが作れるんですよ。

これで、難しそうな「SQL整形」がシンプルに作れるようになります！

ほーく
ほーく

コピペで完成！SQL整形ツールの基本構造

さあ、いよいよツール作りの本番です！

HTMLファイルを作成できるテキストエディタ（パソコンに最初から入っている「メモ帳」でも大丈夫です！）と、Webブラウザ（Google ChromeやSafariなど、普段インターネットを見ているもの）があれば準備OKです。

Webページは、主に次の3つの要素でできています。

  • HTML: Webページの「骨組み」。入力欄やボタン、文字など、表示されるものの配置を決めます。
  • CSS: Webページの「見た目」。色やサイズ、配置などを整え、ページをおしゃれにします。今回は最低限の見た目を整えるだけです。
  • JavaScript: Webページを「動かす」命令文。ボタンが押されたら整形するなど、動きを作ります。

それでは、以下のコードを新しいファイルにコピー＆ペーストして、sql_formatter_simple.htmlという名前で保存してみましょう。

このファイルを保存したら、ファイルをダブルクリックしてみてください。Webブラウザが開き、シンプルなSQL整形ツールが表示されるはずです！試しに適当なSQLコードを貼り付けて、「SQLを整形！」ボタンを押してみましょう。

これで、あなたはもう「Webアプリ開発」の第一歩を踏み出しましたね！

ソースコードのステップバイステップ解説

先ほどコピペしたHTMLファイルの中身を見ていきましょう。一見するとたくさんの文字が並んでいて難しそうに見えるかもしれませんが、大丈夫です。一つ一つのブロックに分けて、何をしているのかを解説していきますね。

1.Webページの基本構造（HTMLの土台）

  • <!DOCTYPE html>: これは「このファイルはHTML5だよ」とWebブラウザに伝えるおまじないです。
  • <html lang="ja">
    Webページ全体の始まりと終わりを示します。「lang="ja"」は、このページが日本語で書かれていることを意味しています。
  • <head>: Webページには直接表示されないけれど、大切な情報が書かれている部分です。
  • <meta charset="UTF-8">: 文字化けを防ぐためのおまじない。これで日本語もちゃんと表示されます。
  • <meta name="viewport" content="width=device-width, initial-scale=1.0">
    スマホやタブレットでも見やすいように、表示サイズを自動で調整してくれます。
  • <title>シンプルなSQL整形ツール</title>
    Webブラウザのタブに表示されるページのタイトルです。
  • <body>: Webページに実際に表示されるすべての内容（見出し、テキストボックス、ボタンなど）が書かれる場所です。

2.「sql-formatter」ライブラリの読み込み

  • これは<head>タグの中に書かれている、とても重要な1行です。
  • scriptタグは、JavaScriptのコードを読み込んだり、書いたりするためのものです。
  • src属性に指定されているURLが、まさに「sql-formatter」という便利なライブラリの場所です。この1行があるおかげで、私たちは複雑なSQLの整形処理を自分で書く必要がなくなります。インターネット上にあるこのライブラリを「ちょっと借りてくるね！」というイメージです。

このたった1行が、整形ツールを動かす魔法のカギなんです！

ほーく
ほーく

3.最低限の見た目を整えるCSS

  • <style>タグの中に書かれているのがCSSです。これは、HTMLで作った要素の見た目を「どう飾るか」を決める部分です。
  • bodyはページ全体、textareaは入力欄、buttonはボタンといったように、どの部分をどう装飾するかを一つずつ指定しています。
  • 例えば、background-color: #007bff; はボタンの色を青に、color: white; は文字を白にする、という指示です。
  • 今回は最低限の見た目を整えるために入れていますが、この部分を色々変えてみると、Webページの見た目がガラッと変わるのが分かりますよ。

色や配置を変えて、自分だけのデザインに挑戦してみてね！

ほーく
ほーく

4.Webページに表示される内容（HTMLの骨組み）

  • ここが、Webページに実際に表示される部分です。
  • <h1>タグは「見出し」です。ページのタイトルとして表示されます。
  • <div>タグは、 Webページの要素をグループ化するための「箱」のようなものです。class="container"やclass="input-box"のように名前をつけることで、CSSで見た目を整えたり、JavaScriptで操作したりしやすくなります。
  • <label for="inputSql">は、その下の入力欄（textarea）の説明文です。
  • <textarea id="inputSql" ...>
    これがSQLを入力するための大きなテキストボックスです。「id="inputSql"」という名前（ID）をつけているので、JavaScriptからこのボックスを見つけて操作することができます。placeholderは入力前の薄いヒントの文字です。
  • <div id="outputSql"></div>
    ここに整形されたSQLが表示されます。これも「id="outputSql"」という名前がついています。
  • <button onclick="formatSql()">SQLを整形！</button>
    「SQLを整形！」と書かれたボタンです。
    「onclick="formatSql()"」という部分が重要で、このボタンがクリックされたら「formatSql()」というJavaScriptの命令を実行してね、という意味になります。

画面のどこに何を表示するかを決める部分だよ！

ほーく
ほーく

5.ツールを動かす「命令文」（JavaScript）

  • script
    タグの中に書かれているのがJavaScriptのコードです。これがツールの「頭脳」となって、ボタンが押されたときの動きを指示します。
  • async function formatSql() { ... }
    これは「formatSqlという名前の機能（関数と呼びます）だよ」という意味です。ボタンが押されたときに、この中の命令が順番に実行されます。
  • const input = document.getElementById('inputSql').value;
    • document.getElementById('inputSql')
      これは「inputSqlというIDがついたHTML要素（つまり、入力欄）をWebページの中から見つけてきてね」という命令です。
    • .value
      見つけてきた入力欄に書かれている「文字（値）」を取得しています。
    • const input = ...
      取得した文字をinputという名前（変数と呼びます）に一時的に保存しています。
  • const outputDiv = document.getElementById('outputSql');
    これも同じように、「outputSqlというIDがついた表示場所を見つけてきて、outputDivという名前で覚えておいてね」という命令です。
  • if (input.trim() === '') { ... }
    これは「もし入力欄が空っぽだったら」という条件を確認しています。
    もし空っぽだったら、「SQLを入力してください。」と表示して、それ以上何もしないようにしています。
  • try { ... } catch (error) { ... }
    これは、JavaScriptでエラーが起きてもツールが止まらないようにするための仕組みです。
    「try」の中の処理を試してみて、もし何か問題（エラー）が起きたら、「catch」の中の処理（エラーメッセージを表示する）を行う、という意味です。
  • const formattedSql = await sqlFormatter.format(input, { ... });
    • ここが魔法の瞬間です！sqlFormatter.format()という命令で、読み込んだライブラリの機能を使っています。
    • input
      整形したいSQLの文字を渡しています。
    • { language: 'sql', indent: ' ' }
      どう整形してほしいかの指示です。
      「標準SQLとして扱ってね（language: 'sql'）」、
      「字下げはスペース4つにしてね（indent: ' '）」と伝えています。
    • await
      これは、整形が終わるまでちょっと待ってね、という意味です。
    • 整形された結果はformattedSqlという変数に保存されます。
  • outputDiv.textContent = formattedSql;
    整形されてformattedSqlに保存された文字を、結果を表示する場所（outputDiv）に書き込んでいます。これで整形されたSQLが画面に表示されるわけです。

これを元に、ちょっとだけ遊んでみよう！

ここまでの解説で、コピペしたコードがどのように動いているか、大まかな流れが掴めたのではないでしょうか。
もうあなたは、自分で動くWebアプリを作ることができたんです！すごいですよね！

せっかくなので、このツールを元に、少しだけコードをいじって遊んでみませんか？自分でコードを変更して、その結果がすぐに画面に反映されるのは、プログラミングの大きな楽しさの一つです。

いじるのは、JavaScriptの部分、特に sqlFormatter.format() に渡しているオプションです。

インデント（字下げ）のスペース数を変えてみよう

現在、indent: ' ' となっていて、スペース4つで字下げするように設定されています。これを、例えばスペース2つにしてみましょう。

変更前：

変更後：

変更したらファイルを保存して、ブラウザでページを再読み込みし、もう一度SQLを整形してみてください。
字下げの幅が変わったのが分かりますか？

キーワードを小文字にしてみよう

SQLのキーワード（SELECTやFROMなど）を、デフォルトの大文字ではなく、小文字で整形するように設定することもできます。sqlFormatter.format()のオプションに、keywordCase: 'lower' を追加してみましょう。

変更前：

変更後：

ここでのポイントは、前のオプション（indent）の後にカンマ（,）を追加することです。
オプションを複数書く場合は、それぞれをカンマで区切るルールになっています。

変更後、ファイルを保存してブラウザを再読み込みし、整形してみてください。
SELECTがselectになったのが確認できますね！

いかがでしたか？ほんの少しコードを変えるだけで、ツールの動作が変わるのが実感できたと思います。このように、コードを少しずつ変更しながら試していくのが、プログラミング学習の基本的な進め方です。

さらなる学習へ！おすすめのリソース

「もっとプログラミングについて学びたい！」そう思ったあなたのために、いくつかおすすめの学習リソースをご紹介します。

【おすすめ書籍】

『確かな力が身につくJavaScript「超」入門』（SBクリエイティブ）

「プログラミングって何？」「JavaScriptってどう書くの？」そんな疑問も、この一冊があれば大丈夫！
豊富な図解と丁寧な解説で、まるで隣に先生がいるかのようにJavaScriptの基本がスルスル頭に入ってきます。今回体験したJavaScriptの楽しさを、もっと本格的に味わいたいあなたに、自信を持っておすすめできる最初のJavaScript本です。

こんな方におすすめ:

  • プログラミングの基本を、挫折せずに楽しく学びたい方
  • JavaScriptで何ができるか、基礎からしっかり理解したい方
  • 自分で簡単なWebアプリを作れるようになりたい初心者の方
確かな力が身につくJavaScript「超」入門 第2版
ＳＢクリエイティブ/狩野祐東

『スラスラわかるHTML&CSSのきほん』（インプレス）

「Webページってどうやって色をつけたり、文字を大きくしたりするんだろう？」その答えが、この本には詰まっています。
「スラスラわかる」というタイトル通り、難しい専門用語に悩まされることなく、HTMLとCSSの基礎を楽しく習得できます。今回作ったツールの見た目を、もっと自分好みにカスタマイズしたい！そんなあなたの願いを叶える、Webデザインの入門書として最高のパートナーになるでしょう。

こんな方におすすめ:

  • Webページの見た目を自分で自由にデザインしてみたい方
  • HTMLとCSSの基礎を、とにかく分かりやすく学びたい方
  • 今回作ったツールを自分流におしゃれにカスタマイズしたい方
スラスラわかるHTML&CSSのきほん 第3版
ＳＢクリエイティブ/狩野祐東

『スッキリわかるSQL入門』（スッキリわかるシリーズ、インプレス）

「SQLって難しそう…」「データベースって何？」と敬遠していたあなたに朗報です！
この本は、SQL学習者の「なぜ？」を徹底的に解消してくれる、まさに神入門書。データベースの仕組みから、データの取り出し方、更新の仕方まで、豊富なイラストと優しい言葉で、SQLの全体像が「スッキリ」見えてきます。
今回作ったツールでSQLを整形するだけでなく、そのSQLが何を意味するのかを深く理解したいなら、迷わず手に取ってほしい一冊です。

こんな方におすすめ:

  • SQLの学習をどこから始めればいいか分からない方
  • データベースの基本概念を、視覚的にわかりやすく学びたい方
  • きれいなSQLを書くための基礎力を身につけたい方
スッキリわかるSQL入門 第4版 ドリル256問付き！
中山 清喬, 飯田 理恵子, 他

おすすめのオンライン講座

Udemy｜世界最大級のオンライン学習プラットフォーム

世界中で利用されるオンライン学習サイト。
HTML、CSS、JavaScriptの入門から応用まで、高評価の講座が数百種類揃っています。
初心者でも動画を見ながら手を動かせるので、挫折しにくいのが魅力です。

まとめと次のステップ

お疲れ様でした！今回の記事を通して、あなたは以下のことを学び、実際に体験することができました。

  • SQL整形ツールが、裏側でどのように動いているかの基本的な仕組み。
  • 「sql-formatter」という便利なライブラリが、複雑な整形処理を簡単にしてくれること。
  • HTML、CSS、JavaScriptというWebページの3つの要素が連携して、Webアプリとして動く様子。
  • そして何より、コピペと少しの修正だけで、実際に動くWebアプリを自分で作れるという成功体験！

プログラミングって、なんだか「魔法」のようにも見えますが、実は今回のように、一つ一つの命令を組み合わせることで動いています。そして、その命令を少しずつ変えることで、様々なことができるようになるんです。

今回の経験が、あなたの「プログラミング、もっとやってみたい！」という気持ちに火をつけるきっかけになれば、これほど嬉しいことはありません。

さあ、あなたはもう「Webアプリ開発」の第一歩を踏み出しました！今日作ったこのツールを、ぜひ周りの友達にも見せてみてください。そして、もし「こんなこともできるのかな？」と疑問に思ったら、それが次の学習への最高のスタート地点です。

関連記事

【SQL整形ツールはこちらから今すぐ使えます】▼

【SQL整形ツールの活用アイデアはこちらの記事で紹介しています】▼

-開発ガイド
-, , , , ,