*[【マイナビITエージェント】あなたの転職活動を無料でサポートいたします](https://mynavi-agent.jp/it/?utm_source=and-engineer&utm_medium=banner&utm_campaign=acv01)*

## HTML編集ソフト（エディタ）を活用する

HTML/CSSを学び始めると、HTML作成ツールとしてHTML編集ソフトが必要になってきます。ここでは、*HTML/CSSの初心者の方に向けて、使い勝手が良く、GUIに優れたHTMLエディタを紹介していきます。*皆さんに合うHTMLエディタ選定の参考にしてください。

**HTMLエディタは、HTML/CSSの作成や編集を効率的に行えるテキストエディタです。**そもそも「テキストエディタ」とは、ソースや文書ファイルなどを編集するためのプログラムのことです。HTMLエディタは、HTMLの作成ツールと考えて良いでしょう。

WindowsやMacに標準搭載されているテキストエディタは、主にテキストの編集を行うためのアプリですが、*HTMLエディタにはテキストの編集に加えてソースコードの入力補助・タグの自動補完・エラーチェック・ファイル連携などの機能が備わっています。*

これらの機能を用いて効率的なHTML記述やWebページの制作を行えますので、HTML/CSSを日常的に使うエンジニアの方にはHTMLエディタの利用がおすすめです。

### なぜHTMLエディタにこだわる必要があるのか

Windwos標準の「メモ帳」、Mac標準の「テキストエディット」でもHTML/CSSの作成や編集は可能です。しかし、これらの標準ソフトはHTML/CSSに特化したものではないので最低限の機能しか搭載しておらず、HTML/CSSの作成・編集に最適とは言えません。

ITエンジニア、プログラマーの仕事は常に時間との勝負です。しかも、スピードだけではなく高い品質も求められます。プログラムの品質とボリュームを保ちながら納期までにシステムを完成させなければなりません。

**ITエンジニアは高い生産性が求められる職種であり、それを実現するには使い勝手の良いテキストエディタに出会う必要があります。**自分に合う良いエディタを使うことは、自らの仕事の生産性を上げるために欠かせません。

では、HTMLエディタを使うことで具体的にどのようなメリットがあるのでしょうか？まずはHTMLエディタの一般的なメリットについて確認しておきましょう。

**HTMLエディタには自動補完機能が付いており、入力ミスや入力漏れを防いでくれるため、HTMLの記述をスムーズに行うことができます。**

自動補完機能とは、開始タグを打つと自動的に終了タグが記述されるなど、打ち込んだ記号や文字の関連タグを自動で入力してくれる機能です。この機能があることで、効率的にHTMLの記述作業ができます。

HTMLは記述ミスをしても思い通りの表示がされないだけで、プログラムのように重大なエラーにはなりにくいです。そのため、うっかりミスに気付かずに記述を進めてしまうことがあります。しかし、仕事でHTMLを記述する際に、そのようなミスは許されません。

HTMLは階層構造が複雑になればなるほど、記述ミスが起きやすくなります。**HTMLエディタでは、構成要素ごとに異なる色で表示してくれるなど、複雑な階層でも構成が分かりやすくなる機能がついているので記述ミスが減ります。**こうした機能は一般のテキストエディタにはありません。

### Webページをプレビューできる

一般のテキストエディタでHTMLを記述する場合は、Web形式のファイルで一旦保存し、そのファイルをWebブラウザで開き直して正しく表示されているかどうかを確認する必要があります。

一方、**HTMLエディタにはプレビュー機能があり、HTMLを記述しながら同時にプレビュー機能でWeb画面を確認できます。**微調整をする際もすぐに確認ができるので、非常に便利です。

### CSSやJavaScriptの記述に利用できる

最近のWebサイトの作成では、HTMLに加えて「CSS」が必須であり、さらに「JavaScript」も扱うケースが多くなっています。「CSS」はWebのデザインを作るための言語で、「JavaScript」はWebに動きを与えてくれる言語です。

HTMLエディタはCSSやJavaScriptにも対応していることが多いです。複数のプログラム言語を扱えるため、**HTMLエディタを扱えるようになると仕事の効率が一気に上がります。**

HTMLエディタは大別すると以下の2種類があります。それぞれメリット、デメリットがあるので環境に応じて使い分けると良いでしょう。

### インストールして利用するタイプ

**HTMLエディタのソフトをネット上からダウンロードし、インストールして使うタイプのエディタソフトです。**一旦インストールすれば、オフラインでも利用でき、しかもPC上で独立して動くため動作が軽いといったメリットがあります。

一方、インストールの手間が掛かる点と、作成したデータの管理を自分のパソコン上でしか行えないため共同作業に向かない点はデメリットです。

### オンラインで利用するタイプ

**ネットワークに接続したパソコンのWebブラウザ上で利用するHTMLエディタです。**インストールは不要でWeb上で管理でき、場所に縛られず利用できるため、リモートワークや共同作業では便利です。

その反面、ネットワークに依存するためネットワークの状況次第では使えない、動作が重くなるなどのデメリットがあります。

## HTMLエディタを選ぶ際のポイント

HTMLエディタは数多くリリースされており、それぞれ特徴が異なるため、自分に合ったエディタを見つけるのは簡単ではありません。

ここでは、数あるエディタの中から、自身に適したエディタを見つけるためのポイントについて説明をします。自分に合うエディタを見つけるための参考になれば幸いです。

### 自分の使っているOSに対応しているか

エディタを選ぶ際には、**自分が普段使っているパソコンのOSに対応したHTMLエディタか否かを確認する必要があります。**エディタの選定や検討でミスがないよう、自分のパソコンのOSや、OSのバージョンに合ったエディタかどうかをよく確認しましょう。

多くのHTMLエディタは外国製品であり、標準製品は英語での表記が一般的です。**英語に不安がある方は、日本語対応のエディタを選ぶのが無難です。**

英語版のHTMLエディタでも日本語化キットなどがあれば簡単に日本語化できますので、日本語化の可否については確認するようにしましょう。

それぞれのHTMLエディタには製品ごとに異なる標準機能、拡張機能があります。自身のスキルが上がってくると、追加機能が必要になる場合もあります。**標準機能や拡張機能の内容、ツールの有無なども確認しておいた方が良いでしょう。**

エディタは慣れるに従って使い勝手が変わっていきます。自分が求める機能が整っていると長く使えますので、よく比較検討してから選びましょう。

### 調べたい時にすぐに調べられるか

HTMLエディタは使い慣れるまでにさまざまな疑問や壁にぶつかります。そのような時、しっかりした解説サイトや情報共有の場があると早く解決できます。

調べたい時にすぐに調べられるのは、エディタ選択の際の重要な条件です。**サポートサイト、解説サイトの有無はしっかり確認しておきましょう。**

## 初心者におすすめしたいHTMLエディタ5選

ここからは、初心者から中級者まで幅広く利用されている人気のHTMLエディタを5つに絞って紹介します。基本的には無料で利用できるエディタを中心に紹介しますが、*一定期間利用すると有料になるものもありますので、予算に応じて検討しましょう。*

**「サクラエディタ」は、Windows向けの高機能でシンプルなHTMLエディタです。**日本人によって開発されたもので、日本語の会議室や情報共有の場もあります。また、GitHub上にあることから、開発に参加することもできます。

サクラエディタには、キーワードの強調・アウトライン解析・補完入力などの特徴的な機能があります。

▪タイプ：インストール
▪対応OS：Windows
▪料金：無料で使用できます。

【参考】：[サクラエディタ](https://sakura-editor.github.io/)

**「Visual Studio Code」は、マイクロソフトが2015年にリリースしたHTMLエディタです。**マイクロソフト製だけに安心感があります。

HTML以外にも、JavaScript・Python・PHP・Java・C#などの主要なプログラミング言語に対応可能で、プログラマーやエンジニアの強い味方となるでしょう。

▪タイプ：インストール
▪対応OS：Windows、Mac、Linux
▪料金：無料で使用できます。

【参考】：[Visual Studio Code](https://azure.microsoft.com/ja-jp/products/visual-studio-code)

**「Brackets」は、ブラウザの設計が簡単にできる軽量のテキストエディタです。**Webデザイナーやフロントエンドのデベロッパーのためにゼロから開発されたもので、「クイック編集機能」など各種便利機能が豊富に備わっています。

また、環境を問わず動作するため、どのOSでも使うことができます。2021年9月1日をもって開発元であるAdobe（アドビ）によるサポートは終了しましたが、現在はコミュニティによる開発が行われています。

【参考】：[Brackets](https://brackets.io/)

**「CotEditor」は、macOSのために作られたテキストエディタで、macOSのアプリケーションに合わせた振る舞いをします。**

また、日本で開発されたこともあり、エンコーディング判定や和英が混ざった文書、縦書き表示など、日本語特有の問題にも対応しています。

▪タイプ：インストール
▪対応OS：Mac
▪料金：無料で使用できます。

【参考】：[CotEditor](https://coteditor.com/)

**「Sublime Text」は豊富な拡張機能とカスタマイズの自由度の高さ、さらにその動作の軽さからエンジニアには人気が高いことで有名です。**主要なプログラミング言語にはほぼ対応しており、プログラマーの方は重宝するでしょう。

なお、日本語化も可能ですが、拡張機能の利用にはコマンドラインの利用が必要です。単純にHTML/CSSのみを記述しプレビューするというレベルでの使い方を求める方にはやや難しく感じるかもしれません。

▪タイプ：インストール
▪対応OS：Windows、Mac、Linux
▪料金：無料で使用できますが、登録から3年経過した後にバージョンアップを行うには、有料ライセンス購入が必要です。

【参考】：[Sublime Text](https://www.sublimetext.com/)

**「Livewave」は、リアルタイム (ライブ) プレビューを備えた HTMLエディタです。**記述したHTMLをプレビュー画面でリアルタイムに確認できるため、練習やテストなどに向いているでしょう。

また、ブラウザ上でコーディングできるため、ソフトウェアをインストールする必要がなく、気軽に利用できます。

▪タイプ：オンライン
▪料金：無料で使用できます。

 【参考】：[Liveweave](https://liveweave.com/)

**「Online HTML Editor」は、オンライン上でコーディングができるテキストエディタです。**他のエディタとは異なり、ドキュメント編集結果から、テキスト入力や画像の挿入、装飾などのHTMLソースを得ることができます。

そのため、ワープロ感覚で扱いやすく、初心者の方にもおすすめです。記述したHTMLをプレビュー画面でリアルタイムに確認することもできます。

【参考】：[Online HTML Editor](https://onlinehtmleditor.dev/)

## 自分好みのエディタを見つけて、快適なコーディングを実現しよう

この記事では、おすすめのHTMLエディタについてご紹介しました。仕事ができるエンジニアは必ずお気に入りのエディタを持っています。

良いエディタに出会うことが皆さんの活躍に大いに役立ちますので、当記事を参考に皆さんご自身にとって最適なエディタを見つけていただければ幸いです。ただし、*職場によっては自分に合ったエディタを使用できない可能性があることは留意しておくべきです。*

ルールが厳しい職場だと、エディタなどを自由にダウンロードすることができず、用意されているツールだけで開発を行うことも少なくありません。

HTML/CSSを学ぶと、多くの方は使い勝手の良いHTMLエディタが必要だと感じるようになります。ここでは、HTML/CSS初心者の方に向け、おすすめのHTMLエディタを5つ紹介していきます。自分に合うHTMLエディタを見つけてHTMLの達人を目指しましょう。

HTML/CSSを効率的・効果的に作成するためには、HTMLエディタを利用することが早道になる。

HTMLエディタにはオンライン・インストールタイプがあるが、状況に応じて使い分けるとよい。

HTMLエディタはさまざまなプログラム言語のコーディングに適したものがあり、エンジニアの武器として活用したい。

【2023年版】初心者向けのHTML編集ソフト(エディタ)おすすめ7選！

Notionとは、プロジェクト管理やタスク管理ができるツールです。**このNotionには拡張機能が公開されており、これらの拡張機能を活用することでより便利にNotionを使いこなせます。**

本記事では、そんなNotionの拡張機能の種類や特徴を紹介します。Notionを業務で利用している方は、ぜひ本記事を参考にしてください。

【参考】：[Notion 公式](https://www.notion.so/)

Notionとは？基本的な使い方やEvernoteとの違いを解説

【初心者向け】Notionの基本的な使い方を7ステップで分かりやすく解説！

## Notionの拡張機能を利用するメリット

**ここからは、Notionの拡張機能を利用するメリットを紹介します。**拡張機能を追加することで、具体的にどのようなメリットがあるのでしょうか。

拡張機能の中には、今開いているページのURLをNotionに保存してくれるものがあります。このような拡張機能を利用すれば、URLを手作業でコピー&ペーストする必要もありません。

*つまり、煩雑な作業の時間を削減できるため、仕事の効率化を目指せます。*Notionを普段利用しており、日々の単純作業を減らしたい方は、ぜひ拡張機能を追加しましょう。

人間が作業をすると、どうしてもミスをしてしまう可能性があります。*しかし、拡張機能を使えば手作業の工程が減りますので、結果的にミスが減るといえます。*

特に、複数人でNotionを利用している場合は、他の人のミスを指摘したり、指摘されたりすることがなくなりますのでノンストレスで作業できるでしょう。

*Notionの拡張機能は、デフォルトのNotionでは実現できない機能を提供しています。*例えば、Notionでは目次を表示する機能がありますが、目次を常に表示するにはNotionの拡張機能を追加する必要があります。

このように、一見地味な機能ではあるものの、痒い所に手が届くような機能が提供されています。Notionでの作業をより快適にしたい方は、ぜひ拡張機能を追加してみましょう。

**ここからは、Notionの拡張機能を紹介します。**拡張機能の種類によって特徴が異なりますので、気になるものがあれば利用してみましょう。

また、Notionの拡張機能を利用する際の注意点についても後述していますので、利用する際はぜひこちらも参考にしてください。

*Notion Web Clipperは、WebサイトのURLをNotionのワークスペースに追加します。*さらに、クリップしたページはオフラインでも読むことができるため、非常に便利な拡張機能です。

対応しているブラウザはChrome・Firefox・Safariで、モバイルにも対応しているようです。ちなみに下図はGoogle Chromeの拡張機能です。

Googleの拡張機能では、Chromeのウェブストアから拡張機能を検索し、赤枠の「Chromeに追加」ボタンを押すだけで追加できます。このように拡張機能の追加方法も簡単ですので、ぜひ利用しましょう。

~~【図】：Google Chrome ウェブストアでNotion Web Clipperのページを開く~~
【参考】：[Notion Web Clipper](https://chrome.google.com/webstore/detail/notion-web-clipper/knheggckgoiihginacbkhaalnibhilkk?hl=ja)

*Notion Boostは、複数の機能を持った拡張機能です。*例えば、常にアウトラインを表示する機能や、上へ戻るボタンを表示する機能を提供しています。

その他にも、痒い所に手が届くような便利機能が20個以上も用意されているので、Notionをより便利に使いたい方には特におすすめです。

~~【図】：Google Chrome ウェブストアでNotion Boostのページを開く~~
【参考】：[Notion Boost](https://chrome.google.com/webstore/detail/notion-boost/eciepnnimnjaojlkcpdpcgbfkpcagahd)

Notion Web Clipperと同様に、WebページをNotionにクリップすることができる機能です。さらに、*Save to Notionでは、WebサイトをNotionにブックマークすることも可能です。*

その他にもフォームの作成や、Webページを閲覧している最中に、Notionのテキストの一部をハイライトする機能も用意されています。

Webページから調べ物をして、Notionに記事をまとめる作業などで役に立ちそうな機能があります。そのためNotionで調べ物をまとめている方や、記事を執筆する方におすすめの拡張機能です。

~~【図】：Google Chrome ウェブストアでSave to Notionのページを開く~~
【参考】：[Save to Notion](https://chrome.google.com/webstore/detail/save-to-notion/ldmmifpegigmeammaeckplhnjbbpccmm)

*Notion Xは、サイドバー機能やダークモードへの変更など、さまざまな機能をまとめた拡張機能です。*また、ショートカットが用意されているので、簡単に機能を利用できるのも魅力の1つです。

Notionでの作業をより便利にしたい方には、ぜひ追加してほしい拡張機能です。

~~【図】：Google Chrome ウェブストアでNotion Xのページを開く~~
【参考】：[Notion X](https://chrome.google.com/webstore/detail/notionx-for-notion/ojnlojnakahpmkbpigmjhcgibccnidpk)

*Notion-Enhancerはカラーテーマやサイドバーの追加、データベースのカスタマイズなどさまざまな機能をまとめた拡張機能です。*

この拡張機能の大きな特徴は、GitHubからNotion-Enhancerの機能自体を追加できる点です。開発が得意な方は、このNotion-Enhancerの拡張機能を充実させることで、さらに便利な機能にすることもできます。

参考サイトにGitHubのページも紹介していますので、気になる方はこちらもぜひ参照してください。

~~【図】：Google Chrome ウェブストアでNotion-Enhancerのページを開く~~
【参考】：[Notion-Enhancer](https://chrome.google.com/webstore/detail/notion-enhancer/dndcmiicjbkfcbpjincpefjkagflbbnl
【参考】：[Notion-EnhancerのGitHub](https://notion-enhancer.github.io/)

*Notion Date Fillerは、データベースに日付を自動入力してくれる機能です。*開始日や終了日も設定でき、ボタン1つでデータベースに日付を入力してくれます。

一見地味な機能に見えますが、わざわざ日付を入力すると作業時間もかかってしまいます。Notion Date Fillerを追加すれば、日付を入力する時間や手間を削減できるでしょう。

~~【図】：Google Chrome ウェブストアでNotion Date Fillerのページを開く~~
【参考】：[Notion Date Filler](https://chrome.google.com/webstore/detail/notion-date-filler/fejlopadadjhidmmmggdkbipcpgedgjp)

## Notionの拡張機能を利用する時の注意点

**Notionの拡張機能を利用する時には、いくつか気をつけるべき点があります。**拡張機能を追加したのに上手く作動しない方や、疑問点がある方はこちらも参考にしてください。

### 拡張機能が追加できたか分からない

拡張機能を追加したものの、どこから利用すればいいのか分からない方もいるのではないでしょうか。

例えばGoogleChromeの拡張機能では、その他アイコンをクリックし「拡張機能」を選択します。さらに「拡張機能を管理」を選択すると、追加した拡張機能を確認することができます。

*追加した拡張機能を確認したい場合は、管理ページにアクセスしてみましょう。*

~~【図】：拡張機能を確認する~~

拡張機能が上手く使えない場合は、インターネットの通信状態が悪いことや、バージョンに問題があると考えられます。

*まずは、インターネットの通信状態を確認してください。*VPNやWi-Fiなど、利用しているインターネットに問題がない場合は、バージョンの確認をしてみましょう。

具体的には、OSやブラウザ、Notionのアプリケーションのバージョンを確認しましょう。特にブラウザのバージョンアップをしていない場合、拡張機能が上手く機能しない可能性があります。さらに上記の手法で問題が解決しなければ、端末を再起動してみましょう。

拡張機能が上手く作動しない原因はいくつか考えられますので、問題を切り分けながら解消してください。

## Notionの拡張機能を利用して業務効率化を目指そう

今回の記事では、Notionの拡張機能を紹介しました。さまざまな拡張機能がありますので、自分の日々の作業に役に立ちそうな機能を追加してみましょう。

**Notionの拡張機能を上手く活用すれば、Notionでの業務をより効率的に行うことができます。**また、拡張機能の多くは無料で利用できますので、ぜひ本記事を参考にしてNotionの拡張機能を活用しましょう。

Notionでできること５選！概要や基本操作も分かりやすく解説！

Notionはプロジェクト管理や業務で使用している人も多いツールですが、そんなNotionには、拡張機能があることをご存じでしょうか。本記事では、現在公開されているさまざまな拡張機能とその特徴を紹介します。Notionを普段使う方は、ぜひ参考にしてください。

Notionの拡張機能にはさまざまな種類があります

拡張機能を利用すると、作業時間の削減やミスを減らすことができます

Notionの拡張機能を利用できない場合、通信状態やブラウザなどのバージョンを確認しましょう

Notionの拡張機能6選！作業効率がアップするプラグイン【Chromeから簡単追加】

<center>[IT・Webエンジニアの転職なら…<br>*マイナビIT AGENT*へ！](https://mynavi-agent.jp/it/?utm_source=and-engineer&utm_medium=content-text&utm_campaign=acv16_1)</center>

*<center>[【無料転職サポート申し込みはコチラ】](https://mynavi-agent.jp/it/lp/029.html?utm_source=and-engineer&utm_medium=content-text&utm_campaign=acv16_2)</center>*

JSONファイルとは*JSONフォーマット*で記述された、**テキスト形式のファイル**を指します。JSONファイルはファイルを使ったデータ交換に利用されています。ファイルの拡張子は*.json*で、RFCおよびIETFの標準規格となっています。
参考：[IETF STD90 RFC8259 JSON](https://datatracker.ietf.org/doc/html/rfc8259)

JSONとは*JavaScript Object Notation*の略で、*ジェイソン*と呼んでいます。JSONはJavaScriptで定義されている**オブジェクト表記法の1つ**で、テキスト形式で表記されるので、簡単に*データ交換*ができます。そのためJavaScriptに限らず、*主要なプログラム言語から利用されています*。

JSONの表記形式はとても*シンプル*で、以下の規則に従います。

**表記形式：基本規則**
　{ “名前”: 値 }
　{ “名前”: 値 , “名前”: 値 }
　{
　　“名前”: 値 ,
　　“名前”: 値 ,
　　“名前”: 値
　}

・**名前と値のペア**
　データは名前と値のペアで記述します。
　名前と文字列の値はそれぞれ”（ダブルクォーテーション）で括ります。
　’（シングルクォーテーション）は使用できません。
・**｛｝（波カッコ）と:（コロン）の利用**
　データの最初と最後は｛｝（波カッコ）で括ります。
　名前と値の間に:（コロン）を入れます。
・**名前と値のペアの間に,（カンマ）を利用**
　名前と値のペアが複数ある場合は、名前と値のペアの間に,（カンマ）を入れます。
・**配列は[]（カッコ角カッコ）で、ネストは{}（波カッコ）で記述**
　値を入れ子とする場合は配列表記とネスト表記が可能です。
参考：[JSONの紹介](https://www.json.org/json-ja.html)

以下の特殊文字は、エスケープ文字として*\\（バックスラッシュ）*を先に入力し使用します。

・**\\”（ダブルクォーテーション）**
・**\\\\（バックスラッシュ）**
・**\\/（スラッシュ）**
・**\\b**
　バックスペースを意味します。
・**\\r**
　フォームフィードを意味します。
・**\\n**
　ラインフィードを意味します。
・**\\r**
　キャリッジリターンを意味します。
・**\\t**
　タブを意味します。
・**\\uXXXX**
　16進数表記です。

JSONは以下の*データ型*に対応しています。

・**文字列**
　”（ダブルクォーテーション）で括った文字列で、特殊文字は\\（バックスラッシュ）を先に付けます。
・**数値**
　0から9の数字、符号、小数点、指数記号（Eとe）が使えます。
　8進数と16進数は使えません。
・**true、false**
　論理値で全て小文字で表記します。
・**null**
　ヌル値で全て小文字で表記します。
・**オブジェクト**
　JSONオブジェクトを{}（波カッコ）で入れ子にすることができます。
・**配列**
　[]（角カッコ）で括ることで、連続したデータ領域が割り当てられます。

これまで学んだJSON表記形式を使ってデータ構造を記述してみます。以下の例は、クラスの学生情報とテスト成績のJSONデータです。名前と値の組み合わせは、実際の使用データに基づいて定義していきます。

*使用例：*クラスの学生情報とテスト成績のJSONデータ
　{
　　”test-data”: [
　　{
　　　“class-id”:10,
　　　“name”: “foo”,
　　　“test-result”:[91, 78, 87],
　　　“passed”:true
　　},
　　{
　　　“class-id”:11,
　　　“name”: “bar”,
　　　“test-result”:[45, null, 59],
　　　“passed”:false
　　},
　　{
　　　“class-id”:12,
　　　“name”: “baz”,
　　　“test-result”:[99, 96, 97],
　　　“passed”:true
　　},
　　　　　：
　　]
　}

JSONはテキスト形式のファイルですから、*WindowsのNotepad*・*MacOSのTextEdit*、*LinuxのVim*等のテキストエディタでファイルの作成や修正が可能です。しかしながら高度なJSONの編集機能が必要でしたら、JSONに対応する作成ツール・エディタを使用します。

*JSONエディタ*は、ビューアとしてデータ（名前・値）の確認さらに編集が可能です。以下が*主要なJSONエディタ*です。

・**Visual Studio Code（VSCode）**
　統合開発環境（IDE）として有名なソフトウェアで、JSONに対応します。
　IDEのため、構文チェックや検索・編集が容易です。
　Windows・MacOS・Linuxで動作し、C++やPython・PHP等多数のプログラム言語に対応します。
　参考：[Microsoft Visual Studio Code](https://azure.microsoft.com/ja-jp/products/visual-studio-code/)

・**Windows用JSONエディタ**
　Notepad++はNotepadエディタをプログラム言語に対応させたような操作性を持つ、フリーソフトウェアのエディタです。
　80種類ほどのプログラム言語に対応します。
　参考：[Notepad++](https://notepad-plus-plus.org/)
　JSONeditはZipファイルを展開するだけで使用できるJSONエディタです。
　CSVファイルをインポートする機能があります。Unicodeサポートがされていないことが欠点です。
　参考：JSONedit(https://tomeko.net/software/JSONedit/)

・**MacOS用JSONエディタ**
　Jayson - Visual JSON Editorは有償となってしまいますが、グラフィカルなエディタです。
　参考：[Jayson - Visual JSON Editor](https://apps.apple.com/jp/app/jayson-visual-json-editor/id1189824719)

上記比べてみるとVisual Studio Codeは無償（無料）利用できますし、Windows・MacOS・Linuxで動作しますのでおすすめのソフトウェアです。

JSON形式のファイルの作り方は、各プログラム言語の用法に合わせて*APIを使用*します。以下はJSONに対応する*代表的なプログラム言語*です。JSON形式でファイルが出力されます。

・**Python**
　PythonではJSON APIを用い、”import json”でライブラリをインポートします。
　次にjson.dumps()でJSONデータ形式に変換し、writelines()でファイルに出力します。

・**Java**
　Javaでは、JSONObjectクラスが利用できます。
　importでnet.sf.json.JSONObject、またはorg.json.JSONObjectのライブラリをインポートします。
　次にデータをJSONObject.put()でJSONデータ形式に変換し、JSONObject.write()でファイルに出力します。

・**PHP**
　オブジェクトをjson_encode()でJSONデータ形式に変換し、fwrite()でファイルに出力します。

・**JavaScript**
　オブジェクトをJSON.stringify()でJSONデータ形式に変換し、writeFileSync()でファイルに出力します。

### JSONファイルの読み込み方法

JSON形式のファイルの読み込みも作成時と同様に、各*プログラム言語の用法*に合わせて*APIを使用*します。JSON形式のファイルからデータを読み込み、変換することができます。

・**Python**
　作成時同様jsonライブラリをimportします。
　次にreadline()でファイルからJSONデータを読み込み、json.loads()でオブジェクトを復元します。

・**Java**
　作成時同様、JSONObjectクラスのライブラリをインポートします。
　次にreadLine()でファイルからJSONデータを読み込み、JSONObject.get()でオブジェクトを復元します。

・**PHP**
　fread()やfgets()でファイルからJSONデータを読み込み、json_decode()でオブジェクトを復元します。

・**JavaScript**
　readFileSync()やreadFile()でファイルからJSONデータを読み込み、JSON.parse()でオブジェクトを復元します。

JSON形式のファイルの削除はOSの**ファイル削除の操作**で削除します。プログラム言語内でも作成したファイルを*APIで削除*することができますし、プログラム内で*使用中のデータ*も言語の*演算子で削除*します。

また、画像共有サイトの*Googleフォト*では一括ダウンロードすると*.jsonファイルが付属*しています。このファイルは*写真画像の更新日時のデータ*が入っていますから、写真をダウンロードして整理する際に利用できます。勝手にファイルがダウンロードされたと慌てて削除せずに、*JSONエディタで開いてみる*と良いでしょう。

## JSONファイルを理解したら、データ交換に利用しましょう

JSONファイルは*構造がシンプル*です。配列と入れ子が理解できればJavaScriptをはじめとする多くのプログラム言語で利用できます。*データ交換を簡単に行う*ことができますので、多くのシステムで利用されています。*JSONファイルを理解*したら、**実際のシステムで利用する**ことをおすすめします。

JSONファイルとは、JSONフォーマットで記述されたデータ交換用ファイルです。JSONファイルはテキスト形式のファイルで、主要なプログラム言語から利用されています。ここではその基本構造からファイルの読み書き方法まで解説していきます。

JSONファイルとは、JSONフォーマットで記述されたテキスト形式のファイルを指します

JSONはJavaScriptで定義されているオブジェクト表記法の1つです

JSONファイルは、主要なプログラム言語から利用されておりデータ交換に用いられます

JSONファイルとは？基本構造からファイルの作り方、読み書き方法まで解説

*2022年11月のChatGPTプロトタイプの登場以来、生成系AIシステムの活用が進んでいます。*ここでは、AIチャットシステムであるOpenAIの「ChatGPT」とMicrosoftの「新しいBing」を比較し、違いを確認していきます。

*ChatGPTとは、OpenAIが公開したチャットシステムです。*2022年11月にプロトタイプが公開されてからあっという間に、アクティブユーザ数が1億人を突破しました。自然言語に対応しますので、英語でも日本語でも言語から判断し適切な回答が得られます。

2023年3月15日には最新版のGPT-4がリリースされ、活用の場面が急増しています。

【参考】：[OpenAI](https://openai.com/)
【参考】：[OpenAI ChatGPT](https://openai.com/blog/chatgpt/)
【参考】：[ChatGPT — Release Notes](https://help.openai.com/en/articles/6825453-chatgpt-release-notes)

ChatGPTとは？今話題のAIチャットボットの概要や仕組みを解説！

*Bingは、マイクロソフトが提供する検索エンジンです。*マイクロソフト社は以前からOpenAIに投資を行っています。そして2023年2月7日、AIベースの検索エンジンを発表しました。それは「新しいBing」と名付けられ、3月には検索用にカスタマイズしたGPT-4が搭載されていることを明かしています。

【参考】：[Microsoft Bing](https://www.bing.com/)
【参考】：[Bing: 新しいBingの紹介](https://www.bing.com/new?form=MY028Z&OCID=MY028Z)
【参考】：[Microsoft: 新しいBingの紹介](https://www.microsoft.com/ja-jp/bing?form=MA13FJ)

新しいBingのリリース！AIを活用した検索サービスの登場

*AIチャットとは、ユーザの問いかけに文章で応えてくれるAIベースのチャットシステムです。*ここで用いられるAIシステムは、自然言語処理が可能ですので、日本語で問いかけると日本語で回答してくれます。生成系AIとも呼ばれており、学習済みのデータから高度な文章を作成することも可能です。

GPTとは、OpenAIが開発した大規模言語モデルで構築した生成システムを指します。2022年11月30日にリリースしたChatGPTプロトタイプでは、GPT-3ファミリーのGPT-3.5を用いていました。

GPT-4は、その最新版です。*GPT-4は2023年3月14日にリリースされ、従来よりも高速なテキスト処理が可能で細かい指示に対応することができます。*そのため、より人間に近い回答を生成することが可能になりました。

【参考】：[OpenAI](https://openai.com/)
【参考】：[OpenAI: Introducing ChatGPT](https://openai.com/blog/chatgpt)
【参考】：[ChatGPT — Release Notes](https://help.openai.com/en/articles/6825453-chatgpt-release-notes)

ChatGPT Plus（有料版）とは？無料版との違いやGPT-4の機能も解説！

ChatGPTは、GPT-3.5については無料で提供します。最新版のGPT-4を利用するには、現状では月額20USドルのChatGPT Plusに登録するか、APIウェイティングリストに登録する必要があります。ChatGPT APIも有償のサービスですが、無料利用枠がトライアルとして設定されています。

新しいBingはGPT-4をエンジンに搭載しています。追加料金なしでサインインにより利用することができます。*両社のプランは使用料金を直接利用者に求めるのか、広告収入から得るのかで料金回収モデルに違いがみられます。*

【参考】：[OpenAI GPT-4](https://openai.com/product/gpt-4)
【参考】：[GPT-4 API waitlist](https://openai.com/waitlist/gpt-4-api)
【参考】：[Introducing ChatGPT Plus](https://openai.com/blog/chatgpt-plus)
【参考】：[OpenAI Pricing](https://openai.com/pricing)
【参考】：[Bing 新しいBing](https://www.bing.com/new?form=MY028Z&OCID=MY028Z)

### 使用できるブラウザやアプリ

*ChatGPTは、FirefoxやChrome・Edgeなどお使いの任意のブラウザで利用することができます。*新しいBingはMicrosoft Edgeならびにモバイル版Microsoft Edgeで利用可能です。BingはEdgeと密に連携するために、このような違いがみられます。

IEモードとは？IE向けサイトでも見られるEdgeの機能を解説します！

## ChatGPTとBingで実際の回答を比較する

*ChatGPTとBingでは、共通の部分と独自性がある部分が見られます。*ここでは、実際に無料版のChatGPTとBingで回答を比較していきます。図解できるものについては、左をChatGPT、右をBingで表示し、違いを比較していきます。

*利用するには、ChatGPTへのログイン、あるいはBingへのサインインが必要です。*「新しい Bing」は以前は、順番待ちリストへの登録が必要でしたが、現在はサインインのみで利用できるようになっています。

利用するには次の図のように、それぞれのサイトにログイン・サインインし、チャットを開始することができます（①②③④）。

~~　【図】：AIチャットを開始する~~

【参考】：[OpenAI ChatGPT](https://chat.openai.com/)
【参考】：[Bing 新しいBing](https://www.bing.com/new?form=MY028Z&OCID=MY028Z)

*Bingでは、会話のスタイルが3通りあります。*次の図をご覧ください。

バランススタイルでは、中立性を保ちながら生成AIを活用します（①）。創造的スタイルでは、生成AIを最大限活用します（②）。厳密スタイルでは、出典情報に基づき回答を導きます（③）。

~~　【図】：Bingの会話のスタイル~~

バランススタイルは「青」、創造的スタイルは「赤」、厳密なスタイルは「緑」でそれぞれ色分け表示されます。ChatGPTの場合は単一の回答となりますので、この機能は用途に応じて使い分け可能ですので利用価値が高いでしょう。

基礎知識の記事（2ページ目）