- 1. FirebaseとVue.jsを使って息子の教材を作った話
- 2. 簡単なTypeScriptの型一覧
- 3. ES Modules形式をCommonJS形式でも利用できるようにする
- 4. 【JavaScript】 reduce()について
- 5. javascriptで配列にオブジェクトをぶち込む方法はこれ以外にないのか
- 6. 【AngularJS】ネストしたデータをng-repeatで表示させる
- 7. Vue.js の inheritAttrs に関する大きな勘違い
- 8. 明日使えるかもしれない Nuxt 上で唱えるプチ闇魔法３連発
- 9. wordpress投稿データをcontentfulに移植するスクリプトを公開しました。
- 10. JavaScriptのthisとは？
- 11. Next.js + Firebaseでの開発でハマったところ
- 12. 非Javascriptエンジニアのための「Javascriptの比較演算子」
- 13. figmaプラグインでlint機能を作る
- 14. 【JavaScript】iframeから開いたポップアップ画面から親画面に値を渡す
- 15. 年末まで毎日webサイトを作り続ける大学生 〜54日目 JavaScriptでじゃんけんゲームを作る〜
- 16. JavaScriptでAuth0 を使った個人認証ログインサイトの作成
- 17. ipadでブラウザ拡張機能のようなものを実行してみた
- 18. Javascriptまとめ 【if文】【for文】2019.12.11
- 19. Redux: redux-sagaで非同期処理を試す ー 公式のカウンター作例を使って
- 20. javascriptでパズルゲームを作ってみた
FirebaseとVue.jsを使って息子の教材を作った話
## はじめに
はじめまして。ジークスの酒井です。
今回は業務とは別で日曜プログラミングネタになります。中１の息子のために家族で単語カードを作ろうとしてたんですが、あまりに面倒くさいので
ツールを作ってみる事にしました## 設計方針
・用紙はミシン目や穴があらかじめ空いている単語カード向け用紙を使います。
https://www.a-one.co.jp/product/search/detail.php?id=51163
・シンプルなPWAとして、入力画面 -> 印刷画面 の２画面構成にする
・vue.jsを使って、画面遷移などを実装する
・最後はFirebaseのHostingを使ってWebサイトにアップする
・印刷はpaper.cssにまかせる
paper.css
https://github.com/cognitom/paper-css## いざ実装
まずは２画面を切り替える仕組みを作ってしまいます。
vueのlistというデータに画面名が入っていて、代入すると画面が切り替わる仕組みです。
入力画面：list、印刷画面：printJS側
“`j
簡単なTypeScriptの型一覧
# TypeScriptの型
– `boolean`型
– `true` or `false`
– `string`型
– 文字列
– `number`型
– JS同様にTSの数値は**浮動小数値**
– 2,8,10,16進数のリテラルもサポート
– `tuple`型
– 固定数の型がわかっている要素を定義できる **ex) `let x: [string, number]`**
– `any`型
– 型が不明な場合に用いる型。コンパイルでエラーがでない
– 型チェックが通るので推奨されない
– `unknown`型
– `any`型より少し型安全なany
– 値の代入には寛容（ok）だが値の利用には厳しい （error）
– `void`型
– 名前の通り型がない
– `null`か`undefined`しか代入できない
– `null`型
– `null`
– `undefined`型
– `undefined`
– `never`型
– 発生しえない値の型。戻り値が得られない場合の型として指定
– `object`型
ES Modules形式をCommonJS形式でも利用できるようにする
YAMAP エンジニア Advent Calendar 2019 の12日目になります。
YAMAPで、フロントエンドエンジニア？として活動中の @issyxissy です。
フロントエンドエンジニアと言っても、他にもいろいろなことやっています。YAMAPでは、Nuxt.js + Vue.jsを使ったフロントエンドの開発を行っています。
( https://yamap.com をみていただければと〜）最近、ちょっと悩んだことがあって、解決できたので、まとめてみました。
## ケース
Node.js と Vue.jsで、共通関数を使いたい・・・## 問題
Node.jsは、CommonJS 形式 (module.exports / require() )
Vue.js (ブラウザ環境) は、 ES Modules 形式 (export / import ) となるため、
共通関数をES Modules 形式で書くと、Node.js側で怒られるし、かといって、CommonJS 形式で書くと、Vue.js側で怒られる、どっちつかずな状況になります。Node.jsのバージョン
【JavaScript】 reduce()について
学校の先生が、一人の生徒のテストの合計を算出するプログラムを作るといったときに、
forやwhileではなくreduce()を使うことでも算出できたので備忘録として記載します。例えば、テストの点数が
国語：60点
英語：100点
数学：80点
理科：70点
社会：80点
だとします。これを配列にすると
let points = [60,100,80,80,70,80];
です。
forを使うと
let sum = 0;
for(let i=0; i
javascriptで配列にオブジェクトをぶち込む方法はこれ以外にないのか
ReactNativeでアプリを作っている最中に思わぬところで詰まりました。
タイトルの通りです。目標は、
“`js
[ { num1: 1, num2: 1 }, { num1: 2, num2: 2 } … { num1: 100, num2: 100}]
“`
という配列を作ることである。まずは手打ちでやってみる。
“`js
box = [{},{},…,{}] //100個用意
for(i = 1; i <= 100; i++){ box[i].num1 = i; box[i].num2 = i; } ``` できるが、100個も用意するのはめんどくさい。 ならば、こうしてみよう。 ```js box = [{}*100] ``` しかし、上のコードは``NaN``というエラーが出てしまう。 仕方ない、for文を使おう。 ```js box = [] for(i = 1; i <= 100; i++){ box.push({}); box[i].num1 = i; box[i].num2 = i; } ``
【AngularJS】ネストしたデータをng-repeatで表示させる
三階層ぐらいにネストしたデータをng-repeatで表示させてみた。
#実装
~~~JavaScript
// データ構造はこんな感じです
data:[
{“id”:1,”name”:”最初の項目”,”status”:1,”created_date”:”2019-01-01 00:00:00″,”updated_date”:”2019-01-01 00:00:00″,
“nest1”:[
{“id”:2,”name”:”説明”,”status”:1,”created_date”:”2019-01-01 00:00:00″,”updated_date”:”2019-01-01 00:00:00″,
“nest2”:[
{“id”:3,”name”:”使い方”,”status”:1,”created_date”:”2019-01-01 00:00:00″,”updated_date”:”2019-01-01 00:00:00″
}]
}]
},
{…},
{…}
]
~~~~~~index.html