progate
中央部分に出現したPOP UP画面,通称モーダル(Modal)を表示させる Progate ReactⅢ モーダルを表示する より ざっくりと作業手順をメモする stateを変更する メソッドを定義handleClickLessonメソッドを定義するhandleClickLessonメソッドの定義部分で、「hand…
真偽値 よくできました！ True 目標：上記の図解を紐解いて、理解できるようになる 真偽値とは？ 真偽値の２つを理解するようになる if文と真偽値 ２つの条件式を確認してみよう trueの場合 よくできました！ falseの場合 コンソールに何も表示されなかった…
目標：Pythonでのif文書き方を習得する if文 if文の簡単な表現方法。 if文の条件式が成り立つときの図 if文の条件式 下記の図参照 インデント 上部：インデントは正しいが、条件式が合っていない。 正しくインデントを揃えてif文の条件を実行しよう 下部：if…
目的：データ型の文字列型と数列型の組合せ方法について学ぶ 目標：内容を理解する 型変換 str 数値型を文字列型に変換する方法 A.str(price)のように表記することで文字列になる。 Ex. price = 100 print('リンゴの価格は' + str(price) + '円です') どうし…
メモ削除の処理を作ろう point （注意）このチャプターでは処理を作るのであって、実際に画面上消えるわけではない。 このように理解すること 削除するメモのidを指定したい 前回書いたフォーム内に書く ボタン処理操作の中に新たにDELETEクエリを書く URLで…
削除機能の手順を確認しよう --point-- メモ削除するためのルーティングを作成 /deleteルーティング処理を書き、resdirectを用いて/indexにリダイレクトする メモ削除ボタンの作成（送信先のurl・送信方法を設定） 上記を書き終えてから「localhost:3000/ind…
メモアプリを完成させよう 目標 ：削除機能を加えること ：更新機能を加えること ：この章にてメモアプリ編が完結する、その前に 。アウトプットをして、ここまで出来ていなかったら、学習コースⅡでの復習をすすめる。 なぜなら、実際書いて進んだ方が理解度…
今回学べること ：ATOMを使ったMysqlとExpressを繋ぐ方法 今回の要点は下記画像をチェックすることだった。 databaseとコードが噛み合っていなかった。 今回実践したこと ユーザー名とパスワードを確認すること データベースが本当に正しかったか検証したこ…
目標：新規メモを打ち込んだ後の「メモを追加」（ターミナルに出力）できるようにする。 フォームに入力した値を受け取ろう フォームの値を受け取る準備をしよう（1） 確認すべき箇所 new.ejsのinput属性にname属性を追加する name属性にはinputNameを指定す…
目標：新規作成ボタンを押す（フォーム送信後）と一覧画面を表示できるようにする 作成機能の処理の流れを確認しよう 一度、演習問題の見本を確認する。 フォーム送信した後に、一覧画面が表示されてるのを確認できる。 このようにする メモ作成のルーティン…
目標：フォームからメモを作成できるようになる ！？ （フォームからできるのかよ...） 作成画面を表示しよう 作成画面の表示方法 作成画面を/NEWとし、アクセスできるようにする。 アクセスできるようにするには 作成画面を表示できるようにする必要がある…
取得した値の表示 目標 ：データベースからの数値をindex.ejsに渡す。 ：一覧表示させる EJSに値を渡す 手順 ：値を受け取るにはrenderメゾットに記入する ：第２引数において {プロパティ： 値}を記入する。するとindex.ejs側に渡すことが出来る 演習問題 E…
データベースを使ってみよう 演習問題 ２週目の今回は、実際にMysqlにログインしつつ進める。 ログイン方法は下記にある。確認しつつコピペしつつ開始しよう。 ここでアクシデント。 データベースが表示されない。 undefinedとは？ 演習問題は一応クリア。 …
データベースを準備しよう MySQLを準備（インストール）する MySQLとは データベースを管理する道具の一つ このように覚える MySQLを操作するには Node.js と MySQL を接続する必要がある。 今回は２週目なので、既にインストール済み。 なので仕組みを重点…
データベースを使ってみよう 学習コースⅡでの目標 ：メモ作成・メモ一覧表示させること 今回作るもの 確認事項 ：メモ表示する機能 ：メモ一覧作成する機能 上記２点を目標に、学びつつアウトプットしていく。 今回は以上になります。お疲れさまでした。
目標 ：トップ画面ボタンのurl画面変更 ：一覧画面urlボタンをトップ画面に表示する ：トップ画面urlボタンを一覧画面に表示する トップ画面と一覧画面を繋げよう ：ルートurlにて繋ぐようにする トップ画面のURLを変更しよう / ルートurlにてはじめにアクセ…
EJSを使って値を表示しよう EJSとは HTMLの中にJavaScriptが使えるNode.jsパッケージのことを指す point JavaScriptを使用するには2つの方法がある。 <% %> <%= %> <% %> =を使わない場合、文字が見えなくなる。この際に変数の定義などに使用される。 2.<%= …
一覧画面の作成 一覧画面を表示させよう 目標：買い物リストを作成するための準備「一覧画面を表示する」を作る 一覧画面の見た目 app.ejsファイルにindex.ejsファイルのルーティングを作成する indexルーティングコード viewsフォルダにインデックス(index.…
CSSを適用しよう 目標：CSSを利用しトップ画面を整える。 CSSを適用するには（1） パブリックフォルダを作成 cssフォルダ及び画像ファイルを入れる場所として作成 このように覚える・ CSSを適用するには（2） cssファイルを作成 パブリックフォルダ内のパス…
表示の仕組みを理解しよう 目標：トップ画面を表示させるルーティングを書き、トップ画面を表示させること トップ画面を表示させるルーティング 全体像 /top って何？ /top = リクエストがきた（tpoへ戻る、とかトップボタンを押したという意味）際にップ画…
目的：サーバーを起動させること サーバーを起動しよう 起動するための準備： ※app.listen(3000); 起動コード： npm ファイル名 ※app.listen(3000); はローカルホスト３０００にて起動するようになる。 ホスト番号は色々あるので、ググりつつ試行錯誤するこ…
目標：メモアプリを完成させる 目的：本日より実用を兼ねたウェブアプリ制作に入ります。実際に作業しつつ並行学習し完成。そしてアプリケーション作成に慣れることです。 ２周目は開発記録もしつつブログ編成する。 参考記事：１周目 shinoblog-manabu.hate…
できない。 この３日間、色々ググってみて試してみるものの、出来ない。 prog-8.com 上記progate内容に沿って実行しているが、最後まで辿り着くことができなかった。 データベースとテーブルを作成しよう データベースおよびテーブルは作成済み mysql login …
ハッシュ化されたパスワードでログインしよう 目標：ハッシュ化されたパスワードにてログインすること パスワードを比較しよう 比較に必要な bcrypt.compare() を使用する。 このようなメソッドをcompareメソッドという このように覚える。 ex. bcrypt.compa…
パスワードの安全な取り扱い方を学ぼう 目的：パスワードが第三者にもれないようにする 目標：安全なパスワードの取り扱いについて学ぶ 安全性の高いパスワード パスワードの文字列をハッシュ値に変換する ハッシュ値にする方法を学ぶ このように覚える bcry…
ユーザー登録と同時にログインしよう 今回の目標：ユーザー登録した時点でログインしている状態になること 上記の状態になるよう目指す。 ユーザー名とユーザーIDをセッション情報に保存しよう そのままログインするには？ ユーザー名とユーザーIDをセッショ…
ユーザー登録処理を作成しよう 目的 ：ユーザー登録処理の為の３つの手順を理解する このように覚える。 ユーザー登録処理の流れを確認しよう ①ユーザー登録画面のフォームを送信 ②ユーザーをデータベースに登録 ③ユーザー登録のあと一覧画面へリダイレクト …
ユーザー登録機能を作成する手順 目的：ユーザー登録機能（全４手順）を覚える ユーザー登録に必要なルーティングを書く ユーザー登録フォームを表示させる ビューファイルの作成（手順に従って新規ファイル登録） ユーザー登録リンクボタンの作成 このよう…
限定記事の閲覧を制限しよう 今回の目標 ：ログアウト状態時、限定記事の表示・表現方法を学ぶ ：categoryカラム値とlocal.isLoggedInプロパティを使った制限方法を学ぶ ログイン状態と制限を整理しよう 現状：会員限定であるはずの記事が見られている状態 …
ログアウト機能を作成しよう 目標：ログアウトボタンの作成 ログアウトとは ログアウト = セッション情報からデータを消すこと ログイン ＝ セッション情報からデータを保存すること ログアウトボタンとルーティングを用意しよう ログアウトボタンの作成方法…
