paiza times

paizaがお届けする、テック・キャリア・マネジメント領域における「今必要な情報」を届けるWebメディア

logo

paizaがお届けする、テック・キャリア・マネジメント領域の「今必要な情報」を届けるWebメディア

AIがテキストからプログラムを自動生成!話題の「Programming Helper」を使ってみた!

どうも、まさとらん(@0310lan)です!

今回は、テキストから画像生成ではなく…プログラムをAIが生成してくれるWebサービスをご紹介します!

「◯◯なプログラムを作るにはどうすればいいんだろう?」と思った時に、作りたい機能をテキスト(文章)で入力すれば、あとは1クリックでAIが最適なプログラムを生成してくれるのが大きな特徴です。

まだ開発を進めている段階ではありますが、ご興味ある方はぜひ参考にしてください!

■「Programming Helper」の使い方

それでは、「Programming Helper」をどのように使えばいいのか詳しく見ていきましょう!

ひとまず利用するだけならログインは不要です。

サイトのトップページを少しスクロールすると、いくつかのリスト化されたメニューが表示されます。

そのなかで、試しに「Function from Description」を選択してみましょう。


以下のような編集エディタが表示されます。

「Function from Description」は任意のテキスト(文章)を入力すると、その内容に合った関数のプログラムを生成してくれるのが特徴です。


まずは生成されるプログラミング言語を設定しましょう。今回はJavaScriptを選択します。


続いて任意のテキストを入力します。

今回は定番の「Hello World」を出力したいので以下のようなテキストにしてみました。

Output the text "Hello World"

テキストを入力したら【Generate Function】ボタンをクリックしましょう。


すると、出力結果に「Hello World」を出力するための関数が生成されます。

ただし、AIによる自動生成のため、必ず同じコードが生成されるとは限りません。

まだβ版のため、何らかの異常が起きたり…うまく生成されなかった場合は再度ボタンをクリックしてやり直しましょう。

上記のコードをコピーすれば、実際のJavaScriptプログラムとして使うことができます。


他のサンプル例も試してみましょう!

今度は2つの数値を加算して、その結果を返す関数を作ってみます。入力するテキストは以下のようになります。

Add two numbers and return them

実行すると、次のようなプログラムが生成されます。

function add(a,b){
     return a + b;
 }

add()の引数へ2つの数値を設定して実行すると、それぞれの数値が加算された結果を返すことができます。


今度は条件分岐も試してみましょう。

入力された値が数値かどうかを判定する関数を作ってみます。次のようなテキストを入力してみました。

return if value is not a number

実行すると、以下のようなプログラムが生成されます。

function isNumber(value) {
    return typeof value === 'number' && isFinite(value);
}

このプログラムでは、isNumber()の引数に設定した値が数値かどうかをtrue / falseで返してくれます。


並び替えのプログラムも作ってみましょう!

数値が格納された配列を受け取って、その中身を順番に並びかえるプログラムにしてみます。入力するテキストは次のようになります。

Receive an array of numbers and sort them in order

実行すると、以下のようなプログラムが生成されます。

function sortArray(array){
    return array.sort((a, b) => a - b);
}

数値が格納された配列をsortArray()の引数に設定すると、中身を順番に入れ替えた新しい配列を返してくれます。


このように英語のテキストを入力すれば、あとは1クリックでプログラムをAIが自動生成してくれるわけです。英語が苦手な方も「DeepL」などの翻訳サービスを利用すると簡単です。

また、関数を生成する以外にも、テキストではなくプログラムを入力してコードの解説文を生成したり、プログラミング言語を判別したり、別の言語に変換したりなども可能なので応用範囲はかなり広いと思います。

■Web開発に便利なプログラムを生成しよう!

「Programming Helper」では、Webサイトを作るのに必要なHTML / CSSを生成する機能も提供されているので合わせてご紹介しておきます。

まず最初に「HTML」の生成から見ていきましょう。


利用する機能は「Generate HTML from Description」です。

例えば、単純なリスト要素を5つ作りたい場合は、次のようなテキストを入力してみましょう。

Create five list elements

実行すると、以下のようなHTMLが自動生成されます。

<html>
    <head>
        <title>Page Title</title>
    </head>
    <body>


        <ul>
            <li></li> 
            <li></li> 
            <li></li> 
            <li></li> 
            <li></li> 
        </ul>


    </body>
</html>

liタグの中身は空っぽの状態なので、自分で好きなテキストを入力しましょう。


今度はもう少しだけ複雑なHTMLを生成できるか試してみましょう。

内容としては、赤い四角形のカタチをしたdiv要素を作り、それを画面の中央に配置してみます。入力するテキストは次のとおりです。

Red square div element placed in the center of the screen

実行すると、以下のようなHTMLを生成します。

<html>
<head>
<style> 
    div {
        width: 100px;
        height: 100px;
        background-color: red;
        position: absolute;
        top: 0; bottom: 0; left: 0; right: 0;
        margin : auto;
    }
</style> 
</head>
<body>
    <div></div>
</body>
</html>


生成されたコードをブラウザで確認してみると、たしかに赤い四角形が画面中央に配置されているのが分かります。

今回のようにいくつかの条件を組み合わせると、HTMLだけでなくCSSも一緒に生成されているのが分かります。


そこで、今度は「CSS from Description」という機能を使ってみます。

これはCSSだけを生成できるので、HTMLは不要という場合に重宝します。サンプル例として、テキスト要素を上下にアニメーションするコードを生成してみましょう。

入力するテキストは次のとおりです。

Text that animates up and down

実行すると、次のようなCSSを生成します。

.up-and-down {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 4em 0;
}
.up-and-down p {
  position: absolute;
  font-size: 3em;
  width: 100%;
  margin: 0;
  line-height: 1;
  top: 50%;
  text-align: center;
}
.up-and-down p:nth-child(1) {
  animation: up-and-down 5s linear 0s infinite normal none running;
}
.up-and-down p:nth-child(2) {
  animation: up-and-down 5s linear 2.5s infinite normal none running;
}
@keyframes up-and-down {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-1.25em);
  }
  100% {
    transform: translateY(0);
  }
}


生成されたCSSを任意のテキスト要素に適用するとアニメーションが実行されます。

このようにWebサイトで表現したいことを、テキストの文章で書けば必要なコードを生成してくれるわけです。

このコードをベースにしながら、自分でさらなるカスタマイズを追求してもいいでしょう。

■まだある便利なAI生成パターン

「Programming Helper」では、プログラム以外にもAIが生成できることがいくつかあります。

例えば「Regex from Description」を使うと、テキストから目的の正規表現パターンをAIが生成してくれます。

サンプル例として任意のテキスト内に数字が含まれている場合、すべての数字を抽出する正規表現パターンを作ってみましょう。入力するテキストは次のようになります。

If there are numbers, get all of them.

実行すると、以下のような正規表現を生成してくれます。

出力結果から「/\d+/g」というパターンが出てきたので、これを実際のJavaScriptプログラムにしてみましょう。

const pattern = /\d+/g;
const text = '1 one 2 two 3 three';


console.log(text.match(pattern));


// 出力 → ["1","2","3"]

ちなみに「Regex to explanation」という機能も提供されており、こちらは正規表現を入力してそのパターンの意味を出力してくれます。何をしてくれるパターンなのかを知りたいときに便利でしょう。


また、「Linux Command from Description」を使うと、今度はテキストからLinuxコマンドを生成してくれます。

例えば「sample」フォルダの中にあるファイルから、「s」で始まるファイルをすべて削除したい場合を考えてみましょう。入力するテキストは次のようになります。

delete all files from sample folder that start with the letter s.


実行すると、以下のコマンドが生成されます。

rm ./sample/s*


Linuxコマンドは奥の深い世界なので、この機能を活用してCLIの学習を進めていくのにも最適でしょう。


もう1つよく使うコマンド入力としてはGitがありますよね。

「Git Command from Description」を使うと、テキストから目的のGitコマンドを生成してくれます。

例えば、sampleというブランチを作成してそれに変更する場合は、次のようなテキストを入力してみましょう。

create a branch called sample and change to it


実行すると、以下のようなコマンドが生成されます。

$ git checkout -b sample


$ git branch 

このように「Programming Helper」を使うと、テキストからさまざまなプログラムやコマンドをAIが生成してくれるわけです。

「こういう場合にどんなプログラムを書けばいいんだろう?」と悩んだときには、このサイトでAIにプログラムを作ってもらうのも選択肢として面白いのではないでしょうか。

エンジニア騎士とクエリの魔女公開中

20220816184742

paizaは先日「エンジニア騎士とクエリの魔女」を公開しました。

異世界に勇者パーティーとして召喚された新人ITエンジニアの男女。
目覚めるとそこは、剣(コード)と魔法(SQL)が支配する世界だった。
騎士と魔法使いの冒険が、今始まる――

Python、PHP、JavaScript、C言語、Javaなど28言語で遊べるプログラミングゲームです。

あなたのプログラミング&SQLのスキルを解き放って異世界に平和をもたらしてください!!

20220817134638

■まとめ

今回は、任意のテキストからAIがプログラムを自動生成してくれるWebサービスをご紹介しました。

まだ開発を進めている段階ではあるものの、簡単なプログラムであれば特に問題なく生成されることに驚きます。英語のテキストも翻訳サービスを利用すればそれほど難しくはないですし、プログラムからコマンドまで幅広い用途に対応しているのも便利でしょう。

利用は無料なので、ご興味ある方はぜひ試してみてください!


<参考リンク>





paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。

詳しくはこちら

paizaラーニング

そしてpaizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。

スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。

詳しくはこちら

paizaのスキルチェック

paizaのおすすめコンテンツ

Webセキュリティ入門 ハッカー入門 Webセキュリティ講座がスタート!CVは内田真礼さん! Python✕AI 機械学習入門講座 CVに上坂すみれさんを起用!人気の機械学習講座を公開中!
paiza転職 paiza新卒 EN:TRY paizaラーニング 記事内に記載している情報は、記事公開時点でのものとなります。 Copyright Paiza, Inc, All rights reserved.