森本ひのき
Discord:ひのき
2022/04/22
とりあえずHTMLやcssについて調べる
その後webアプリを作るためのチュートリアルをやってみる
webアプリで何ができるのか、どんなことが初心者でもできるのか何もわからないので、それについても調べてみる
2022/5/11
方針決定
progeteのロードマップ「webアプリケーションを形にしよう」を行う。
そのためにまず、ロードマップシーン1「webページを作ろう」に沿って勉強し、基礎をしる。
何を知らないのかもわからないので、とりあえずマップに沿って勉強する。何か見えてきたらそこで考える。
今日はHTMLとCSSについて。学んだことをメモ。
HTME
* a herf でリンク挿入
*img src='url' で画像挿入
* liでリストを作る 親要素をulにする句読点、olにすると数字
*CSSとはHTMLの要素に対し、色・大きさ・配置などを指定する←見やすいものになる HTMLとは別のファイルに記載
* color:色; font-size: **px; font-family""(フォント)background-color:色; width(横幅)height(高さ)
*classをつけることで、1つ1つの要素にcssを適応することが可能。css記述では先頭に.をつけることを忘れない
*meta charset=""で文字コード指定 link rel="style sheet"でcssファイルを読み込む宣言、helf="ファイル名"でファイルを指定
*レイアウト:div (HTML)
*list-styleプロパティでnoneを指定→黒点なくなる(css)
*floatプロパティで横並びを指定(css)padding:値;で余白 padding-top,padding-bottom,padding-left,padding-right
*spanを使うことで文字の一部をcssで変更することができる
*border 線をつける(css) 下線ならborder-bottom 内側に余白→padding 外側に余白→margin
*inputタグは終了タグ不要 textareaは複数行インプット(終了タグ必要) input type="submit"で送信ボタン作成 value=""で送信から変更可能
HTML CSS初級完了
2022/5/13
エディタについて学ぶ。vscodeをやった日にこれができたのとても幸い
Visual Studio Codeをインストールしよう:済
コードを自動保存できるよう設定にしよう:済
コードを自動整形できるようにしよう:済
ファイルパスを補完(先頭文字をタイプすることで候補が出るようにする)できるようにしよう:済
ショートカットキーで操作してみよう:済
com+N 新しいファイル作成
fin+↑ 行の先頭へ移動 fin+↓ 行の最後に移動
com+F 検索
com+/ 選択行をコメント化
option+com+F 置換 option+com+enter 全て置換
(*以降、適宜調べたら追加)
検索機能を使ってみよう:済
置換機能を使ってみよう:済
エディタについて学ぶ終了
調べるだけだったから特に作ったものとかはない。
短い時間で完了したのはよかった。
調べると大抵ウィンドウズ仕様のショートカットでいちいち二回調べないといけないのがめんどくさかった。次からは毎回macっていれる。vscode便利!
コメント
azami.icon
自分で信頼するページ見つけるのえらいーー
早い!!!
こまったのかな。ショートカットちゃんと書いたりして次につなげるの偉いなー
tomoki.icon
エディタの勉強活かせてて素晴らしい
Windowsは悪!!!
macあるあるわかる!
特にcmdとctrl
Progate頑張って!
やったこととか「済」で可視化してるの、やる気の継続につながるからいい
方針
インターネットの基本を理解する
イラスト図解式 この一冊で全部わかるWeb技術の基本 | NRIネットコム株式会社, 小林 恭平, 坂本 陽, 佐々木 拓郎 |本 | 通販 | Amazon←長そうだったらちょっと考える さらって読みかも
JavaScriptを学ぶ 一からだから役割と基本の操作、webページとの関連について手を動かす
インターネットの基本を理解する
クライアントとサーバーについて学ぼう:済
サーバというコンピュータ→インターネット上の情報を保存
クライアントがサーバの情報を取得する
URLの役割について学ぼう:済
クライアントがサーバに情報をリクエストする際に使う
情報のインターネット情報場所を表す。住所のようなもの
リクエストとレスポンスの流れを掴もう:済
urlを使ってリクエスト→サーバはリクエストされたものを返す→そのhtmlをクライアントのブラウザで表示→いつも見ている画面に
IPアドレスについて学ぼう:済
サーバやクライアントなどにつけられた住所
IPv4だと対応しきれなくなりそうでIPv6が検討されている...授業でやったなこれ
URLとIPアドレスの関係とDNSを理解しよう:済
DNS(Domain Name System)IPアドレス(数字の羅列)を覚えるのは大変なので、これを使って文字列に変換する
https://school-camp.in/ のうち、ドメインにあたるものはschool-camp.in。IPアドレスという数字の羅列を文字列に変えてる。.inや.comなどをトップレベルドメイン、school-campの方をセカンドドメインという。セカンドドメインは早いもの順で既に使われていたら使えない。 digコマンドでドメインを管理しているサーバー(DNSサーバー)に問い合わせをしてドメインからIPアドレスを取得し表示できる。digはdomain information proper。
JavaScriptの基本を理解しよう
基本的な構文を覚えよう:済
console.log()で文章表示 let 変数名=値 で変数定義
変数の値を更新するときはletいらない
定数:変数と異なり値を更新することができない const 定数名=値
テンプレートリテラル:文字列の中に定数や変数を含めることができる ${定数} *バッククオテーションで囲む
かつは&& で表す またはは|| で表す
switch文 caseとbreakを使う どれにも合わない場合はdefault(if文のelseと似ている)
繰り返し while(条件式){ 処理} for(変数の定義;条件式;変数の更新){処理}
querySelector:参照箇所の文章を変更する
addEventListener:イベント発生時の動作を登録する。
2022/5/20
FizzBuzzプログラムを作ってみよう
for (let number = 1; number <= 100; number += 1) {
if (number % 3 == 0 && numer % 5 != 0) {
console.log('Fizz');
}
else if (number % 5 == 0 && number % 3 != 0) {
console.log('Buzz');
}
else if (number % 3 == 0 && number % 5 == 0) {
console.log('FizzBuzz');
}
else {
console.log(number);
}
}
修正
for (let number = 1; number <= 100; number += 1) {
if (number % 3 == 0 && number % 5 == 0) {
console.log('FizzBuzz');
}
else if (number % 5 == 0) {
console.log('Buzz');
}
else if (number % 3 == 0) {
console.log('FizzBuzz');
}
else {
console.log(number);
}
FizzBuzzプログラムに挑戦
そもそも環境構築がわからず苦戦した
Repliteでできるかなと思ったらJavaしかなかった
javaとjavascriptが違うのを知らず調べた(結局vscodeでやってみた)
コードは書いて、htmlファイル作ってそれで表示させればできたのか確認できるのかなっと思ったが、表示されずそれについて今調べている。
これで行けそう!
間違ってますね、直します
for (let number = 1; number <= 100; number += 1) {
if (number % 3 == 0 && number % 5 == 0) {
console.log('FizzBuzz');
}
else if (number % 5 == 0) {
console.log('Buzz');
}
else if (number % 3 == 0) {
console.log('Fizz');
}
else {
console.log(number);
}
dekita!!!!
以降は来週に回す
DOMの基本について理解しよ
WebページでJavaScriptを実行してみよう
JavaScriptでHTMLを操作してみよう
JavaScriptでCSSを操作してみよう
イベント処理を作ってみよう
動きのあるWebページを作ってみよう
モーダルを作ってみよう
アコーディオンを作ってみよう
カルーセルを作ってみよう
5/20 フィードバック
本当に細かめに色々描いている!素晴らしい。
FizzBuzz動いてる!
FizzBuzzが完成してる、すごい
本当に細かく書いていてすごい!どれくらいの時間かけてるんだろう。鈴木 振り返り
インターネットの話は結構授業でやってたなーってことばかりだったので、知識があやふやということがわかった。何回か復習兼ねて読み直したいな
javascriptはめっちゃめんどくさい。書くの。慣れていきたいな〜
Domとか色々知らないことあるので来週もやっていくの楽しみ
来週の計画
javascript残り
開発者ツールを使おう
動画見る最低2url
2022/05/25
DOMの基本について理解しよう
DOMはHTMLをプログラムで操作するためのAPI
WebページでJavaScriptを実行してみよう
JavaScriptでHTMLを操作してみよう
JavaScriptでCSSを操作してみよう
イベント処理を作ってみよう
querySelector:参照箇所の文章を変更する
addEventListener:イベント発生時の動作を登録する。
動きのあるWebページを作ってみよう
モーダルを作ってみよう
何らかの親ウィンドウから開かれた子ウィンド そのこウィンドでやるべき操作をやるまでは親ウィンドウの操作ができなくなる
アコーディオンを作ってみよう
カルーセルを作ってみよう
2022/05/27
ソフトフェア開発
これまでの開発
デスマーチ:ソフトウェアを作るパラメータが正常値を50%以上経過したもの
スコープ:作らなければいけない機能
ソフトウェアエンジニアリング:ソフトウェアを作るときに正しいやり方で行う
フォーターフォールモデル:上から下に向かって工程が流れていく。逆戻りしてはいけない。現実的に困難
スパイラルモデル:フォーターフォールを繰り返すことで弱点を解消する。時間がかかる
<問題点>
プロセスが事前に決められている
計画できないものを計画しようとしている
→アジャイル開発
人間を尊重。人が上手に物事を動かすことに重きを置く
計画するよりも適応型で計画する。計画を新しくする
ハッカーの歴史
自分のために、好きだからソフトウェアを作る人をハッカーと呼ぶ
人工的なソフトウェア(依頼されてソフトウェアを作る人)、自然なソフトウェア(ハッカーのこと)
ハッカー:知的な難問を楽しむ人
ジョン・マッカーシー、マービン・ミンスキー ハッカーを育てた人
1970:AI冬の時代
UNIX、C言語が新たなハッカーからの誕生
アジャイル開発
私考えるひと、あなた作る人問題 分業体制が問題!
アジャイル開発:プロセスでなく態度やマインドセットを現したもの
アジャイル開発手法
・リーンソフトウェア開発 無駄を省きながら価値を届ける思想や原則
・スクラム:開発プレセスのフレームワーク 役割、イベント、作成物が決められている×技術的なことを決めている
・XP:価値や原則から技術プラクティスまで包括的にもうら
・カンバン:見える化して計測する
まぜてもOK
9:42まで
振り返り
javascript残り
開発者ツールを使おう
動画見る最低2url
→javascript思うように進まず、動画も1つ目のurlの途中まで
全然できなかった
javascriptがそもそも何のサイトを参考に勉強すればいいかわからず、そこに時間がかかった。これいいって思ってやってみても途中から分からなくなったまたサイトを探すのに戻ったり。
jQueryってのが割と初心者向けとセットで出てくるから、来週はそこから攻めようかな
あと、動画は時間もないし、とりあえずアジャイル関係するところから見て行こうかな。インタビューとかは一通り見終わってから
フィードバック
webページ作成!楽しいよ〜
動画めっちゃまとめられててすごい!!
JavaScriptはどれ勉強すればいいのかは結構難しいよね〜・・・
jQueryもいいけど、個人的には素のJavaScript触るのもおすすめだよ〜
動画見てメモ残すのとてもいいですね!
計画
javascriptでモーデル、アコーディオン、カルセールを触る
←anone_menterで聞いてみる!そこでできそうなの探す
動画は見切る!(1-3,2,3)
開発者ツール やりたいな
今週分をどうにか完走したい
2022/6/1
動画から
1_3 アジャイル開発
アジャイルチームを作ろう マインド:私考える人、あなた作る人を作らない
自己組織化(チーム活動の中でみんなで成長しよう)
チームをサポートする存在が必要 アジャイルコーチとかスクラムマスターとか
2_1 チームづくりを始めよう
チーム→一人ではできな問題を解決するもの
量の問題:協力、分担
質の問題:創発、協働(新しいアイディアが生まれたり)
最適な人数は?→2枚のピザ理論 5-8人くらい
チームで最も重要な事:全体は部分の総和に勝る。(一人より全体になった方がいろいろできる)
→「心理的安全」が最も重要だった!チームでは安全に対人リスクを取れる コミュニケーションにおける不安を感じることのないように
無知と思われる不安、無能だと思われる不安、ネガティブだと思われる不安、邪魔する人だと思われる不安
具体的な方法:HRT
謙虚
助けを求める。自分一人でできると思わない。
尊敬
相手を一人の人間として扱いその能力と功績を認める
信頼
相手を信頼して仕事を頼む
*自分の価値とコードを同一視してはいけない*
根本的な貴族の誤り
自分の誤りを環境にする、相手の失敗は相手のせいにする人間の成功
←これを理解しておいて、いいチームを作ろう!
2_2 チームの活動を支える道具
1. ミッションステートメント
共通理解を書き起こす チームのやること・やらないことを定義したもの
認識の違いを明らかにし、方向性を示すもの
*何度も書き直すことが必要
2. 設計ドキュメント
ラフな設計案
チームのためのドキュメント チームメンバーが同意できるレベルのものが欲しい
背景、目的ー>設計ー>メンバ→セキュリティ→運用 など
チームみんなでかく
3. コミュニケーションツール
同期コミュニケーション
実際に会って話す機会 電話とかも
非同期コミュニケーション
オンラインツールを使用する
フロー型 チャットなど
ストック型 ファイル置き場など
フロー・ストック混合型 wikiなど
*初期は同期だが、ある程度たった後非同期に移行するのが良い
*議事録を書こう!
2_3 アジャイルコーチング
岡目八目:コーチの役割と似ている
チームの改善はメンバーには難しい→チームの外部に相談できる人がいると良い
アジャイルコーチとは:鏡のようなもの 正しく服を着させてあげるもの
正しく把握(気づく)、通知(フィードバック)、ファシリテートする
気づく
観察する。チームのパターンを捉える
話を聞く。情報収集に徹する
質問する。オープンクエスチョンを使う wから始まるもの なぜ?は攻撃的になるので使い方に注意!
フィードバックする
許可を求める。先に信頼関係を築く!+適切な時期に伝える
事実と意見を区別する
伝え方を工夫する 1 on 1か対チームかを使い分ける。 相手に考えさせる
ファシリテートする
選択肢を出してもらう 思考の枠を外して考えさせるようにする
合意を形成する 合意の段階を使う 賛成反対の2択だけに絞らない
追跡+レビューする 定期的に進捗どうですかとチームで確認してもらう
コーチの狙い
サーバントリーダーシップ
リーダとしてのビジョンを持ちながら、サーバントのようにみんなに奉仕する
自己組織化
コーチがいなくても自分たちだけで進める力を身につける
自律、成長、交流
コーチの目標
笑顔で解雇されること
解雇されたらノウハウを持って新しいチームに移動する
常に工夫をし続けよう!
3_1スクラムの概要
スクラムが最初に導入しやすい きちんと習得するのは難しい
プロダクトバックログ:一つ一つの機能
スプリントプランニング:ミーティングでスプリントゴールを決める
スクリンとバックログ:タスク
スプリントの実施:タスクを実施する 1−4週間
デイリースクラム:15分のミーティング 計画を見つめ直す
出荷判断可能なプロダクトインクリメント:誰かが判断する
スプリントレビュー:できを見るミーティング
スクリンプレトロスペクティブ:開発自体がどうだったかというプロセスを見直すミーティング
振り出しに戻る
*プロダクトバックログは最初から全て決めている必要はない
3_2 スクラムチーム
スクラムチーム
3つの役割
プロダクトオーナー
スクラムマスター
開発チーム
求められること
5つの価値基準
確約 絶対やるんだという決意
勇気
集中 ゴールに向かって進む
公開 仕事や課題とその遂行の様子を公開する。隠さない
尊敬
プロダクトオーナー
プロダクトの責任者 映画監督みたいなイメージ 持ち主
作業とプロダクトの価値の最大化に責任を持つ
プロダクトバックログでスクラムチームに意向を伝える
開発チームに依頼をできるのはこの人だけ
ステークホルダーとやりとりする
開発チーム
プロダクトを開発する専門家集団
3-9人
自己組織化を求められる
機能横断性で開発に必要なスキルを全て備えていることを求められる
スクラムマスター
開発プロセスの責任者
スクラムを成立させ、プロダクトの開発を成功に導く 命令はできない
チーム全体を下から支援する(サーバントリーダー)
他のチームともうまく協力する
*開発チームメンバーで持ち回りで担当すると良いでしょう
*従来のプロジェクトマネージャーをプロダクトオーナー、スクラムマスター、開発チームで担っているというイメージ
3_3スクラムのイベントと作成物
プロダクトバックログを用意する(作成物)
ビジョンやロードマップを柵に用意する
プロダクトオーナーを中心にステークホルダーの意向を把握する
項目はPBI 3行テンプレートで作ることが多い
スプリントバックログを用意する(作生物)
スプリントプランニング(イベント)
今回のスプリントで何をやるべき・やりたいか(スプリントゴール)
自分達にどれだけ開発できるか(キャパシティ)
このバランスをとりながら今回の開発に対象となるPBiを選択する
スプリントを実施する(イベント)
スフォーニング みんなで一気に行う
担当を決めずみんながどのタスクも担当できることが理想
成果物を見せる(イベント)
作ったものだけを関係者に見せて、フィードバックを受けよう
事前に完成と未完成に区別しておこう
フィードバックをもらったら次に繋げよう
開発の様子を振り返る
スプリントレトロスペクティブ(イベント)
データを収集する(事実と感情)
そこからの気づきを得る 継続、中止、朝鮮に分けると便利
具体的な改善アクションにつなげる
*常に心理的安全に配慮しよう!!
→また振り出しに戻る
うまく失敗ながらチームで学習していくことが大切!
2022/6/8
モーダルを作ってみようをやってみる。
code:0608.html
<!DOCTYPE html>
<html>
<head>
<link href="0608.css" rel="stylesheet" type="text/css">
<script typt="text/javascript" src="./0608.js"></script>
</head>
<body>
<div class="popup" id="js-popup">
<div class="popup-inner">
<div class="close-btn" id="js-close-btn"><i class="fas fa-times"></i></div>
<a href="#"><img src="./img/popup.jpg" alt="ポップアップ画像"></a>
</div>
<div class="black-background" id="js-black-bg"></div>
</div>
</body>
</html>
alt属性は、画像が表示出来なかった場合に代替文字として表示するテキストを指定します
popup {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 9999;
opacity: 0;
visibility: hidden;
transition: .6s;
}
.popup.is-show {
opacity: 1;
visibility: visible;
}
.popup-inner {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 80%;
max-width: 600px;
padding: 50px;
z-index: 2;
}
.popup-inner img {
width: 100%;
}
.close-btn {
position: absolute;
right: 0;
top: 0;
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
cursor: pointer;
}
.close-btn i {
font-size: 20px;
}
.black-background {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .8);
z-index: 1;
cursor: pointer;
}
window.onload = function () {
var popup = document.getElementById('js-popup');
if (!popup) return;
popup.classList.add('is-show');
var blackBg = document.getElementById('js-black-bg');
var closeBtn = document.getElementById('js-close-btn');
closePopUp(blackBg);
closePopUp(closeBtn);
function closePopUp(elem) {
if (!elem) return;
elem.addEventListener('click', function () {
popup.classList.remove('is-show');
})
}
}
実行してみると、html,cssは動いているのに、javascriptが動いていないせいでモーダルが消えない。どうやって調べたらいいんだろうか。
console.logやると動くから動いてはいるのか?
window.onload = function() { … } は、ページが読み込まれたらコードを実行するための記述です。モーダルの画像が読み込まれてから表示させる方が良い感じですからね。
→つまり画像が読み込めてないからいけないのか?(ディベロッパーツールでもそう出てた)
画像やっても変わらなかった。alrが働いてくれていた
cssのいちばん最初に.がなかったので、追加すると動いた。
なんかうまくモーダルがきえあとの画面が表示されないけど、とりあえず終了!
2022/6/15
アコーディオンを作ってみよう
ー>アコーディオンメニューはメニューをクリック(タップすると)非表示になっている内容が連動して開放されるUIです。
素のjavascriptでアコーディオンを作る!とりあえずいちばんオーソドックスなやつだけ。
## cssのhtml挿入
<link href="0615.css" rel="stylesheet" type="text/css">
## javascriptのhtml挿入
<script typt="text/javascript" src="./0615.js"></script>
## htmlのdt,ddについて
<!DOCTYPE html>
<head>
<link href="0615.css" rel="stylesheet" type="text/css">
<script typt="text/javascript" src="./0615.js"></script>
</head>
<body>
<dl class="accordion js-accordion">
<div class="accordion__item js-accordion-trigger">
<dt class="accordion__title">DEMO1のタイトル</dt>
<dd class="accordion__content">DEMO1のコンテンツ</dd>
</div>
<div class="accordion__item js-accordion-trigger">
<dt class="accordion__title">DEMO1のタイトル</dt>
<dd class="accordion__content">DEMO1のコンテンツ</dd>
</div>
<div class="accordion__item js-accordion-trigger">
<dt class="accordion__title">DEMO1のタイトル</dt>
<dd class="accordion__content">DEMO1のコンテンツ</dd>
</div>
</dl>
</body>
/* 簡易リセットCSS */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* アコーディオン全体 */
.accordion {
max-width: 800px;
margin: 0 auto;
}
/* アコーディオン */
.accordion__item {
margin-top: 10px;
cursor: pointer;
}
/* アコーディオンのタイトル */
.accordion__title {
position: relative;
padding: 15px 60px 15px 20px;
font-weight: bold;
cursor: pointer;
}
/* (+)アイコン */
.accordion__title::before,
.accordion__title::after {
content: "";
position: absolute;
right: 20px;
top: 0;
bottom: 0;
margin: auto 0;
width: 20px;
height: 4px;
transition: all 0.3s;
}
.accordion__title::after {
transform: rotate(90deg);
}
/* アコーディオンのコンテンツ */
.accordion__content {
padding: 0 20px 15px 20px;
display: none;
cursor: pointer;
}
.accordion__content.is-open {
display: block;
}
/* アコーディオン展開時の(-)アイコン */
.accordion__item.is-active .accordion__title::before {
transform: rotate(180deg);
}
.accordion__item.is-active .accordion__title::after {
transform: rotate(180deg);
opacity: 0;
}
/* =================================================== */
// slideUp, slideDown, slideToggle関数を定義
/* =================================================== */
// 要素をスライドしながら非表示にする関数(jQueryのslideUpと同じ)
const slideUp = (el, duration = 300) => {
el.style.height = el.offsetHeight + "px";
el.offsetHeight;
el.style.transitionProperty = "height, margin, padding";
el.style.transitionDuration = duration + "ms";
el.style.transitionTimingFunction = "ease";
el.style.overflow = "hidden";
el.style.height = 0;
el.style.paddingTop = 0;
el.style.paddingBottom = 0;
el.style.marginTop = 0;
el.style.marginBottom = 0;
setTimeout(() => {
el.style.display = "none";
el.style.removeProperty("height");
el.style.removeProperty("padding-top");
el.style.removeProperty("padding-bottom");
el.style.removeProperty("margin-top");
el.style.removeProperty("margin-bottom");
el.style.removeProperty("overflow");
el.style.removeProperty("transition-duration");
el.style.removeProperty("transition-property");
el.style.removeProperty("transition-timing-function");
el.classList.remove("is-open");
}, duration);
};
// 要素をスライドしながら表示する関数(jQueryのslideDownと同じ)
const slideDown = (el, duration = 300) => {
el.classList.add("is-open");
el.style.removeProperty("display");
let display = window.getComputedStyle(el).display;
if (display === "none") {
display = "block";
}
el.style.display = display;
let height = el.offsetHeight;
el.style.overflow = "hidden";
el.style.height = 0;
el.style.paddingTop = 0;
el.style.paddingBottom = 0;
el.style.marginTop = 0;
el.style.marginBottom = 0;
el.offsetHeight;
el.style.transitionProperty = "height, margin, padding";
el.style.transitionDuration = duration + "ms";
el.style.transitionTimingFunction = "ease";
el.style.height = height + "px";
el.style.removeProperty("padding-top");
el.style.removeProperty("padding-bottom");
el.style.removeProperty("margin-top");
el.style.removeProperty("margin-bottom");
setTimeout(() => {
el.style.removeProperty("height");
el.style.removeProperty("overflow");
el.style.removeProperty("transition-duration");
el.style.removeProperty("transition-property");
el.style.removeProperty("transition-timing-function");
}, duration);
};
// 要素をスライドしながら交互に表示/非表示にする関数(jQueryのslideToggleと同じ)
const slideToggle = (el, duration = 300) => {
if (window.getComputedStyle(el).display === "none") {
return slideDown(el, duration);
} else {
return slideUp(el, duration);
}
};
/* =================================================== */
// DOM操作
/* =================================================== */
// アコーディオンを全て取得
const accordions = document.querySelectorAll(".js-accordion");
// 取得したアコーディオンをArrayに変換(IE対策)
const accordionsArr = Array.prototype.slice.call(accordions);
accordionsArr.forEach((accordion) => {
// Triggerを全て取得
const accordionTriggers = accordion.querySelectorAll(".js-accordion-trigger");
// TriggerをArrayに変換(IE対策)
const accordionTriggersArr = Array.prototype.slice.call(accordionTriggers);
accordionTriggersArr.forEach((trigger) => {
// Triggerにクリックイベントを付与
trigger.addEventListener("click", () => {
// '.is-active'クラスを付与or削除
trigger.classList.toggle("is-active");
// 開閉させる要素を取得
const content = trigger.querySelector(".accordion__content");
// 要素を展開or閉じる
slideToggle(content);
});
});
});
うまく動かない。javascriptが悪いのかな。
<!DOCTYPE html>
<html>
<head>
<link href="0615.css" rel="stylesheet" type="text/css">
</head>
<body>
<dl class="accordion js-accordion">
<div class="accordion__item js-accordion-trigger">
<dt class="accordion__title">DEMO1のタイトル</dt>
<dd class="accordion__content">DEMO1のコンテンツ</dd>
</div>
<div class="accordion__item js-accordion-trigger">
<dt class="accordion__title">DEMO1のタイトル</dt>
<dd class="accordion__content">DEMO1のコンテンツ</dd>
</div>
<div class="accordion__item js-accordion-trigger">
<dt class="accordion__title">DEMO1のタイトル</dt>
<dd class="accordion__content">DEMO1のコンテンツ</dd>
</div>
</dl>
<script typt="text/javascript" src="0615.js"></script>
</body>
</html>
動いたー!
file:///Users/morimotohinoki/groupc/ソロ活動/java0615/0615.html
*<script typt="text/javascript" src="0615.js"></script>をbodyのいちばん下に入れたのがよかった。これが活実らしい。
あと、htmlのおまじない
アコーディオンこっちもやってみた。この方がシンプルで理解しやすい
const dt_tags = document.querySelectorAll('.accordion dt');
dt_tags.forEach(dt => {
dt.addEventListener('click', () => {
dt.classList.toggle('open');
dt.nextElementSibling.classList.toggle('open');
})
});
各dtタグを個別に取得し、クリックイベントの発火と同時にDOM操作を行う
振り返り
アジャイルの動画とjavascriptのモーデルとアコーディオンをいじること
モーデルはそもそも参考にするサイトを見つけるのに時間かかったし、初めすごく苦手意識が出てなかなか進まなかった。
アコーディオンではjavascriptが反応してくれなくて、その解決策を探すのに苦労した。bodyのいちばん下に読み込むのがいいらしい
20220617Feedback
わいわい
自分も何もできないマンからメンターなんか続けてるから大丈夫だよ!(未だに書けない)
解決したなら良かった!👍
自己解決したんですか?人に聞いた?←必死に調べました!
CSSが想定した通りに動かないのあるあるですよね
来週の予定
カルセールを作る
開発者ツールをいじる
rubyを動かす
オブジェクトしこう(rubyで)
2022/6/22
カーセルを作る
カルーセルとは、回転台、回転木馬、回転コンベア、回転棚などの意味を持つ英単語。Webページなどに設けられる画像などの表示領域で、内容を左右に移動して切り替えられるものをこのように呼ぶ。
css
scroll-snap
→iponeのホーム画面のようなスクロールをピタッと指定したいちで止めるプロパティ。
今回のサンプルでは, まず親要素に対して scroll-snap-type に x mandatory を指定しています.
こうすることで横軸に対して mandatory が効くようになり, 必ず scroll-snap-align で指定した位置までスクロールして止まるようになります.
子要素側で, scroll-snap-align を指定することでスナップで止まる位置を決めています.
今回は start, つまり左端を基準にスナップするよう設定しています.
.carousel::-webkit-scrollbar {
display: none;
→webkit限定ではあるが、スクロールバーを消す
・CSSなどにおける正式な・標準的なプロパティではなく、拡張機能などの非標準な機能を利用するときにつける。
・WebKitは、HTMLやCSSを解釈して整形して画面に表示するHTMLレンダリングエンジンの1種。
javascript
scrollIntoView():
子要素のこのメソッドを実行すると親要素内のスクロールがこの要素が見える位置までスクロールしてくれます.
file:///Users/morimotohinoki/groupc/%E3%82%BD%E3%83%AD%E6%B4%BB%E5%8B%95/java0622/0622.html
できたー!
開発者ツールをいじる
開発者ツール:webページ開発のデバッグに使える機能
ページのHTMLを確認しよう:済
HTMLを編集しよう:済
変更したい部分の上で右クリック→htmleで編集(eddit as html)を選択→編集
なお、これまでに変更した内容は一時的に見た目を変えているだけであり、実際にインターネット上のこのWebページのHTMLが書き換わることはありません。そのため、ブラウザの左上に表示されている更新ボタンをクリックし、このページを再読み込みすることで元の状態に戻すことが可能です。
→webページを制作する間にわざわざコードを書き換えなくても簡単に見た目の変更を試してみることができる。
ページのCSSを確認しよう:済
styleに表示される。
CSSを編集しよう:済
検証ツールを使うことで、簡単にCSSの値を調整し、適切な値を判断することができます。
CSSを追加しよう:済
サーバーサイドプログラミング
→サーバーで動作するプログラミングを実装するための言語の総称
Javaなどのコンパイラを用いるコンパイラ言語と、Ruby,Pythonなどのインタプリタを用いるスクリプト言語に大きく分けられる。
*コンパイラ:一般に、一定方式に従い、使用機種には依存せず人間に分かりよい形で書いたプログラムを、機械コード(=機械がすぐ実行できる形)に翻訳する仕事を受け持つ。
*コンパイラ言語:コンパイラに与えるために約束された人工言語
コンパイラ言語→処理速度の速さやコンパイラのチェックによるバグの防止が利点
スクリプト言語→手軽に実行できて結果を確認できる
!言語ごとに得意する処理やフレームワークに特徴があるので、アプリケーションの種類や自分のスキルに応じて言語を選択すると良い
Rubyを動かしてみよう
変数を使ってみよう
puts "":文字出力
*:掛け算 /:割り算 %:割り算のあまり
変数はpythonとおんなじ感じ
変数で2語以上を組み合わせた変数名をつけるときは、_を用いる
条件分岐をしてみよう
if とendで囲む
elifはelsifで表す
&&:かつ ||:または
繰り返し処理を作ってみよう
while 条件式 do
end (doは省略可能)
until 条件式 do
end (doは省略可能) *条件式がfaluseの間のみ繰り返し
for 変数 inオブジェクト do
end (doは省略可能) *繰り返しが1回行われるたびにオブジェクトに対して「each」メソッドが実行し取得した要素などを変数に代入します
Rubyの基本を理解しよう
配列を使ってみよう
[値1,値2,値3]というように表す。それぞれの値を要素と呼ぶ
puts 配列 をすると要素がひとつずつ改行されて出力される
要素は配列[0]で表す
ハッシュを使ってみよう
インデックスにキーと呼ばれる任意の文字列を指定して、バリューと呼ばれる要素を指定する
連想配列名 = {キー名1 => バリュー1, キー名2 => バリュー2, キー名3 => バリュー3}で表す
要素の出力はHash名[取得したい要素のキー]で表す
要素の追加はHash名[新しいキー] = 新しいバリュー
要素の変更はHash名[更新したい要素のキー]=値
要素の削除はHash名.delete(削除したい要素のキー)
nilを扱ってみよう
nilとは「何も存在していない」という意味
if文if nil_var.nil?を用いるとnil判定ができる。
メソッドを使ってみよう
メソッドとは複数の処理を一つにまとめたもの
def メソッド名
endでメソッドを定義することができる
メソッドは定義するだけでは実行されないので、メソッド名を使って呼び出す
FizzBuzzプログラムを作ってみよう:済
2022/06/24
Rubyをvscodeで動かす
コード入力→コマンドパレット開く(com+shift+p)→code runを入力
オブジェクト志向
オブジェクト指向とは、オブジェクトという”モノ”単位でシステムを作る考え方です
オブジェクト指向に触れてみよう
クラスを作ってみよう
→クラス:設計図 インスタンス:設計図をもとに作成される実物
class クラス名
def メソッド
インスタンス変数には@をつける
end
end
インスタンスの作成:
クラス名.new
インスタンスと初期化について学ぼう
インスタンス変数を作ってみよう
インスタンスメソッドを作ってみよう
インスタンスメソッド:作成したインスタンスから実行できるメソッドのこと
継承を使ってみよう
料理注文システムを作ろう
フィードバック
naga.icon Rubyやったことないけど、Pythonと似てるんだ! Progateのオブジェクト指向の説明わかりやすくてすこ
めっちゃ書いてる!!
Nakaya.icon オブジェクト指向むずかしいですよね、Rubyいいですよね
振り返り
開発者ツールをいじるのは楽しかった。授業で習ったけど、なんで開発者ツールを使うのかいまいちよく分かっていなかったので、htmlやcssをそこで編集することで簡単に試せるというのにすごく納得がいった
Rubyはpythonに書き方が似ててやりやすい
せめて発表までに料理注文システムは作ってみたいな
計画
発表用のscrapbox作る
料理注文システムはつくる
できればターミナル操作とDBも