- 1. 魔法JS☆あれい 第5話「joinなんて、concatなわけない」
- 2. 数十分で始める、Svelte+Firebaseのアプリ生活。
- 3. 【JS】querySelectorAll()メゾッド使用時にaddEventListener()メゾットが動かなかった
- 4. フロントエンドエンジニア(主にVue.js)に転職して学んだこと
- 5. チーム開発 3/20
- 6. Electronでカレンダーを作る④
- 7. JavaScriptでプレビュー機能 onKeyup onchange
- 8. ローカル環境においてあるnpmライブラリをyarnでインストールして試すときにキャッシュでハマった
- 9. ブロックチェーンでリモート承認を導入してみる
- 10. Next.jsでCSSとSASS(SCSS)、Bootstrapを使う
- 11. particles.jsをさわってみた
- 12. Electronでカレンダーを作る③
- 13. Vue.jsでApexchartsを使ってグラフ描画を行う
- 14. [Fastly] Server-Sent Events (SSE) を Fastly で最強にスケールさせる
- 15. 魔法JS☆あれい 第4話「fillも、spliceも、copyWithinもあるんだよ」
- 16. 【ラジオボタンより簡単！】jQueryで表示・非表示を実装する方法
- 17. HTMLのtableをソートする方法
- 18. consoleのいろんな使い方
- 19. 高階関数を書いたら、中級者になれた気がした。
- 20. Electronでカレンダーを作る②
魔法JS☆あれい 第5話「joinなんて、concatなわけない」
登場人物
丹生（にゅう）あれい
魔法少女「魔法（マジカル）JS（女子小学生）☆あれい」として活動中。イテレー太
正体不明の魔法生物。第1部「ミューテーター・メソッド編」
* [第1話「popでpushした、ような……」](https://qiita.com/8amjp/items/e44e707ccc8c95b4a40d)
* [第2話「shiftはとってもunshiftって」](https://qiita.com/8amjp/items/3fc1b2defd28ba1c2df3)
* [第3話「もうsortもreverseも怖くない」](https://qiita.com/8amjp/items/86f5294981fbebd3fe2d)
* [第4話「fillも、spliceも、copyWithinもあるんだよ」](https://qiita.com/8amjp/items/0741e35b70ea32711265)## join()
イテレー太「えー、私が魔法世界からデータを召喚しますので、皆さんは魔法少女になって、配列魔法でそのデータを加工して敵を倒してください
数十分で始める、Svelte+Firebaseのアプリ生活。
#序
数日前に、[ES2015以降をお勉強するのに、Svelte REPLが楽しかった](https://qiita.com/e-a-st/items/46e39fee451f5006f451)ので、Svelte+Firebaseでwebアプリを作ってみたいと思った（最近、オウンドメディア的なものを作りたいなと思っているもので）。## Svelteとは？
JSを知っていてSvelteって何という人は、[Svelteで始める頑張らないフロントエンド生活](https://sbfl.net/blog/2019/12/04/svelte-frontend-1/)を参考にすると良い。作ってくれているtodoアプリをどうfirebase化するかは、良い例題となりそう。#SvelteFireを使って、１時間以内でアプリを作り始める。
Firebaseのエキスパートの方が作ってくださっている[SvelteFire](https://github.com/codediodeio/sveltefire)を元にすると、（朝食のカレーを作ったり食べたりしながら）ほぼ１時間でCloud firesto
【JS】querySelectorAll()メゾッド使用時にaddEventListener()メゾットが動かなかった
# 問題
`querySelectorAll()`メゾッドでセレクタを指定して、`addEventListener()`メゾッドでクリックイベントを仕込もうとしたときです。“`js:main.js
const target = document.querySelectorAll(‘nav a’);
const closeNav = function () {
const close = document.getElementById(‘global-nav’);
close.classList.toggle(‘nav-open’);
};
target.addEventListener(‘click’, closeNav);
“`**`addEventListener()`が動かない…**
Consoleではこのように怒られています。
に転職して学んだこと
Qiita初投稿です。
# はじめに
転職して1年が経ったので、個人的な振り返りです。
未経験から主にVue.jsを学び、モダンなフロントエンド開発が学べて個人的には大きな収穫となりました。
# 私について
– WEB制作会社出身
– 前職はコーダー
– 2019年に転職、フロントエンドエンジニアになる古典的なWEB制作会社にいましたので、モダンなフロントエンドを学びたいと思い、転職活動をしました。
もちろん未経験では採用してくれる企業はなかなかいないので苦戦しましたが、縁あって今の会社に転職することができました。
# 入社前のVue.jsの勉強方法
– 入社前、前職の有給消化期間でUdemyと本で学習
– Udemy 「Vue JS 入門決定版」https://www.udemy.com/course/learn-vuejs/
– 本「基礎から学ぶ Vue.js」https://www.amazon.co.jp/gp/product/4863542453/1ヶ月ぐらい休める期間があったので、Udemyを見ながらコードを書きました。
それを2～3回繰り返
チーム開発 3/20
最終課題３日目
トップページ担当
#これはメモですcontentとは
contentはCSSで指定できるプロパティです。
要素の直前または直後に、文字列や画像などのコンテンツを挿入する際に使用します。contentプロパティを適用することができるのは、:before擬似要素および:after擬似要素のみです。
擬似要素とは、要素の一部にスタイルを適用するために、擬似的に設定される｢要素のようなもの｣のことです。
:before擬似要素および:after擬似要素は、要素の直前および直後に、文字列や画像などのコンテンツ（内容）を挿入するために擬似的に設定されます。
参考サイトlink_toにh３などタグをネストして書く時は
=link_to “リンク” do
=“名前”
=%h3
と記述ブラウザを小さくしても
大きさを変えたくないブロックに使用
Margin部分は真ん中に設定
max-width: 700px;
margin: 0 auto;ボックスに影を作る時使用
box-sha
Electronでカレンダーを作る④
# 前回まで
[link1]:https://qiita.com/turn-take/items/12d967678e4764cd7683
[前回][link1]は月の切り替えボタンを作った。
月を変えても、表示内容の変更だけで同じ画面を使い続けるので微妙。# 月を変えたら画面自体を新しく作り直したい
というわけでindex.jsをいじって、読み込みごとにカレンダーを作るように修正。“`index.js
‘use strict’;const moment = require(“moment”);
const ipcRenderer = require(“electron”).ipcRenderer;window.onload = function() {
const month = parseURLParam(location.search).month;
const callendar = new Callendar(month);
callendar.show();//先月ボタン押下時
document.getEl
JavaScriptでプレビュー機能 onKeyup onchange
# プレビュー機能作成
プレビュー機能とは(名前が正しいかわかりませんが)、Qiitaの投稿時の右側の画面のように、入力すると非同期で表示がされる機能のことです。ブログ記事を書く際や、マークダウンでの記述の場合はよく使用されますよね！
今回は基礎ということで簡単なプレビューを作成致します。**完成品**
**HTML5**
“`html
ローカル環境においてあるnpmライブラリをyarnでインストールして試すときにキャッシュでハマった
## 最初に結論だけ
各種 `yarn` コマンド実行時にキャッシュ置き場を指定。ライブラリの変更を反映したいときは `rm -rf` で直接そのディレクトリを削除してやる
“`bash
rm -rf ./ycache
yarn remove –cache-folder ./ycache some-library
yarn add –cache-folder ./ycache -D path/to/some-library/some-library.tgz
“`## 起こった事象
– ライブラリのディレクトリで `yarn pack` を実行してtgzファイルを作成
– 試す側のディレクトリで `yarn add path/to/library/library.tgz`
– yarnのキャッシュによって古いものがインストールされる
– `yarn cache list –pattern library` で確認するとたしかにキャッシュがあるので、 `yarn cache clean library` でキャッシュを削除
– 改めて `yarn cache list`
ブロックチェーンでリモート承認を導入してみる
新型コロナウィルスの影響でリモートワークの検討をしている人も多いかと思います。
NEMのCatapultエンジンを搭載したブロックチェーンでリモート承認に挑戦してみましょう。大まかな処理の流れは図の通りです。
– 申請者がファイルのハッシュ値を取得
– ブロックチェーンにハッシュ値を登録
– 承認者にファイルとトランザクションハッシュ値を通知
– 承認者はファイルのハッシュ値とブロックチェーンに刻まれたファイルハッシュ値を照合し、申請者による依頼であることを確認
– 承認者は申請アカウントに対し承認
– 承認者が申請者に承認とトランザクションハッシュ値を通知
– 申請者はトランザクションハッシュ値から承認者による承認であることを確認では今回もchromeブラウザで動作確認していきましょう。
F12キーあるいは fn+F12キーを押して
Next.jsでCSSとSASS(SCSS)、Bootstrapを使う
# Next.jsでCSSとSASS(SCSS)、Bootstrapを使う
next.jsでreactのSPAを作り始めたのですが、css, sass, bootstrapの設定周りですこしつまづいたのでメモ。
## Next.jsのプロジェクト作成
プロジェクト作成“`
yarn craete next-app
“`これでNext.jsのプロジェクトが作成されます。 `yarn dev` で起動できます。
## CSS, SASSの設定
css, sass(scss)ファイルをimportできるようにします。まずはパッケージインストールします。
“`
yarn add @zeit/next-cssyarn add @zeit/next-sass node-sass
“`### next.config.jsの作成
プロジェクトのルートに `next.config.js` ファイルを作成します。これはnext.jsの設定ファイルです。以下はcssとsassどちらもimportできるような設定です。
“`next.config.js
const
particles.jsをさわってみた
## particles.jsってなに
一言でいうと**パーティクル**を実装できるスクリプト！
下のようなものが作れる！
Qiitaの記事があんまり見当たらなかったので書いてみました！## とりあえず動かしてみる！
“`index.html
Electronでカレンダーを作る③# 前回からの続き
[link1]:https://qiita.com/turn-take/items/19b8b21671867b3e4758
[前回][link1]はカレンダーの中身が動的に表示されるようにした。# 表示する月を変えられるようにする
先月、来月に切り替えられるようにしたい。先月と来月切り替えボタンを配置する。
“`index.html
ElectronCalendar