派遣で働くエンジニアのスキルアップを応援するサイト

PRODUCED BY RECRUIT

Python×Excel:感情分析で一歩進んだアンケート集計をしてみよう

Pythonを実際に動かしてみよう!ということで、ビギナーも取り掛かりやすい、Microsoft Officeのアプリがより便利になる【Pythonのサンプルコード・ライブラリ】をご紹介します。今回は、Excel。【読むだけでも、なるほど】と思っていただけるよう、関連トピックも多く記載しています。スキルアップのお役に立てますように。

▼Pythonのインストールがまだの方はこちらから!

【筆者】 watさん
メーカー勤務機械系エンジニア。WATLABブログ運営者。工学計算に関する知識の習得を目指し、Pythonの学習を2019年から始める。仕事以外にも、趣味のプログラミングやPythonコミュニティへの参加を行っている。また、月間数万PVのPythonブログ「WATLAB」を立ち上げ、初心者向けに図を多くしたわかりやすい記事を作成・公開している。著書は『いきなりプログラミング Python』(翔泳社)。
ブログ:https://watlab-blog.com/
 

1.アンケートの自由記入欄の分析に、苦労したことはありませんか?

アンケートは顧客や従業員の声を直接収集する貴重な手段です。通常は数段階(1から5など)の数値(スコア)を記入者に選択してもらい、そのスコアの最小値や最大値、平均を集計して今後の方針のヒントとします。一方で、自由に文章を記述できる欄には記入者の生の声が書かれることが多いのに、一文一文細かく分析することは困難です。

単なる数値の集計であればExcelの基本機能だけで十分ですが、Pythonで感情分析を導入することで、一歩進んだ自由記入欄の分析を行うことができます。

感情分析とは?
感情分析(Sentiment Analysis)とは、テキストデータに含まれる感情や意見の傾向を分析することです。これにより、顧客のレビューやアンケートの自由記入欄から肯定的な意見や否定的な意見を数値化して表すことができます。
 
感情分析の基本的な仕組みは、自然言語処理(NLP:Natural Language Processing)の技術に基づいています。NLPはテキストデータを解析して構造を理解し、文脈や意味を捉える技術です。
 
今回はNLPによる感情分析で文章に含まれる微妙なニュアンス(ポジティブ・ネガティブ)を判定してスコアに変換します。一般的に感情分析のプログラムを自分でゼロから構築するのは困難ですが、Pythonは世界中の開発者が便利なライブラリを開発しているため、簡単に感情分析を活用したアプリを作成できます。

2. Pythonプログラミングの準備

■Pythonプログラミング環境の構築

Pythonプログラミングの環境は前回の「最速でPython環境を構築してプログラミングをはじめよう」を参照してください。Pythonのインストール方法、プログラムの記述・実行方法、外部ライブラリのインストール方法をまとめています。

■必要なライブラリのインストール

まずは次の3つの外部ライブラリをインストールしておきましょう。

POINT
第0回:最速でPython環境を構築してプログラミングをはじめよう」から始める方は、JupyterLabを立ち上げる前の状態にしておきましょう(仮想環境を使わない場合は5節、仮想環境を使う場合は7節の、いずれもjupyter labコマンドを実行する手前)。

(1)Pandas

PandasはPythonで表形式のデータ操作を行う際に便利なライブラリです。Excelファイルの読み込みや各種集計などに活用されています。次のコマンドでインストールしましょう。

pip install pandas

(2)TextBlob

TextBlobはシンプルかつ強力な自然言語処理ライブラリで、テキストの感情分析や文法の解析を行うことができます。TextBlob自体は英語の文章しか扱えませんが、他の多くの自然言語処理ライブラリと異なり、ユーザー登録や認証処理が不要です。初心者はそれらの事前処理で挫折することもあるので、今回は手軽に始められるTextBlobを使ってみます。次のコマンドでインストールを行いましょう。

pip install textblob

(3)deep-translator

deep-translatorはテキスト翻訳を簡単に行うための外部ライブラリです。GoogleTranslatorというモジュールを使うことで、Google翻訳を活用できます。先ほどのTextBlobは英語ベースなので、日本語の文章を一度英語に翻訳してから感情解析を行うために使用します。次のコマンドでインストールしましょう。

pip install deep-translator

外部ライブラリのインストールが終了したら、以下のコマンドを入力して、JupyterLabを立ち上げましょう。

jupyter lab

■サンプルファイル

この記事ではサンプルのExcelファイルを使いながらプログラムを作ります。PCで記事をご覧の方は、次のsample.xlsxをダウンロードしてPythonプログラムと同じフォルダに置いておきましょう。

▼クリックするとExcelファイルがダウンロードされます。

https://www.r-staffing.co.jp/rasisa/wp-content/uploads/2024/10/sample.xlsx

サンプルファイルの中身はこちらです。A列からE列が計5個の質問を意味しています。1行目はヘッダーで、各質問をQ1からQ5と名前を付けています。2行目以降がそれぞれの回答者の結果を意味しており、Q1からQ4は1〜5までの5段階評価、Q5は自由記入欄として日本語の文章が記載されているという内容です。

3. まずは普通に集計してみる

いきなり感情分析から入るのではなく、Pythonに慣れるためにまずは普通の集計をしてみましょう。Q1からQ4はすべて数値データで構成されているため、この数値の最小値や最大値、平均値を計算します。

■Excelファイルを読み込んで集計する

はじめにExcelファイルを読み込みます。次のPythonコードを入力してみましょう。

import pandas as pd

# Excelファイルを読み込む
df = pd.read_excel('sample.xlsx')

# 集計:最小値、最大値、平均値を計算
min_values = df[['Q1', 'Q2', 'Q3', 'Q4']].min()
max_values = df[['Q1', 'Q2', 'Q3', 'Q4']].max()
mean_values = df[['Q1', 'Q2', 'Q3', 'Q4']].mean()
POINT
1行目:pandasをimportする
Excelファイルを読み込むためにpandasをimportします。
 
POINT
4行目:Excelファイルを読み込み、データフレームに格納する
Excelファイルはデータフレームと呼ばれる構造体に格納されます。データフレームはExcelの表に似ており、行と列から構成される2次元のデータを効率的に管理、操作するためのフレームワークです。データフレームには異なるデータ型(数値型、文字列型)が混在していても構いません。
 
POINT
7〜9行目:集計する

この部分で最小値min_values、最大値max_values、平均値mean_valuesを算出しています。.min().max().mean()がそれらを計算するためのメソッドです。ここで各計算行で共通している[['Q1', 'Q2', 'Q3', 'Q4']]という部分は、データフレームの中で「Q1」から「Q4」までの列を抽出していることを意味します。
 
【こんなとき、どうする?】
ModuleNotFoundError: No module named 'pandas'が出る
プログラムを実行して、実行結果に「ModuleNotFoundError」が出る場合はpandasが正常にインストールされていません。再度pip install pandasを実行し、何かエラーが出ていないか確認しましょう。
 
【こんなとき、どうする?】
ImportError: Missing optional dependency ‘openpyxl’が出る
Pythonの外部ライブラリをインストールする際、自動的に関連ライブラリもインストールされます。しかし、環境によってはそのインストールに失敗している場合があります。その場合はImportErrorが表示されるので、足りないライブラリをpip installしましょう。ここではopenpyxlが足りないのでpip install openpyxlを実行しましょう。openpyxl以外のライブラリが足りない場合も足りないライブラリをインストールすれば解決します。
 
【こんなとき、どうする?】
FileNotFoundError: [Errno 2] No such file or directory: 'sample.xlsx'が出る
プログラミングにエラーは付きものです。FileNotFoundErrorが出る場合はサンプルのExcelファイルがプログラム実行フォルダにない可能性があります。ファイルの置き場やファイル名に間違いがないかを確認してみましょう。

■集計結果をデータフレームに追加する

次のコードを追加し、先ほど集計した結果をデータフレームに追加しましょう。

<省略>
# 計算した結果をデータフレームに追加
df.loc['Min'] = min_values
df.loc['Max'] = max_values
df.loc['Ave'] = mean_values

# 既存の列ヘッダーの調整
df.insert(0, 'Summary', [''] * (len(df) - 3) + ['Min', 'Max', 'Ave'])
 
POINT
12〜14行目:集計結果をデータフレームに追加
最小値min_values、最大値max_values、平均値mean_valuesをデータフレームに追加します。.locは行方向のデータ参照を行う操作です。この操作で新しくMin, Max, Aveという行が作成され、各データが代入されます。
 
POINT
17行目:新規列ヘッダーを追加
.insert()で0番目の行にSummaryという列を追加し、行の値を設定しています。先ほど集計した3行より前には空白文字を設定し、その後にMin, Max, Aveのラベルをセルに代入します。この値は[''] * (len(df) - 3) + ['Min', 'Max', 'Ave'])というリストにて与えられます。

■新しいExcelファイルに保存する

データ集計とセルの値設定が終了したら、最後に新しいExcelファイルを保存しましょう。次のコードを追加します。

<省略>
# 新しいExcelファイルとして保存
output_file = 'results.xlsx'
df.to_excel(output_file, index=False)
 
POINT
20, 21行目:Excelファイルの保存
output_fileという変数は保存するファイル名です。Pythonではシングルクォート「'」やダブルクォート「"」で囲んだ範囲を文字列として扱えます。文字列でファイル名を設定し、.to_excel()メソッドでExcelファイルに保存します。

プログラムの実行フォルダにresults.xlsxが保存されていることを確認したら、ファイルを開いてみましょう。集計結果の3行とSummary列が追加されていることが確かめられるはずです。

ここまでで数値データの集計やExcelファイルのデータを操作する基礎を習得したことになります。

4. 「感情分析」を試してみよう

■関数を定義する

上記のコードは単純に数値データを集計しただけです。この内容であればExcel単体の方がまだ簡単にできるでしょう。続いてPythonならではのデータ分析として冒頭で紹介した感情分析を行ってみましょう。

次のライブラリをコード上でimportします。一行目の下に追加してください。

import pandas as pd
from textblob import TextBlob                    # 追加
from deep_translator import GoogleTranslator     # 追加
<省略>

そしてimport文の下に、関数を定義します。

<省略>
from deep_translator import GoogleTranslator

def sentiment_analysis(text, min_score=1, max_score=5):        # ここから追加
    """感情解析をする関数"""

    translated_text = GoogleTranslator(source='ja', target='en').translate(text)
    analysis = TextBlob(translated_text)
    polarity = analysis.sentiment.polarity

    # 指定範囲のスコアにスケーリング
    score = ((polarity + 1) * (max_score - min_score) / 2) + min_score

    return score                                               # ここまで追加
<省略>
 
POINT
5〜15行目:感情解析関数の定義
コードの上部、import文の下にsentiment_analysis()という関数を定義しました。Pythonで関数を定義するには、まずdefというキーワードを書き、その後に半角スペースを1つ空けて任意の関数名を書きます。
関数には引数と戻り値を設定できます。今回は引数としてテキストtextと最小スコアmin_score、最大スコアmax_scoreを受け取ります。そしてテキストの感情分析を行い、min_scoreからmax_scoreまでの範囲にスケーリングしたスコア(感情を数値化したもの)を戻り値とする設定がされています。戻り値はreturnの後に半角スペースを入れて設定します。
 
POINT
8〜10行目:感情解析を行う
8行目でGoogleTranslator()を使い、日本語を英語に翻訳します。sourcejaを指定することで元の言語が日本語であることを示し、targetenを指定することで翻訳先の言語を英語に設定しています。
9行目でTextBlobによる感情解析が実行され、10行目でスコアを取得します。ここでスコアはpolarity(極性)という形で表現され、-1.0(ネガティブ)から1.0(ポジティブ)の範囲で得られます。
 
POINT
13行目:スケーリング
polarityの値は-1.0〜1.0の範囲ですが、アンケートの数値範囲は1.0〜5.0です。この範囲にデータをスケーリングすることで、他のアンケート結果と同じスケールで評価ができるようにしています。

■関数を使う

関数を定義したら、メイン文でその関数を呼びだすことで関数を使うことができます。次のコード修正を行い、sentiment_analysis()関数を使ってみましょう。

<省略>
df = pd.read_excel('sample.xlsx')

# Q5の文章を感情解析し、新規作成したQ5_score列に結果を追加   # 追加
df['Q5_score'] = df['Q5'].apply(sentiment_analysis)                # 追加

# 集計:最小値、最大値、平均値を計算
min_values = df[['Q1', 'Q2', 'Q3', 'Q4', 'Q5_score']].min()        # Q5_scoreを追加
max_values = df[['Q1', 'Q2', 'Q3', 'Q4', 'Q5_score']].max()        # Q5_scoreを追加
mean_values = df[['Q1', 'Q2', 'Q3', 'Q4', 'Q5_score']].mean()      # Q5_scoreを追加
<省略>
 
POINT
21〜26行目:新しい列に関数を適用した結果を追加
df['Q5_score']で新しい「Q5_score」という列を「Q5」の右隣に作成します。.apply()メソッドは指定した列や行のすべての要素に対して同じ関数による処理を実行するためのメソッドです。
 
集計部分に新しく作成したQ5_scoreを追加することで、この列に対しても集計が行われるようになります。

■結果を確認する

こちらが実行した後に作られるExcelファイルの中身です。Q5列の文章に対して感情分析された結果がQ5_score列に数値化され、その数値データがMin, Max, Aveで集計されている結果となりました。

5. 全体のコードはこちらから

Excelは色々な企業でさまざまな用途に使える素晴らしいソフトです。しかし、Pythonと併用することでより柔軟で高度な分析が可能になります。世界中で開発が進んでいるPythonのライブラリ群を使えば、きっとあなたの仕事に役立つ新たな可能性が見えてくるはずです。

今回のコードは詳細な説明をあえて省きました。ご興味のある読者はぜひ基礎からPythonの文法を学び、何か面白いアプリを作ってみてください。

最後に、この記事で紹介した全体のコードを載せます。PCで開ける方はぜひコピペして遊んでみてください。

import pandas as pd
from textblob import TextBlob
from deep_translator import GoogleTranslator

def sentiment_analysis(text, min_score=1, max_score=5):
    """感情解析をする関数"""

    translated_text = GoogleTranslator(source='ja', target='en').translate(text)
    analysis = TextBlob(translated_text)
    polarity = analysis.sentiment.polarity

    # 指定範囲のスコアにスケーリング
    score = ((polarity + 1) * (max_score - min_score) / 2) + min_score

    return score

# Excelファイルを読み込む
df = pd.read_excel('sample.xlsx')

# Q5の文章を感情解析し、新規作成したQ5_score列に結果を追加
df['Q5_score'] = df['Q5'].apply(sentiment_analysis)

# 集計:最小値、最大値、平均値を計算
min_values = df[['Q1', 'Q2', 'Q3', 'Q4', 'Q5_score']].min()
max_values = df[['Q1', 'Q2', 'Q3', 'Q4', 'Q5_score']].max()
mean_values = df[['Q1', 'Q2', 'Q3', 'Q4', 'Q5_score']].mean()

# 計算した結果をデータフレームに追加
df.loc['Min'] = min_values
df.loc['Max'] = max_values
df.loc['Ave'] = mean_values

# 既存の列ヘッダーの調整
df.insert(0, 'Summary', [''] * (len(df) - 3) + ['Min', 'Max', 'Ave'])

# 新しいExcelファイルとして保存
output_file = 'results.xlsx'
df.to_excel(output_file, index=False)

いかがでしたか。次回はPython×PowerPointというテーマで学んでいきます。お楽しみに。

リクルートスタッフィング

最速でPython環境を構築してプログラミングをはじめよう

これからPythonをはじめようとする人が最初に行う作業は「環境構築」です。Pythonにおける環境構築とは、自分のパソコンでPythonプログラミングをできるようにすること。ですが、この環境構築で挫折した……という方も多いのではないでしょうか。この記事では、最も簡単で、かつ実用的なPython環境の構築方法をご紹介します。

【筆者】 watさん
メーカー勤務機械系エンジニア。WATLABブログ運営者。工学計算に関する知識の習得を目指し、Pythonの学習を2019年からはじめる。仕事以外にも、趣味のプログラミングやPythonコミュニティへの参加を行っている。また、月間数万PVのPythonブログ「WATLAB」を立ち上げ、初心者向けに図を多くしたわかりやすい記事を作成・公開している。著書は『いきなりプログラミング Python』(翔泳社)。
ブログ:https://watlab-blog.com/
 

1. 初心者が挫折しにくい「環境構築」

世の中にはPythonの環境構築ツールが山ほどありますが、初心者に必要のないパッケージが多く含まれていたり、別途特別なコマンドを覚えなければならなかったりと、かえって面倒なことになる場合が多いです。インターネットのブログなどに記載の操作を試しただけで、実は導入したツールとの相性が悪く、環境構築をはじめからやり直す必要性が生じることもあります。そんなことがあると一気にイヤになってしまいますよね。

環境構築ツールは、その構造を理解して使うと便利さを実感できると思いますが、本当の初心者はまず公式のインストーラーから準備するのが賢明だと思います。

2. Pythonのインストール手順<公式>

ここではWindowsを例にインストール手順を説明します。次のURLから、Pythonの公式ページにアクセスしましょう。

https://www.python.org/

Downloadsにカーソルを当てると最新のPythonをダウンロードするボタンが表示されます。ボタンをクリックしてPythonのインストーラーをダウンロードしましょう。

ダウンロードした.exeファイルを起動します。

Add python.exe to PATHにチェックを入れてから、Install Nowをクリックしましょう。

インストールが完了したらSetup was successfulという画面になるため、ウィンドウを閉じます。これでPythonのインストールは完了しました。

3. 初心者がすぐにプログラミングをはじめられる「開発環境」

すでにPythonはインストールされた状態です。Pythonを使う最速の方法は、コマンドプロンプトを立ち上げて(ショートカットは [Windows(のマーク)キー] + [R]」)、入力欄にpythonと打つだけです。するとコマンドプロンプト上でPythonインタプリタが立ち上がり、1行ずつコードを実行できるようになります(Pythonを抜ける場合はquit()を実行する)。

しかし本格的にプログラミングをする場合、いつもコマンドプロンプトでプログラミングするのは非常に大変です。通常は開発環境を整えます。有名な開発環境にはVisual Studio CodePyCharmがありますが、それらはPythonに少し慣れてからはじめても遅くはありません。

ここではPythonをインストールしたらすぐに準備できるJupyterLabを紹介します。

4. JupyterLabのインストール手順

JupyterLabはWebブラウザ上でプログラミングができる開発環境です。ノートブックと呼ばれる形式でプログラミングを行い、コードを1行ずつ実行しながら対話式に結果を確認できるため、初心者にとって学習しやすいです。

Windowsであればコマンドプロンプトを立ち上げ、入力欄に次のコマンドを打ってJupyterLabをインストールしましょう。

pip install jupyterlab

POINT
Pythonではpip installコマンドでPyPI(パイピーアイ)と呼ばれるサイトに登録された外部ライブラリをインストールできます。外部ライブラリとは、世界中のコミュニティや企業が開発を行っているライブラリです。外部ライブラリを使うことで初心者でも高度で洗練された処理を簡単に書くことができるのがPythonの強みでもあります。

5. JupyterLabでPythonプログラミングをする

それでは早速Pythonプログラミングをはじめてみましょう。プログラムを書くときはどこか特定のフォルダの中で作業をした方が便利です。まずはデスクトップやドキュメントフォルダなどに任意のフォルダを作成してみましょう。ここではデスクトップにProjectというフォルダを作成しました。

フォルダを開き、アドレスバーにcmdと打ちEnterを押します。こうすることで、このフォルダをカレントディレクトリとした状態でコマンドプロンプトが開きます。

コマンドプロンプトが開いたら次のコマンドを実行してJupyterLabを立ち上げます。

jupyter lab

jupyterlabの間に半角スペースを入れるか-でつなげます)。

するといつも使っているWebブラウザが立ち上がり、JupyterLabのLauncherが表示されます。Python 3 (ipykernel)をクリックしましょう。

これでPythonプログラミングの準備は完了です。JupyterLabではセルと呼ばれる部分にコードを記入します。

詳しい説明は省きますが、セルをアクティブにした状態で実行ボタンを押すことでコードが実行されます。セルを複数に分けることで1セル毎に処理を実行するといったこともできます。処理が無限ループに入った場合や強制終了させたい場合は停止ボタンを押すことでプログラムの実行が止まります。

次のコードを書いて実行ボタンを押してみましょう。

print('Hello Python!')

コードの下に実行結果が表示されます。

ここまででJupyterLabを使った基本的なPythonプログラミングの準備が整いました。

POINT
JupyterLabではセルにコードを書いて実行するスタイルをとっていますが、このファイル全体をノートブックと呼びます。ノートブックは.ipykernelという拡張子のファイルであるため、別途ファイル名を変更したり、別のノートブックを作成したりすることができます。

6. 「仮想環境」でJupyterLabを使う場合

ここまでで問題なくPythonプログラミングができるようになりました。しかし、ITエンジニアとしてPythonで仕事をする場合は仮想環境の知識を持っておいた方が良いでしょう。

仮想環境を使うことで、プロジェクト毎に複数のPythonや外部ライブラリのバージョンを切り替えることができます。単一の環境でさまざまなプロジェクトを扱っていると、どこかでライブラリのバージョンに起因する不具合に直面することがあります。ここではPythonの標準的な仮想環境ツールであるvenvの使い方を説明します。

7. venvで「仮想環境」を使う

コマンドプロンプトを開くために、まずは任意のフォルダを開きましょう。フォルダを開いたら、アドレスバーにcmdと打ち込みEnterを押します。すると、このフォルダをカレントディレクトリ(現在のフォルダ)に設定した状態でコマンドプロンプトが立ち上がります。

次のコマンドで仮想環境をつくります。myenvの部分は任意の名前でも構いません。

python -m venv myenv

続いて、仮想環境を有効化します。Windowsの場合は次のコマンドです。

myenv\Scripts\activate

(macOSの場合は、source myenv/bin/activateです)。

有効化した後はコマンドプロンプトに(myenv)と表示されるようになります。この表示が仮想環境に入っている目印です。

POINT
仮想環境の外でpip installした外部ライブラリは、今回有効化した仮想環境内にはインストールされていません。JupyterLabを含め、この環境で使いたいライブラリは別途pip installしましょう。

コマンドpip install jupyterlabに続き、jupyter labを実行することで、先ほどと同じようにWebブラウザが立ち上がり、仮想環境下でJupyterLabを使うことができます。

仮想環境を抜けるには、コマンドプロンプトで次のコマンドを実行します。

deactivate

ここまででvenvによる仮想環境下でPythonプログラミングを行う説明は終わりです。仮想環境を使いこなせば顧客ごとに環境を分けることができ、初心者から中級者へと進むことができます。

8. さっそくPython×Excelであそんでみる!

この記事ではPythonのインストールとJupyterLabによるPythonプログラミングについて説明しました。また、仮想環境の使い方についても簡単に触れました。

Pythonは最も挫折しにくい言語と言われることがありますが、書きやすさや可読性の良さということ以上に、色々なことができるのもユーザーを惹きつける魅力であると思います。皆さんも何かつくりたいと思ったら最初にPythonでプロトタイプをつくってみてはいかがでしょうか?その第一歩として、まずは次の記事をおすすめします。

 

リクルートスタッフィング

【プレゼントが当たる!】あなたのスキルアップ事情を教えてください

皆さんのスキルアップ事情を教えてください

エンジニアスタイル読者の皆さんのスキルアップに関するアンケートを実施します。

いただいたご意見をもとに、さらに皆さんに役立つイベントやコンテンツをお届けする予定です。ぜひ声をお聞かせください。

また、アンケートにご協力いただいた方の中から抽選で『「技術書」の読書術』をプレゼント!

エンジニアスタイルでおなじみの増井敏克さんが、自分にあった技術書の選び方や、成長のためのアウトプット方法までを語った話題の書籍です。皆さんのさらなるスキルアップに役立つ一冊になるはず。ご応募お待ちしています。

*IPSIRON、増井敏克『「技術書」の読書術 達人が教える選び方・読み方・情報発信&共有のコツとテクニック』,翔泳社, 2022

プレゼントの募集は終了しました。たくさんのご応募ありがとうございました。

htmxでDOMを操作するには?

サクッとわかるITトレンドでご紹介した「htmx(Hotwire)」。興味ある!という方も多かったのではないでしょうか。そこで、htmxをさらに深掘り。今回は、htmxではDOMをどのように操作するのか、またその書き方を基礎知識とあわせて解説します。

htmxとは?

Hotwire(HTML Over The Wire)と呼ばれる、JavaScriptのプログラムを書くことなくAjaxのような動作を実現する技術があります。このHotwireの動作を手軽に実現できるのが【htmxというライブラリ】です。HTMLファイルの中で読み込むだけで簡単に動きのあるウェブサイトを作ることができます。

▼htmxの詳しい解説はこちらから

htmxとDOMをあわせて学ぶ理由とは?

DOMを操作するときは一般的にJavaScriptを使います。Webブラウザに搭載されているJavaScriptエンジンは、JavaScriptが持つ処理だけでなく、Webブラウザに固有のDOM操作などについてのオブジェクトがあらかじめ用意されています。

そして、このオブジェクトに対する操作をすることで、HTMLの要素を操作できるようになっています。ただし、JavaScriptとDOMの両方を学ぶのは大変なので、本稿ではhtmxでDOMを操作する方法を解説します。

DOMを操作するには、ノードの特定方法や、可能な操作について知っておく必要があるため、以降ではそれらについても詳しく解説します。

DOMとは?
HTMLは複数の要素を組み合わせて構成されており、Webページ内の要素間の関係をまとめると以下のような木構造で表現できます。


▲『htmxで学ぶWeb技術―HTML, CSS, HTTP, DOMの基本―』P.59より引用

このように、要素間の関係を木構造で表現すると、Webブラウザで表示されたときの要素間の関係がわかりやすくなります。さらに、プログラムを使って要素を操作し、Webページの中身を動的に書き換えられます。要素の中身を変更したり、新たに要素を追加したり、既存の要素を削除したりすることで、ページの内容をリアルタイムに変化させられるのです。

これを実現するためにWebブラウザが備えるしくみとしてDOM(Document Object Model)があります。DOMでは、HTMLの要素をノードやエレメントと呼び、あるノードの上のノードを親ノード、下のノードを子ノードと呼びます。
ノードに対する処理をプログラムで実装することで、下図のようにWebブラウザ上で入力欄に入力された値をチェックしたり、表に行を追加したり、画像を入れ替えたりといった操作が可能になります。


▲『htmxで学ぶWeb技術―HTML, CSS, HTTP, DOMの基本―』P.60より引用

ノードの特定:hx-target属性

DOMを使ってノードを操作するときは、対象となるノードを特定して選択しなければなりません。このとき、ノードを特定する方法として、JavaScriptには次のような関数が用意されています。

この1番目と4番目は1つのノードだけを得ることができますが、残りはノードのリスト、つまり複数のノードの一覧を得ます。このため、得たリストをループして1つずつ取り出すなどの方法で、それぞれのノードにアクセスします。

htmxでは、こちらの記事でも登場したhx-target属性でCSSセレクタを指定します。また、拡張CSSセレクタ構文が使えるため、これらを組み合わせると上記のような特定ができます。

ノードの追加、更新、削除:hx-swap属性

ノードを特定できれば、そのノードを選択してプログラムから操作できます。たとえば、あるノードに新たな子ノードを作成し、既存のノードの配下に追加できます。また、ノードを他のノードで置き換えたり、そのノードの中身を書き換えたりできます。

もちろん、ノードの属性を変更したり、新しい属性を追加したりすることもできます。DOMからノードを削除することも基本的な操作の一部です。

htmxでノードを追加したり、更新したり、削除したりするには、hx-swapという属性を使います。このときに指定できる値として、以下のようなものがあります。


▲『htmxで学ぶWeb技術―HTML, CSS, HTTP, DOMの基本―』P.62より引用

 

div要素をクリックしたときに、contents.html の内容がdivタグの後ろに追加されるようにするには、以下のように書きます。

▼ hx_swap で追加する

<div
hx-get="contents.html" hx-swap="afterend">変更前のコンテンツ</div> 

また、クリックしたときにレスポンスにかかわらず要素を削除したい場合には、以下のように書きます。

▼ hx_swap で削除する

<div
hx-get="contents.html" hx-swap="delete">削除</div> 

デフォルトでは、その要素のinnerHTMLを使うので、要素の中身が置き換えられます。

イベントとトリガー条件の指定:hx-trigger属性

Webページは読み込まれて終わるのではなく、利用者によるWebブラウザの操作に反応して、その内容を動的に変化させたいことがあります。このような利用者の操作によって発生するものをイベントと呼びます。

ボタンであれば、クリックしたときになんらかの処理を実行したいものです。このような実行の起点になるものをトリガーといいます。標準では、それぞれの要素ごとにデフォルトのトリガー条件が決められており、htmxでは指定を省略できます。


▲『htmxで学ぶWeb技術―HTML, CSS, HTTP, DOMの基本―』P.63より引用

これとは異なる条件で動作を設定したいとき、htmxではhx-trigger属性を使って、トリガーの条件を指定します。

たとえば、マウスがその要素の上に入ったときに、「enter.html」というファイルから取得した結果を表示するdiv要素を作るには、以下のように書きます。

▼マウスが入ったときに実行

<div hx-get="enter.html" hx-trigger="mouseenter">
マウスを重ねてください
</div>

■トリガーの修飾子

トリガーは単純なものだけでなく、その動作を変更するための修飾子がいくつも用意されています。たとえば、マウスが入った最初のタイミングだけリクエストしたい場合は、hx-triggerにonceを追加します。

これによって、最初にマウスを重ねたタイミングだけリクエストが送信され、書き換えられたあとはリクエストを送信しなくなります。

▼初回だけマウスが入ったときに実行

<div hx-get="enter.html" hx-trigger="mouseenter once">
マウスを重ねてください
</div>

なお、hx-triggerに指定できるものとして、以下のようなものがあります。


▲『htmxで学ぶWeb技術―HTML, CSS, HTTP, DOMの基本―』P.64より引用

 

【もっと深堀り!】hx-triggerに指定できる処理内容の意味
 
▼delay
イベントが再度トリガーされると、カウントはリセットされます。つまり、「hx-trigger="mouseenter delay:1s"」と指定すると、マウスを1秒以内に何度も重ねるとリクエストは発行されず、最後にマウスを重ねてから1秒経ったときにリクエストが発行されます。
 
▼throttle
1回目はすぐにリクエストが発行されますが、2回目以降は指定された時間を経過しないと発行されません。

これらの属性を使うと、検索欄にキーワードの一部が入力されたときに候補を表示するなど、便利な機能を容易に実現できます。

たとえば、以下のコードのinputタグでは、キーが押されてから500ミリ秒が経過するとHTTPリクエストを発行し、その結果をresultsというidが設定されているdivタグに挿入します。

<input type="text" name="q"
    hx-get="/search"
    hx-trigger="keyup changed delay:500ms"
hx-target="#results"
placeholder="検索" >
<div id="results"></div>
【もっと深堀り!】トリガーの修飾子の複数指定と条件追加
 
なお、hx-trigger 属性にカンマ区切りで並べて指定すると、複数のトリガーを指定できます。 イベント名に続けて角括弧を使用すると、トリガーの条件を追加することもできます。
 
たとえば、以下では、div タグの上で「Control(Ctrl)」 キーを押しながらクリックしたときだけトリガーします。
<div hx-get="click.html" hx-trigger="click[ctrlKey]"> Control( Ctrl )キーを押しながらクリックしてください 。
</div>

属性の継承:hx-confirm属性

削除ボタンを押したときに、本当に削除してよいか確認するメッセージを表示したいことがあります。このように、リクエストを発行する前に確認メッセージを表示するには、hx-confirmという属性を使います。

下記のように書くと、確認メッセージを表示し、OKを押したときだけリクエストを送信します。

<button
hx-delete="/delete" hx-confirm="削除しますか?">削除</button>

htmxの属性の多くは子要素にも継承されます。つまり、属性を指定した要素だけでなく、子要素にも同じ属性が適用されます。これにより、コードの重複を避けられます。

たとえば、下記では、hx-confirm 属性をそれぞれの要素に指定しています。

<button
hx-delete="/delete" hx-confirm="削除しますか?">削除</button> 
<button
hx-put="/update" hx-confirm="更新しますか?">更新</button>

これを下記のように親要素に記述すると、HTMLの記述量を減らせます。

<div hx-confirm="よろしいですか?">
<button hx-delete="/delete">削除</button> <button hx-put="/update">更新</button>
</div>

逆に、継承したくない場合は、hx_confirmにunsetという値を設定します。下記のように書くと、削除と更新のボタンでは確認メッセージが表示されますが、キャンセルボタンを押したときは表示されません。

<div hx-confirm="よろしいですか?">
<button hx-delete="/delete">削除</button> <button hx-put="/update">更新</button> <button hx-confirm="unset" hx-get="/"> キャンセル
</button>
</div>

・・・

いかがでしたか。本格的に学ぼうとするとハードルの高いDOMですが、htmxではJavaScriptなしでも必要な操作ができることがわかりました。

まずは、htmxのようなチャレンジしやすいものからはじめて、Web技術の知識を深めていくのもいいですね。

▼htxmでのHTTPの書き方解説はこちらから

*本稿は増井敏克『htmxで学ぶWeb技術―HTML, CSS, HTTP, DOMの基本―』を再編集したものです。

【監修】増井 敏克さん
増井技術士事務所代表。技術士(情報工学部門)。情報処理技術者試験にも多数合格。ビジネス数学検定1級。「ビジネス」×「数学」×「IT」を組み合わせ、コンピュータを「正しく」「効率よく」使うためのスキルアップ支援や、各種ソフトウェアの開発、データ分析などを行う。著書に『Pythonではじめるアルゴリズム入門』『図解まるわかり プログラミングのしくみ』『「技術書」の読書術 達人が教える選び方・読み方・情報発信&共有のコツとテクニック』(翔泳社)、最新刊の『データ分析に強くなるSQLレシピ 小規模データの前処理・分析の書き方&テクニック』(インプレス)がある。

※本稿に記載されている情報は2024年5月時点のものです。

リクルートスタッフィング

htmxでのHTTPリクエストはどう指定する?

サクッとわかるITトレンドでご紹介した「htmx(Hotwire)」。興味ある!という方も多かったのではないでしょうか。そこで、今回から2回にわたってhtmxをさらに深掘り。まずは、htmxでHTTPリクエストはどのように指定するのか、書き方だけでなく基礎知識もあわせて解説します。

htmxとは?

Hotwire(HTML Over The Wire)と呼ばれる、JavaScriptのプログラムを書くことなくAjaxのような動作を実現する技術があります。このHotwireの動作を手軽に実現できるのが【htmxというライブラリ】です。HTMLファイルの中で読み込むだけで簡単に動きのあるウェブサイトを作ることができます。

▼htmxの詳しい解説はこちらから

htmxでのHTTPリクエストはどう指定する?

HTTPリクエストは利用者がリンクをクリックしたり、アドレスバーにURLを入力したりすることで発生します。htmxでは、このような利用者の操作を待つのではなく、定期的にHTTPリクエストを送信してサーバー側の状態を取得するポーリングという方法を使うこともできます。

以下のように指定すると、/newsというURLに対して2秒ごとにポーリングし、レスポンスをdivタグに読み込みます。

<div hx-get="/news" hx-trigger="every2s"></div>

このhtmxによるポーリングをサーバー側で止めたいときには、サーバーからのレスポンスにおいて、ステータスコードとして「286」を返します。それを受け取った要素はポーリングをキャンセルします。

「読み込み中」を表示したいとき

一般的なWebページでは、リンクをクリックしてページを遷移するとページ全体が切り替わるので、ページが書き換わっている状況を利用者が把握できます。しかし、ページ内の要素を書き換える場合には、その進捗状況を利用者が把握するのは難しいものです。

そこで、処理中であることを示すアニメーションを使うことがあります。このようなとき、htmxではhtmx-indicatorというクラスを使うことで表示・非表示を切り替えられます。

このクラスは、デフォルトでは不透明度が0に設定されており、初期状態では目に見えません。htmxがHTTPリクエストを発行すると、htmx-requestというクラスが自動的に追加されます。このクラスが指定された要素は、htmx-indicatorクラスが設定された子要素の不透明度を1に変更し、アニメーションを表示できます。処理が終了すると、htmx-requestが外れて、自動的に非表示になります。

たとえば、以下のように指定すると、ボタンがクリックされる前は何も画像は表示されていませんが、ボタンがクリックされると「spinner.webp」という画像が表示されます。

<button hx-get="/search">
  処理に時間がかかるボタン
    <img class="htmx-indicator" src="/spinner.webp">
</button>

そして、/searchを読み込んで置き換える処理が完了すると、画像は表示されなくなります。

「進捗バー」を表示したいとき

アニメーションを表示するだけでなく、⻑い時間がかかるような処理の最中には、その進捗状況を表示すると親切です。進捗状況としてパーセントを表示し、100%になると終了するような「進捗バー」を表示することを考えます。

このような表示は、htmxのロードポーリングという方法で実現できます。これは、Webサーバーからの応答を受けて、自身の要素を少しずつ置き換える方法です。

以下のように書くと、サーバー側に対して処理状況を1秒ごとにポーリングして、その結果で要素の中身を置き換えられます。

<div hx-get="/status"
    hx-trigger="load delay:1s"
    hx-swap="outerHTML">
</div>

非同期通信に欠かせないHTTPの基礎知識

ここまでhtmxでのHTTPリクエストの指定方法について解説してきましたが、「HTTPってどんな仕組みだっけ?」と疑問が出てきた方もいるかもしれません。ここからはhtmxを使いこなすために知っておきたいHTTPの基礎知識を解説します。「基本は知っている」という方も学び直してみると新たな発見があるかもしれません。

また、htmxの書き方を知っていればコードを動かすことはできますが、「なぜそういう指定になるのか」を理解するにはHTTPの基礎知識も知っておく必要があります。基礎から理解しておくことで、エラーが出たときの原因をスムーズに調べられたり、新しい技術への応用もしやすくなります。それでは見ていきましょう。

Q. HTTPって何?

A. Webページの表示やファイルのダウンロードなどに使われるプロトコルのこと

Web技術が変化するとともに、HTTPに新たな機能が追加され、HTTP/1.0、HTTP/1.1とバージョンアップしてきました。現在ではHTTP/2やHTTP/3というバージョンも登場しており、さまざまな高度な機能を使えるようになっています。

*プロトコル:コンピューター同士が通信を行うための規格(ルール)のこと。

Q. Webサイトはどんな仕組みで閲覧できている?

A. WebブラウザからWebサーバーに対してHTTPリクエストを送信し、HTTPレスポンスが返ってくることで閲覧できている。


▲『htmxで学ぶWeb技術―HTML, CSS, HTTP, DOMの基本―』P.49より引用

Q. HTTPリクエストでは何が送信されている?

A. HTTPリクエストを送信するときは、DNSサーバーに問い合わせて、URLに含まれるサーバーのホスト名からIPアドレスに変換します。そして、取得したIPアドレスとWebサーバーのポート番号を使って、WebブラウザがWebサーバーにHTTPリクエストを送信します。

HTTPリクエストは、以下のような3つの要素で構成されています。それぞれの意味を簡単に確認しましょう。

*Microsoft Edgeでは「開発者ツール」の「ネットワーク」タブ、Google Chromeでは「Chromeデベロッパーツール」の「ネットワーク」タブ、Safariでは「Webインスペクタ」の「ネットワーク」タブで確認できます。


▲『htmxで学ぶWeb技術―HTML, CSS, HTTP, DOMの基本―』P.51より引用

■リクエストライン

リクエストラインでは、何をどのように要求するのかを指定します。このときに使われるのがリクエストメソッドで、以下の表のようなものがあります。


▲『htmxで学ぶWeb技術―HTML, CSS, HTTP, DOMの基本―』P.52より引用

htmxの場合はどうなる?

こちらの記事で紹介したhtmxの記述では、「hx-get」という属性を使いました。これはHTTPのGETリクエストを送信するものです。上の表で解説したものの一部は、htmxの属性として下の表のように指定することで同等の処理を実現できます。


▲『htmxで学ぶWeb技術―HTML, CSS, HTTP, DOMの基本―』P.52より引用

これらの属性と合わせて、リクエストを発行するためのURLを指定します。

■リクエストヘッダー

リクエストヘッダーは1行に「名前: 値」という形式で、以下のような項目が送信されます。


▲『htmxで学ぶWeb技術―HTML, CSS, HTTP, DOMの基本―』P.53より引用

■リクエストボディ

GETリクエストのようにデータを送らないリクエストでは、リクエストボディが省略される場合がありますが、POSTやPUTリクエストではリクエストボディを使ってデータを送信します。

Q. HTTPレスポンスでは何が返ってくる?

A. Webブラウザから送信されるHTTPリクエストに対し、Webサーバーからはその要求内容に応じたHTTPレスポンスをWebブラウザ側には返します。

HTTPレスポンスもHTTPリクエストと同様に、下図のような3つの要素で構成されています。それぞれの意味を簡単に確認しましょう。


▲『htmxで学ぶWeb技術―HTML, CSS, HTTP, DOMの基本―』P.54より引用

■ステータスライン

ステータスラインは1行で、その応答の概要が書かれています。先頭にはHTTPのバージョン、そのあとには3桁のステータスコードと成否が書かれています。

ステータスコードは百の位で大きく5つに分類でき、代表的な処理の成否を確認できます。以下のように、百の位を見るとおおまかに結果がわかります。


▲『htmxで学ぶWeb技術―HTML, CSS, HTTP, DOMの基本―』P.55より引用

■レスポンスヘッダー

レスポンスヘッダーはレスポンスの概要や、リクエストで要求された情報への応答が書かれています。具体的には、以下のようなものがあります。


▲『htmxで学ぶWeb技術―HTML, CSS, HTTP, DOMの基本―』P.56より引用

■レスポンスボディ

レスポンスボディはリクエストに対する実際のレスポンスで、一般的なWebページではHTMLの内容が書かれています。画像であればその画像のデータ、CSSであればCSSの内容が返されます。

Webブラウザは、ここに記載されている内容をもとに、Webブラウザの画面に表示します。画像データのようなバイナリデータでは、人が見てもその中身がよくわかりませんが、レスポンスヘッダーのContent-Typeを見て適切に取り扱っています。

・・・

いかがでしたか。基礎的な知識を押さえながら、htmxのような便利な書き方を活用していきたいですね。次回はDOMについてもhtmxでの操作方法を見ていきます。

htmxでDOMを操作するには?

*本稿は増井敏克『htmxで学ぶWeb技術―HTML, CSS, HTTP, DOMの基本―』を再編集したものです。

【監修】増井 敏克さん
増井技術士事務所代表。技術士(情報工学部門)。情報処理技術者試験にも多数合格。ビジネス数学検定1級。「ビジネス」×「数学」×「IT」を組み合わせ、コンピュータを「正しく」「効率よく」使うためのスキルアップ支援や、各種ソフトウェアの開発、データ分析などを行う。著書に『Pythonではじめるアルゴリズム入門』『図解まるわかり プログラミングのしくみ』『「技術書」の読書術 達人が教える選び方・読み方・情報発信&共有のコツとテクニック』(翔泳社)、最新刊の『データ分析に強くなるSQLレシピ 小規模データの前処理・分析の書き方&テクニック』(インプレス)がある。

※本稿に記載されている情報は2024年5月時点のものです。

リクルートスタッフィング

Amazon QをVS Codeにインストール。手順や操作画面は?

サクッとわかるITトレンドでご紹介した「Amazon Q」。興味ある!という方も多かったのではないでしょうか。そこで、Amazon Qをさらに深掘り。Visual Studio CodeのプラグインとしてAmazon Qを使い、具体的にどのようなことができるのか事例を4つご紹介します。日本語に対応していないからなぁ…とお思いの方もぜひご覧ください。

Visual Studio Codeにインストール。その手順

Amazon Q

2023年に発表され、2024年4月末に一般提供された生成AIアシスタントです。無料で手軽に使えるサービスとしてAWSが提供しています。「Amazon Q Business」「Amazon Q Developer」「Amazon Q in QuickSight」「Amazon Q in Connect」など複数のサービスで構成されています。

▼以下の記事も合わせてご覧ください

今回は、これらのサービスの中から、エンジニア向けの「Amazon Q Developer」を使い解説します。以下より、この記事内では「Amazon Q」と書いた場合は、この「Amazon Q Developer」を指すものとします。また、この記事では、テキストエディタのVisual Studio Code(以下、VS Code)のプラグインとしてAmazon Qを使う方法を解説します。

VS CodeでAmazon Qを使うには、VS Codeをインストールしたうえで拡張機能をインストールします。このときに必要なのは「AWS Builder ID」という無料で取得できるアカウントだけで、AWSのアカウントは不要です。

▼以下の記事で解説した「Amazon CodeWhisperer on VSCode」を試した方は、このときに取得したアカウントがそのまま使えます。

インストールから設定までの手順を動画にしていますので、試してみてください。

たとえばSQLを生成してほしいとき

Check01 開発者向けの対話型AI

VS CodeにAmazon Qをインストールすると、画面左にAmazon Qのアイコンが表示されます。そして、これをクリックするとチャット画面が表示されます。この入力欄にチャットで質問などを入力すると、その質問に答えてくれます。

たとえば、SQLを生成してほしいときには、次のように文章で入力します。ここでは「Write the SQL to create table to store user information for login.」という文章を指定しています。

Amazon Qからの応答には、SQLが含まれています。そして、この画面には続きがあり、作成したテーブルが持つカラムの意味や役割、制約などを解説した文章があります。このように、ChatGPTなどの対話型AIと同様のことができ、プログラミングなどの分野に向いた結果が得られやすいことがわかります。

執筆時点では英語のみですが、今後日本語に対応するとより便利に使えるでしょう。

他人が書いたソースコード。処理内容がよくわからないとき

Check02 ソースコードの修正、最適化

対話型AIとして使うだけであればChatGPTなどで十分ですが、Amazon QはVS Codeなどで実行できる便利な機能を備えていることが特徴です。

たとえば、VS Code上でソースコードを選択して右クリックすると、「Amazon Q」というメニューが表示されます。この中には、「Explain」「Refactor」「Fix」「Optimize」などのサブメニューが並んでいます。

ここから「Explain」を選択すると、そのソースコードの処理内容を説明してくれます。たとえば、上記のようにソースコードを選択して「Explain」を押すと、次のように説明してくれました。

このような機能を使うと、他人が書いたソースコードでその処理内容がよくわからないときには、その処理内容を解説してくれます。また、「Optimize」を選ぶとソースコードを最適化するときの候補を表示してくれます。これを見て、どのように改善するとよいのかの判断材料として使えます。

入力候補を自動で提示してほしいとき

Check03 ソースコード中への自動サジェスト

チャットで指示を書くだけでなく、上記のようにコマンドを選ぶだけで、チャット欄に答えを返してくれます。しかし、ソースコードを書いているときにも支援してくれると助かります。

Amazon Qを導入すると、VS Codeでソースコードを入力するだけで自動的に続く内容をサジェストしてくれます。これは、以前の記事で解説したCodeWhispererのような機能です。たとえば、次のように動作します。

▼「CodeWhisperer」の詳細はこちらから!

ソースコードの品質を確認してほしいとき

Check04 ソースコードのセキュリティスキャン

左側のアイコンや、ソースコード入力中以外にできることとして、画面下にある「Amazon Q」という部分が備える機能があります。たとえば、ソースコードのセキュリティスキャンがあります。これは、脆弱性のあるソースコードでよく使われる書き方など、ソースコードの品質をチェックしてくれる機能です。

何らかのプロジェクトをVS Codeで開いた状態で、画面下の「Amazon Q」を押すと表示されるメニューの中から「Run Project Scan」を実行すると、そのプロジェクト内のソースコードをスキャンし、セキュリティ上の問題がある部分を表示してくれます。

ソースコードの量が多いとそれなりに時間はかかりますが、脆弱性診断ツールを使った動的スキャンと組み合わせて、このような静的スキャンを組み合わせることで安全性の高いソースコードを記述できます。

まとめ

まだまだAIに関する技術は進化を続けているため、日々新しいツールも登場しています。今回解説したAmazon Qも、今後大きく変わる可能性があります。ぜひ最新のトレンドを追いかけながら、ぜひさまざまなツールを試してみてください。

【筆者】増井 敏克さん
増井技術士事務所代表。技術士(情報工学部門)。情報処理技術者試験にも多数合格。ビジネス数学検定1級。「ビジネス」×「数学」×「IT」を組み合わせ、コンピュータを「正しく」「効率よく」使うためのスキルアップ支援や、各種ソフトウェアの開発、データ分析などを行う。著書に『Pythonではじめるアルゴリズム入門』『図解まるわかり プログラミングのしくみ』『「技術書」の読書術 達人が教える選び方・読み方・情報発信&共有のコツとテクニック』(翔泳社)、最新刊の『データ分析に強くなるSQLレシピ 小規模データの前処理・分析の書き方&テクニック』(インプレス)がある。

※本記事に記載されている会社名、製品名はそれぞれ各社の商標および登録商標です。
※本稿に記載されている情報は2024年6月時点のものです。

リクルートスタッフィング

特別編集 続々登場する生成AIアシスタント

ChatGPTの登場以降、続々と登場している生成AIを用いたアシスタントツールやサービス。さまざまなサービスが登場する一方で、それらをどのように活用すればいいのか、自分にあったものはどれなのかと、迷ってしまうことも。

エンジニアスタイルでも、これまでにいくつかの生成AIのサービスを取り上げてきました。スマートフォンで使える簡単なものから、コーディングを支援してくれるものまで、機能や使用場面はさまざまです。

そこで今回はエンジニアスタイルでよく読まれている、「生成AI」に関する記事をまとめてご紹介。まずは特性を正しく理解するところからはじめて、あなたに合ったAIアシスタントを便利に使いこなしてみてください。

こんな方におすすめ

□ 生成AIの基本の仕組みを知りたい方
□ 非エンジニアでも生成AIを使ってみたい方
□ コーディング支援のAIがきになる方

Pickup

1:対話型AIの基本の性質を理解しよう

この記事でわかること

  • 生成AIはなぜ重宝されているのか
  • 生成AIの弱点2つ

 

2:続々登場するCopilot。有料・無料版の違いは?

この記事でわかること

  • 個人でも使いやすい無料のCopilotの特徴
  • PowerPointやWord、ExcelなどMicrosoft 365で使える生成AIとは

 

3:無料のコーディング支援AI「Amazon CodeWhisperer on VSCode」

この記事でわかること

  • TabキーとEnterだけで、JavaScriptのソースコードを書いてみるには
  • 動画でわかる設定方法

※本記事に記載されている会社名、製品名はそれぞれ各社の商標および登録商標です。
※各記事の内容は掲載時点のものです。