- 1. JavaScript 基礎文法 1
- 2. 正規表現を用いたemailとパスワードのバリデーション(JavaScript)
- 3. メルカリ風UIでの画像アップロード
- 4. スライドショー作成の考え方
- 5. ハンバーガーメニュー作成の考え方
- 6. iframeで表示したテキストファイルのスクロール量とラジオボタンの活性制御を連動させる
- 7. JavaScript学習記録#1 constとletで変数の宣言
- 8. Ruby_on_Rails 複数画像投稿(10個のinputとプレビュー)new edit(新規、編集、削除)
- 9. タブ切り替えの考え方
- 10. 【React】Omise.jsでカード情報を登録
- 11. JavaScript: ランダムな数値を作る
- 12. バッククオートの入力法(Mac 日本語キーボード)
- 13. 156文字のJavaScriptでクルクルアニメーション
- 14. JavaScript: メソッドの名前を短くして変更に強くする
- 15. 154文字のJavaScriptで矢を飛ばしてみた。
- 16. Improved Control Flow In JavaScript
- 17. 初心者によるプログラミング学習ログ 224,225日目
- 18. 131文字のJavaScriptでベルトコンベアを作ってみた。
- 19. Javascriptのthisについて
- 20. 2つの配列でvalueが一致したものを抽出
JavaScript 基礎文法 1
#はじめに
JavaScript(以下、JS)を学んでいく上で、1つずつ整理していきます。
私はVScodeでコードを書き、ブラウザでHTMLファイルを開いております。
そして、検証(ブラウザ上で右クリック)のconsole項目に反映されているのか確認しております。
もうすでにご存知の方、省略の仕方等ご存知でしたら、ご教授願います。#アラートの表示
JSファイルにコードを記載します。
“`qiita.js
window.alert(‘こんにちは’);
“`【結果】
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/576541/c50ebd0d-f203-4139-bc05-8616fc8ff942.png)#文字列の出力
Rubyではputsでしたが、JSではconsole.log(表示したい文字列)となります。“`qiita.js
console.log(“らいが君、こんばんは”);
“`#変数宣言(変数の定義)
JSでの変数宣言は、以下のように文頭
正規表現を用いたemailとパスワードのバリデーション(JavaScript)
# やりたいこと
nuxt.jsでのメールアドレスとパスワードのバリデーション
vuelidateなどのバリデーション用のライブラリを使用せずに実装したい# コード
“`password.vue
メール・パスワード変更
メルカリ風UIでの画像アップロード# やりたいこと
メルカリ風の画像アップロードを実装したい
要件は以下の通り– 画像アップロードできるボタンが並んでいる
– ボタンを押すと画像をアップロードできる
– アップロードした画像が表示されてその分画像アップロードできるボタンが減る# 実装後のイメージ
## 画像アップロード前
## 画像アップロード後
スライドショー作成の考え方# スライドショーを構成する要素
– メインに表示される画像
– ボタン群(liで表現)
– 再生ボタン
– 前へボタン
– 次へボタン
– サムネイルの画像一覧(liで表現)# 必要なパーツをHTMLとCSSで表現
– メインに表示される画像を任意で一枚とりあえず配置
– ボタン群をliタグで表現
– ボタンに`user-select: none;`すると連打してもテキストが選択されないようになる
– サムネイルの画像一覧をliタグで表現
– 画像の縦横比を考慮する必要があるが、widthのみ設定し、heightを省略すれば縦横比を保ってくれる
– 選択されている画像と選択されていない画像が判別できるようにCSSを適用する(.current)# 上記のパーツをjavascriptで表現
– 画像ファイル名を配列で保持
– メインエリアに配列のインデックスで画像を指定して表示
– サムネイル一覧エリアに配列ループで表示
– currentクラス
– currentクラスを付与する時には配列のインデックハンバーガーメニュー作成の考え方
# パターン1 本文に重ならない
##方針
ハンバーガーを押したら本文が左にずれて、メニューが現れるようにする。
メニューを配置して、本文を上から被せる。(z-index)## Step1 メニューを配置する
– 右上に配置するのでtopとrightを0にする
## Step2 本文を配置する
– **メニューの上に配置するのでz-indexの値をメニューより大きくする**
– ハンバーガーを右上に設置する
– 左上に配置するのでtopとleftを0にする## Step3 javascript実装
javascriptで本文を左にずらすのではなく、cssで左にずらす。
javascriptの役割はイベントをきっかけにcssを適用すること。– cssでopenというクラス名にして、`left: -○○px;`と記述
– ハンバーガーにクリックイベントを記述し、上記のopenクラスを本文に着け外しする。# パターン2 本文に重なる
##方針
ハンバーガーを押したら本文にマスクがかかり、左からメニューが現れるようにする。
本文、マスク、メニューの3重構造にするiframeで表示したテキストファイルのスクロール量とラジオボタンの活性制御を連動させる
## iframeで表示したテキストファイルのスクロール量とラジオボタンの活性制御を連動させる
利用規約なんかでよくある、「ちゃんと最後までスクロールしないと【同意する】にチェックできないよ!」的なものを作ったので備忘録として。“`html:sample.html
Sample page
はい
いいえ
JavaScript学習記録#1 constとletで変数の宣言
#constとlet
**const**
`変わらない`もの対して宣言
**let**
`変わるかもしれない`ものに対して宣言#ES6ではvarを使うことがほとんどない
新しく作るプログラム関しては、constとletを使う#なぜvarではなくconstとletを使うのか?
結論から言うと、コードの読みやすさ。
自分が何を意図して書いたのかを伝えやすくするため。
constとletを使うことで、コードを変えるときに、変えても大丈夫な値なのかがすぐにわかる。
varではその辺がわかりにくい。Ruby_on_Rails 複数画像投稿(10個のinputとプレビュー)new edit(新規、編集、削除)
## あなた、複数画像で困っていませんか?
noteで有料化しようと考えていましたが、他国のエンジニアのレベルが鬼高いということで公開したいと思います。
いいね!とフォローだけしてください
完全にオリジナルですが、考え方はあっているはず。
## 出品画面のHTML
“`haml:new.html.haml
.new-product
=render “./registrations/sub-header”
.main
.head
%h2 商品の情報を入力
= form_with model: @product, class: “form”, id: “product-form” do |f|
.form-image
.form-image__title
%label 出品画像
%span 必須
.form-image__text 最大10枚までアップロードできます
= f.fields_for :imagesタブ切り替えの考え方
# タブ切り替えを構成する要素
– 切り替えタブ
– liタグで表現
– タブごとの内容
– 特にタグの指定は無し# Step1 切り替え前のHTMLを書く
– 切り替えタブは横並びで記述
– 親ノードにdisplayをflexに指定
– 内容ごとのidとリンクするようにデータ属性を付与
– タブごとの内容
– divタグなどで記述
– 内容ごとにidを付与# Step2 選択されているタブと選択されていないタブにCSSをそれぞれ適用
– 選択されているタブに対してCSSを適用
– クラス名をactiveとして、何らかの色などをつける
– コンテンツ部分を整える
– 選択されていないタブに対してCSSを適用
– クラス名をhiddenとして、displayをnoneにする
– マウスを置いたときに押せる感を出す
– aタグはホバーしたときにマウスがポインターになる
– ホバーしたときに透明になるようにする
– 例:`opacity: 0.【React】Omise.jsでカード情報を登録
こんにちは。
ECサイトを開発していて決済を実装するために[Omise](https://www.omise.co/ja/docs/japan)というapiを使う機会がありました。
カード情報を登録するにあたってReactで実装するのに苦労したのでメモです。
フォームはドキュメントにサンプルがあったので参考にしてみてください。#Omise.jsとは
Omise.jsはクライアントサイドのJavaSciprtライブラリで、クレジットカードの情報をトークン化するために利用します。 ユーザーが決済フォームへ情報を入力し、フォームのSubmitのタイミングでOmise.jsが決済フォームの情報をOmiseのサーバーへ送信し、トークンを作成して取得します。取得したトークンは、あなたの決済フォームで送信されますので、あなたのサーバーサイドでは、そのトークンを利用し決済の処理を実行できます。引用:https://www.omise.co/ja/collecting-card-information/japan#使い方
まずindex.htmlファイルのbodyタグ内に下記を追加します。
jQJavaScript: ランダムな数値を作る
Math.random() を使うと、0以上、1未満のランダム値を生成する。つまり、0.1とか、0.9とか。
Math.random() * 3 とすると、0から2までのランダム値、例えば1.4とかにすることができる。
小数点以下がいらない場合、Math.floorで囲んであげる。
Math.floor(Math.random() * 3) という感じ。バッククオートの入力法(Mac 日本語キーボード)
JavaScriptのテンプレートリテラルを記述する際、バッククオートの入力法が分からなかったので調べました。
Macの日本語キーボードでの入力法です。shift + @ → 「`」 ダブルクオート
156文字のJavaScriptでクルクルアニメーション
156文字のJavaScriptでクルクルアニメーション
<body id="d"><script>function a(){f=s.shift();s.push(f);d.innerHTML=s.join("")+"→"}for(s=[],n=0;n<5;n++)s[n]=" ";s.push("←<br>");setInterval(a,100)</script>https://t.co/JqO3xPuB3W pic.twitter.com/qUTO0BmdYB
— 作業おばけ@プログラミング学習中 (@oocf8) JavaScript: メソッドの名前を短くして変更に強くする
同じdocumentのメソッドを何度も書くより、
const target = document.getElementById(‘target’);
と定数として宣言すると、後で使い回しが簡単になる。
154文字のJavaScriptで矢を飛ばしてみた。
154文字のJavaScriptで矢を飛ばしてみた。
ソースコード
<body id="d"><script>function a(){f=s.shift();s.push(f);d.innerHTML=s.join("")+"("}for(s=[],n=0;n<50;n++)s[n]=" ";s.push("←");setInterval(a,16.7)</script>https://t.co/JqO3xPuB3W pic.twitter.com/13OOsDHTK7
Improved Control Flow In JavaScript
This is nothing new in the language as this concept does the same thing that the normal `if`, `else-if` and `else` statement does but with a neat and less verbose syntax.
However, there are some cases that will be much easier to handle with the advanced control flow than the `if`, `else-if` and else statement.
## Ternary Operator
This is how the ternary operator flow is :The condition `?` First expression `:` Second expression
The condition is returning a Boolean (i.e true or false).
`?`
初心者によるプログラミング学習ログ 224,225日目
#100日チャレンジの223日目
twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。
224,225日目は
おはようございます
224日目
・vue.jsでアプリ作成講座
・bootstrapでLP作成
・javascriptのtodolistのコード意味調べ#早起きチャレンジ131文字のJavaScriptでベルトコンベアを作ってみた。いいアイデアが湧いたので記事にしました。
これを使えばCSS,Canvasを使わなくても「ベルトコンベア」のアニメーションが作れます笑 (需要ないw)
まず、どんなものかを知っていただきたいので私のツイートを埋め込みます。
131文字のJavaScriptコードでベルトコンベアを作ってみた。
ソースコード
<body id="d"><script>function a(){f=s.shift();s.push(f);d.innerHTML=s.join("_")}s=["_","_","_","_","■"];setInterval(a,400)</script>https://t.co/JqO3xP
Javascriptのthisについて
#Javascriptのthisについて
Javascriptの学習をしていてthisのパターンがいくつかあったのでメモ的な感じでこの記事を書くことにしました!Web上にはたくさんこれに関する記事があり、車輪の再発明みたいになってしまうのですが一応自分の頭の整理と言うことで。
まだエンジニアにもなってない一学習者なので何か間違いがあったり、曖昧な箇所があればご指摘いただけると嬉しいです!## 関数内のthis
普通に定義された関数内でのthisです。これは**グローバルオブジェクト**を指します。“`javascript
var greeting = ‘Hello world’;function sayHello(){
console.log(this.greeting);
}sayHello(); // Hello world
“`
実際にデベロッパーツールのコンソールで見てみるとwindowオブジェクト(=グローバルオブジェクト)の中に変数greetingが入っているのがわかります。(ES6で導入されたletとconstで変数を定義するとグローバルオブ2つの配列でvalueが一致したものを抽出
– 名前とチーム名を書いたプレイヤー一覧
– 好きなチームを書いたファン一覧
– ファンが好きなチームに所属しているプレイヤーを取得する“`javascript
const playerList = [
{
id: 1,
name: ‘イチロー’,
team: ‘マリナーズ’,
},
{
id: 2,
name: ‘松井’,
team: ‘ヤンキース’,
},
{
id: 3,
name: ‘マー君’,
team: ‘ヤンキース’,
}
];const fanList = [
{
id: 1,
team: ‘レッドソックス’,
},
{
id: 2,
team: ‘ヤンキース’
},
{
id: 3,
team: ‘ジャイアンツ’
}
];const pupolarTeamList = fanList.map(fan => fan.team)
const popularPlayerList = player関連する記事
OTHERカテゴリの最新記事
- 2024.09.19
JavaScript関連のことを調べてみた
- 2024.09.19
JAVA関連のことを調べてみた
- 2024.09.19
iOS関連のことを調べてみた
- 2024.09.19
Rails関連のことを調べてみた
- 2024.09.19
Lambda関連のことを調べてみた
- 2024.09.19
Python関連のことを調べてみた