プログラミング入門ナビ by Proglus（プログラス）

プログラミング学習初心者のための情報メディア

本ページにプロモーションが含まれる場合があります

You are here: Home / Archives for JavaScript

JavaScript

Google Maps API Key を取得する方法

By

Google Maps API Key (Maps JavaScript API)を取得する手順について説明いたします。

背景として、2018年6月より。Google Map 関連のAPIがアップデートして、Google Maps Platformなりました。
このタイミングで、APIがAPI Keyなしでは利用できなくなりました。
API Keyを指定しないと、地図上に”開発用”と表示されてしまいます。
無料枠で利用する場合もAPI Keyが必要です。

必要なもの

  • Google アカウント(Gmailアドレス)
  • クレジットカード (不正防止)
  • Google Chrome(他のブラウザでは試していません。念の為Google製品で登録する)

Google マップ ApiKey取得の手順

Google Maps Platformページを表示

料金の確認

記事執筆時点では、
1 か月 200 ドルの無料クレジットが付与されます。
これにより、100,000回静的マップの読み込み（ウェブ）を行うことができます、

アクセス数が多いサイト以外は、実質無料で使えます。
しかしながら、所定のリスエクストを超えると、費用が発生する点は、注意してください。
料金ページやドキュメントを確認してください。

開始ボタンクリック

google アカウント(= gmail)にログインした状態で、
「使ってみる」ボタンまたは 「開始」 ボタンをクリックします。

1. 使用プロダクトの選択

使用するAPIを聞かれるので、3つともチェックを入れます。
「CONTINUE」ボタンを押します。

2. プロジェクト名の設定

プロジェクト名を設定します。

利用規約を確認した上で、YESを選択
NEXT ボタンをクリックします。

3. 請求の有効化

プロジェクト「My Project」の請求の有効化

請求先の登録が必要です。
「請求先アカウントの作成」をクリックします。

Google Cloud Platform の無料トライアル


国 → 日本
更新とクーポン → はい 又は いいえ

利用規約を確認して、チェックを入れて
「同意して続行」ボタンをクリック

Google Cloud Platform で今後 12 か月間利用できる300 ドル分のクレジットを獲得できます。

お客様情報

ロボットによる登録ではないことを確認するため、クレジット カード番号を確認が実施されているとのこと。

必要事項を入力して、「無料トライアルを開始」ボタンを押す。

ようこそダイアログ

APIKeyが取得完了

APIキーが取得できました！

このキーを使ってGoogle マップを表示します。
APIキーは不用意に他人に知らせないように注意してください。

クレジットカード登録、GCP の無料トライアルをスキップできる？

ちなみに、クレジットカード登録、GCP の無料トライアルをスキップすることもできて試してみたのですが、１日1回しかAPIを呼べない状態になってしまいました。

キーを制限

この状態だと、キーがわかれば誰でもキーを使えてしまい危険です。
特に、JavaScriptで使用する場合は、ファイルのAPI　Keyを記述する都合上、API Keyが丸見えです。

そこで、HTTPリファラー（呼び出し元のURL）で、制限を加えます。
言い換えると、指定サイトでのみAPI Keyが有効になる設定です。

キーを制限をクリック

HTTPリファラー設定

アプリケーションの制限 > HTTPリファラー（ウェブサイト） を設定。

ローカル開発環境で開発中は、

localhost/*

を登録します。

本番環境で使うときは、localhostの代わりに、URLを登録して利用します。

保存をクリックします。

補足ですが、セキュリティーの観点から、使わなくなったAPIキーは、削除した方が安全です。

ダッシュボード

メンテナンスはこちらから。

おわりに

この記事では、Google Maps API Key を取得する方法について学習しました。

動画でプログラミング入門をしよう

オンライン学習サービスProglus（プログラス）でプログラミングを学び、創れる人になろう！

プレミアムプランを2週間無料体験しよう

今すぐ詳細を確認する

オンライン講座「Vue JS入門決定版！jQueryを使わないWeb開発 – 導入からアプリケーション開発まで体系的に動画で学ぶ」

By

オンライン講座「Vue JS入門決定版！jQueryを使わないWeb開発 – 導入からアプリケーション開発まで体系的に動画で学ぶ」を、世界最大級のオンライン学習プラットフォームUdemy（ユーデミー）で公開中です。

Angular.js、React.jsに比べて学習コストが低い注目度抜群のJavascriptフレームワーク Vue.js！高度化するWeb開発のフロントエンド開発の課題を解決。Webエンジニア・Webデザイナーのためのスキルを身につけます。

はじめてのVue.js 3 入門！jQuery を使わないウェブ開発 - 導入からアプリケーション開発まで体系的に学ぶはじめてのVue.js 3 入門！jQuery を使わないウェブ開発 - 導入からアプリケーション開発まで体系的に学ぶ中村 祐太 Yuta Nakamura, Proglus （プログラス）Angular.js、React.jsに比べて学習コストが低い注目度抜群のJavaScriptフレームワーク Vue.js！高度化するWeb開発のフロントエンド開発の課題を解決。 4.2 (3698 ratings)122 lectures, 5 hours

主な学習項目

  • Vue JSを使うメリットがわかるようになります。
  • Vue JSの基本的な使い方を速習パートにより短時間で理解できるようになります。
  • TODO管理アプリ開発を通して、Vue JSによるアプリ制作の一連の流れを理解できるようになります。
  • Vue JSとBitcoin価格取得APIと連携した実践的な開発ができるようになります。
  • プログラミング関連記事検索APIを用いたリアルタイムサーチ開発を通して、実践的な開発ができるようになります。
  • Vue JSの詳細な機能についても理解できるようになります。

コース説明

このコースでは、人気急上昇中のJavaScriptフレームワークVue.js（ビュージェイエス）を、Webアプリケーション開発に役立つスキルとして学びます。

はじめてVue.jsを学ぶ方をターゲットにしています。

jQueryだけでは限界を感じていてステップアップしたい、Webエンジニア・Webデザイナーにおすすめです。

このコースでは、Vue.jsだけを体系的に、効率的に学習することができます。

JavaScriptを使った高度なUIのWebアプリケーションが増えるにしたがって、jQueryでの開発はメンテナンスが非常に難しい課題に直面しています。JavaScriptフレームワークの導入は必須となっています。

JavaScriptフレームワークといえば、React.js, Angular.jsがまず思い浮かぶ方が多いのではないでしょうか。

しかしながら、大規模なアプリケーション開発ではない場合、オーバースペックとなりメリットが活かしきれず、熟練したメンバーが揃えられないプロジェクトチームでは、その学習コストの高さから、開発スピードが低下してしまう懸念があります。

私は、React.jsは複数案件経験しているのですが、プロジェクトによっては相当苦労しました。限られた予算内で、サービスリリースを優先するために、泣く泣くReact.jsで書いたコードを捨てる苦い経験もしました。

そんな中で、Vue.jsは、

  • 学習コストが低い
  • 柔軟性がある
  • 高性能

といった、特徴を持っている、注目のJavaScriptフレームワークです。

Vue.jsのGItHubでのスター数は、よく比較に出されるフレームワーク、Angular.js, React.jsを抜きました。

Vue.jsは、ファイルを読み込むだけで、コードを書き始めることができますので、とても手軽に導入できます。

この導入の手軽さは、jQueryに近い感覚です。

利用するソフトウェア 等：

  • Vue.js 2.5.16  ・・・ 無料
  • Google Chrome   ・・・ 無料
  • テキストエディタ Atom（, 一部レクチャーでVisual Studio Code使用） ・・・  無料
  • jsFiddle （ブラウザで便利にJavaScriptの学習ができるWebサービス） ・・・  無料
  • macOS または Windows PC

動画でコース紹介動画を確認する

セクション一覧

  • はじめに
  • Vue.jsの基本的な使い方
  • 実践演習：TODO管理アプリの開発
  • 実践演習：Bitcoin価格表示アプリの開発 – API連携
  • テンプレート構文
  • 算出プロパティ
  • 監視プロパティ（ウォッチャ）
  • 実践演習：APIを用いたリアルタイムサーチ – 監視プロパティの理解を深める
  • クラスとスタイルのバインディング
  • 条件付きレンダリング
  • イベントハンドリング
  • フォーム入力バインディング
  • コンポーネント
  • トランジション
  • クロージング
  • ボーナスレクチャー：受講生限定クーポン

学習の流れを動画で解説

おわりに

Vue.jsのコードは書いていて、とても楽しいです。

この楽しさは理屈では説明が難しいので、まずはコードを書いて体感してください。

詳細は無料プレビュー動画を30分用意しましたので、ぜひご覧ください！

それでは、皆さんとコースの中でお会いできることを楽しみにしています。

はじめてのVue.js 3 入門！jQuery を使わないウェブ開発 - 導入からアプリケーション開発まで体系的に学ぶはじめてのVue.js 3 入門！jQuery を使わないウェブ開発 - 導入からアプリケーション開発まで体系的に学ぶ中村 祐太 Yuta Nakamura, Proglus （プログラス）Angular.js、React.jsに比べて学習コストが低い注目度抜群のJavaScriptフレームワーク Vue.js！高度化するWeb開発のフロントエンド開発の課題を解決。 4.2 (3698 ratings)122 lectures, 5 hours

動画でプログラミング入門をしよう

オンライン学習サービスProglus（プログラス）でプログラミングを学び、創れる人になろう！

プレミアムプランを2週間無料体験しよう

今すぐ詳細を確認する

JavaScriptのプログラムをコメントにする方法

By

JavaScriptのコメントについて、プログラミング入門者向けに説明いたします。

HTMLやCSSとコメントの仕方が異なる部分があるので、注意してください。

この記事は、オンラインプログラミング学習講座「Web開発入門完全攻略コース」サポート記事です。

コメントとは

コメントとは、文字列の記載はあるけれども、　実行するときに無いものとして扱うことです。
文字列をコメントにすることを、コメントアウトと言います。

動画でJavaScriptのコメントを学習する

コメントの用途

  • デバック等のために、プログラムを一時的に無効にしたい。
  • プログラムの動作に関して、メモ書き（コメント）を残したい。

JavaScriptのコメント

JavaScriptで文字列をコメントにするには、

一行コメント

１行の時は、// を記載します

例)
// console.log(‘Hello!’);

復習行コメント

複数行の時は コメントしたい箇所を/* */ で囲います。

例)

/*
console.log(‘Hello1’);
console.log(‘Hello1’);
console.log(‘Hello1’);
*/

テキストエディタ（Atom）のショートカット

下記のショートカットで、コメントのON/OFFを切り替えられます。
コメントしたい箇所を選択、または、コメントしたい行にカーソルを移動
してから、

macOS環境

commandキー + スラッシュキー

Windows環境

controlキー + スラッシュキー

おわりに

このレクチャーでは、JavaScriptコメントについて、プログラミング入門者向けに説明いたしました。

オンライン講座「Web開発入門完全攻略コース」では、GitとGitHubの使い方について動画をつかって丁寧に説明しています。
無料プレビューを用意しています。ぜひご利用ください！

動画でプログラミング入門をしよう

オンライン学習サービスProglus（プログラス）でプログラミングを学び、創れる人になろう！

プレミアムプランを2週間無料体験しよう

今すぐ詳細を確認する

HTML/CSS/JavaScriptの開発環境構築入門

By

HTML/CSS/JavaScriptの開発環境について、プログラミング入門者向けに説明いたします。

この記事は、オンライン講座「Web開発入門完全攻略コース」のサポート記事です。

プログラミング入門。HTML/CSS/JavaScriptの開発環境

下記の無料で使えるソフトウェアを使って開発が行えます。
macOS, Windowsのどちらでもりようできます。

  • Webブラウザ（Google Chrome）
  • テキストエディタ（Atom）

Webブラウザ（Google Chrome）

Google が提供するWebブラウザです。
最新の技術が取り込まれています
開発者向けの機能が充実しています。

FirefoxやSafariでもおそらく大丈夫ですが、特別にこだわりの無い方はGoogle Chromeを使うのが、本質的ではないトラブルに遭遇する可能性が低くなるという観点でおすすめします。

インストール方法

今お使いのブラウザで、Google Choromeの公式サイトを開きます。

「Chromeをダウンロード」ボタンをクリックして、インストールファイルをダウンロード。
インストールファイルをダブルクリックして開いてインストールを進めます。

テキストエディタ（Atom）

Atom（アトム）は、ソースコード管理サービスなどソフトウェア開発のプラットフォームを手がけるGitHubが開発したオープンソースのテキストエディタです。
Webエンジニアを中心に人気があります。
プログラムなどを書く時に利用します。
もし、普段から使い慣れているテキストエディタがある方は、それを使うのもよいでしょう。

インストール方法

Webブラウザで、Atomの公式サイトを開きます。

「Download」ボタンをクリックして、インストールファイルをダウンロード。
インストールファイルをダブルクリックして開いてインストールをすすめます。

動画で学習する

おわりに

HTML/CSS/JavaScriptの開発環境について、プログラミング入門者向けに説明いたしました。

オンライン講座「Web開発入門完全攻略コース」では、GitとGitHubの使い方について動画をつかって丁寧に説明しています。
無料プレビューを用意しています。ぜひご利用ください！

動画でプログラミング入門をしよう

オンライン学習サービスProglus（プログラス）でプログラミングを学び、創れる人になろう！

プレミアムプランを2週間無料体験しよう

今すぐ詳細を確認する

JavaScriptのエラーを自力で解決するための方法

By

JavaScriptを学習していて、プログラムが期待したとおりに動かなくて困ったことはありませんか？

そんなときはコンソールを開いて、エラーがないか確認してみましょう。

この記事は、オンラインプログラミング学習講座「Web開発入門完全攻略コース」サポート記事です。

WebブラウザのGoogle Chrome を利用して説明します。

動画でJavaScriptのエラーを自力で解決するための方法を学習する

Google Chromeのデベロッパーツールを表示する

エラーを表示するコンソールは、Google Chromeに標準で搭載されているデベロッパーツールの機能を使います。

デベロッパーツールを起動するには、

ブラウザの表示領域で右クリック > 検証をクリック

01 右クリック 検証

Consoleタブをクリックして選択します。

02 console表示

プログラムを実行

JavaScriptのプログラムを実行します。
ここでは、Hello World!とConsoleに出力する簡単なプログラムを記述します。

・・・略・・・

<script>
   console.log('Hello World!');
</script>

・・・略・・・

プログラムにエラーがない場合

このように表示されます。
Hello World!と表示されています。
03 エラーなし

プログラムにエラーがある場合

console.log('Hello World!');

↓とすべきところをあえて、間違えて実行します(c->k)

konsole.log('Hello World!');

04 consoleにエラー表示

Consoleにエラーメッセージが表示されています。

Uncaught ReferenceError : konsole is not defined

日本語だと次のような意味になります。

  • キャッチされていない参照エラー : konsole は定義されていません。

エラーがある行の数も表示されているので、参考にします。

これで、9行目のkonsoleの部分なにか間違いがあると、あたりを付けることができました。

エラーメッセージの種類

MDNにエラーのリストが掲載されているので必要に応じて参照することができます。

おわりに

この記事では、JavaScriptでエラーを自力で解決するための方法について学習しました。

動画でプログラミング入門をしよう

オンライン学習サービスProglus（プログラス）でプログラミングを学び、創れる人になろう！

プレミアムプランを2週間無料体験しよう

今すぐ詳細を確認する