- 1. 変数とは？
- 1.1. 「AWS Amplify Studioではじめるフロントエンド+バックエンド統合開発」 輪読会②
- 1.2. JavaScriptのアロー関数で定義したsort()の−１とか１とか０について
- 1.3. React ページ内遷移をドロワーで実装する【備忘録】
- 1.4. JavaScriptでprint()を使う
- 1.5. 市場価値の高いWEBフロントエンドエンジニアに必要な思想
- 1.6. Firebase、生のHTML で簡単にデータ保存、データの読み込みをする
- 1.7. GASでUrlFetchAppでBasic認証で日本語ユーザー名で
- 1.8. Reactを使ってToDoリストを作ろう!!(執筆中)
- 1.9. Windowsコマンドプロンプトからsayコマンドもどき（合成音声）を実行する方法
- 1.10. csvファイルの中身をtableに表示する
- 1.11. 【Cesium】flyToで目的地までジャンプする
- 1.12. JavaScriptを始めてみます
- 1.13. 最初はスパゲティコードでもいいからまず書く
- 1.14. エンジニアになるためのマインドについて
- 1.15. Tree Maker_Convert Markdown to tree!_WebAssembly&ServiceWorker
- 1.16. クリック時に他の要素がblurする前に処理を実行する
- 1.17. JavaScriptの要素のイベント発火順序
- 1.18. イテレーターのクローンもどき
- 1.19. ChromeでJavaScriptを編集できなかった。
変数を使ってみる【JavaScript】
今回は「変数を宣言して、変数に値を入れ、変数の値を使って表示する」ところまでやってみます。
現在の個人的な目標として「ユーザーに値を入力させ、その値を取得して加工し画面に表示する」といったことをやってみたいと思っています。そのためには変数の扱い方がわかっていた方が良いと思うので、今回は上記をテーマにしました。
変数とは？
では早速「そもそも変数とは何か？」ということですが、「入れ物」とよく説明されます。
こちらの説明が技術的に正しいのかどうかは私にはわかりませんが、一旦は上記の理解で問題ないかと思います。イメージとして、例えば「値を2倍にしてそれを表示する」という処理を作りたいとします。
ここでは厳密なプログラミング言語を使用せずに、ざっくりと説明します。“`
A ← 10
画面に表示（A × 2）
“`「←」は「左に書かれた入れ物に値を入れます」という指示です。
「画面に表示（）」は「カッコ内の値を画面に表示します」という指示になります。ここでは、Aに10が入り、そのAを2倍したものが画面に表示されますので、「20」という値が画面に表示され
「AWS Amplify Studioではじめるフロントエンド+バックエンド統合開発」 輪読会②
# 「AWS Amplify Studioではじめるフロントエンド+バックエンド統合開発」 輪読会②
## 開催日時
2022.11.19 (土) 21:00-22:00
## はじめに
– [前回](https://qiita.com/okapee0608/items/fd255157113a2c2137bd)
– ~~はじめての方がいらっしゃれば改めて自己紹介~~ → 特にいらっしゃらなかったので無し## Studioを触ってみての所感
今回、はじめてまともにStudioを触ったのでかんたんに所感を。
かんたんなモックやそこまでスケールしない(残念ながらしなかった、もしくは最初からする予定のない)サービスを作るのであれば問題ない感じ。むしろGUI上でデザインやデータを一元的に管理できるのはとても便利。
スケールさせるのであればもろもろ問題になってくる箇所はでてきそう(そこは追々記載していく)。## Chapter2
### 進め方の方針
– メンバーが素のAmplifyを触ったことがあったため、Studio特有のところ以外はスピーディーに終わらせる。
JavaScriptのアロー関数で定義したsort()の−１とか１とか０について
## 最初に
個人的なメモです
sort()中の返り値での挙動の理解に手間取ったのでメモとして残します## Array.sort((n, m) => (n > m ? -1 : 1)) について考える
### sort(n,m)はnとmの比較結果を
– 0 ：（優先度が同じ）
– 1 ：（nがmより優先度が低かったので）
– -1：（nがmより優先度が高かったので）で返す
### ここでの優先度とは？
– __優先度は高いほど配列の前に並ぶ__
– -1は前に 1は後ろに 0はそのまま
### 自分が混乱したのは１の挙動
以下自分の解釈
__nとmを比較する際にmより後ろにあるnをどうするかという話__ なので
今、mより優先度の低い扱いを受けているnを、mより優先度を高くするの？という問いかけが
__n 比較演算子 m ? -1 : 1__
なので
返り値1の場合は __もともとmより優先度が低い扱いを受けているnにあらためてmより優先度が低いよと伝えているだけ__ なので順番は変わらない~~~ javascript
// 例
const arr = [1,
React ページ内遷移をドロワーで実装する【備忘録】
# 記事を書いた経緯
開発中にページ内遷移をドロワーで行いたいと思い、色々と調べてみたのですが
記事がなく、自作してしまったのでその備忘録になります?また、MUIやNext等の導入は既に行なっている体で話を進めますので
導入から行う方は以下の記事を参考にすると良いです！
（自分が書いたものですが、大方使うものは全て書いてあります?）https://qiita.com/yuuki-h/items/a99e4062e06398a09a13
## 動作画面
早速ですが、実装した画面を見てみましょう。
こんな感じです！
(画質とデザインはご勘弁を、、、?)
## 手順
1. Drawerを作る
1. DrawerMenuを作る
1. 使いたいページでuseRefしまくる
1. propsの形式でDrawerMenuに渡す
1. ドロ
JavaScriptでprint()を使う
最近はPython3で競プロを楽しんでいます。そんな中、JavaScriptに舞い戻ってくると、思ってしまうことがあります。それは、「**console.log()** 長すぎでは？」です。
Python3で **print()** に慣れてしまった体には、 **console.log()** は億劫に感じられてしまいます。そこで、邪道ではありますが、JavaScriptで **print()** を実装してしまおうと考えました。
—
### 実装したコード“`JavaScript
const print = anything => console.log(anything)x = ‘オススメしません’
print(x)
// >> オススメしません
“`
市場価値の高いWEBフロントエンドエンジニアに必要な思想
# はじめに
エンジニアの中でも今回はWEBフロントエンドエンジニアとしてより成長するために必要な技術や考え方について話していきます。
# WEBフロントエンドエンジニアとは
おそらく多くの人はWEBフロントエンドエンジニアと聞けばHTML、CSS、JavaScriptを使ってWEBサイトを作る人を思い浮かべると思います。この認識は間違ってはいないのですがよりレベルアップするためには捨てなければいけない認識です。
JavaScriptなどのプログラミング言語は手段として利用するだけで本質は**バックエンドとエンドユーザーの繋ぎ込み**を行うエンジニアというのが正しい認識です。エンドユーザーという単語はこちらのサイトで説明されています。
[エンドユーザーとは ~IT用語辞典e-Words](https://e-words.jp/w/%E3%82%A8%E3%83%B3%E3%83%89%E3%83%A6%E3%83%BC%E3%82%B6%E3%83%BC.html#:~:text=%E3%82%A8%E3%83%B3%E3%83%89%E3%83%A6%E3%83%BC%E3
Firebase、生のHTML で簡単にデータ保存、データの読み込みをする
# はじめに
前回に続き、なるべく簡単に環境構築をし、Firebaseを通してデータの書き込み、読み込みを紹介する。
書き込みと読み込みは基礎中の基礎ではあるが、今後のプログラミングの中でかなり多くの割合を占めるのはなかろうか対象はプログラミング初心者
https://qiita.com/junzai/items/bb89a7aeb38bb6757f35
# 環境
window 10
node.js 18.12.1
Firebase 8.6.5# データの書き込み
“`html:HTML部分
GASでUrlFetchAppでBasic認証で日本語ユーザー名で
## 原因
仕事でOracle B2Cというやつを召喚しまして。
したらまあ、構築してくれた人が `Account` を日本語名で作ってくれやがったりしたわけです。それをAPIでごにょごにょするわけです。
C#で組むのでもよかったのですが、後々の保守だったりの手間を省くためにGASを使う方向で、となった時に問題になるのがアカウントの日本語名ですよ。## Oracle B2Cの仕様
Oracle B2CさんのAPIの認証は簡単で、BASIC認証です。
ざっくり [こういう仕様](https://docs.oracle.com/en/cloud/saas/b2c-service/22c/cxsvc/c_osvc_quick_start.html) ですね。普通のBASIC認証のようです。
`base64変換( 名前 + ‘:’ + パスワード )` をやればいいということで。
GASで普通にやれば以下のようになりますね。“`javascript
const ORACLE_USER = “ほにゃらら”;
const ORACLE_PASS = “foobar”;
conReactを使ってToDoリストを作ろう!!(執筆中)
講座でReactをToDoリストを作り方を学んだのでまとめています。
## まずは、Javascriptを使ってToDoリストを作ろう!!
HTML , CSSの方は省略させていただきます
~~~HTML~~~
Windowsコマンドプロンプトからsayコマンドもどき（合成音声）を実行する方法
# 1. はじめに
今回は、自分自身への備忘録を兼ねて、Windowsコマンドプロンプト（cmdコマンドプロンプトを想定）からsayコマンドもどきを実行する方法を、お伝えしたいと思います– 参考文献：[Windowsでもsayコマンドを](https://nacookan.hatenadiary.org/entry/20081221/1229802781)
– 参考文献：[VBSでOneCoreの音声を使用する](https://qiita.com/7shi/items/7781516d6746e29c03b4)
– 参考文献：[Windowsバッチで，手軽に日本語テキストを自動読み上げ（Text To Speech）する方法 …WSHでSAPIやSpeech.SpVoiceを使う音声合成の手順とサンプルコード](https://language-and-engineering.hatenablog.jp/entry/20150202/JapaneseTextToSpeechProgramming#EnglishTextToSpeechByWSH)
– 参考文献：[Windowscsvファイルの中身をtableに表示する
## はじめに
かんたんなWebサイトに更新履歴を表示する際，htmlファイルに直に更新履歴を追記するという方法もあるが，更新履歴を追記するためだけにhtmlファイルを開くのはナンセンスだと思った．
そこで，更新履歴はcsvファイルに記述し，jsを使って表示する，という方法を思いついたので，そのやり方と注意点をまとめる．
## 最初に実装したもの (良くない例)
“`html:index.html