• ja  日本語
    • en English (英語)
Avintonジャパン株式会社Avintonジャパン株式会社Avintonジャパン株式会社Avintonジャパン株式会社
  • ブログ
  • サービス
    • AI・機械学習サービス開発
    • G-Suite / Googleアプリサービス
    • AI 画像認識による無料PoCサービス
  • アカデミー
  • 採用情報
  • 求人
  • お問い合わせ
  • 会社情報
    • 会社概要
    • 代表からご挨拶

三目並べ – 0.導入

  • Python3.6とOpenCVのインストール (Ubuntu18.04LTS)
  • ルーティング
  • 見た目を美しくしてみましょう
  • NAT
  • 三目並べ – 2.〇×を交互にゲーム盤に入るようにしよう
  • カート内のアイテム個数を変更
  • 三目並べ – 3.勝敗がつくようにしよう
  • EC2からS3へ自動でぽいぽいアップロードするスクリプトの作成
  • 三目並べ – 4.「スタート」「リセット」ボタンをつけよう
  • 三目並べ – 5.先攻後攻を決めて、コンピュータ対戦にしよう(前編)
  • カートの設置
  • Ruby on Rails を MySQLでセットアップ
  • レイアウト調整
  • 機械学習入門者向け Support Vector Machine (SVM) に触れてみる
  • AWSアカウントの作成と必ずやるべきセキュリティ対策
  • VLAN
  • テスト
  • 機械学習を用いた画像分類
  • Ruby on Railsによる簡単なウェブアプリケーション
  • 正規表現とパイプ
  • 機械学習エンジニアに必要なスキル
  • Ubuntuの設定
  • PostgreSQL Setup
  • REDIS
  • Amazon EC2 インスタンスの初期設定をしよう
  • Pythonの設定
  • GNS3のセットアップ
  • viエディタ
  • AWSのEC2インスタンスでWordPressブログを公開してみよう
  • Pythonでデータベースを操作する
  • Python2.7とOpenCVのインストール
  • ファイル操作コマンド
  • OpenCVのテストプログラム
  • グループとユーザー
  • Pythonで画像を分類するプログラムを作成する
  • AWS CLIをインストールしてコマンド操作しよう
  • Virtualisation and Container (仮想化とコンテナ) – Ansible, Docker and Kubernetes
  • Windows Server 2012 R2 Hyper-V
  • 困った時に使うコマンド
  • PacketTracerのセットアップ
  • 一般グループのユーザーとグループ
  • AWS Route 53を使って独自ドメインのWebページを表示させてみよう
  • プライバシーポリシー
  • VMware ESXi サーバー構築
  • 三目並べ – 6.先攻後攻を決めて、コンピュータ対戦にしよう(後編)
  • フロントエンド開発のための環境構築
  • フロントエンドのデモンストレーション
  • APIのデモンストレーション
  • CISCO 1800ルータセットアップ
  • ファイル検索コマンド
  • ESXi – Switchの追加とVLAN
  • 質問
  • 仮想化環境のディスク容量を拡張する
  • ユーザー権限とアクセス権
  • 三目並べ – 0.導入
  • テキスト処理
  • ESXi - VyOS
  • データベースへのデータロード
  • 機械学習入門者向け Naive Bayes(単純ベイズ)アルゴリズムに触れてみる
  • CCNA
  • ESXi – 小規模ネットワーク 構築
  • ファイル管理
  • 機械学習入門者向け ChainerRLでブロック崩しの学習
  • AWS CLIを使ってEC2のファイルをS3へアップロードしよう
  • CSV import & export – Node.js, mySQL – 1
  • 機械学習入門者向け ランダムフォレストによる Kaggle Titanic生存者予測
  • CSV import & export – Node.js, mySQL – 2
  • PCからルータ、スイッチへのSSH接続設定
  • 【Python入門】Python Numpy チュートリアル
  • SQL 便利な関数
  • PostgreSQLによるデータ分析
  • 機械学習入門者向け 分類と回帰の違いをプログラムを書いて学ぼう
  • NodeJSでWebアプリケーション開発 – React編
  • Pythonによるマルチスレッドプログラミング実践
  • Certbotを使ってSSL証明書を発行し、HTTP通信を暗号化しよう
  • DockerとApacheを使ってWebサーバーを構築しよう
  • NodeJSでWebアプリケーション開発 – React編
  • Ruby on Rails インストール
  • AmazonEC2とVPCでネットワークとサーバーを構築しよう
  • AWS入門者向け 初心者が最初に理解すべきEC2とVPCの基本的な用語解説
  • Linuxとは
  • Pandasによる構造化データ分析
  • カート機能作成
  • Ruby on Rails Academy
  • ショッピングアプリケーション作成
  • ダイナミックルーティング
  • PostgreSQL – Python – Apache – Bootstrap
  • 三目並べ – 1.ゲーム盤を作ろう
Home Academy 三目並べ – 0.導入

本アカデミー(三目並べ)について

HTML/CSS/javascriptを使用して、簡単な三目並べ(〇×ゲーム)を作成します。

HTMLやCSSについては、基本的な要素と頻出の装飾に触れ、javascriptについては基本的な文法に触れつつ、jQueryというライブラリを利用します。

また、開発するOSは依存しません。ブラウザが立ち上がれば、任意のOSで構いません。

 

jQueryについて

jQueryはjavascriptのライブラリで、利用することでコード量を削減し、可読性を向上することができます。

ライブラリ利用には、jquery.min.jsファイルのパスを、script要素のsrc属性に指定する必要があります。ファイルの配置場所は、WEBサーバ上でもローカルでも構いません。

ここで、同一処理におけるコード量を比較してみます。例えば、以下のようなHTMLがあると仮定します。

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>〇×ゲーム</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>

<body>
  <div id="game_title">
    <h1>〇×ゲーム</h1>
  </div>
</body>

</html>

body要素の中の、h1要素のテキスト「〇×ゲーム」という文字列を取得する場合、それぞれ以下のように記載できます。

// raw javascript
document.getElementById('game_title').children[1].innerHTML

// jQuery
$('#game_title').children[1].html()

ご覧いただいたとおり、同一の操作を行なう場合も、コード数を削減することができます。

先頭の $ を付与する、セレクタで要素を指定することで、jQueryの関数を利用できます。

本AcademyではHTMLやCSSをjQueryで操作する場面がたくさんありますので、使いながら感覚を掴んでいっていただけますと幸いです。

採用情報

カテゴリ

  • イベント
  • インターンシップ
  • カテゴリーなし
  • 勉強会
  • 技術者ブログ
  • 採用
  • 機械学習
  • 社員インタビュー

Recent Posts

  • 20 11月, 2019
    ET/IoT Technology出展のお知らせ はコメントを受け付けていません。

    ET/IoT Technology出展のお知らせ

  • 12 11月, 2019
    ビジネス向け AI セミナー開催 はコメントを受け付けていません。

    ビジネス向け AI セミナー開催

  • 25 10月, 2019
    Japan IT week出展のお知らせ はコメントを受け付けていません。

    Japan IT week出展のお知らせ

  • 23 10月, 2019
    【Meetupイベント】人事とエンジニアが語る会社説明&懇親会(12月分日程追加!) はコメントを受け付けていません。

    【Meetupイベント】人事とエンジニアが語る会社説明&懇親会(12月分日程追加!)

Search

Social Icons

Archives

  • 2019年11月 (2)
  • 2019年10月 (2)
  • 2019年7月 (4)
  • 2019年4月 (1)
  • 2018年11月 (1)
  • 2018年10月 (2)
  • 2018年9月 (2)
  • 2018年8月 (2)
  • 2018年7月 (1)
  • 2018年6月 (2)
  • 2018年5月 (1)
  • 2018年4月 (5)
  • 2018年3月 (5)
  • 2018年2月 (2)
  • 2018年1月 (7)
  • 2017年12月 (6)
  • 2017年11月 (14)
  • 2017年10月 (17)
  • 2017年9月 (4)
  • 2017年8月 (9)
  • 2017年6月 (1)
  • 2017年4月 (2)
  • 2016年11月 (2)
  • 2016年10月 (1)
  • 2016年9月 (1)
  • 2016年8月 (1)
  • 2016年5月 (4)
  • 2016年4月 (8)
  • 2016年3月 (9)
  • 2016年2月 (3)
  • 2015年11月 (2)
  • 2015年9月 (2)

タグ

2017 2018 Avinton Avinton Academy Avinton Japan Avintonジャパン CSS HTML Linux Python Ruby Webエンジニア yokohama アビントン アビントンジャパン アヴィントン アヴィントンジャパン インフラエンジニア エンジニア グローバル サマーインターンシップ サーバーエンジニア セミナー データサイエンス データサイエンティスト データベース データ解析 ネットワークエンジニア ビックデータ ベンチャー 勉強会 営業 就活 就職活動 成長 技術インターン 採用 横浜 機械学習 機械学習エンジニア 派遣 深層学習 第二新卒 英語 起業
©2018 Avinton. All Rights Reserved. • プライバシーポリシー
  • ブログ
  • サービス
    • AI・機械学習サービス開発
    • G-Suite / Googleアプリサービス
    • AI 画像認識による無料PoCサービス
  • アカデミー
  • 採用情報
  • 求人
  • お問い合わせ
  • 会社情報
    • 会社概要
    • 代表からご挨拶
Avintonジャパン株式会社