TechAcademy（テックアカデミー） フロントエンドコース プログラミング JavaScript JavaScriptでlocation.hostプロパティを使ってホスト名とポート番号を取得、設定する方法を現役エンジニアが解説【初心者向け】
オーダーメイドコース
icon
icon
JavaScript

JavaScriptでlocation.hostプロパティを使ってホスト名とポート番号を取得、設定する方法を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptでlocation.hostプロパティを使ってホスト名とポート番号を取得、設定する方法について現役エンジニアが解説しています。ホスト名とはドメイン名のことで、ポート番号とはアプリなどが使用する出入口です。取得・設定するにはlocation.hostプロパティを使います。

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

JavaScriptでlocation.hostプロパティを使ってホスト名とポート番号を取得、設定する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。

JavaScriptについてそもそもよく分からないという方は、JavaScriptとは何なのか解説した記事をまずご覧ください。

 

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

 

田島悠介

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

大石ゆかり

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

田島悠介

JavaScriptでlocation.hostプロパティを使ってホスト名とポート番号を取得、設定する方法について詳しく説明していくね！

大石ゆかり

お願いします！

 

目次

  1. ホスト名、ポート番号と
  2. location.hostプロパティとは
  3. location.hostプロパティの使い方
  4. まとめ

 

ホスト名、ポート番号とは

ブラウザでWebサイトを表示するには、Webサイトの住所であるURLを指定します。例えばYahoo!のURLは以下のようになります。

https://www.yahoo.co.jp/

URLの構成は以下のとおりです。

  • プロトコル(通信手段)：上記では「https」が該当します。現在はほとんど https が使用されています
  • ホスト名：上記では「www.yahoo.co.jp」が該当します。ホスト名はWebサイトが格納されているサーバの住所を示しています
  • ポート番号：上記では省略されています。ポート番号はホストに対してプロトコルごとに用意されている接続先の番号です。httpsの場合は 443 となりますので上記のURLは「https://www.yahoo.co.jp:443/」と同等です
  • ディレクトリ名やファイル名：上記では指定していません。ポート番号以降に表示するディレクトリ名やファイル名を指定可能です。

 

[PR] コーディングで副業する方法とは

location.hostプロパティとは

JavaScriptでURLに関する情報を取得、更新するにはLocationインタフェースを使用します。Locationインタフェースはdocument.locationまたは window.locationプロパティで参照可能です。

Locationインタフェース について、詳しくは以下のサイトも参考にしてください。

MDN – Location

location.hostプロパティの使い方

今回のサンプルプログラムでは、window.locationプロパティからホスト名とポート番号を取得、設定する方法を確認します。実行はChromeブラウザのデベロッパーツールのコンソールで行います。はじめにYahoo!JapanのWeb サイトを開いておきましょう。

Yahoo!Japan

ホスト名とポート番号を取得する方法

ホスト名とポート番号を取得するにはlocation.hostと記述します。

location.host

実行結果は以下のとおりです。

"www.yahoo.co.jp"

 

ホスト名とポート番号を設定する方法

ホスト名とポート番号を設定するにはlocation.hostに値を代入します。

location.host = "www.google.com"

実行すると、Webサイトが Google に変更されます。これはホスト名とポート番号が変更され、URLが「https://www.google.com/」となったためです。

まとめ

今回の記事ではJavaScriptでlocation.hostプロパティを使ってホスト名とポート番号を取得、設定する方法を学習しました。

筆者プロフィール

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

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

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

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

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

 

大石ゆかり

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

田島悠介

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

大石ゆかり

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

 

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

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

記事を検索

関連するキーワード

関連する記事

JavaScriptでスライダーバーを実装する方法を現役エンジニアが解説【初心者向け】

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

JavaScriptでDOM操作で要素を削除する方法を現役エンジニアが解説【初心者向け】

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

JavaScriptでオブジェクトのプロパティ値を取得する方法を現役エンジニアが解説【初心者向け】

JavaScriptでオブジェクトのプロパティ値を取得する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解...
JavaScript

JavaScriptでObjectにプロパティを追加する方法を現役エンジニアが解説【初心者向け】

JavaScriptでObjectにプロパティを追加する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説し...
JavaScript

JavaScriptでフォーム要素にdisabledを設定・解除する方法を現役エンジニアが解説【初心者向け】

JavaScriptでフォーム要素にdisabledを設定・解除する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向け...
JavaScript

JavaScriptのboolean型に変換する方法を現役エンジニアが解説【初心者向け】

JavaScriptのboolean型に変換する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。 ...
JavaScript

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

JavaScriptでlocation.hostnameプロパティを使ってホスト名を取得、設定する方法を現役エンジニアが解説【初心者向け】

JavaScriptでlocation.hostnameプロパティを使ってホスト名を取得、設定する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。   なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。   田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 location.hostnameプロパティを使ってホスト名を取得、設定する方法について詳しく説明していくね！ 大石ゆかり お願いします！   ホスト名とは もともとは、ネットワークに接続されたコンピューターの名前のことです。JavaScriptで扱う際は、URLの初めの/（スラッシュ）までの部分（下記の赤で囲った部分）という認識で良いでしょう。   location.hostnameプロパティとは 現在位置の情報を持つLocationオブジェクトのプロパティで、URLのドメインを収めた文字列を格納しています。平たく言うと、URLのホスト名の部分を格納したプロパティです。   [PR] コーディングで副業する方法とはlocation.hostnameプロパティの使い方 JavaScriptに組み込まれているWindow.locationのプロパティなので、そのままWindow.location.hostnameと記述することで使用できます。 Windowは省略可能なのでlocation.hostnameと記述しても使用できます。   ホスト名を取得する方法 location.hostnameと記述することでホスト名が取得できます。   ホスト名を設定する方法 location.hostnameにホスト名になる文字列を代入することで設定できます。設定した場合、現在のURLのホスト名が書き換わったものにページ移動します。   実際に書いてみよう ホスト名を扱う一例として、TECHACADEMYジュニアのページ（https://junior.techacademy.jp/about）にアクセスしてlocation.hostnameを使ってみます。ブラウザがChromeの場合は、TECHACADEMYジュニアのページが表示されたら、デベロッパーツールを開いてJavaScriptを実行するのが早くて楽です。 デベロッパーツールの開き方 デベロッパーツールのコンソールのタブで下記の記述をします。 location.hostname ホスト名である「junior.techacademy.jp」が表示されたかと思います。続いてホスト名をTechAcademyのページの「TechAcademy」に変更してみます。下記のようにhostnameにホスト名を代入するだけです。 location.hostname = 'techacademy.jp' ホスト名が書き変わりTechAcademyのページ（https://techacademy.jp/about）が表示されたかと思います。   まとめ JavaScriptでURLを扱う処理を作る際は、Locationオブジェクトのプロパティからそのまま使えますので適宜使ってみてください。   監修してくれたメンター 横山茂雄（よこやましげお） フリーエンジニアとして活動中。サーバーサイドからフロントまで時代の波に合わせてスキルを変化させてきました。 言語、フレームワーク、DB、現場、いずれも転々としながら、筋トレも欠かさない体育会系エンジニアです。TechAcademyジュニアのゲームアプリコースを担当しています。   大石ゆかり 内容分かりやすくて良かったです！ 田島悠介 ゆかりちゃんも分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！ TechAcademyでは、初心者でもJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプを開催しています。 また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。
JavaScript

MySQLでサーバに接続する方法【初心者向け】

データベースはコマンドを打つことで操作していきますが、そのやり方などを実際にやりながら覚えていくのが近道です。 MySQLでサーバに接続することで、MySQLのデータをプログラムで利用できます。 実務でも、MySQLでサーバに接続して、Webサービスの開発を行いますので、ぜひ学習してみてください。 本記事では初心者向けに、MySQLでサーバに接続する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 目次ホスト名、ポート番号とはlocation.hostプロパティとはlocation.hostプロパティの使い方まとめ筆者プロフィール そもそもPHPについてよく分からないという方は、PHPとは何なのか解説した記事を読むとさらに理解が深まります。   今回の記事の内容は動画でもご覧いただけます。 テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。   MySQLでサーバに接続する方法 今回は、Macでターミナルを使い進めていきます。 Windowsの方はコマンドプロンプトを使っておこなってください。 今さら聞けない！コマンドプロンプトの使い方も参考にしてみてください。   ターミナルのコマンド例 Macでフォルダの中身を出力する ls   Macでlsと実行すると、フォルダの中にあるファイルやフォルダの一覧が表示されます。   Windowsでフォルダの中身を出力する dir Windowsでdir実行すると、フォルダの中にあるファイルやフォルダの一覧が表示されます。   フォルダ名へ移動する フォルダ名へ移動する cd フォルダ名 MacもWindowsも、cd フォルダ名というコマンドで、フォルダ名のフォルダに移動できます。   例えば、 XAMPP の bin というフォルダに移動したい場合は次のように実行します。 cd /Applications/XAMPP/bin   Macであれば、ls を入力するとbin の中身が表示されます。   大石ゆかり 接続するって、自分のPCの中にあるMySQLにですか？ 田島悠介 MySQLってサーバソフトなんだよね。ポート番号で待ち受けていて、外から接続することができるんだ。今回はコマンドプロンプトからなので、MySQLの本体があるフォルダに移動してログインするんだよ。 大石ゆかり ユーザーIDとパスワードでログイン、という感じでしょうか？ 田島悠介 そうそう。では、実際にログインしてみよう！   MySQLにログインする MySOLにログインすることで、データベースの操作が可能になります。   MySQLにログインするコマンド コマンドプロンプトを起動後、次のコマンドを打ちMySQLにログインします。 mysql -u ユーザー名   次のように表示されればMySQLに接続したことを意味します。 mysql>   [PR] コーディングで副業する方法とはPHPでMySQLに接続する ここでは、PHPでMySQLに接続する解説をします。 サンプルコード $host = 'ホスト名'; $username = 'ユーザー名'; $password = 'パスワード名'; $db_name = 'データベース名'; mysqli_connect($host, $username, $password, $db_name); 解説 ホスト名、ユーザー名、パスワード名、データベース名を設定することで接続設定が完了します。   LaravelでMySQLに接続する ここでは、LaravelでMySQLに接続する解説をします。 .envファイルの設定 Laravelプロジェクト直下にある.envファイルの中の次の箇所を設定します。 設定内容には、データベース名とユーザー名とパスワードにそれぞれあらかじめ用意した内容を設定します。   php artisan migrateの実行 php artisan migrateコマンドをターミナル（コマンドプロンプト）で実行することで、LaravelからMySQLへの接続情報が反映されます。   php artisan tinkerの実行 php artisan tinkerコマンドをターミナル（コマンドプロンプト）で実行することで、LaravelからMySQLの操作が可能になります。   以上が、Laravelを利用したMySQLへの接続操作です。   RubyでMySQLに接続する ここでは、RubyでMySQLに接続する解説をします。 mysql2の環境構築 現在利用されているサーバOSはUbuntuのシェアが高いです。 UbuntuはLinuxというサーバの一種です。 UbuntuでRubyからMySQLに接続する方法として、 mysql2 というGemをインストールするのが一般的です。 Gemというのは、RubyGemsという名称の略語です。 RubyGemsは、Rubyで用意されたパッケージ管理システムです。 Ubuntuで、mysql2をインストールするコマンドは次のとおりです。 sudo apt install libmysqlclient-dev -y gem install mysql2   app.rbへの記載例 app.rbのコード require 'sinatra' require 'mysql2' get '/' do client = Mysql2::Client.new(host: 'ホスト名', username: 'ユーザー名', password: 'パスワード名', database: 'データベース名',
MySQL

JavaScriptでlocationオブジェクトを使う方法【初心者向け】

JavaScriptをプログラミング初心者向けに紹介した記事です。 今回は、JavaScriptでlocationオブジェクトを使う方法について解説します。 また、入門向けのJavaSriptを学習できるサイトも紹介しているので、合わせてご覧ください。   本記事では、テキストエディタのmiを使っていますが、JavaScriptの場合はWebブラウザとテキストエディタがあれば特別な開発環境がなくても開発することができます。   なお本記事は、オンラインブートキャンプ フロントエンドコース（JavaScript・jQuery講座）の内容をもとにしています。   大石ゆかり 田島メンター！locationオブジェクトというのは何でしょうか？ 田島悠介 ブラウザで表示したWebページのアドレス（URL）に関する情報が格納されているんだ。また、指定したアドレスに移動したりもできるんだよ。 大石ゆかり どのような書き方があるのですか？ 田島悠介 例を見ながら説明していくね！   locationオブジェクトとは プログラムを作っていると、Webページのアドレス（URL）に関する情報を取得したり、指定したアドレスに移動したい場面があるのではないでしょうか。そんな時に便利なのが、locationオブジェクトです。 URLとは、Uniform Resource Locator の略で、インターネット上でのページの「住所＝アドレス」のことを指します。URLには、情報の種類やサーバ名、ポート番号やファイル名など、プログラミングで使える様々な情報が格納されています。 それらの情報が格納されているのがlocationオブジェクトです。 実際の開発現場では、URLからパラメータを取得したり、指定したアドレスに移動したりする時に使います。   locationオブジェクトの書き方 基本的なプログラムは以下のようになります。locationキーワードの後ろに「.」ピリオドを付けて関数名を記載します。 主な関数については次章で紹介します。 location.関数名   [PR] コーディングで副業する方法とはlocationオブジェクトの主な使い方 この記事では、locationオブジェクトの主な使い方について解説します。 まずは、簡単な関数を用意します。 <!DOCTYPE html> <html lang = "ja"> <head> <meta charset = "utf-8"> <title>JavaScriptの練習</title> </head> <body> <script> // locationオブジェクトを表示 console.log(location); // urlを取得 var url = location.href; console.log(url); // プロトコルを取得 var protocol =
JavaScript

福岡のパソコン教室20選｜特徴や料金を表で比較

福岡県中心部や複数教室のある通いやすいパソコンスクールをピックアップしました。   田島悠介 今回は、なにか相談受けたんだって？ 大石ゆかり 福岡に住んでる友達がパソコンの知識つけたいって言ったんですが、どこ選べばいいかわからなくて・・・ 田島悠介 それじゃあ福岡にあるパソコンスクールを紹介していくね！ 大石ゆかり お願いします！ 目次 アクアパソコン教室 Winスクール キュリオステーション パソコン教室アビバ 西日本新聞パソコン教室 パソコン市民講座 アドバンスクール KENスクール パソコン県民講座 いちごパソコン教室 ヒューマンアカデミーパソコンスクール 市民パソコン塾 ディードットステーション ライトアップパソコン教室 パソコン教室ホエール ハロー！パソコン教室 パソコン教室わかるとできる DTP・Webデザインスクール「Desi」 富士通オープンカレッジ ヤマダパソコンスクール まとめ   アクアパソコン教室 画像引用元：https://aqua-school.com/ 特徴と向いている人 「～の基礎講座」、「～の入門講座」という名前のレッスンが主体となっており合計100以上のコースを用意してあります。またレッスン形式もマンツーマンからグループレッスンまであるので自分のレベルに合わせて通うことができます。 他にアクアパソコン教室の特徴を挙げると 個人レッスンはオーダーメイドのカリキュラムを作成 自習スペースが用意されいる 基本的なPCスキルからプログラミングまで幅広く学習することができる というところです。講座数も多いので、組み合わせて複数スキルを獲得できるのもアクアパソコン教室の魅力の1つです。 プラン・コース一覧 【基礎知識】 Microsoft Officeに関する基礎知識 Adobeデザインに関する基礎知識　ほか 【プログラミング言語】 VBA PHP JAVA　ほか 就職・転職サポート 「事務・営業・士業スペシャル」、「再就職支援パック」、「転職お急ぎ講座」など、週力・転職サポートも充実しています。 料金  入会金 10,000円(税抜) 受講料 4,500円 / 50分 テキスト代 1,000円 / 講座 割引制度 割引に関しての記載は特にありませんが、法人向けの出張講座など法人向けの特別なプログラムが用意されています。 住所・アクセス 住所 福岡県福岡市中央区天神3-4-2 シエルブルー天神4F 電話番号 092-984-0126 アクアパソコン教室 [PR] コーディングで副業する方法とはWinスクール 画像引用元：https://www.winschool.jp/ 特徴と向いている人 年間1484社の企業研修実績をもっており、実務の現場が求めるスキルを習得することができます。講座は全部で6つあります。 他にWinスクールの特徴を挙げると 国からの助成金をもらえる 全国の教室で併用が可能 学習ソフトの割引を受けられる といったところです。国からのお墨付きを得た信頼性の高いスクールです。 プラン・コース一覧 【基礎知識】 Word、Excelに関する基礎知識　ほか 【専門知識】 CAD（機械・建築）・3DCAD・インテリア WEBデザイン・WEBプログラミング グラフィックデザイン・映像デザイン プログラミング・ネットワーク AI（人工知能）・IoT・スマホアプリ Word・Excel・パソコン資格 【プログラミング言語】 C・C# PHP・HTML・CSS JAVA Python　ほか 就職・転職サポート Winスクール受講生向けに、就職サポート制度が用意されています。 料金 料金に関する資料を無料で請求することができます。 割引制度 Winスクールの受講に当たって、特別価格でソフトを購入できる割引制度が用意されています。 住所・アクセス 【北九州小倉校】 住所 福岡県北九州市小倉北区浅野2-14-1 小倉KMMビル1F 電話番号 093-513-8611 【八幡黒崎イオンタウン校】 住所 福岡県北九州市八幡西区西曲里町3-1 イオンタウン黒崎店2F 電話番号 093-616-2131 【博多駅前校】 住所 福岡県福岡市博多区博多駅前1-1-1 博多新三井ビルディング7F 電話番号 092-433-0104 【福岡天神校】 住所 福岡県福岡市中央区天神一丁目1番1号 アクロス福岡 3Ｆ 電話番号 092-720-5570 Winスクール キュリオステーション 画像引用元：https://curiostation.com/ 特徴と向いている人 キュリオステーションは初めてパソコンを触る初心者向けのコースを用意しており主に、Microsoft Officeや自宅で趣味でPCを扱いたい（画像編集や音楽など）方にオススメのスクールです。 他にキュリオステーションの特徴を挙げると PCの修理から設定まで行ってくれる POPやプリントやホームページの制作代行をしてくれる といったところです。個人商店などを営まれている方で、ホームページは用意してもらい後は自分で更新できる様にしたいといったこともできるので、自分ですべてやろうと考えていない人にもオススメです。 プラン・コース一覧 【基礎知識】 パソコンに関する基礎知識 Webサイト作成に関する基礎知識 Officeに関する基礎知識　ほか 【プログラミング言語】 HTML CSS　ほか 料金 料金に関する資料を無料で請求することができます。 就職・転職サポート 就職・昇格を目指すためのMOS(Microsoft Office Specialist)資格対策に特化したコースがあります。 住所・アクセス 【福大通り店】 住所 福岡県福岡市城南区七隈4-27-7　カワハラビル　1F 電話番号 092-864-9202 【西新店】 住所 福岡県福岡市早良区西新5-15-43　ドーミー福岡　1F電話番号 092-844-1472 【六本松店】 住所 福岡県福岡市中央区草香江2-1-4　プラムビレッジHIRO　1F 電話番号 092-791-6220 【古賀店】 住所 福岡県古賀市舞の里3-4-5　トライズビルII　1F 電話番号 092-692-5692 【久留米校】 住所 福岡県久留米市諏訪野町2355-1　第15上野ビル　2F 電話番号 0942-27-8608 キュリオステーション パソコン教室アビバ 画像引用元：https://www.aviva.co.jp/ 特徴と向いている人 アビバは大手という事もあり、講座のジャンル数と就業サポートが充実しているパソコン教室となっています。講座内容としてはMicrosoftOfficeやAdobeに強いです。 他にアビバの特徴を挙げると 自己診断をもとに必要なスキルを割り出してくれる 様々な講座を組み合わせることができる 人材サービス会社経由ですぐに就職ができる といったところです。遠回りをせず、最短最速で次のキャリアに進めるのがアビバの特徴です。 プラン・コース一覧 【基礎知識】 パソコンに関する基礎知識 Officeに関する基礎知識　ほか 【プログラミング言語】 VBA JAVA PHP　ほか 【資格知識】 MOS クリエイター能力認定試験 ITパスポート　ほか 料金 料金に関する資料を無料で請求することができます。 住所・アクセス 【天神校】 住所 福岡県福岡市中央区天神2-8-30　天神西通りビジネスセンター1F 電話番号 0120-333-336 【博多校】 住所 福岡市博多区博多駅東2-5-37 博多ニッコービル3F 電話番号 0120-333-336 【小倉校】 住所 北九州市小倉北区京町3-1-1 COLET/I’m10F 電話番号 0120-333-336 【久留米校】 住所 久留米市日吉町16-1 ダイマンビル5F 電話番号 0120-333-336 パソコン教室アビバ 西日本新聞パソコン教室 画像引用元：http://is-pro.net/nishi-np/ 特徴と向いている人 西日本新聞パソコン教室は幼児～大人向けまで幅広くコースが用意されているパソコン教室です。特徴としては8歳～に向けた簡単ロボット・プログラミング講座や幼児向けの思考力ブロック講座など、子供の習い事としてプログラミングに触れることができるようになっているという点です。 他に西日本新聞パソコン教室の特徴を挙げると 資格をたくさん取るための対策ができる Microsoft Officeを一通り扱えるようになれる といったところです。プログラミングではなくビジネス実務のPCスキルを上げたい人にオススメです。 プラン・コース一覧 【基礎知識】 スマートフォンに関する基礎知識 Officeに関する基礎知識　ほか 【プログラミング言語】 VBA Java Android　ほか 料金 料金に関する資料を無料で請求することができます。 住所・アクセス 【天神校】 住所 福岡県福岡市中央区天神4-3-20　ノース天神8階 電話番号 092-739-3200 【久留米校】 住所 福岡県久留米市東町31-34　毎日文化会館2階 電話番号 0942-38–6223 西日本新聞パソコン教室 パソコン市民講座 画像引用元：https://www.pc4353.net/ 特徴と向いている人 パソコン市民講座は子供～大人に向けて約800種類の講座を受講することができるパソコン教室です。パソコン市民講座では、映像配信学習に対応しており、実際に教室に行かなくても自宅で学習することも可能となっています。 他にパソコン市民講座の特徴を挙げると 無料映像教材で自宅でも勉強できる 1時間1,500円と格安 まずはお試しにPCを使えるようになりたいというひとにオススメです。 プラン・コース一覧 【基礎知識】 パソコンに関する基礎知識 Officeに関する基礎知識 スマートフォンに関する基礎知識　ほか 【資格知識】 MOS　ほか 料金 入会金：記載なし 月会費：2,204円(税別) / 月 受講料：1,500(税別) / 時間 テキスト教材費：記載なし ※料金に関する資料を無料で請求することができます。 割引制度 小学生～大学生は学割として、9,091円(税別) / 月で利用することができます。 住所・アクセス 【イオンスタイル笹丘教室】 住所 福岡県福岡市中央区笹丘1-28-74 イオンスタイル笹丘店 1階 電話番号 092-753-6633 【スピナマート中井教室】 住所 福岡県北九州市小倉北区中井4-8-1 スピナマート中井店 1階 電話番号 093-582-4066 パソコン市民講座 アドバンスクール 画像引用元：https://advan-school.jp/ 特徴と向いている人 アドバンスクールはプログラマーやネットワークエンジニアからAdobeを利用したデザイナーや映像編集まで様々な専門的分野を学ぶことができるパソコン教室です。また、子供向けのコースも用意されている面も特徴です。 他にアドバンスクールの特徴を挙げると 講座とアプリを割安セットで購入できる オンライン講座も充実している 料金は受講者のカリキュラムに合わせて決定 複数の専門スキルを身につけたいひとにオススメです。 プラン・コース一覧 【基本知識】 パソコンに関する基本知識 Officeに関する基本知識　ほか 【プログラミング言語】 JAVA Servlet/JSP C　ほか 【専門知識】 Photoshop Illustrator DTP　ほか 料金 入学金：11,000円(税込) 受講料に関しては、月に何回受講したかによって変わります。 ※詳細に関しては、料金に関する資料を無料で請求することができます。 割引制度 学割：入学金50%OFF さらに1万円割引 シニア割：65歳以上の方であれば入学金30％OFF 住所・アクセス 【小倉南校】 住所 福岡県北九州市小倉南区葛原東2-1-1　ベスト電器小倉南店 2F 電話番号 093-473-5810 【福岡天神校】 住所 福岡県福岡市中央区天神1丁目9-1ベスト電器福岡本店 7F 電話番号 092-791-7988 【福岡西校】 住所 福岡県福岡市西区 北原一丁目15番30号　ベスト電器New伊都店2F 電話番号 092-806-0081 【福岡南校】 住所 福岡県太宰府市向佐野4-8-47ベスト電器太宰府店2F 電話番号 092-921-0166 【大牟田校】 住所 福岡県大牟田市旭町2-28-1ベスト電器大牟田ゆめタウン店2F 電話番号 0944-32-9669 アドバンスクール KENスクール 画像引用元：https://www.kenschool.jp/ 特徴と向いている人 KENスクールは就職に特化したパソコン教室となっており、IT業界で必要な知識を大方網羅しており、大半の知識を習得できます。 特徴として、就職・転職のサポートが手厚く、専任のキャリアアドバイザーが長期的に働くことのできる企業を紹介してくれます。 他にKENスクールの特徴を挙げると 資格試験と同じ環境で模擬試験を受けることができる 現場で使う機材を扱うこともできる 複数の校舎を利用することができる 次のキャリアが明確に決まっている人にオススメです。 プラン・コース一覧 【プログラミング言語】 JAVA C VBA PHP　ほか 【専門知識】 ネットワークに関する専門知識 Web・DTPデザインに関する知識 CADに関する知識　ほか 就職・転職サポート 専任のキャリアアドバイザーや、転職エージェントサービスにより、長期的に活躍できる企業を抜粋して内定までサポートしてくれます。 料金 月会員：Officeコース・Webデザインコースのみ　10,000円～ / 月 ※その他コースの料金に関する資料は無料で請求することができます。 割引制度 学割、提携企業割引があります。 住所・アクセス 【KENスクール福岡校】 住所 福岡県福岡市中央区天神1-1-1 アクロス 福岡ビル2階 電話番号 092-713-5561 KENスクール パソコン県民講座 画像引用元：https://pasoken.co.jp/ 特徴と向いている人 パソコン県民講座は独自の教材を使用した個別指導によってスキルを習得できるパソコン教室です。 このパソコン教室は、以下のような方に向いています。 Officeの基礎を学びたい方 パソコンの使い方を学びたい方 今すぐに解決したい悩みがある方 プラン・コース一覧 【基礎知識】 Officeに関する基礎知識 パソコンに関する基礎知識　ほか 【資格知識】 MOS　ほか 料金 入会金：11,000円(税込) / 月 (月謝制プランのみ) 月謝制プラン：11,825円(税込)～ / 月 おたすけレッスン：5,500円(税込) 住所・アクセス 【西新教室】 住所 福岡市早良区西新5丁目15-24 電話番号 092-821-3888 【飯倉教室】 住所 福岡県福岡市早良区飯倉4-22-25-1 電話番号 092-836-6525 【大橋教室】 住所 福岡県福岡市南区大橋1-24-1 電話番号 092-552-5881 【次郎丸教室】 住所 福岡県福岡市早良区次郎丸4-1-33 電話番号 092-862-1124 【愛宕教室】 住所 福岡県福岡市西区愛宕1丁目1-23 電話番号 092-834-6273 パソコン県民講座 いちごパソコン教室 画像引用元：http://ichigopasokon.com/ 特徴と向いている人 いちごパソコン教室は決まったプランがなく、仕事上での困り事やOfficeの使い方を受講者に合わせて指導してもらえるパソコン教室です。またSNSやネットショップの使い方など、PCを生活の中で役立てたいという人向けの教室です。 プラン・コース一覧 【基礎知識】 パソコンに関する基礎知識 Officeに関する基礎知識　ほか 料金 チケット制 5回19,980円〜 住所・アクセス 住所 福岡県福岡市中央区渡辺通1-1-1 サンセルコ4F 電話番号 092-752-6667 いちごパソコン教室 ヒューマンアカデミーパソコンスクール 画像引用元：https://haa.athuman.com/academy/pc/ 特徴や向いている人 ヒューマンアカデミーパソコンスクールは、初めにプレレッスンを受け、自分に足りない必要なスキルを確認してから受講となるのが特徴のパソコン教室です。 特徴として、クラスで受ける授業スタイルの他に、「フリータイム受講制」という、仕事後や、土日の空いた時間に授業を受けるというスタイルもあるという点が挙げられます。 このパソコン教室は以下のような方に向いています。 Officeの基礎を学びたい方 資格を習得したい方 プラン・コース一覧 【基礎知識】 Officeに関する基礎知識　ほか 【資格知識】 MOS ITパスポート　ほか 就職・転職サポート グループ会社の人材サービス事業「ヒューマンソリシア」と連携しているため、履歴書や面接の対策、さらに仕事の紹介をしてもらえます。 料金 入学金：11000円(税込) ITパスポート講座：10120円(税込)/3ヶ月 MOS試験対策講座：27170円(税込)/2ヶ月 など 住所・アクセス 【ヒューマンアカデミー福岡校／佐賀校】 住所 福岡県福岡市中央区天神４丁目４−１１天神ショッパーズ福岡６階 電話番号 0120-15-4149 ヒューマンアカデミーパソコンスクール 市民パソコン塾 画像引用元：https://www.chuoh.com/ 特徴と向いている人 市民パソコン塾は、電源の入れ方からの超初心者から、MOSの資格を取りたい方まで、広い指導を行なっているパソコン教室です。 ビジネス向けはもちろん、日常での活用がしたいと思っている方にもおすすめです。また、子供用の講座もあり、年代問わず通うことができます。このパソコン教室は、以下のような方が向いています。 パソコンを初めて触る方 資格習得を目指している方 プラン・コース一覧 【基礎知識】 パソコンに関する基礎知識 Officeに関する基礎知識 Webサイト作成に関する基礎知識　ほか 【資格知識】 MOS　ほか 料金 入学金は1,000円です。 受講料は月謝制になっており、1講座50分につき1,000円、別途、教室維持費が月1,000円かかります。 週1回で月に4回受講する場合は、1,000円×4回＋維持費で5,000円といったように、好きなペースで授業を受けることが可能です。 住所・アクセス 【筑紫野校】 住所 福岡県筑紫野市二日市中央2-10-21 D.PRESENTS102号（ペッピーキッズクラブ 併設校） 電話番号 0120-868-003 【太宰府校】 住所 福岡県太宰府市五条2-2-24 ソニアルカサス101（ペッピーキッズクラブ 併設校） 電話番号 0120-868-003 【宇美須恵校】 住所 福岡県糟屋郡須惠町須惠800-1 アルバスエ205（ペッピーキッズクラブ 併設校） 電話番号 0120-868-003 【ウエストコート姪浜校】 住所 福岡県福岡市西区内浜1-7-3 レジャービル2F-E（ペッピーキッズクラブ併設校） 電話番号 0120-868-003 【ゆめタウン大川校】 住所 福岡県大川市上巻字野口430-1 ゆめタウン大川店舗内１Ｆ（ペッピーキッズクラブ 併設校） 電話番号 0120-868-003 市民パソコン塾 ディードットステーション 画像引用元：https://dstation.jp/ 特徴と向いている人 ディードットステーションは、初めてパソコンに触る方から、資格習得を目指している方まで幅広く対応しているパソコン教室です。 また定額月謝制で通いたい放題というのもディードットステーションの良いところでしょう。 プラン・コース一覧 【基礎知識】 パソコンに関する基礎知識 Officeに関する基礎知識 【プログラミング言語】 Scratch（スクラッチ） 料金 月謝：3,000円(税抜) 初回のみ20,000〜60,000円(税抜)のコース料金が必要です。 住所・アクセス 【西新教室】 住所 福岡県福岡市早良区城西3丁目20‐3親和ビル１F 電話番号 092-985-0843 【久留米教室】 住所 福岡県久留米市天神町101 Mビル１F 電話番号 0942-46-6555 ディードットステーション ライトアップパソコン教室 画像引用元：http://www3.coara.or.jp/~lightup/  特徴と向いている人 ライトアップパソコン教室は初心者にスポットを当てたパソコン教室となっています。このパソコン教室は以下のような方に向いています。 パソコンに触れたことがない方 インターネットを活用してみたいと考えている方 プラン・コース一覧 【基礎知識】 パソコンに関する基礎知識 Excelに関する基礎知識 料金 入会金：7,800円 受講料：9,800円～ / 月 割引制度 2人で入会、受講で割引 住所・アクセス 住所 福岡県福岡市博多区博多駅前3丁目6番 電話番号 092-483-2829 ライトアップパソコン教室 パソコン教室ホエール 画像引用元：http://www.ito-pc.jp/hp/ 特徴と向いている人 パソコン教室ホエールは独自の教材を使用して、パソコンを触ったことがない方を対象にOfficeが使用できるまでの習得までに対応しているパソコン教室です。 このパソコン教室は、以下のような方に向いています。 パソコンに触れたことがない方 これからパソコンを使ってみたいと考えている方 プラン・コース一覧 【基礎知識】 パソコンに関する基礎知識 Officeに関する基礎知識 料金 入会金：6,600円(税込) 月謝：6,600円(税込)～ /
プログラミング

【プレゼンで便利！】パワーポイントでページ番号を設定する方法

多くの企業採用されているMicrosoft社のパワーポイント(PowerPoint)。 プレゼンテーションから配布資料作成まで、幅広い用途で活用されています。 そんなパワーポイントですが、スライドにページ数を表示すれば、電話会議やテレビ会議など遠隔ミーティングに便利です。 「スライドの3ページ目をみてください。ここには〇〇の概要を記載していますが・・・」などといった会話が簡単にできます。 今回は、パワーポイントでスライドにページ数を表示する方法を紹介します。   なお本記事は、KiRAMEXのオンライン完結のPowerPoint(パワーポイント)講座の内容をもとに紹介しています。   目次 パワーポイントにスライド番号を入れる方法 ページ番号を非表示にする ページ番号の表示位置を変更する   パワーポイントにスライド番号を入れる方法 早速、パワーポイントにスライド番号を入れる方法を説明します。   まずはじめに、以下の赤枠を押して「表示」タブを開きます。 次に、「表示」タブ内にある「プレゼンテーションの表示」 で「標準」 をクリックします。 以下の表示スタイルになったら、左枠の一枚目のスライドを左クリックしてアクティブにします。 「挿入」タブを押します。 「挿入」タブ内にある「テキスト」 で 「スライド番号」をクリックします。 「スライド番号」を押したあとに表示されるウィンドウの中で「スライド番号」をクリックして「すべてに適用」をクリックします。 番号が表示されました。   [PR] コーディングで副業する方法とはページ番号を非表示にする 次に、設定したページ番号を非表示にする方法です。   「挿入」タブ内にある「テキスト」 で 「スライド番号」をクリックします。 表示されるウィンドウの中で「スライド番号」に入っているチェックをはずして「すべてに適用」をクリックします。 スライド番号が外れました。   ページ番号の表示位置を変更する ページ番号の表示位置の変更はスライドマスターから行います。   まずはじめに「表示」タブをクリックします。 「表示」タブ内の「スライドマスター」をクリックします。 スライドマスターが開いたら、番号のエリアは「#」で表示されていますので、そのエリアをドラッグ＆ドロップでお好みの場所に移動させます。   いかがでしたでしょうか。 打ち合わせやプレゼンなどで、何枚目かを共有するときにあると便利なのがスライド番号ですよね。 これまで紹介したように数ステップで表示の設定ができますので、時と場合に応じて使ってみましょう！
PowerPoint

JavaScriptでlocation.hashプロパティを使ってURLのハッシュを取得する方法を現役エンジニアが解説【初心者向け】

JavaScriptでlocation.hashプロパティを使ってURLのハッシュを取得する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。 JavaScriptについてそもそもよく分からないという方は、JavaScriptとは何なのか解説した記事をまずご覧ください。   なお本記事は、TechAcademyのオンラインブートキャンプ、JavaScript/jQuery講座の内容をもとにしています。   田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 JavaScriptでlocation.hashプロパティを使ってURLのハッシュを取得する方法について詳しく説明していくね！ 大石ゆかり お願いします！   目次 ハッシュとは location.hashプロパティとは location.hashプロパティの使い方 location.hrefでURLのハッシュを取得する方法 実際に書いてみよう まとめ   ハッシュとは URLにおけるハッシュとは、#の後の文字列のことです。 Twitterなどでも#をつけてハッシュタグとして、特定の項目を表したりしますがこれと同じようなものです。HTMLにidを設定し、そのidをハッシュで指定したURLはページの表示位置がそのハッシュのidを持つHTMLタグの場所になります。 平たく言うと、ハッシュはURLで指定したページの表示位置を指定しているということになります。下記にMDNのlocation.hashのリファレンスのURLを載せてみました。 下のものにはハッシュを#Examplesとつけています。実際にこのリンクをクリックすると、同じページを表示しますがハッシュのあるものは、Examplesという項目の位置を表示していることが確認できるかと思います。 developer.mozilla.org/ja/docs/Web/API/Location/hash developer.mozilla.org/ja/docs/Web/API/Location/hash#Examples（ハッシュあり） [PR] コーディングで副業する方法とはlocation.hashプロパティとは URLを現すLocationインターフェースのプロパティで、#を含むハッシュのデータが格納されています。先程のMDNのリファレンスのハッシュ付きリンクの場合は、#Examplesが格納されています。 location.hashプロパティの使い方 locationは、記述の省略が可能なwindowオブジェクトのプロパティです。そのため、そのままlocation.hashと記述することで使うことができます。 location.hrefでURLのハッシュを取得する方法 location.hashと記述することで現在のURLのハッシュ部分を取得できます。location.hashにHTMLに設定したidを設定することでその位置に移動することもできます。 いわゆる、ページ内遷移です。 実際に書いてみよう 記述は下記のものだけです。 location.hash 簡単にhashの値を確認する方法として、冒頭で紹介したMDNのハッシュ付きページを開いてブラウザの開発者ツールなどでコンソールにlocation.hashと記述してみてください。 #Examplesと表示されるはずです。 参考までにChromeブラウザの開発者ツールの開き方をGoogleのサイトで紹介したページのリンクを貼っておきます。 Chromeの開発者ツールの開き方（英語） まとめ URLのハッシュを使えば、初期の表示を指定した位置にすることができます。 JavaScriptでハッシュを取得したり書き換えることでページ内遷移ができます。ページのトップにスクロールを戻したり、中盤にある項目までスクロールさせたりとユーザーを助けることができますので活用してみてください。 筆者プロフィール 横山茂雄（よこやましげお） フリーエンジニアとして活動中。サーバーサイドからフロントまで時代の波に合わせてスキルを変化させてきました。 言語、フレームワーク、DB、現場、いずれも転々としながら、筋トレも欠かさない体育会系エンジニアです。TechAcademyジュニアのゲームアプリコースを担当しています。   大石ゆかり 内容分かりやすくて良かったです！ 田島悠介 ゆかりちゃんも分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！   TechAcademyでは、初心者でも、JavaScript・jQueryを使ったWebサービス公開を習得できる、オンラインブートキャンプを開催しています。 また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。
JavaScript

あなたの目的に合わせて学べるコース

副業したい方

Web制作の力を身につけ
副業までサポート

はじめての副業コース

転職したい方

未経験から
Webエンジニアに

Webエンジニア転職保証コース

スキルアップしたい方

AIも統計解析もできる
Pythonを学ぶ

Pythonコース

※ 経済産業省の行うリスキリングを通じたキャリアアップ支援事業の補助金対象コースです。条件を満たすことで支払った受講料の最大70％がキャッシュバックされます。詳しくは こちら のページをご確認ください。

TechAcademyから
現役エンジニアの方へ
お知らせ

オーダーメイドコース
TechAcademy（テックアカデミー） フロントエンドコース プログラミング JavaScript JavaScriptでlocation.hostプロパティを使ってホスト名とポート番号を取得、設定する方法を現役エンジニアが解説【初心者向け】