JavaScriptでタイポグリセミア
何
最初と最後の文字さえ合っていればその間の文字が並び替えられていても読めちゃうやつ
dic.nicovideo.jp
もっとよい実装方法はあるはず
const word = "つらくてもいきてゆく"; const first = word.charAt(0); //先頭の文字は不動 let otherArr = word.substr(1, word.length - 2).split(""); //残りの文字列を1文字ずつ配列に格納 const last = word.charAt(word.length - 1); //最後の文字は不動 //配列の中身をランダムに入れ替える for (let i = otherArr.length - 1; i > 0; i--) { let r = Math.floor(Math.random() * (i + 1)); let tmp = otherArr[i]; otherArr[i] = otherArr[r]; otherArr[r] = tmp; } //配列を文字列に変換し、カンマを取り除く const otherStr = otherArr.toString().replace(/,/g, ""); //文字列を先頭から順に合体 const ans = first.concat(otherStr, last); console.log(ans); // つくゆきもてらいてく
もっと簡単に書けるしスマートにできるだろ
優しく教えてください
あと変数の命名についても教えてくださいこの場合最初と最後はfirst と lastにしたんですけどその間全部のことは何て言うのかがわかりません、otherでいいんですか？つらいです
ProgateのJavaScript全レッスンを倒したので備忘録
Progateに課金
いい加減マジで基礎をなんとかしないとと思ってProgateに課金してJavaScriptのレッスンを受けることに
こういう月々いくら払ってサービス使い放題って形式、いわゆるサブスクリプションってせっかくこれだけお金を払ったんだから元を取らないと！みたいな、時間を人質(時質？)に取られている感覚があって苦手だったんだけど、学習サービスの場合はむしろそれが「やらなくちゃ！」というモチベに繋がるからいいと思う
レッスン内容を言いすぎない程度に備忘録を残しておく
もちろんコードの流用などはしていませんが、問題があれば教えてください
テンプレートリテラル
存在は知っていたしめちゃくちゃ使ってるけど「テンプレートリテラル」という名前を忘れがち ちゃんと覚えておいたほうがいい
const name = "ネメシスちゃん"; console.log(`私の名前は${name}です`); //私の名前はネメシスちゃんです
const で宣言した配列の中身は全然変更できるよ
const で宣言した変数(定数)は再宣言しようとしたり、他の値を再代入しようとするとエラーになる。ゆえに値がいつのまにか変になってるとかがなくて安全なのでもう全部constを使え、forとかの中のカウンタとかそういうのはletを使え、varはもう使うな絶対に使うなというのはいろいろなところで言われているからみなさんもご存知ですよね。
const name = "ネメシスちゃん"; name = "小田倉"; //TypeError: Assignment to constant variable. const name = "小田倉"; //SyntaxError: Identifier 'name' has already been declared
ところがconstで宣言した配列の中身には再代入できてしまう
const names = ["ネメシスちゃん", "小田倉"]; console.log(names[1]); //"小田倉" names[1] = "おだくら"; console.log(names); //[ 'ネメシスちゃん', 'おだくら' ] エラーにならない！ const names = ["ねめしす", "odakura"]; //SyntaxError: Identifier 'names' has already been declared //再宣言はだめ
どうしてかについては既に訊かれてて回答もある
JavaScript - JavaScript: const の配列の値が変えられるのはなぜ？｜teratail
どうしても配列の中身を変えてほしくないときは、Object.freeze()を使う
Object.freeze() - JavaScript | MDN
const names = ["ネメシスちゃん", "小田倉"]; Object.freeze(names); console.log(names[1]); //"小田倉" names[1] = "おだくら"; //実行されない。実行時エラーにはならないのか……見落としそう console.log(names[1]); //"小田倉"
クラス
JavaでやったことはあるけどJavaScriptでもあるのか(今知るんかい) いまのところは有効に使える気がしないけど、Node.jsでバックエンド書くなら多用したりするのだろうか？
クラス宣言、インスタンス生成、コンストラクタ、継承、オーバーライドとか。
class Human { constructor(name, hp) { this.name = name; this.hp = hp; } greet() { console.log(`名前は${this.name}で、体力は${this.hp}`); } } class Hiro extends Human { constructor(name, hp, atk) { super(name, hp); this.atk = atk; } greet() { console.log(`名前は${this.name}で、体力は${this.hp}、攻撃力は${this.atk}`); } } const human = new Human("小田倉", 45); const hiro = new Hiro("スーパー小田倉", 500, 2000000000000); human.greet(); hiro.greet(); //名前は小田倉で、体力は45 //名前はスーパー小田倉で、体力は500、攻撃力は2000000000000
配列操作
forEach
const names = ["ネメシスちゃん", "小田倉", "ネギ"]; //forEach 配列の要素を一つずつ取り出して全部に処理を行う names.forEach(name => { console.log(name); }); //ネメシスちゃん //小田倉 //ネギ
どうでもいいけどC#のforeachと違ってforEachとキャメルケースになっていて読みやすいですね！
push
const names = ["ネメシスちゃん", "小田倉"]; //push 配列に要素を追加する names.push("ネギ"); console.log(names); //[ 'ネメシスちゃん', '小田倉', 'ネギ' ]
find, filter, map
const members = [ { id: 1, name: "ネメシスちゃん", age: 12 }, { id: 2, name: "小田倉", age: 9001 }, { id: 3, name: "ネギ", age: 103 } ]; //find 最初に条件に合う要素をひとつだけ取り出す const foundMembers = members.find(member => { return member.id === 2; }); console.log(foundMembers.name); //小田倉 //find 条件に合う要素を全て取り出して新しい配列に格納 const filterdMembers = members.filter(member => { return member.age % 2 === 1; }); console.log(filterdMembers); //[ { id: 2, name: '小田倉', age: 9001 }, //{ id: 3, name: 'ネギ', age: 103 } ] //map 配列の全ての要素に同じ処理を行い、新しい配列に格納 const multipliedAges = members.map(member => { return member.age * 100; }); console.log(multipliedAges); //[ 1200, 900100, 10300 ]
感想
よかった
次はなにをやろうかな
console.log( { 変数 } ) と書くとkeyとValueが表示されて便利だけどこれって何なの？
console.log( { } )
JavaScriptのデバッグ等で今この変数に何が入っているのかな～というのを知りたいときに、console.log()を仕込んでおいて画面に表示させる方法があります。
以下のように書くことが多いと思います。
const text = 'こんにちは' console.log('text: ', text) //結果 //text: こんにちは
これでもいいんですが、次のように書くこともできます。
console.log( { 変数 } ) と、変数を中かっこで囲む形です。
const text = 'こんにちは' console.log( { text } ) //結果 //{ text: 'こんにちは' }
このように、変数名とその値が表示されるので便利ですね。
わざわざconsole.log('text: ', text)と書くよりも楽ですし、これからはこの書き方を使っていきましょう！
いかがでしたか？それではさようなら。
ちなみにこの書き方はQiitaのこちらの記事のコメント欄にて知りました。
(初出はどこなんでしょうか。もしわかる方いましたらコメント等で教えて頂けると幸いです。)
で、これは何
どうしてconsole.log( { text })と書くだけで
{ text: 'こんにちは' }が表示されるんでしょうか？
そもそも、{ text: 'こんにちは' }の正体は何なんでしょうか？
const obj = { } でオブジェクトを生成
JavaScriptにおいて中かっこといえばオブジェクトですよね！
例えば、以下のコードはconsole.log( { text } )と同じ実行結果が得られます。
const obj = { text: 'こんにちは' } console.log( obj ) //結果 //{ text: 'こんにちは' }
では、先ほどと同様にconsole.log( { 変数 } )の形で書いてみます。
const obj = { text: "こんにちは" } console.log( { obj } ) //結果 //{ obj: { text: 'こんにちは' } }
なんか外側に増えましたね！
{ obj: { text: 'こんにちは' } }にインデントをつけて見やすくします。
{ obj: { text: 'こんにちは' } }
objとその中身の部分に関しては、さきほどのコードの一行目で、自分で宣言したものです。
そのさらに外側に、中かっこが増えています。
objを要素に含む、名前のついていないオブジェクトがいつの間にか生成されているように見えます。
つまり、console.log( { text } )とは、変数textを要素に含む無名のオブジェクトを生成して画面に表示しているのではないでしょうか。
オブジェクトリテラルの省略記法
オブジェクトの中身のkey部分とvalue部分が同じとき、
obj: { text: text }
は
obj: { text }
と省略して書くことができます。
これと同じことがconsole.log( { text } )でも起きています。
つまり
const text = 'こんにちは' console.log( { text } )
は
const text = 'こんにちは' console.log( { text: text } )
の省略記法といえるでしょう。
まとめ
console.log( { text })はconsole.log( { text: text })の省略記法。
{ text: text }を要素に含む無名のオブジェクトを生成して、画面に表示している。
もし間違っていたらコメント等でご指摘願います。 また、最初にこの記法を発見したのは誰なのか個人的に気になります。 公式ドキュメントには記載が見当たらないので（私が見落としているだけかもしれませんが……）。 それらについての情報も教えて頂けると幸いです。
参考
電子レンジのワット数と加熱時間を入力すると別のワット数での加熱時間がわかるやつを作りました
できた
コード
github.com
所要時間 だいたい10時間未満
機能
- ワット数と加熱時間を入力すると下の表に各ワット数に換算した時の加熱時間が表示される
- 熱量とワットと加熱時間の関係は J(熱量) = W(ワット) * s(秒)
熱量が等しくなればいいので算出されたJを使いたい電子レンジのWで割れば秒数がわかる - それ以外の機能はつけない
やりたかったこと、できたこと
- 自作アプリの開発と公開
- Vuejsの超入門チュートリアル
- 友達に自慢する
できなかったこと
- PCとスマホで動きが違う。レスポンシブルなデザインにすることはWebアプリ開発における絶対条件だと思われる
- Vue.jsの強みを出せてない。これなら単純にhtml + CSS + JavaScriptで作るのと何ら変わりないのでは？
- ただプロジェクト作成からコンポーネント利用(企業アイコン)、ビルドなどはたぶんやりやすかった
- でもこの場合はVueじゃなくてnpmがすごいの？
次やりたいこと
- ちゃんとVue.jsを勉強してその上で有効な場面で使用する技術として採択する
第一歩を踏み出せたと言う事でプラスに捉えます
これからもがんばるぞ
たまにしか個人開発をしない人がよしやるかとなったときに思い出すことメモ
TL; DR
git logする
久しぶりにコードでも書くか
最近マインクラフトばっかりしてたせいで技術力が完全に0に戻っちゃったから、たまにはがっつりプログラミングして勘を取り戻していきますか！
何してたっけ
あれ……そういえば3か月前まで作ってたLINE bot、どこまで進めたんだっけ……？ たしかGitHubにリポジトリを作っておいてるはずだ！さすがにそれをしていなかったらもうどうにもわからんわ……
でもgitの使い方も忘れちゃったよ
だって普段業務で使ってないから……
git log
とりあえずエディタを開いて、プロダクトのフォルダを開こう。 開いたらターミナルでgit logしよう。 直近のコミット履歴を見ることができるよ。
2020/3/26 追記 git logの終了方法
qを押す
思い出したぞ
あーそうだそうだ！LINE botにリマインド機能を実装しようと思って、GAS(Google Apps Script)を使ってトリガーを指定できるようにしようとして、できなくてあきらめたんだった！もう一回できるか試してみようかな？よし！コードを読もう！！
ふむふむ
なんだこのクソコード……
index.jsに全てのコードを書くな……
非同期処理全然失敗してるやんけ……
なのに問題なく動作してるのは何……
こわい……
教訓
- コミット時のコメントは油断せずちゃんとわかるように書く
- 何をやったかアウトプットにしなくてもいいからちゃんと自分でわかるように記録を残す
- というか普段から継続的に取り組んだほうがよい
TO DO
- Node.jsの非同期処理についてちゃんと勉強する
- というかいい加減JavaScriptを徹底的に学習し直す
JavaScriptでundefinedが出力されちゃった
undefinedが出力されちゃった
配列の中身をテキストに足していって最後にひとつの文章を出力する。
let text; const array = ["こんにちは", "はじめまして", "ネメシスちゃんです"]; array.forEach((value, index) => { text += value; }); console.log(text); //出力結果は「undefinedこんにちははじめましてネメシスちゃんです」 //なんだこのundefinedは
このundefinedの出所がわからず、配列の作り方がまずかったかなとそこばかり見てしまった。
もちろん原因は最初のlet text;の部分で、変数宣言の際に値を何も設定しなかった場合、
ほかの言語はnullとかになったり、そもそも怒られたりするような気がするけど、
JavaScriptの場合はundefinedとなる。つまり未定義ってこと。
どうする
普通にこうすればよい
let text = ""; //空文字をいれておく const array = ["こんにちは", "はじめまして", "ネメシスちゃんです"]; array.forEach((value, index) => { text += value; }); console.log(text); //出力結果は「こんにちははじめましてネメシスちゃんです」
※こんなもの初歩の初歩だと思われる。基礎的な勉強を何もせずいきなりコードを書こうとして、逆に時間をロスしている。。。
