サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
iPhone 16
team-lab.github.io
# Vue.jsについて # Vue.jsとは? JavaScriptのフレームワークで、Webアプリケーションのユーザーインターフェースを効率的に構築することを目的にしており、主にView部分を実装します。 他にも似たようなフレームワークがあり、以下のようなものがあげられます。 React Angular これらのフレームワークとの違いとしては学習が容易ということがあります。またドキュメントが充実しており、初心者には使いやすいとも言われてします。 Vue.js公式ドキュメント # JS FiddleでVue.jsを触ってみる # Vue.jsの起動 早速Vue.jsを触ってみましょう。簡単に触るだけならオンラインエディタを使うのがいいです。 今回はJS Fiddle を使用します。こちらにアクセスして、HTMLとJavaScriptに以下のコードを入力してください。(上に出てくる「Sta
STEP2-1 フレームワークについて フレームワークとは何か フレームワークとは、アプリケーションの開発をしやすくするための、プログラムのひな形のことをいいます。開発者が実装したプログラムをまとめて制御して動くようにしてくれるものです。 日本語訳だと「枠組み」「骨組み」「構造」などといった意味があります。 フレームワークを用いることのメリットは、 プログラムの見通しが良くなる 機能追加がしやすくなる 開発のスピードが上がる などです。 しかし、フレームワークを習得するまでに時間がかかるなど、デメリットもあります。 代表的なPHPフレームワーク 代表的なPHPのフレームワークには、 Laravel CakePHP Symfony などがあります。 今回は、現在最も勢いのあるフレームワーク、Laravelを使用します。 Laravelの基本的な構造 LaravelはMVCというアーキテクチャ
STEP2-2.Laravelを導入してみよう STEP1同様に、STEP2の開発環境もDockerを使って整えることができます。 LaravelのDockerを使った開発環境をLaradockを使って構築してみましょう。 なお、Step1-4ですでにdocker環境を整えていることを前提に説明は進めていきます。 Laravelの開発環境を作成して初期画面を表示しよう まず作業するディレクトリを作成して、そこに移動しましょう。 projectnameは自分の作業用のプロジェクトの名前にしましょう。 $ mkdir projectname $ cd projectname $ git init 作成したディレクトリにlaradockをcloneでDLしましょう。 file_path:/projectname $ git submodule add https://github.com/Lar
// messageというキーに「こんにちはlocalStorage」という値を保存 localStorage.setItem("message", "こんにちはlocalStorage"); // messageというキーに保存した値を取得して表示 localStorage.getItem("message"); これを実行すると「こんにちはlocalStorage」と表示されると思います。 ローカルストレージはキー(Key)と値(Value)をペアにしたデータのリストを保存します。 Chromeの開発者ツールのResourcesタブからも見ることができます。 このようにKeyとValueをペアとして保存する方式をKVS(Key-Value Store)と呼びます。 この方式はデータベースなどにも使われています。 データの保存と読み込み ローカルストレージを使うために主に6つの操作を使い
STEP3-1.Ajaxを使ってみる Ajaxとは、JavaScriptなどからHTTP通信をすることによって、ページのリロードをせずにサーバとデータのやり取りをする技術です。ここでは1秒ごとに自動で再読み込みを行うような簡単なチャットを作成してみます。 まずはAjaxで取得するデータを用意しましょう。データはSTEP1で作成した掲示板のデータを流用することにします。以下の内容をajax_get_data.phpという名前で保存します。今回はCakePHPは使用しませんのでhtdocsに保存してください。 <?php $mysqli = new mysqli('localhost', 'root', '', 'board'); $json = array(); $result = $mysqli->query("SELECT * FROM datas ORDER BY created DE
STEP2-7.CakePHPでログイン機能を書いてみる ログイン機能をCakePHP式に書き直してみましょう。まずはUserモデルです。 <?php App::uses('AppModel', 'Model'); class User extends AppModel { //入力チェック機能 public $validate = array( 'username' => array( array( 'rule' => 'isUnique', //重複禁止 'message' => '既に使用されている名前です。' ), array( 'rule' => 'alphaNumeric', //半角英数字のみ 'message' => '名前は半角英数字にしてください。' ), array( 'rule' => array('between', 2, 32), //2~32文字 'messa
STEP2-8.画面仕様書とは 画面仕様書とはプログラムの設計図となるものです。各画面のデザイン・動作・機能・画面遷移などを記述します。画面仕様書を作る理由・利点には以下のようなものが挙げられます。 自分が作ろうとしているものを具体的にすることで、より細かい部分まで考えをまとめることができる。 自分以外の人に伝える手段となり、意見を聞いてより良いものへと改善することができる。 開発に比べて非常に簡単に作成できるため、意見を聞いてから修正まで何度も繰り返すことができる。 様々なルールを画面仕様書を使い統一させることができる。登録アクションはボタン、画面遷移はリンクなど。 サイト全体の構成を最適化することができる。 開発するときに同じ処理、同じパーツなど、洗い出すことができるため、後戻りなく開発を効率的に行うことができる。 STEP2ではこちらで用意した画面仕様書に従って開発を行っていただきま
STEP2-2.ログイン機能を作ってみる 今回はまたPHPに戻ってログイン機能を作ってみます。とりあえずユーザーの情報を保存するためのテーブルを作成します。名前はusersテーブルでusernameカラム, passwordカラムのどちらもCHAR型(固定長文字列)で長さは41にします。CHAR型は固定長文字列です。テーブル作成後、構造タブからusernameカラムをユニークに設定しておきます。これでusernameが同じ行が登録されなくなります。それでは新規登録画面(register.php)を作ります。 <?php $mysqli = new mysqli('localhost', 'root', '', 'board'); $status = "none"; if(!empty($_POST["username"]) && !empty($_POST["password"])){ /
STEP1-9.PHPからデータベースを操作してみる 接続 まずはPHPからデータベースに接続します。昔はmysql_connect関数を使っていましたが、最近はmysqliクラスを利用する方法が一般的です。 <?php //mysqliクラスのオブジェクトを作成 $mysqli = new mysqli('ホスト名', 'ユーザ名', 'パスワード', 'データベース名'); //エラーが発生したら if ($mysqli->connect_error){ print("接続失敗:" . $mysqli->connect_error); exit(); } ?> ホスト名はPHPを動かすサーバとデータベースを動かすサーバを分けない限りlocalhostです。初期設定ではユーザ名はroot、パスワードは無しになっています。エラーが発生したら、各種パラメータが合っているかどうか、MySQLが
# 始めに このサイトはチームラボ オンラインスキルアップ課題で使用する資料をまとめたサイトです。このサイト自体は誰でも見ることができますが、オンラインスキルアップ課題参加者には社内エンジニアによる課題のレビューなどがあります。 # 受講対象者 授業などである程度プログラミングに触れたことはあるが、Webサイトの作り方は分からないという方です。 # 課題 Vue.js + websocketを使用してリアルタイムチャットシステムを作ります。 # 学習内容 リアルタイムチャットシステムの開発を通じて以下について学びます。 Vue.jsについて ES6について gitの使い方 フロントエンドのローカルでの開発 VSCode lint websocket heroku
チームラボオンラインスキルアップ課題 このサイトはチームラボ オンラインスキルアップ課題で使用する資料をまとめたサイトです。 この資料の想定対象読者は、授業などである程度プログラミングに触れたことはあるが、Webサイトの作り方は分からないという方です。 内容は以下の通りとなっています。 STEP1 Webプログラミングをしてみよう Web上でのデータの流れ、データの送受信・保存の原理・方法、Webページ表示のための言語について学ぶ STEP2 Instagramもどきを作ろう セッションによるログイン機能、フレームワークによる中規模サイトの作成方法、データベースの設計方法について学ぶ 最終課題:Instagramもどきサイトの作成 また、想定OSはMac/Windowsとなっています。 その他のOSの方はダウンロードリンクやフォルダ構成などが一部異なります。 ブラウザはGoogleChro
このページを最初にブックマークしてみませんか?
『team-lab.github.io』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く