• 日本語
    • English (英語)
Avinton JapanAvinton JapanAvinton JapanAvinton Japan
  • サービス
    • Avinton Data Platform
    • エッジAIカメラ
      • 自動車ナンバープレート自動認識システム
    • プライベートクラウド
    • AIサービス開発
    • AIカメラ/画像解析無料体験版
  • 最新情報
    • ニュースリリース&イベント情報
    • 技術ブログ&インタビュー
  • アカデミー
    • Avintonアカデミー
    • Academy on Campus
    • Academy with Platform
  • 採用情報
    • Avintonジャパン 採用ページ
    • プロジェクトコーディネーター職紹介
    • 求人一覧
    • よくある質問
  • 企業情報
    • 会社概要
    • 代表からご挨拶
    • SDGsへの貢献
  • お問い合わせ

フロントエンドのWeb開発について

  • Python3.8 と OpenCV のインストール (Ubuntu20.04LTS)
  • ルーティング
  • postgreSQLへのshp fileのimport
  • NAT
  • データベースの命名規則
  • Avinton Academy コンテンツガイド
  • Docker Compose(Nginx + Flask + MySQL)演習
  • PostGIS exercise
  • Apache Superset maptoolの使い方
  • 三目並べ – 2.〇×を交互にゲーム盤に入るようにしよう
  • Docker 概要とセットアップ
  • 三目並べ – 3.勝敗がつくようにしよう
  • Docker Engineのubuntu上へのinstall
  • クリーンコード(Clean Code)
  • EC2からS3へ自動でぽいぽいアップロードするスクリプトの作成
  • 三目並べ – 4.「スタート」「リセット」ボタンをつけよう
  • 三目並べ – 5.先攻後攻を決めて、コンピュータ対戦にしよう(前編)
  • Apache Zeppelin 基本機能
  • インフラストラクチャー(サーバー、コンポーネント、RAID)
  • Ruby on Rails を MySQLでセットアップ
  • 機械学習入門者向け Support Vector Machine (SVM) に触れてみる
  • AWSアカウントの作成と必ずやるべきセキュリティ対策
  • Scala 基礎
  • VLAN
  • Apache Spark 基礎
  • scikit-learnとは
  • Ruby on Railsによる簡単なウェブアプリケーション
  • 正規表現とパイプ
  • 機械学習エンジニアに必要なスキル
  • Docker, Kubernetesの学び方について
  • NVIDIA Cumulus VX + GNS3でBGPネットワークのシミュレーション
  • Ubuntuの基本設定
  • PostgreSQL Setup
  • REDIS
  • Amazon EC2 インスタンスの初期設定をしよう
  • 軽量版Kubernetesディストリビューション – k0s クラスターの構築
  • GNS3のセットアップ
  • viエディタ
  • AWSのEC2インスタンスでWordPressブログを公開してみよう
  • Pythonでデータベースを操作する
  • Python2.7とOpenCVのインストール
  • ファイル操作コマンド
  • SampleアプリケーションのKubernetes上へのデプロイ
  • OpenCVのテストプログラム
  • グループとユーザー
  • Pythonで画像を分類するプログラムを作成する
  • AWS CLIをインストールしてコマンド操作しよう
  • Virtualisation and Container (仮想化とコンテナ) – Ansible, Docker and Kubernetes
  • Windows Server 2012 R2 Hyper-V
  • Spark SQL エクササイズ
  • 困った時に使うコマンド
  • SparkMLによるKaggle Titanic生存者予測
  • PacketTracerのセットアップ
  • 一般グループのユーザーとグループ
  • AWS Route 53を使って独自ドメインのWebページを表示させてみよう
  • Kubernetesクラスター上へのOpenVINOモデルサーバーを使用したサンプルアプリケーションのデプロイ
  • プライバシーポリシー
  • VMware ESXi サーバー構築
  • 三目並べ – 6.先攻後攻を決めて、コンピュータ対戦にしよう(後編)
  • フロントエンド開発のための環境構築
  • APIのデモンストレーション
  • CISCO 1800ルータセットアップ
  • ファイル検索コマンド
  • ESXi – Switchの追加とVLAN
  • 質問
  • 仮想化環境のディスク容量を拡張する
  • ユーザー権限とアクセス権
  • データ分析基礎 – Part1
  • 三目並べ – 0.導入
  • テキスト処理
  • ESXi – VyOS
  • データベースへのデータロード
  • 機械学習概要1
  • 機械学習入門者向け Naive Bayes(単純ベイズ)アルゴリズムに触れてみる
  • CCNA
  • YOLOv5を用いた物体検出
  • ESXi – 小規模ネットワーク 構築
  • ファイル管理
  • Webアプリ開発に欠かせないGoogle Chrome DevToolsの基本
  • 機械学習入門者向け ChainerRLでブロック崩しの学習
  • AWS CLIを使ってEC2のファイルをS3へアップロードしよう
  • Apache NiFiの環境設定
  • CSV import & export – Node.js, mySQL – 1
  • 機械学習入門者向け ランダムフォレストによる Kaggle Titanic生存者予測
  • 機械学習概要2
  • NodeJSでWebアプリケーション開発 – Socket.IO編
  • Gitとは
  • CSV import & export – Node.js, mySQL – 2
  • Apache NiFi データパイプライン基礎
  • PCからルータ、スイッチへのSSH接続設定
  • データ分析基礎 – Part 2
  • 【Python入門】Python Numpy チュートリアル
  • SQL 便利な関数
  • PostgreSQLによるデータ分析
  • Apache NiFi Exercise
  • 機械学習入門者向け 分類と回帰の違いをプログラムを書いて学ぼう
  • NodeJSでWebアプリケーション開発 – React編
  • Pythonによるマルチスレッドプログラミング実践
  • Apache SparkとApache Zeppelinの概要と環境構築
  • Certbotを使ってSSL証明書を発行し、HTTP通信を暗号化しよう
  • DockerとApacheを使ってWebサーバーを構築しよう
  • NodeJSでWebアプリケーション開発 – React編
  • フロントエンドのWeb開発について
  • Redux基礎 – 主要な概念と用語
  • Apache Superset 概要と環境構築
  • AmazonEC2とVPCでネットワークとサーバーを構築しよう
  • AWS入門者向け 初心者が最初に理解すべきEC2とVPCの基本的な用語解説
  • Linuxとは
  • Pandasによる構造化データ分析
  • Apache Superset 基礎
  • Dockerコンテナイメージの最適化/ベストプラクティス
  • ダイナミックルーティング
  • PostgreSQL – Python – Apache – Bootstrap
  • 三目並べ – 1.ゲーム盤を作ろう
Home Avintonアカデミー フロントエンドのWeb開発について
HTML logo
CSS logo
JavaScript logo

本記事では、フロントエンドのWeb開発における基礎的なことを紹介します。実践的な演習に入る前に読んでいただければと思います。

フロントエンドWeb開発(クライアントサイド開発とも呼ばれる)は、HTML、CSS、JavaScriptを使用してWebサイトを作成することを指します。

  • HTML (HyperText Markup Language): Webページのコンテンツの構造を作るために使うマークアップ言語
  • CSS (Cascading Style Sheets): HTML要素をどう表示させるか(体裁や見栄え)を表現するための言語
  • JavaScript: Webページにおいて、コンテンツを動的に更新する機能を作成できるスクリプト言語

ブラウザと互換性について

ブラウザは、HTML、CSS、JavaScriptファイルをWebサーバーから取得して表示します。ブラウザの種類は複数あります。そのため、1つのブラウザだけでなく他のブラウザでも、正しく動作する互換性のあるコードを書く必要があります。

こちら(browser_compatibility)は、ブラウザの互換性を示す一例です。
どのブラウザのどのバージョンが、アロー関数をサポートしているかどうかを確認することができます。

フロントエンドのWeb開発について

Webサーバーとは

Webサーバーには、HTML、CSS、JavaScriptファイルなどが保存されています。Webサーバーは、ブラウザからのリクエストに対してのレスポンスとして、これらファイルをブラウザに送信します。

例えば、Avintonのトップページ(https://avinton.com/)にブラウザからアクセスした場合、Webサーバは、ブラウザにHTML、CSS、JavaScriptファイルなどを送信します。以下のように、ブラウザの開発者ツール(Google ChromeブラウザではDevTools)を用いると、送信されたファイルを確認することができます。

フロントエンドのWeb開発について参考:Webアプリ開発に欠かせないGoogle Chrome DevToolsの基本

HTML、CSS、JavaScriptの学び方

学び方は様々ですが、こちらのサイト(w3schools)のチュートリアルを進めるのがおすすめです。

ライブラリ・フレームワークについて

ライブラリやフレームワークを使用することで、開発を効率的に進めることが出来ます。多くの開発で使用されており、ほとんどがオープンソースです。以下は、フロントエンドのWeb開発で良く使用されるライブラリ・フレームワークです。

  • React
  • Angular
  • Vue
  • Material Design
  • Bootstrap
  • Jquery
  • Ant Design

次は、こちら(NodeJSでWebアプリケーション開発 – React編)に取り組んでみてください。

あなたも、Avintonでこのような最先端技術を習得し活用してみませんか?

社員の成長を導きながら、AIやビッグデータなどの最先端技術をプロジェクトに活用していくことが私たちのビジョンです。Avintonの充実した技術研修でスキルアップを図り、あなたのキャリア目標を一緒に達成しませんか?

採用情報

採用情報

採用情報

Categories

  • 相互学習
  • 社員インタビュー
  • 学習&資格取得
  • 技術解説
  • イベント告知
  • 学内説明会&講義
  • 産学連携
  • 就職活動
  • イベントレポート
  • その他
  • 技術ブログ&インタビュー
  • mainpage
  • New Graduates Interviews
  • 中途エンジニア
  • カテゴリーなし
  • ニュースリリース&イベント

Avinton SDGs

SDGsへの貢献

Search

タグ

EdgeTech+2022 K0s K3s Linux LPIC-1 Python Ruby まつもとゆきひろ アカウントマネージャー ウェビナー エッジコンピューティング エンジニア運動会 キャリアチェンジ サーバー スマートシティ スマートマニュファクチャリング セキュリティ ゼンリンデータコム データ可視化 データ解析 ビックデータ ヘルプデスク マシンビジョン 中途 人流データ 効率性を高める 動画 地域貢献 天野禎章 展示会 工場 教師なし学習 新卒社員 暗号化 最新技術 森部好樹 機械学習 画像分類 真鶴町 社内イベント 社内レポート 説明会 資格 資格取得 野田真
© 2023 Avinton | All Rights Reserved | プライバシーポリシー
  • サービス
    • Avinton Data Platform
    • エッジAIカメラ
      • 自動車ナンバープレート自動認識システム
    • プライベートクラウド
    • AIサービス開発
    • AIカメラ/画像解析無料体験版
  • 最新情報
    • ニュースリリース&イベント情報
    • 技術ブログ&インタビュー
  • アカデミー
    • Avintonアカデミー
    • Academy on Campus
    • Academy with Platform
  • 採用情報
    • Avintonジャパン 採用ページ
    • プロジェクトコーディネーター職紹介
    • 求人一覧
    • よくある質問
  • 企業情報
    • 会社概要
    • 代表からご挨拶
    • SDGsへの貢献
  • お問い合わせ
  • 日本語
    • English (英語)
Avinton Japan