JavaScript

Chromeの開発者ツールを使ってJavaScriptのデバッグを行う方法を現役エンジニアが解説【初心者向け】

初心者向けにChromeの開発者ツールを使ってJavaScriptのデバッグを行う方法について解説しています。WebブラウザのChromeにはデベロッパーツールという開発者向けの機能が実装されています。デベロッパーツールを使ったJavaScriptのデバッグの手順を覚えましょう。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社　調査期間：2021年8月12日～8月16日　調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名　調査手法：インターネット調査

Chromeの開発者ツールを使ってJavaScriptのデバッグを行う方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。

そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。

なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。

今回は、JavaScriptに関する内容だね！

どういう内容でしょうか？

Chromeの開発者ツールを使ってJavaScriptのデバッグを行う方法について詳しく説明していくね！

お願いします！

Chromeとは

Chrome とは Google 社が開発したフリーソフトウェアのブラウザです。WindowsやMac、Linux、Android、 iOS など多くのOSで提供されています。全てのWebブラウザにおける Chrome のシェアは約64%と多くを占めています。

参考：statcounter – Desktop Browser Market Share Worldwide

[PR] フロントエンドで副業する学習方法を動画で公開中

Chromeの開発者ツールでできること

Chrome には「デベロッパーツール」と呼ばれる開発者ツールが添付されています。デベロッパーツールは Chrome の「その他のツール」メニューから起動できます。

デベロッパーツールは複数のタブで構成されています。初心者は以下の4つのタブを利用することが多いでしょう。

Elements ：Webページの要素に対応するHTMLやCSSの確認。動的なHTMLやCSSの変更と結果の確認
Console ：各種ログの閲覧、JavaScript コードの実行
Sources ：現在のWebページに関連して読み込まれているファイルと内容の確認
Network ：Webページと関連ファイルが読み込まれる速度の確認

JavaScriptのデバッグを行う方法

デベロッパーツールの主な使い方の1つがデバッグです。ここでは JavaScript のデバッグを行う代表的な方法を2つご紹介します。

console.log() 関数を使用する方法

console.log() 関数は Console にログを出力する関数です。この関数を使用することで、変数の値やプログラムが実行されていることなどを確認することができます。例で確認してみましょう。

index.html

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="utf-8">
  <title>sample</title>
</head>

<body>
  test

<script language="javascript" type="text/javascript">
  window.onload = () => {
    console.log('ページが読み込まれました');
  }
</script>
</body>

</html>

実行結果は以下のとおりです。デベロッパーツールの Console に結果が出力され、プログラムが実行されたことが確認できました。

ブレークポイントを使用する方法

ブレークポイントとは、プログラムの実行を一時停止する方法です。一時停止する場所のことをブレークポイントと呼びます。まずはデベロッパーツールの Sources タブを開き、行番号の上をクリックしましょう。以下のように色が変わります。

次にブラウザのリロードボタンを押してWebページを再度読み込んでみましょう。上記で設定したブレークポイントでプログラムの実行が一時停止することが分かります。

この状態で変数の値を確認したり、 Console で JavaScript のプログラムを実行したりすることが可能です。プログラムを再開するには画面上部中央の Resume ボタンを押します。

まとめ

今回の記事では Chrome の開発者ツールを使って JavaScript のデバッグを学習しました。

監修してくれたメンター

太田和樹（おおたかずき）

ITベンチャー企業のPM兼エンジニア

普段は主に、Web系アプリケーション開発のプロジェクトマネージャーとプログラミング講師を行っている。守備範囲はフロントエンド、モバイル、サーバサイド、データサイエンティストと幅広い。その幅広い知見を生かして、複数の領域を組み合わせた新しい提案をするのが得意。

開発実績：画像認識技術を活用した駐車場混雑状況把握（実証実験）、音声認識を活用したヘルプデスク支援システム、Pepperを遠隔操作するアプリの開発、大規模基幹系システムの開発・導入マネジメント。

地方在住。仕事のほとんどをリモートオフィスで行う。通勤で消耗する代わりに趣味のDIYや家庭菜園、家族との時間を楽しんでいる。

内容分かりやすくて良かったです！

ゆかりちゃんも分からないことがあったら質問してね！

分かりました。ありがとうございます！

TechAcademyでは、初心者でもJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。

JavaScriptでPOST送信する方法を現役エンジニアが解説【初心者向け】

JavaScriptでPOST送信する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 Java...

JavaScript

JavaScriptで要素のidを設定する方法を現役エンジニアが解説【初心者向け】

JavaScriptで要素のidを設定する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...

JavaScript

JavaScriptで配列を分割する方法を現役エンジニアが解説【初心者向け】

JavaScriptで配列を分割する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。そ...

JavaScript

JavaScriptでkeyupイベントを取得する方法を現役エンジニアが解説【初心者向け】

JavaScriptでkeyupイベントを取得する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します...

JavaScript

JavaScriptのfor-in文での要素の取り出し順番について現役エンジニアが解説【初心者向け】

JavaScriptのfor-in文での要素の取り出し順番について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説しま...

JavaScript

JavaScriptの配列(array)要素をcountする方法について現役エンジニアが解説【初心者向け】

JavaScriptの配列(array)要素をcountする方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに...

JavaScript

あわせてよく読まれている記事

JavaScriptでオセロゲームを作成する方法を現役エンジニアが解説【初心者向け】

JavaScriptでオセロゲームを作成する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。実際のコードをもとに解説していきますので、理解を深めていきましょう。目次ChromeとはChromeの開発者ツールでできることJavaScriptのデバッグを行う方法まとめ監修してくれたメンターそもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。田島悠介今回は、JavaScriptに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介 JavaScriptでオセロゲームを作成する方法について詳しく説明していくね！大石ゆかりえっ？オセロゲームを作るなんて、難しそうですね、、、田島悠介大丈夫！1つ1つの処理を丁寧に解説するから、一緒に頑張ろう。大石ゆかりはい！よろしくお願いします！はじめに対象読者本記事は、JavaScriptを学習中であり、変数や関数などひととおりの基礎知識を学習した初心者の方向けに書いています。本記事が難しすぎると感じた場合や、JavaScriptの基礎を学習してから挑戦したい場合には、以下で紹介しているサイトなどを用いて学習してみましょう！入門向けのJavaScriptを学習できるサイト本記事の目的本記事の目的は、JavaScriptを用いたオセロゲームの実装を通して、以下のようなスキルを習得・向上させることです。設計から実装までの、エンジニアの思考プロセスを体験するゲームロジックに基づいたプログラム実装を通して、論理的思考能力を鍛えるオセロゲームの実現に必要な様々な処理を学び、JavaScriptという言語の仕様をより深く理解する上記の目的を達成するために、本記事は読者のみなさんが実際に手を動かしながら学べるハンズオン形式をとっています。解説に沿ってコードを書きながら、プログラミングに親しんでいきましょう！注意点本記事では、オセロゲームを0から実装するために必要な解説のすべてを記載しているため、記事の分量が多くなっています。一気に最後まで進めようとせずに、ご自身のペースで学習を進めることを推奨します。本記事では章ごとに所要時間の目安を記載しているので、学習の区切りを決める参考にしてください。オセロゲームのルールに基づいて設計をしよう 🕛目安時間：1時間ゲームに限らず、いかなる実装においても設計は非常に重要です。機能要件を満たしつつも、できるだけシンプルでメンテナンスしやすい設計を考えるのもエンジニアの醍醐味の1つです。「その設計、自分ならどうするかな？」ということを考えながら読み進めてみてください。オセロゲームのルールを確認しようオセロゲームを実装する上での機能要件は、一言でいうと「オセロゲームのルールに従って盤面の状態が変えられる」ということです。まずは前提条件となるオセロゲームのルールを確認していきます。オセロゲームのルール盤は8×8マスを利用する初期状態で真ん中の4マスに白黒の石を交互に配置する先攻を黒とし、黒⇨白⇨黒…の順番で石を置いていく石を置ける場所は、下記の条件を満たしている置くマスに他の石がないこと置くマスの上下左右、斜め1マスの場所に相手の石があること置いた石、相手の石があった方向の延長上に自身の石があること石を置ける条件を満たせない場合は、パスをして相手の番になるすべてのマスに石が置かれた時点でゲーム終了（「空きがあるが、白黒どちらも置けない」状況は今回は考えないことにする）ゲーム終了時点で石の数が多い方が勝ちとなる以上がオセロゲームのルール概要です。ルール以外の要件を定めようゲームのルールのほか、今回の実装では以下の条件を適用することとします。自動でパスする機能は実装せず、「パス」ボタンを設置する「現在どちらの手番であるか」を表示するゲーム終了後、白黒それぞれの石の数と勝敗を表示するゲームの初期化機能は実装しない石が裏返るなどのアニメーションは実装しない CPUとの対戦機能は実装しない jQueryなどのフレームワークは使用しない画像は用いないそれでは、要件を確認したところで実際の設計に移りましょう。要件に沿って実装設計をしてみよう同じルールや条件でも、それをどのように実装に落とし込むかはエンジニア次第です。実装設計では、いかに無駄なくすべての要件を満たした実装ができるかを考え尽くします。それでは、紙やプレゼンスライドなどに、大まかな処理の流れを考えて書いてみてください。想定されるケースを洗い出し、そのケースに応じてどう処理を分岐するかを矢印で表してみましょう。本記事の執筆者は、以下のように流れを作成しました。上図のように場合分けをしつつ、プログラムのフローを書き出すことで、コードに落とし込む際に整理がしやすくなります。もちろん上記のフロー図が唯一の正解ということではなく、他にもいろいろなパターンの表現方法が考えられます。想定されるケース・条件を網羅し、かつ無駄のない流れで設計できると、「良いフロー図」と呼ぶことができます。本セクションは以上です。休憩・復習などをして、ご自身のペースで次のセクションへ進んでください。 [PR] フロントエンドで副業する学習方法を動画で公開中開発環境を整えよう 🕛目安時間：30分今回の開発に必要な環境は以下の通りです。コードエディタ（図解ではVisual Studio Codeを使用します） Webブラウザ（Google Chrome推奨）コードエディタを用意しようコードエディタは普段使い慣れているもので構いませんが、解説に用いるVisual Studio Codeを導入したい方は、以下の記事を参考にセットアップしてください。 Visual Studio Code（VSCode）とは？インストールや使い方も現役エンジニアが解説 Webブラウザの環境を整備しよう主要なWebブラウザには、コードの構造を確認したり、エラーを発見したりするための開発者用ツールが備えられています。本記事では、実務現場の多くで使われているGoogle Chromeを用いて開発を進めていきます。開発者ツールの使い方をまだ学習していない方は、次のセクションに進む前に以下の記事に目を通しておいてください。 Chromeの開発者ツールを使ってJavaScriptのデバッグを行う方法を現役エンジニアが解説【初心者向け】盤面と石をブラウザ上に表示しよう 🕛目安時間：1時間30分このセクションでは、オセロゲームに必要な盤および石を表示するための実装を行います。本格的にHTML / CSS / JavaScriptのコードが登場するので、要点を1つ1つ理解しながらコーディングをしていきましょう。必要なフォルダとファイルを作成しようまずはプロジェクトのルートとなるフォルダを1つ、PCの任意の場所に作成してください。（例ではオセロゲームの一般的な英語名であるreversiというフォルダ名にしました）フォルダ内には、以下の3つのファイルを作成してください。 index.html style.css main.js 下図のような構成にできていればOKです。 HTMLをコーディングしよういよいよコーディング作業に入ります！今回はサンプルコードに従って、index.htmlの中身を記述してみましょう。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>オセロゲーム</title> <link rel="stylesheet" href="style.css"> </head> <body>  <div id="stage" class="stage"></div>  <div id="square-template" class="square"> <div class="stone"></div>

JavaScript

ローカルのブラウザでJavaScriptが動かない時の主な原因を現役エンジニアが解説【初心者向け】

ローカルのブラウザでJavaScriptが動かない時の主な原因について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。また、入門向けのJavaScriptを学習できるサイトも紹介しているので、合わせてご覧ください。目次ChromeとはChromeの開発者ツールでできることJavaScriptのデバッグを行う方法まとめ監修してくれたメンターそもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。田島悠介今回は、JavaScriptに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介ローカルのブラウザでJavaScriptが動かない時の主な原因について詳しく説明していくね！大石ゆかりお願いします！ローカルのブラウザでJavaScriptが動かない時の主な原因（確認すべきこと）１．JavaScriptがブラウザで無効になっていないか Chromeなどのブラウザを利用する場合、初期状態でJavaScriptは有効に動作します。もし、何かの理由で無効にする設定をしていたら、JavaScriptは動作しません。ブラウザの設定画面から、JavaScriptを選択して有効にすると良いです。２．ブラウザのバージョンを確認する基本的にブラウザのバージョンは、最新バージョンにしておけば良いです。しかし、ブラウザのバージョンによっては、JavaScriptの特定関数が動作しないことがあります。業務利用において特定のJavaScriptの関数を利用する必要がある場合、該当プログラムが動作するブラウザのバージョンを利用すると良いです。３．外部ライブラリのインストールを確認 JavaScriptは動作するが、JavaScriptで利用している外部ライブラリが正しく設定されていないと、該当プログラムが動作しません。外部ライブラリをクラウド上から読み込むのではなく、自分のPCに用意する必要がある場合は、パスの設定を確認する必要があります。パスとは、読み込み元のプログラムが、読み込み先のライブラリの位置を正しく理解するための住所のようなものです。ライブラリの正しい住所を、読み込み元プログラムに設定すると良いです。４．JavaScriptのエラーを確認 Chromeのデベロッパーツールを使って、エラーメッセージを確認しましょう。５．コードに全角が入っていないか確認プログラムのコードに全角スペースが入っている場合はうまく動作しません。特に、HTMLに全角スペースが入っている場合は、エラーメッセージでも見つからないことが多いため、HTMLに関してはコード内検索処理をすると良いです。特にInternetExplorerで動かない時の主な原因（確認すべきこと） 2022 年 6 月 16 日までが Microsoft 社の InternetExplorerのサポート期間です。サポート期間が終了していても、いろいろな方法でInternetExplorerを利用する方はいらっしゃると思います。 InternetExplorerを利用してJavaScriptのアプリケーションを動作させたい場合は注意が必要です。１．利用できない機能 InternetExplorerでは利用できない機能や関数は多いです。 InternetExplorerではclass構文やfind()メソッドやアロー関数など、利用できない機能がたくさんあります。 Chromeで開発確認していて、InternetExplorerだけ動かない場合などは、利用している機能がInternetExplorerに対応してるか確認しましょう。 [PR] フロントエンドで副業する学習方法を動画で公開中JavaScriptが動かない時の解決方法ここでは、JavaScriptが動かない時の解決方法を解説します。１．ブラウザの設定でJavaScriptを有効にする Chromeの場合は、次の手順で操作します。右上の●が3つ表示されているアイコンをクリック設定をクリック上部検索フォームにJavaScriptと入力サイトの設定部分に黄色いポップアップが表示されるのでクリックサイトがJavaScriptを使用できるようにするを選択すると、JavaScriptを利用できます。２．バージョンもブラウザの設定を確認右上の●が3つ表示されているアイコンをクリックヘルプをクリック Google Chromeについてをクリック最新バージョンをインストールする必要があれば、その旨が表示されるのでインストールをクリックします。最新バージョンであれば、その旨が表示されるので大丈夫です。３．jQueryのバージョンを確認する利用しているjQueryのバージョンを、利用したいアプリケーションで指定されているものと統一する必要がある場合、jQueryのバージョンを確認します。デベロッパーツールを開いて、コンソールに「$.fn.jquery」を入力すると、該当アプリケーションで利用しているjQueryのバージョンを確認できます。４．Chromeのデベロッパーツールは下記の方法で起動する Windowsの場合F12キー Macの場合はCommand＋Option＋Iキー console画面でエラーが確認できますので、エラー内容を調べて対応します。 ●変数や●関数が未定義の場合は、「● is not defined」という表示がデベロッパーツールで表示されます。 ●ファイルが存在しない場合は、「● is not found」という表示がデベロッパーツールで表示されます。 JavaScriptでconsole.logを使ったデバッグのやり方を参考にしていただくと良いですよ。５．全角スペースを見つける方法エディタでソースコードを開いて、Ctrl+Fを押すと検索フォームが表示されます。検索フォームに1回だけ全角スペースを入力すると、全角スペースの位置がわかります。次の画像はcloud9というエディタを利用しています。 13行目に水色部分が見えますが、これが全角スペースを意味しています。全角スペースは半角スペースで修正すると良いです。まとめ今回はJavaScriptが動作しない場合の対応方法について解説しました。最新のChromeを利用することが大事でした。個別の環境やアプリケーションで動作しない場合は、デベロッパーツールのエラーなどを確認する必要がありました。大石ゆかり内容が分かりやすくて良かったです！田島悠介ゆかりちゃんも分からないことがあったら質問してね！大石ゆかり分かりました。ありがとうございます！ JavaScriptを学習中の方へこれで解説は終了です、お疲れさまでした。つまずかず「効率的に」学びたい副業や転職後の「現場で使える」知識やスキルを身につけたいプログラミングを学習していて、このように思ったことはありませんか？テックアカデミーのフロントエンドコースでは、第一線で活躍する「プロのエンジニア」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、JavaScript・jQueryを使ったWebサービス開発を学べます。まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役エンジニアから教わること」を実感してみてください。時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！

JavaScript

【初心者向け】Web開発をするなら絶対入れておきたいChrome拡張機能11選

これからエンジニアを目指す人や、普段はディレクターとして働いている人向けにWeb開発で便利なChrome拡張機能をまとめています。エンジニアやデザイナーと一緒に仕事をしている人には、業務効率の上がるものが多いので、Chromeに追加しておくと良いでしょう。また、オンラインのプログラミングスクールTechAcademyでは、未経験でもプログラミングを習得することが出来ます。 ato-ichinen Google検索の結果を1年以内に絞り込みすることができます。プログラミング言語のバージョンが変わってからの結果だけ見たいという時に利用できます。デザインのトレンドやプログラミングの最新情報はよく変わっていきます。出来るだけ新しい情報を得るために役立ちそうですね。 ato-ichinen smartphone simulator PCからスマホページを確認できる拡張機能です。 Chromeに追加後は、ワンクリックでスマートフォン表示にしてくれるので、デザイナーやWeb開発に関わる人は入れておいて損はないでしょう。 smartphone simulator [PR] フロントエンドで副業する学習方法を動画で公開中ColorPick Eyedropper マウスオーバーしている部分のカラーコードが分かる拡張機能です。「このサイトを参考にしたい！」と思った時に一瞬でカラーコードを出力してくれるので非常に便利でしょう。デザイナーとディレクターとのやりとりもスムーズに進みそうです。 ColorPick Eyedropper DevTools Theme: Zero Dark Matrix Google Chromeのデベロッパーツールをカスタマイズすることができる拡張機能です。開発する上でChromeデベロッパーツールは毎日見るところでしょう。普段使っているエディタはダークカラーだからChromeデベロッパーツールも色を合わせたい！という人は多いのではないでしょうか。背景がダークカラーであればクールな印象になりますし、目にも優しいでしょう。ぜひ自分用にカスタマイズしてみてください。 DevTools Theme: Zero Dark Matrix Wappalyzer Wappalyzerでは、開いているサイトで使われいる言語やフレームワークを解析してくれます。「このサービスはどの言語で作られているんだろうか」「JavaScriptのフレームワークは何を使っているんだろう」といった疑問を解決することができるでしょう。初めてWebサービスを開発するという人は特に参考になるツールになると思います。 Wappalyzer YSlow YSlowでは、サイトのパフォーマンスを計測してくれます。 Webサイトの表示を高速化するためにあらゆる項目で判定してもらえます。「CSSは上に置きましょう」や「JavaScriptは下に置きましょう」など色々な項目でA~Fで判定をし、サイト改善を行うために役に立ちそうです。 YSlow Awesome Screenshot サイトの一部をキャプチャすることができ、さらにそのキャプチャを加工することができる拡張機能です。ページ全体のキャプチャ・選択したエリアのキャプチャを撮ることができ、丸で囲ったり文字を記載などできる便利ツールです。ディレクターの人などエンジニアやデザイナーに何か依頼するときにキャプチャを撮ってメッセージを記載しているとより伝わりやすいでしょう。単純にキャプチャを撮るだけでも大変役にたつので、Chromeに追加しておくと良いでしょう。 Awesome Screenchot One Tab One Tabは、開いているタブを一つにまとめてくれる機能を持っています。タブを多く開いているとChromeが重くなってしまいますし、どこに何のタブがあるのか分からなくなることがあります。One Tabでは、開いているサイトの一覧を表示してくれるので、すぐに見つけることができるでしょう。 One Tab Page Ruler サイト内のロゴなどサイズを簡単に数値化してくれる拡張機能です。 Googleロゴの幅や高さを一発で出すことができます。ロゴや画像のサイズを測るときに活躍しそうですね。 Page Ruler Clear Cache Clear Cacheでは、Chromeにたまったキャッシュを削除することができます。デザインなどを修正したにも関わらず更新しても反映されていないという場合は、キャッシュが残っている可能性大です。最新状態を表示してくれるので、いざという時便利でしょう。 Clear Cache Pasty 複数のURLをコピーしてPastyのアイコンをクリックすると、一度に全部のタブを開いてくれるという優れものです。他の人から送られてきた参考サイトなども一つ一つ開くのでは面倒です。Pastyを使って業務効率をあげましょう！ Pasty 以上、Web開発において便利なChrome拡張機能を紹介しました。今まで不便に思っていたこともワンクリックで解決できてしまうので、追加しておくとスムーズに仕事が進むはずです。 [お知らせ]TechAcademyでは初心者でも8週間でエンジニアになれるRuby on Railsオンラインブートキャンプを開催しています。RubyでWebアプリを開発したい方はご参加ください。

プログラミング

【2024年最新】営業×生成AI活用術・事例｜ChatGPTで営業力強化する方法

1. はじめに：営業における生成AI活用の重要性 2024年、営業の世界は大きな転換点を迎えています。生成AI、特にChatGPTに代表される自然言語処理技術の進化により、営業活動のあり方が根本から変わろうとしています。もはや生成AIは単なるツールではなく、営業の「優秀な部下」として不可欠な存在となりつつあります。生成AI活用が重要な理由効率性の飛躍的向上生成AIは、顧客データの分析からパーソナライズされた提案書の作成まで、従来人間が時間をかけて行っていた作業を瞬時に処理します。これにより、営業は本質的な顧客との対話や戦略立案に集中できるようになります。データドリブンな意思決定生成AIは膨大なデータを分析し、人間では気づきにくいパターンや傾向を見出すことができます。例えば、過去の取引データと市場動向を分析し、「この業界のクライアントは四半期末の2週間前にアプローチすると成約率が20%上がる」といった具体的な洞察を提供します。顧客体験の向上 AIによるパーソナライゼーションにより、各顧客のニーズに合わせたきめ細やかな対応が可能になります。具体的には、顧客の過去の問い合わせ内容や購買履歴を分析し、「このクライアントはコスト面を重視しているため、ROIを強調した提案書を用意すべき」といったアドバイスを生成AIが提供します。これは顧客満足度の向上と、ひいては成約率の上昇につながります。本記事では、生成AIを活用した最新の営業手法や、具体的な導入ステップ、注意点などを詳しく解説していきます。AI時代の営業において、競争力を維持・向上させるためには、この技術を理解し、効果的に活用することが不可欠です。これから紹介する内容を、ぜひあなたの営業活動に役立ててください。生成AIの実務活用スキルを磨きたい方は、無料の生成AIコミュニティ『テックアカデミーGAIナレッジベース』をご活用ください。今すぐ無料登録 2. 生成AIとは？営業のための基礎知識生成AI（Generative AI）は、人工知能の一分野で、新しいコンテンツを作り出す能力を持つAI技術です。テキスト、画像、音声など、様々な形式のデータを生成することができます。営業の文脈では、主にテキスト生成AIが注目されています。 ChatGPTと営業活動代表的な生成AIの一つがChatGPTです。ChatGPTは、与えられた指示や質問に対して、人間らしい自然な文章を生成することができます。これは営業活動において、以下のような革新的な可能性をもたらします：パーソナライズされた営業メールの作成：顧客情報を基に、個々の顧客に合わせた魅力的な営業メールを瞬時に生成。提案書や報告書の下書き作成：基本情報を入力するだけで、構造化された提案書や報告書の下書きを自動生成。商品説明や FAQ の自動生成：製品情報を基に、わかりやすい商品説明や頻繁に尋ねられる質問への回答を作成。市場調査データの要約と分析：大量の市場データから重要なポイントを抽出し、簡潔な要約を提供。生成AIの限界しかし、生成AIにも重要な限界があることを理解しておく必要があります：データの最新性：AIの知識は学習データの時点で止まっているため、最新の情報や変化を反映していない可能性があります。事実の正確性：AIは時に誤った情報や「ハルシネーション」（存在しない情報の生成）を引き起こすことがあります。文脈理解の限界：複雑な文脈や暗黙の了解を完全に理解することは困難です。倫理的考慮：AIの使用に関しては、プライバシーやデータセキュリティの問題に注意を払う必要があります。これらの限界を認識した上で、人間の判断と AIの能力を適切に組み合わせることが、生成AIを営業に活用する鍵となります。AIは強力なツールですが、最終的な判断や顧客との信頼関係構築は、依然として人間の役割です。次のセクションでは、生成AIを活用できない場合のリスクと、活用する際の具体的な方法について詳しく見ていきます。 [PR] フロントエンドで副業する学習方法を動画で公開中3. 生成AIを活用できない営業はどうなるのか生成AIの導入が進む中、それを活用していない営業や企業は、徐々に競争力を失っていく可能性があります。ここでは、生成AI未導入のリスクと、それに対する対策を見ていきましょう。 3.1 生成AIを導入しない場合のリスクと課題生産性の差：生成AIを導入している企業との間に大きな生産性の差が生まれ、同じ時間でより多くの質の高い営業活動を行える企業に後れを取る可能性があります。顧客ニーズへの対応力低下：高度なデータ分析と予測が行えないため、顧客の潜在的なニーズを見逃したり、適切なタイミングでのアプローチができなくなるリスクがあります。陳腐化：高度なパーソナライゼーションや迅速な対応ができないため、競合他社との差別化が難しくなり、顧客を失う可能性があります。 3.2 生成AI導入企業との生産性の差生成AIを導入している企業と未導入の企業の間には、以下のような生産性の差が生じる可能性があります：提案書作成時間：生成AI導入企業が30分で作成できる提案書に、未導入企業は3時間かかるかもしれません。顧客対応数：生成AI導入企業が1日50件の問い合わせに対応できるのに対し、未導入企業は20件程度にとどまる可能性があります。成約率：最適なアプローチ戦略により、生成AI導入企業の成約率が未導入企業の1.5倍以上になることも考えられます。 3.3 段階的な生成AI導入のアプローチ生成AIの利用を躊躇している場合は、以下のような段階的なアプローチを検討してみましょう：無料のAIツールから始める：ChatGPTの無料版など、コストをかけずに試せるツールから始めます。特定のタスクに限定して導入：例えば、メール文章の作成や市場調査データの分析など、特定の作業に限定して生成AIを活用します。チーム内でのノウハウ共有：生成AI活用に詳しいメンバーを中心に、チーム内で知識やスキルを共有します。段階的な投資：効果を見極めながら、徐々に生成AIツールへの投資を増やしていきます。生成AIの活用は、もはや選択肢ではなく必須となりつつあります。しかし、一朝一夕に全ての業務をAI化する必要はありません。重要なのは、生成AIの可能性を理解し、自分の状況に合わせて段階的に活用していくことです。次のセクションでは、日本企業における具体的な生成AI活用事例を見ていきましょう。 4. 日本企業における営業×生成AI活用事例日本企業でも、生成AIを営業活動に活用する事例が増えています。ここでは、大手企業と中小企業それぞれの成功事例を見ていきましょう。事例1：日清食品ホールディングス活用方法：営業部門での生成AI活用促進主な取り組み：対話型AI「NISSIN AI-Chat」の導入と活用営業担当者向けの生成AI活用トレーニングプログラムの実施業務に特化したプロンプトテンプレートの作成セキュリティ対策と利用ガイドラインの策定成果：営業担当者1人当たり年間400時間の業務時間削減が期待できる16個の標準テンプレートを作成。売り場企画の提案力向上や商談スキルの向上にも貢献。日清食品ホールディングスは、生成AIを営業活動に積極的に活用しています。特に注目すべきは、AIを使いこなすためのトレーニングプログラムの実施と、実務に即したプロンプトテンプレートの作成です。これにより、AIを効果的に活用し、創造的な売り場企画の提案や効率的な業務遂行が可能になりました。参考：https://toyokeizai.net/articles/-/689597 事例2：GMOインターネットグループ活用方法：グループ全体での生成AI活用推進主な取り組み：「AI（愛）しあおうぜ！プロジェクト」の実施：全パートナー受講必須のAIセミナーや非エンジニア向けリスキリング企画の実施複数の生成AIモデルの活用：業務に応じて最適なAIモデルを選択生成AIプロンプトポータル「天秤AI by GMO」の開発・活用成果：2024年上半期で約67万時間の業務時間削減を実現。国内パートナーの83.9%が生成AIを活用し、一人あたり月平均26.8時間の業務時間削減。参考：https://www.gmo.jp/news/article/9051/ GMOインターネットグループは、「AIで未来を創るNo.1企業グループへ」を掲げ、グループを挙げて生成AIの活用を進めています。特筆すべきは、約半数（47.2%）のパートナーが複数の生成AIモデルを使い分けており、各AIモデルの特性を理解し業務に応じてAIを活用していることです。 4.3 成功事例から学ぶポイント人間とAIの適切な役割分担：AIは定型的な作業や分析を担当し、人間の営業職は戦略立案や顧客との信頼関係構築に注力しています。段階的な導入：多くの企業が、特定の業務から始めて徐々に適用範囲を広げています。継続的な学習と改善：AIの出力を常にチェックし、フィードバックを行うことで、精度と効果を向上させています。コスト効果的なアプローチ：中小企業でも、無料や低コストのAIツールを活用することで、大きな効果を得ています。これらの事例が示すように、企業規模に関わらず、生成AIを効果的に活用することで営業活動を大きく改善できる可能性があります。次のセクションでは、生成AIによる具体的な営業プロセスの改善方法について詳しく見ていきましょう。 5. 生成AIによる営業プロセス改善生成AIは営業プロセスの各段階で活用でき、効率と効果を大幅に向上させる可能性があります。ここでは、主要な営業プロセスごとに、生成AIの具体的な活用方法を見ていきましょう。 5.1 リード獲得・顧客分析活用方法：市場調査データの分析と潜在顧客の特定ウェブサイト訪問者の行動分析とリードスコアリングパーソナライズされたリード獲得キャンペーンの作成 5.2 商談準備・提案書作成活用方法：顧客情報と過去の取引データに基づくカスタマイズされた提案書の自動生成競合分析と差別化ポイントの抽出最適な価格設定のシミュレーション 5.3 フォローアップ・顧客維持活用方法：最適なフォローアップタイミングの予測パーソナライズされたフォローアップメールの自動生成顧客の離反リスク予測と事前対策の提案 5.4 営業活動の分析と改善活用方法：営業トークの分析と改善点の自動抽出成功事例のパターン分析と共有営業予測の精度向上と資源の最適配分 5.5 生成AIによる営業プロセス改善のポイントデータの質と量の確保：生成AIの効果を最大化するには、質の高い十分な量のデータが不可欠です。人間の判断の重要性：AIの提案は常に人間がチェックし、必要に応じて修正を加えることが重要です。継続的な学習と改善：AIモデルを定期的に更新し、最新のデータと成果を反映させることで、精度と効果を向上させます。プロセス全体の最適化：個々のタスクだけでなく、営業プロセス全体を見直し、AIとの最適な連携を図ります。営業職のスキルアップ：AIツールを効果的に活用するため、営業職のデジタルスキル向上も重要です。生成AIを活用することで、営業プロセスの各段階で大幅な効率化と効果の向上が期待できます。しかし、AIはあくまでも強力なツールであり、最終的な判断や顧客との信頼関係構築は人間の営業職の役割です。次のセクションでは、ChatGPTを使った具体的な営業活用テクニックを詳しく見ていきましょう。 6. ChatGPTを使った具体的な営業活用テクニック・プロンプト例 ChatGPTは、その柔軟性と高度な言語理解能力により、営業活動の様々な場面で活用できます。ここでは、ChatGPTを使った具体的な活用テクニックと、それぞれの効果的なプロンプト（指示）の例を紹介します。 6.1 パーソナライズされた営業メールの作成活用方法：顧客情報を基に、個別化された効果的な営業メールを作成します。プロンプト例：以下の情報を基に、IT企業の経営者向けの営業メールを作成してください： - 顧客名：山田太郎 - 企業名：テックイノベーション株式会社 - 役職：代表取締役CEO - 業界：クラウドサービス - 最近のニュース：新しいAIプロジェクトを発表 - 提案製品：セキュリティ管理ソフトウェアメールは簡潔で、個人的なトーンを保ちつつ、顧客のニーズに焦点を当ててください。プロンプトの工夫点：顧客に関する具体的な情報（名前、役職、業界など）を提供し、パーソナライズされた内容を生成しやすくしています。最近のニュースを含めることで、時事性のある内容を盛り込めるようにしています。メールの tone of voice（簡潔、個人的なトーン）を指定し、望む文体を明確にしています。「顧客のニーズに焦点を当てる」という指示により、単なる製品説明ではなく、価値提案型の内容を促しています。 6.2 商談準備のための情報整理活用方法：顧客や業界に関する情報を整理し、重要なポイントを抽出します。プロンプト例：以下の情報を基に、商談準備のための重要ポイントをまとめてください： - 顧客企業：グローバルテック株式会社 - 業界：半導体製造 - 最近の業界トレンド：5G技術の普及、IoTデバイスの増加 - 顧客の課題：生産効率の向上、品質管理の強化 - 自社製品：AI搭載の製造ライン管理システム 1. 顧客企業の現状分析 2. 業界トレンドとの関連性 3. 顧客の課題に対する自社製品の適合性 4. 想定される質問と回答 5. 提案のポイントの5項目でまとめてください。プロンプトの工夫点：顧客企業、業界、トレンド、課題、自社製品といった具体的な情報を提供し、焦点を絞った回答を促しています。「5項目でまとめてください」と具体的な構造を指定することで、整理された回答を得やすくしています。各項目（現状分析、トレンドとの関連性など）を明示することで、網羅的な準備ができるようにしています。 6.3 提案書の骨子作成活用方法：顧客のニーズと自社製品の特徴を基に、提案書の骨子を作成します。プロンプト例：次の情報を基に、クラウドサービス導入の提案書の骨子を作成してください： - 顧客：大手小売チェーン - 課題：店舗管理の効率化、在庫管理の最適化 - 自社製品：AI搭載クラウド型店舗管理システム - 主な機能：リアルタイム在庫管理、需要予測、従業員シフト最適化 - 導入効果：運営コスト20%削減、顧客満足度15%向上（他社事例）以下の構成で作成してください： 1. エグゼクティブサマリー 2. 現状分析と課題 3. 提案内容 4. 期待される効果 5.

生成AI・ChatGPT

【データから紐解く！】人気プログラミング言語を徹底比較！

本稿は、Codementorのブログ記事を、Codementorより了解を得て日本語翻訳し掲載した記事になります。科学、技術、工学および数学の素養がある人材に大きな需要があり、高い賃金が支払われているのは、とりたてて目新しいニュースではありません。米国におけるソフトウェア関連職種のオンライン求人数は2007年から2012年にかけて、他の求人に比べ3倍の速さで成長しています。米国労働統計局は、2012年から2022年にかけてソフトウェア開発に関する求人は、22%増加すると見込んでいます。2014年5月時点のソフトウェアアプリケーション開発者の平均年収は95,510ドル(約965万円)となっています。これからプログラミングを学ぼうと思っている初心者は、どの言語を学ぶべきか考えていることでしょう。この記事では各プログラミング言語の給与、需要、そして将来性を比較する事によって、疑問への回答のヒントとなるはずです！また、オンラインのプログラミングスクールTechAcademyでは、未経験でもプログラミングを習得することが出来ます。目次各プログラミング言語の現状言語別求人ランキング言語別給与ランキングプログラミングに関するサポート体制について各プログラミング言語の将来性各プログラミング言語の現状各プログラミング言語を比較する前に、比較対象となる各言語の現状を確認してみましょう。 [PR] フロントエンドで副業する学習方法を動画で公開中動的プログラミング言語学びやすく面白さもある為、一般的に、動的プログラミンング言語は初心者におすすめ出来る言語だと考えられています。コードを多用せず、ゼロからアプリケーションを構築可能で、難しいルールに従う必要がありません。通常、動的プログラミング言語は最高層で使用されるので、細部の習得に多くの時間を費やす必要が無く、言語の概要の理解に時間を費やします。これも早期に結果を出したいと望むプログラミング初心者に人気の理由の一つです。 JavaScript JavaScript（Javaとは別言語です）は、フロントエンドに必要クライアントな側の言語です。JavaScriptは全てのブラウザと相性が良く、しばしば「jQuery」の様なライブラリ、AngularJSやEmber.js、Reactなどのフロントエンドフレームワークを活用した双方向のウェブアプリケーションに使用されます。 JavaScriptは、Node.jsを活用したサーバー側の言語としても使用されます。Node.jsは比較的新しく、勢いのあるコミュニティです。 FacebookのReact NativeでJavaScriptを使用したネイティブモバイルアプリケーションを構築出来る他、phonegap等のフレームワークでJavaScriptを使用しハイブリッドモバイルアプリケーションも構築出来ます。しかし、JavaScripは型の無い言語なのでミスを見つけて修正するのが難しい分、扱い難い言語としても知られています。マイクロソフトのTypeScriptやReactが使用するJSXなどの静的な型付きのバージョンも存在します。 Ruby 開発を面白く、かつ効率的にする為に開発されたRubyは、Ruby on Railsのフレームワークによって人気を博しました。 Ruby on Railsは、プログラミングの快適性を追求した、フルスタックのフレームワークです。Rubyは英語の様に解読でき、Railsは、共通タスクを容易にするツールを備えています。 Shopify、Bloomberg、HuluやSlideshareなどの人気サイトではバックエンド開発の大部分にRubyを使用しており、Ruby on Railsで構築されています。 Ruby/Rails開発のためのおすすめエディタ/IDEについても合わせてご覧ください。 Python Pythonもまた初心者にお勧め出来る言語の一つであり、米国の一流大学で言語学習の導入段階において最も学ばれています。デスクトップアプリやWebアプリケーション等を構築する際に使用され、データマイニングに最適なツールを備えています。さらに、Pythonはコンピュータサイエンスやデータ解析、生物情報学等、アカデミックなコミュニティでも人気があります。 Google、 YouTube、 Pinterest、 Instagram、 Reddit、 BitTorrent、 Civilization IVなどはPythonで構築されてます。国内でPythonを使ったWebサービスが少ない理由とはという記事も合わせてご覧ください。 PHP PHPはサーバー側のスクリプト言語で、PHPのコードで何をするか概念化が容易な為、初心者向けの言語と考えられています。この言語はWeb向けに特化されているので、多くのWebサイトはPHPで構築されています。 Facebook、Wikipedia、Yahoo!、 Tumblr、 WordPress等はPHPで構築されています。静的型付き言語静的型付き言語で構築されたアプリケーションはより拡張性と安定性があり、保守性に優れている事で知られています。静的言語はタイピングのチェックによる機能が厳しく、エラーの抽出が容易である一方、プロトタイプの作成が可能な為、多くのコードを使用します。ゲームエンジン、モバイルアプリケーションや企業のバックエンドは一般的に静的型付き言語で構築されます。 Java 汎用性のある言語としてJavaは、Androidアプリ、デスクトップアプリやゲームに使用されます。また企業のバックエンドの開発にも使用されています。さらに、ビッグデータの保存や加工に使用するフレームワークHadoopは、Javaをベースとしており、Yahoo、Facebook、 Amazon Web Servicesといった企業で採用されています。 C C言語は、システムソフトウェアの共通言語として、しばしば使用されています。 Cは、本稿にて紹介するほぼ全てのプログラミング言語、とりわけObjective-Cと C++に影響を与えました。ですので、もしCの知見があれば他の一般的な言語の習得は難しく無いでしょう。しかし、簡単なタスクを実行するのに複雑なコードを必要とする為、初めての言語として選んだ場合に初学者は苦労するかと思います。それでもCの知識はきっとプログラマーの助けになることは間違いないですが。 Objective-C / Swift （iOS開発向け） Objective-Cは、C言語を基にした言語であり、静的ですが動的型付けも可能です。AppleのSwiftは、Objective-Cと互換性を持つ様に設計された静的言語ですが静的型付けによりエラーを起こし難くなっています。 Pythonに触発されたSwiftは、新参のプログラマーが習得しやすくObjective-Cに見られるいくつかの課題を解決する様に設計されています。 C++ C++は、C言語を基にした影響力のある言語です。システムソフトウェアのプログラミング用に設計されましたが、ゲームやゲームエンジン、デスクトップアプリ、モバイルアプリ、Webアプリにも使用されてきました。C++は迅速なので、Facebookもいくつかの高性能で高信頼性のあるシステムをこの言語で構築しています。 Adobe Systems、Amazon、Paypal、Chromeなどの多くのソフトウェアがC++で構築されています。Cの様に、一般的にC++は初学者に難しい言語と考えられているので、初めて学ぶ方はMeetups、またはC++Codementorで相談してみるのも良いでしょう。 C# C#（C シャープ）はマイクロソフトWindowsのNET フレームワークの為に開発されました。 C#は、Web開発、ゲーム開発及びマイクロソフトの開発一般に使用されています。マイクロソフトは互換可能なクロスプラットフォームでは知られていませんでしたが、C#を他のプラットフォームへ移行させ、リナックス技術者により良い開発ツールを提供する目的で、Monoと呼ばれるオープンソースプロジェクトを発案しました。最近では、C#をiOSやAndroid向けのネイティブモバイルアプリに使用できる様になりました。 SQL SQL（SequelまたはStructured Query Language）は、データベースとコニュニケーションを行う問い合わせ用の言語です。 SQLはアプリケーションを構築する為には使用されませんが、リレーショナルデータベース管理システム（RDMS）を使用するアプリケーションのデータ管理に使用されます。言語別求人のランキング各プログラミング言語の概要を少しだけ紹介しました。しかしながら、全ての言語に同じ需要があり、同等の給与が支払われる訳ではありません。もし言語習得の目的が就業であり、また言語習得がどんどん難しくなってきているという話にがっかりさせられたくないのであれば、次に紹介する内容が「どの言語を学ぶべきか」という問いに対するヒントになると思います。 indeed.comによる給与統計を基に、各プログラミング言語を9つの層に分割しています。この結果、Swiftが一番多くの給与を得る事ができ、Java、Ruby、 Python,、C++とCもまた悪くない選択である事は明白でしょう。さらに、給与のみに焦点を当てた場合、JavaScript,、C#,、SQLおよびPHPは理想的な選択では無いでしょう。平均給与は、需要（どの程度求人があるか）、供給（何人の開発者がその言語を使えるか）および経験などに影響されます。従い、結論を急ぐ前に他の要素もじっくり確認してみましょう。求人のトレンド以下は、プログラミング言語別の求人トレンド（indeed.comから抜粋）です。 C、SQL、JavaおよびJavaScriptには多くの求人があります。一方、C#、C++とPythonもまた需要のある言語です。しかし、新興企業の職を得たいのであれば、indeed.comのトレンドはふさわしい指標ではないでしょう。 AngelListは新興企業による求人の為のサイトであり、ここの求人リストを基にプログラミング別の重要を確認できます。 JavaScriptの需要がある事が改めて確認できます。また新興企業ではJava、C、C++と C#よりPythonおよびRuby (on Rails)を欲している事が分かるでしょう。言語別給与ランキング次は、求人広告の内容から、潜在的にどの程度の賃金が得られるのかみてみましょう。このデータはgooroo.ioから抜粋しており、求人広告で提示された給与の平均値で積算しています。 Ruby、C++またはJavaを知っている技術者は、高い初任給を得られそうです。優秀なRubyとPythonの開発者は不足し、高い需要があるので、RubyとPythonは潜在的に最も高い給料を得られるでしょう。 JavaScriptは2015年4月時点で188,168ドル(約2000万円)も給料があったのに、今では124,oo0ドル(約1300万円)に減っていて、落ち込みが大きいです。しかし、JavaScriptは特殊はケースです。以下で説明します。特殊なケース：JavaScriptのフレームワーク単純にJavaScriptを他の言語と比較するだけでは、どの程度稼げるのかを正確に予測する事はできません。各プログラミング言語の概説で説明した通り、JavaScriptは様々に分類されます。フロントエンドのウェブサイトの開発を促進する為、多くのフレームワークが開発されてきました。したがって、JavaScriptやjQueryを知っているだけでは、JavaScriptのフレームワークを理解している技術者よりも稼げる可能性は少ないでしょう。米国におけるJavaScriptのフレームワーク別の技術者の平均給料をみてみましょう。（React & Backboneはライブラリであり、フレームワークとはしていません。Node.jsは含んでいます。）平均給与は悪くありません。特に、Reactの展望は明るいです。もちろん、ここに記載されているのはあくまで参考であり、ineed.comでは平均給与105,000ドル以上とみています。これらの技術を学ぶにはJavaScriptを知る必要があり、逆にフレームワークを身につければJavaScriptをより有益なスキルにしていくはずです。これらのフレームワーク技術者の需要を見てみましょう。 Node.jsはバックエンドの開発用なので、単にフロントエンドのフレームワークとなればAngularJSが需要という点では圧倒的です。フロントエンドのJavaScript技術者に関心があるのなら、AngularJSを学ぶと良いでしょう。一方でReactは、比較的新しい技術なのでAngularJSの初期段階を同じような勢いで人気を得てきています。まだ初期段階ですが、AngularJSよりも汎用性があり、ユーザーの使い勝手も良いので、これから需要はますます広がるでしょう。プログラミングに関するサポート体制について独学でプログラミング言語を学ぶ場合、他の技術者からサポートを受ける事が非常に重要な助けになると気づくでしょう。サポートコニュニティの一員となる事は将来のあなたの技術者生活をより快適なものにします。 StackOverflow StackOverflowは相互支援の場として世界中の技術者に使用されている最大のコミュニティであり、プログラミング言語がどの程度普及し、人気があるのか、また同時にそのコニュニティが言語習得に程度役に立つのか、を知る事ができます。言語の人気 StackOverflowのフォロワーを根拠として、各言語の現時点の人気を確認できます。すでにJavaとJavaScriptが技術者に大きな需要があることは確認しましたので、これらの言語が最も多くのフォロワーをもっている事は驚きに値しません。「JavaScript」は現在では「Java」を追い抜き、StackOverflowでもっとも多く使用されているタグです。 SQL、Ruby、それからSwiftのフォロワーは少ないですが、RubyはWebの開発に専ら使用されていて、Swiftは比較的新しい言語なので、これは当然の帰結かもしれません。 StackOverflowでの回答率 StackOverflowでは質問を「正確に」しなければならない、という暗黙のルールがあります。このことを頭に入れて各言語別の質問に対する回答を得られる確率を見てみましょう。この情報に拠ると、C、SQL、それとC++関連では、質問に対し60%以上の回答を得ています。 CとC++は専門性が高く、質問者はプログラミング経験豊富なので、より正確に自分の質問を表現できるのではないか、と考える人もいるでしょう。一方で、SQLは物事を構築する為に使用されている訳ではありません。注目に値するのはStackOverflowにおいて、PythonとRubyの技術者も回答に協力的である、という点です。前述の通りPythonとRubyは初心者に最も勧められる言語であるのですが、これ考慮しても、30日以内に60%の回答があるという事は驚きです。一方で、広範に使用されているはずのPHPの回答率が最低です。これは、多くの人がPHPに関する質問をしていますが、回答はあまり得られていない、という事を意味します。 GitHub 開発に参加すると、出来る限り既存のソリューションを使用する事が最善だと気づくでしょう。既存のソリューションは、一般的にオープンソースから取得でき、GitHubはこれを取得する手法を提供します。ユーザーは自分の気に行ったプロジェクトに星印をつけます。あるプロジェクトに多くの星印がつくほど、そのプロジェクトは盛んになりませす。以下はGitHubの人気プロジェクトの言語別分布です。 JavaScriptが最も人気のあるツールである事は細部を確認せずとも明らかです。JavaScriptは、フレームワークや技術の移り変わりにおいて、技術者が現状についていくのが困難と認識する程、変化の速い言語です。加えて、Node.jsを除いては、JavaScriptはフロントエンドの開発に最も使用されています。従い、Ruby、Python、JavaおよびPHP等バックエンド向けの言語と直接競い合っている訳ではありません。JavaScriptが他の言語とこれだけ差がある、というのは驚くべき事では無いのです。一方で、RubyとObjective-Cは開発の為にたくさんのツールとリソースがあります。興味深いのは、StackOverflowでの比較において、いずれの言語もJava程人気がある訳ではないですが、技術者はこれらの言語のオープンソースプロジェクトを有益と考えていることです。言語別の総プロジェクト数を確認すると、特にObjective-Cにこの傾向が強い事が分かるでしょう。また、CやC++のオープンソースプロジェクトのほとんどはCやC++の為ではなく、開発全般のツールにする為に書かれています（例えば、最も使用されているPythonの解釈プログラムはCPythonです。これはCで構築されています）。各プログラミングの概説でお話しした通り、CとC++はシステムアプリケーション開発によく使われているので、GitHubのオープンソースプロジェクトもシステムツールの為だという事が良く分かるのではないでしょうか。最後に、PHPは広範に使用されているにも関わらず、使用可能なリソースの数という点では遅れをとっています。C#に関しては、マイクロソフトが自前の多くのサービスでオープンソースを模索しているので、将来GitHubにおける価値は拡大するでしょう。各プログラミング言語の将来性将来、プログラミング言語はどの程度必要とされるでしょうか？プログラミング言語の将来性は、「若い人材がどの程度その言語を採用するか」がその言語の人気やリソースの確保につながるので、多分にそれを使用するコミュニティの成長に依存します。では人々が学習の対象としてどの言語に関心があるかをみてみましょう。 Python、JavaScript、C#とSwiftは人々の関心を最も集めています。現在知られているトレンドを基にすると、次の様な各論を出せます。 JavaScript JavaScriptは疑いの余地なく人気の言語となってきていて、特にバックエンドの開発に使用され、潜在的に（ReactNativeを介し）モバイルアプリケーションも構築可能です。 JavaScriptは更に多くのツールを取得し続け、かなり速いペースでアップデートされています。従って将来においても重要な言語であり続けるでしょう。 Ruby スタートアップは「Ruby on Rails」を好みます。Airbnb、Twitch、Hulu等の多くの有名サイトはRailsで構築されており、Ruby技術者を必要とするでしょう。Railsは、習得し易いのでコーディング初心者にとって人気であり続けるでしょう。一方、Node.jsの台頭は間違いなくRuby on Railsの人気に影響を及ぼします。GithubにおいてNode.jsはすでにRailsを追い抜いています。これは決してNode.jsがRailsを凌駕するという兆候ではありませんが、Railsも数年前にバックエンド開発でPythonの最大のウェブフレームワークDjangoに取ってかわり、Djangoより多くの人気を博した事は留めておくべきです。更に、同一構造のアプリケーションという新たなトレンドもRailsの採用に影響するでしょう。この慣行はWebアプリケーションのパフォーマンスに影響すると言われています。同一構造のアプリケーションはNode.jsのプラットフォーム上で動く事を要求されており、フロントエンドと同じくJavaScriptで構築されます。たった一つでもよく言語を熟知している（この場合はJavaScript）という事はアピールになるので、Rubyを新たに学ぶ人が少なくなる可能性があるでしょう。Googleの「Go」もまた新たに注目を集め始めているバックエンド言語です。しかしながら、Railsは頻繁にアップデートされるので、しばらくは重要な言語であり続けるでしょう。特に開発者にとって豊富な利便性のあるツールがあり、コミュニティが存在するので、多少人気が衰えても、Rubyは活躍し続けるはずです。 Python Pythonは、研究機関とデータサイエンティストに人気で、前述の通り、多くの初心者はPythonでコーディングを学びます。これはPythonが着実に普及しており、重要になってきている事を意味します。 PythonはJavaScripと同様に爆発的な人気を得ている訳でなないですが、データサイエンス分野では高い需要があり、力強く成長していくでしょう。 PHP この数年間、バックエンドの開発トレンドはPHPから他の言語へ移行してきました。しかし、80%のWebサイトが依然としてPHPで構成されています。これはWeb用に設計された言語なので当然かもしれません。しかしながら、初学者がどの言語を学ぶべきかグーグルで調べると、多くの技術者がPHPを薦めていないことが分かると思います。実際に、PHPは多く技術者から疎まれています。 PHPのコミュニティはPHPの正しいコーディングの仕方や新しい開発ツールを提供する事でPHPに関する悪評を取り除こうとしています。 Java AndroidによりJavaは最も人気のある言語に押し上げられ、その安定性と拡張性から開発会社からもまた支持される事となりました。ビッグデータ管理用のフレームワークとして（Scala）を使用するSparkと（他の言語をサポートする）Cassandraの台頭により、Hadoopはビッグデータ管理のフレームワークとしてどの程度人気を得続けるか予測が難しくなちました。しかし、大企業が転換期にどのように行動するかを考慮すると、Hadoopが捨て去られる事はないでしょう。Javaはバックエンド開発において優れたツールを持っていて、企業の開発に不可欠なのです。この様に、Javaは今後数年間は重要な言語の一つとして力を持ち続けるでしょう。 Objective-C/Swift アップル（Apple）がSwiftをリリースし、Objective-Cが専らアップル（Apple）の製品に使用される様になると、Objective-Cの需要が無くなるとは誰も想像していません。アップル（Apple）の製品が使用される限りは数年間はObjective-Cは重要な言語で有り続けるでしょう。 iOS向けのオープンソースプロジェクトの大半は未だObjective-Cで書かれていますので、2017年現時点においても、学習する価値のある言語です。一般的にまったく概念を理解する事の出来ないものを学ぶのは効率的ではありません。従い、もしSwiftを知っているのならObjective-Cは習得しやすいでしょう（また逆もしかりです）。 C Cは、他の言語と比べると極めて下位レベルで使用されますが、OS用の汎用言語でもあるので残り続けるでしょう。多くの開発ルールはCとリナックス、またはCで構築されています。 SQL SQLは大抵のデータ管理者に習得されています。しかし、MongoDBやRedisの様なSQLを要しないサービス、またはHadoof、SparkとCassandraの様なSQLを必要としないプラットフォームの台頭によりSQLは勢いを失っていると考えられていました。現状はそうではありません。かつてSQLを必要としなかったサービスまでがSQLを活用し始めたのです。ビッグデータの台頭と管理の難しさから、SQLはかつてないほど必要とされています（それは求人トレンドからも分かるでしょう）。Googleは、BigQueryサービスをアップデートし、一つのテーブルに対し1秒間で100,000行を処理できる様にしました。BigQueryはSQLを使用しています。Sparkはバージョン1.3からSparl SQL Moduleを採用しています。つまり、ビッグデータを管理する必要性から、SQLは再び重要な言語となったのです。SQLは単に普及しているというのみならず、暫くは重要な言語で有り続けるでしょう。 C++ （Rustに対してまでも）未だ性能と能力においてパワフルな言語と考えられており、C++は高性能を求められるシステム（例えばゲームエンジン）で重要な言語で有り続けるでしょう。最新の主要バージョン（C++14）は2017年にリリースされる見込みであり、未だ進化しています。 Rustが作るソフトウェアはC++が作る場合よりも脆弱性が少なくなることを目指しているので、将来的にはRustは一部のシステムプログラミングでC++と入れ替わるでしょう。 C# マイクロソフトのプラットフォームに限定されていた事とクローズドソースであった事は過去にC#に有利に働きませんでした。しかし、Monoはこの問題の大部分を修正しました。（Monoは性能に問題がありましたが、最近のアップデートにより改善しました。） C#で働いた技術者はC#を好きになる傾向があるので、この言語は、とても強いコミュニティを持っています。C#はUnity 3Dの主要言語であり、iOSやリナックス上で動くゲームエンジンにも使用されています。ゲームエンジンとしてのUnity 3Dの台頭は、C#の立ち位置を確固たるものにし、バーチャルリアリティアプリの開発を支えています。バーチャルリアリティは重要な技術なので、C#の未来は明るいでしょう。補足として、C#は米国の外、例えば英国の企業での開発でも人気があります。マイクロソフトもC#をしばらくは活用し続けNETプラットフォームで重要な言語とするつもりでしょう。そして技術者が活用し易い様にアクセス可能なオープンソースの製品を積極的に打ち出すでしょう。まとめプログラミング初心者がどの言語を学ぶべきか？ Web開発に関わるならばJavaScriptを学ばねばならないのは明らかです。バックエンドのウェブ開発をしたいのならSQLは必須でしょう。データ関連のウェブサイトやデータサイエンスに関心があるのなら、Pythonが推奨されます。企業で働くのなら、Javaが必要です。システムの構築に関心がなく、単に労働機会が欲しいだけならSQLをおすすめします。（特に数学好きであれば） TechAcademyでは初心者でもエンジニアになれるオンラインブートキャンプを開催しています。未経験でもこれからプログラミングを習得したいと思っている方は特にご覧ください！また、現役エンジニアから学べる無料のプログラミング体験会も実施しているので、ぜひ参加してみてください。

プログラミング

ChromeでCSSが無効化される原因と対処法を現役エンジニアが解説【初心者向け】

ChromeでCSSが無効化される原因と対処法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 CSSについてそもそもよく分からないという方は、CSSの書き方について解説した記事をまずご覧ください。なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のCSSカリキュラムをもとに執筆しています。田島悠介今回は、CSSに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介 ChromeでCSSが無効化される原因と対処法について詳しく説明していくね！大石ゆかりお願いします！目次 Chromeのデベロッパツールの使い方 CSSが無効化される主な原因と対処法 Chromeを活用して改善してみようまとめ Chromeのデベロッパツールの使い方フロントエンドの開発で必須とも言えるのがブラウザChromeのデベロッパーツールです。デベロッパーツールはブラウザ上でマウスを右クリックして検証を選択するか、その他のメニューから起動できます。 [PR] フロントエンドで副業する学習方法を動画で公開中CSSが無効化される主な原因と対処法 CSSが思ったとおりに適用されない場合、まずは優先順位を確認しましょう。CSSで要素を指定するCSSセレクタでは、要素名＜クラス＜idの順に優先順位が高くなります。CSSの優先順位について、詳しくは以下の記事も参考にしてください。 MDN – 詳細度 Chromeを活用して改善してみよう今回はCSSの適用状況をChromeのデベロッパーツールを使って確認する方法について説明します。まずは以下のHTMLファイルを作成します。 index.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Sample</title> <style> .parent { background-color: lightblue; width: 200px; height: 150px; } .child {

CSS

記事を検索

ニュース

インタビュー

テクノロジー

キャリア

お問い合わせ

Chromeの開発者ツールを使ってJavaScriptのデバッグを行う方法を現役エンジニアが解説【初心者向け】

目次

Chromeとは

Chromeの開発者ツールでできること