Vue js componentについての注意点

① コンポーネントは data:{ }, template,,,,,,,,,,,, といったオブジェクトの記述は出来ない。 この場合は data(){第一引数(コンポーネント名, 第二引数(コンポーネント内容))) の記述をする 例) Vue.component('title-com',{ data(){ return{ text:'コ…

Vue js Component 入れ子構造について

2つのコンポーネントを作成→入れ子構造にして表示を実装 コンポーネントについての過去記事は以下 kirikko-scondcube.hatenablog.com コード <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <h1>Vueの練習</h1> <div id="app"> <h2>{{messa…</h2></div></body></html>

Vue.js component作成方法

【ルール】 componentは Vue の宣言前に書く(複数のVue宣言がある場合、使用できるのはcomponetを作成した記述以下で記載されたVue宣言の場所で使用可能) component以下で記述のVueではどこでも使用可能 html上にて作成した名前のタグで呼び出す 呼び出す…

Gitkrakenの使い方 

Gitkrakenを使用していてつまずいたことなどのぼやき記事 Pull とMargeを混同して考えていた件 以下ではpullとmargeを混同していた為、pullに迷走した自分がpullではなくmargeをするという考えが大切だったと気づくまでの軌跡です。 以下記事 Gitkrakenのプ…

Laravel5.5 MAMP環境構築

htdocsのディレクトリへ移動 コンポーザーを入れる composerは一度入れてグローバルに入れれば2度目はインストール不要(アンインストールすると入れる必要あり) composerインストール curl -sS https://getcomposer.org/installer | php composerをグロー…

Laravel GithubからcloneしたLaravelフォルダがlocalhostで開けない時の対処

githubへpushしたフォルダをcloneしてチーム開発に使いたい。 そんな時にcloneしたけど自分の環境だと開けないよ、、 となった時 この記事は以下の記事の続きです。 kirikko-scondcube.hatenablog.com kirikko-scondcube.hatenablog.com 上記記事の要領でpus…

Laravel5.8 x MAMP 環境構築

Laravel5.8で開発を始める環境構築方法 参考: https://qiita.com/KZ-taran/items/789d6e0fc1963d7babad ターミナルを開く MAMPのhtdocsの階層へ移動 以下のコマンドを入力 ・コンポーザーの準備 curl -sS https://getcomposer.org/installer | php sudo mv …

Git でGithubにフォルダをpushする方法

参考記事 https://techacademy.jp/magazine/6235#sec4 https://backlog.com/ja/git-tutorial/reference/basic/ 記事作成の背景 githubにLaravelのフォルダをアップロードしようとしたらフォルダのファイル数が100を超えていて、アップロード出来なかった。 ↓…

JS fullcalendar 使い方

fullcalendarの使用方法についての記録 HP:https://fullcalendar.io/ get startedを押す downloadからzipファイルをダウンロード 使用するのはpackages このフォルダ内に作業ファイルを作る 今回は「test.htmlとtest2.html」を作成 基本のカレンダー表示はこ…

PHP MYSQL INSERT編 0 POSTデータ取得について

//1. POSTデータ取得 //$name = filter_input( INPUT_GET, ","name" ); //こういうのもあるよ //$author = filter_input( INPUT_POST, "author" ); //こういうのもあるよ $name = $_POST['name']; $author = $_POST['author']; $kan = $_POST['kan']; $kanso…

PHP MYSQL INSERT編 2  データ登録SQLについて

//3.データ登録SQL作成 //prepare("")の中にはmysqlのSQLで入力したINSERT文を入れて修正すれば良いイメージ $stmt = $pdo->prepare("INSERT INTO gs_bm_table2(name,author,kan,kansou,indate)VALUES(:name,:author,:kan,:kansou,sysdate()); "); $stmt->…

PHP MYSQL INSERT編 1  データベース接続について

基本的なDB接続の記述 //2. DB接続します try { //localhostの時はこれ。さくらの場合さくらのデータベースをいれる //Password:MAMP='root',XAMPP='' $pdo = new PDO('mysql:dbname=gs_db;charset=utf8;host=localhost','root','root'); } catch (PDOExcept…

PHP mysql Mampの id「root」のパスワードが「''」ではなく「root」だった話し

phpファイルからmysqlのDBへの接続がエラーになった原因を探した結果 https://qiita.com/Masataka_Sugi/items/30fa760a4c0c0699857a を参考にしたところ。 MAMPの id:root pass:root としたら解決 エラーの時は id:root pass:'' としていた。 コードはこちら…

PHP SQL 初級編 知っておくと良いこと

SQLは ・コメントアウトは「--」を頭につける ・「'」シングルコートしか使わない(「"」ダブルコーテンションは使用不可) SELECTを使用したSQLの抽出の練習 DB01-11演習 1.SELECT * FROM gs_bm_table WHERE id = 1 OR id = 3 OR id =5 2.SELECT * FROM gs_…

PHP DBについて 基本準備編

php myadminの画面 DBの基本設計 id: int(12) PRIMARY KEY:AUTO_INCREMENT name: VARCHAR (64) email: VARCHAR(128) naiyou: TEXT indate: DATETIME 補足: intは数字のこと。()内の記述でその項目の最大入力可能文字数を指定 VARCHARは文字列のこと。()…

Javascript 関数について 基本的な引数とreturnの理解

関数の引数と戻り値についての理解がさっぱり分からない そんな時に朗報が まずこのサイトが分かりやすい https://developer.cybozu.io/hc/ja/articles/115005338743-%E3%81%AF%E3%81%98%E3%82%81%E3%82%88%E3%81%86JavaScript%E7%AC%AC9%E5%9B%9E-JavaScrip…

PHP サニタイズについて

サニタイズとは こちらのURLに詳しく記載があった https://webukatu.com/wordpress/blog/1635 具体的な書き方 xss.php <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <form method="post" action="xss3.php"> <p>お名…</p></form></body></html>

React サーバーの上げ方 google books api を使った検索サイトを作った

初めてReactを触るにあたってサーバーへのアップロードに苦戦した 以下のサイトの41-43ページに解決方法記載あり https://books.google.co.jp/books?id=2ayWDwAAQBAJ&pg=PT44&lpg=PT44&dq=react+%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC+%E3%82%A2%E3%83%83%E3…

Javascript firebase chat app 作成

ログイン認証の実装は前述 kirikko-scondcube.hatenablog.com にて説明の通り。 https://www.youtube.com/watch?v=CvkCjfHts9A chat appは https://www.youtube.com/watch?v=CK2XEyVGc6c&t=17s が分かりやすい。 【実装してみた所感】 ・今回はchatを先に作…

Javascript ログイン認証実装

実行&記述日 2020/5/18 参考にしたURL: https://www.youtube.com/watch?v=CvkCjfHts9A この動画だと不十分(2分50秒くらい) firabase uiのログインのコピペ部分 https://firebase.google.com/docs/auth/web/firebaseui firebase ui のコピーして使う部分 …

Javascript forEach 使い方

今回はforEachによるloginとlogoutのレイアウト変更について コードは以下 <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=, initial-scale=1.0"> <title>Document</title> </head> <style> .hidden{ display: none; } </style> <body> <form action="" class="form hidden"> </form></body></html>

javascript 連想配列

html <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <button id="btn">test</button> <button id="btn2">test2</button> </body></html>

Javascript Canvasその1 ドットインストールcanvas1〜5の内容まとめ

実行結果 html <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>canvas練習</title> <link rel="stylesheet" href="css/canvas.css"> </head> <body> <canvas width="600" height="240"> Canvas not sapported </canvas></body></html>

Javascript Jquery DOM操作 Classの付与

やりたいこと ・クリックイベントでハンバーガーメニューをクリックしたらタイトルが消える ・ハンバーガーメニューを閉じたらタイトルが出る 方法 ハンバーガーメニューをクリックイベントをすると、 ・メニューにクラスopenが追加→メニュー表示 ・タイトル…

CSS .〇〇wrapperの中に.container をいれる理由  〜marginの考え方〜

marginを上手く使って余白と中央揃えをする時の設計の考え marginの管理方法まとめ 続く

コロナウイルスに負けない Zoomを使用した授業のオンライン化実現までの流れ

Zoomを使用した授業のオンライン化について記事を書きました。 https://note.com/kirikko/n/n99a006db0ac5先日桐生市内で個人塾をしている知人からコロナで仕事が出来ず生徒さんの親御さんと共に困っていると相談を受けました。スマホを使用したことの無い友…

Javascript 〜document.createElement('')で作った要素に属性を付与する方法〜

今回はjs操作でimgタグを作るやり方を以下に let img = document.createElement('img'); img.className =`card spade sapde${i} ${i}`; img.id = ''; img.setAttribute ('src','images/front.png'); img.onclick =clickFunc; 1。let img document.createEle…

Javascript split()の使い方

sprit();は()内に入れた引数を区切りとして文字列を配列に変換してくれる。 例)const t = 'aaa9bbb9ccc9ddd';console.log(t.split('9'));これのコンソールの結果は ["aaa", "bbb", "ccc", "ddd"]となる。 上記は文字列を引数である「9」で区切った結果が表…

Javascript スプレット構文について  ...〇〇と記述するやつ!

配列についてググっている時に「...arr〇〇✖︎✖️〜〜〜〜」というように何やら「...」が使われたコードがある。 でもこれ何? となりました。 ...でググっても出てこなかったのですが。 ドットインストールにて発見 参考:js オブジェクト編#6スプレット構…

Javascript 神経衰弱ゲームを作ろう その3 並べたimgをシャッフル  Fisher–Yatesアルゴリズム

この記事の続きです kirikko-scondcube.hatenablog.com 今回使用したものはFisher–Yatesアルゴリズム 参考:https://qiita.com/komaji504/items/62a0f8ea43053e90555a?fbclid=IwAR2p_kxgQoehQXpfLbMjGXwMYDoWs5ycEjGku52rMAIPHTCcZ6ppLmyjs64 内容は以下 for…