JavaScript関連のことを調べてみた2019年11月04日

jQueryで指定要素以外の要素をクリックした時の処理を書く

#1. 概要
表示中のプルダウンを、プルダウン以外の場所をクリックしたらプルダウンを非表示にする
という処理をご紹介します。

文章だけだとイメージしづらいので、Excelを例にすると、
「検索と選択」というメニューを表示中に


別の場所をクリックすると表示していたメニューが消える

みたいな処理

19歳のソフトウェア開発者の女の子からのアドバイス

>こちらの記事は、[Lydia Hallie](https://medium.com/@lydiahallie) 氏により2017年 11月に公開された『 [Advice From A 19 Year Old Girl & Software Developer](https://medium.com/@lydiahallie/advice-from-a-19-y-o-girl-software-developer-88737bcc6be5) 』の和訳です。
本記事は原著者から許可を得た上で記事を公開しています。

この投稿は「私は毎朝4時に起きて20キロ走に行きます…」といった、まるで優れた開発者になるためには、ある種の超人になる必要があると思わせるような、”インスピレーショナル”な投稿ではないので、ご安心ください。

Instagram([@theavocoder](https://www.instagram.com/theavocoder/))で私をご存知の方もいるかもしれませんが、私が普段何をしているのか、ソフトウェア開発者になるためにどんな事をしたのかについて共有したこと

MATLAB -> C++ -> WebAssembly -> JavaScript

# 0. はじめに

MATLAB Central で [Generate JavaScript Using MATLAB Coder](https://jp.mathworks.com/matlabcentral/fileexchange/69973-generate-javascript-using-matlab-coder) なるツールを見つけました。MATLAB Coder を使って MATLAB から C++ に変換した後、さらに WebAssembly にまでもっていくツールのようです。今まで JavaScript は触ってこなかったですが、自動で変換できるならやってみるか・・と遊んでみた話。


WebAssembly については以下の２記事が参考になりました。

– [Qiita: WebAssemblyとは](https:/

【JavaScript】数秘術に触れる

# ※注意※

筆者は数秘術については初心者なので、計算や数字の意味などに誤りが含まれるかもしれません。ご指摘いただければありがたいです。

# 本項の目的
・数秘術に触れる
・数秘術をロジックで表現する。

# 数秘術とは

数秘術（Numerology）
生年月日や姓名を数字に置き換えて、計算を施し、最後に現れた数字を評価することによって性格や運勢を占う占術。
1~9の一桁の数値と、マスターナンバーと呼ばれるゾロ目11、22などに対応する意味があり、ここから結果を導き出す。どの数を含むか、また計算方式などは流派によって異なるので、自分に合うものを選ぶ。

Wikipedia:数秘術
https://ja.wikipedia.org/wiki/%E6%95%B0%E7%A7%98%E8%A1%93

ピタゴラスが創始者と言われるだけあり占いのオペレーションは論理的に簡潔していて、
スピリチュアルなイメージの占いを敬遠している人でもとっかかりやすい。

# 計算方法について

数値の意味、計算方法などなどは流派によって異なるようです。
本項では計算方法や数値の意味などは後述の動画

【独学】React Nativeを初心者が学習してみた part1

# はじめに
筆者のプログラミング学習歴は独学で５ヶ月ほど。
普段はRuby on Rails5を学習している初学者の私が、面白そうなのでReact Nativeを学習してみることにした。
iOSアプリ作ってみたいし、ついでにReactも学べばRailsで作ったWebサービスのフロントエンドが充実するかもしれない！といった安直な考えだけで学習を始めてしまったのだが、本当にこれで良かったのか…。
その答えはいずれ私がReact,React Nativeを習得した時にわかるだろう。

# React Nativeとは何か
[公式サイト](https://facebook.github.io/react-native/)や様々なqiitaの記事を読み漁ったが、[こちらの記事](https://qiita.com/Iwark/items/7c27e919bb71f8b256f6)にわかりやすくまとめられていた。
要は、React NativeはReactをモバイルでも使えるようにしたもの。
そしてそのReactはJavaScriptのフレームワークということ。
現時点ではこの程度しか理解で

【初心者】JavaScript　以前の記事について／undefined／配列応用編【備忘録１０】

##以前の記事での編集アドバイス
備忘録９にて、編集アドバイスをいただきました。
コメントをその際に返すことができませんでしたので
こちらで感謝申し上げます。ありがとうございました。

今までの記事では、書く際にそのまま値などを書いてしまっていたので
今後は、黒背景でしっかりわかりやすいように表示できるようにしていきたい。

他の方の記事の書き方や、今やっていることに関連する記事も
少しずつにはなると思うが、目を通して学んでいきたい。

##11/1～11/2に勉強したこと

###オブジェクトを要素に持つ配列
-　定数定義したのちに、単純に単語を並べるだけでなく、項目ごとに分けて単語を並べることができる。
【例】

“`js

const pets=[
{name:”犬”,price:20000},
{name:”猫”,price:10000}
];

“`

-　横に並べてしまうと長くなるので縦に並べると良い。
-　{}{}同士の間に「,」を入れなくてはならないので忘れないように気を付ける！
-　配列の時と同じように、初めの項目は「インデックス[0]」となるため気を付ける！

React Hooks を導入しようとしたはなし

# React Hooks について
最近プロジェクトでReactをメインで触るようになり、すこーしReact読めるようになったかなと思ってきたので、（ヒヨコである事に変わりありませんが…。）今後末長くReactとお付き合いできるように歴史について勉強しようという事で、今更ながらReact ver16.8で導入された React Hooks についてちゃんと勉強してみました。

# 過去作ったToDoApp
React 触り始めて勉強用に作った [ToDoApp(GitHub)](https://github.com/mineyuji/ToDoApp)は`this.state`で書いていたので、React Hooks でのメリデリ掴むために React Hooks 導入してみようかなと思います！

# this.state から useState に…
### useState について

`useState`はインポートする事で使い始めることができます。

“`jsx

import React, { useState } from ‘react’;
“`

state

jQuery勉強しようと思ったらいきなり「uncaught referenceerror $ is not defined」が出てきた

# “uncaught referenceerror $ is not defined” と出会ったときに試してほしいこと

ある研修でもらったjQueryのテキストを引っ張り出してカタカタと打ってみた
動かしてみた

動かんやん

ソースはこちら

“`calc.html

サボテンでも分かる！SSR対応SPAアプリの作り方(React/TypeScript/Express)

Next.jsを使わないReactのSSR解説で分かりやすいやつが無かったので、書きます！

環境構築からとっても丁寧にやっていきます:cactus:

##最初に

### 読んで欲しい人

* 『**SSR**したいけど難しそう….:fearful:』

って人はもちろん

* 『何も分からないけど**SPA**が作ってみたい！:smiley:』

って人も実際に作って楽しめるように書いてます。

> **SPA** (Single Page Application) : ネイティブアプリ（AppStoreやGooglePlayからインストールできるやつ）っぽいWebサイトのこと。ReactやVueなどのJavaScriptフレームワークを使って作るのが一般的です。

babel実行時に「Support for the experimental syntax ‘objectRestSpread’ isn’t currently enabled」と言われる場合の対応方法

# 概要
古いパッケージをアップデートしたところビルド時に`Support for the experimental syntax ‘classProperties’ isn’t currently enabled`というエラーが出るようになったので対応方法を調べました．

“`
ERROR in ./src/options/icons/clear.svg
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: D:\hoge\src\options\icons\clear.svg: Support for the experimental syntax ‘objectRestSpread’ isn’t currently enabled (6:3):

4 | export default (({
5 | styles = {},
> 6 | …props
| ^
7 | }) => React.createElement(“svg”, _

GitHub Actionsでキャッシュが使えるようになって嬉しい！

# 概要
– GitHub Actionsでキャッシュが出来るようになった
– まだβ版で正式公開ではなさそう
– CircleCIなどと似たような感じでキャッシュ周りの設定を書ける

**[actions/cache – https://github.com/actions/cache](https://github.com/actions/cache)**

# 何が嬉しいのか
`yarn install` に1分以上かかってたがそれが省略出来る。
Litner,Test…とジョブごとに分けてたら当然ジョブ毎にモジュールのインストールが必要で「ウーーン」となってたのでとても嬉しいです。

# サンプル
公式のリポジトリに様々な例がありますがここではJavaScript(yarn)の場合とElixir(mix)の場合を紹介します
やってることとしては何をキャッシュするかの記述と保存する時に使われるキーの設定です

## JavaScript
“`yaml
jobs:
# Linterに走ってもらうジョブ
Lint:
runs-on: ubuntu-latest

初心者がReact+FirebaseでWebアプリを作成する④　～画像と入力値をまとめてアップロード～

③の続きです。
休日の間に連続投稿しておきます。
今回はFirebaseのStorageへ画像をアップロードします。

↓参考資料にした公式ガイド
https://firebase.google.com/docs/storage/web/upload-files?hl=ja

まずはfirebaseのStorageサービスを開始しましょう。
↑にアップロードしていきます。

↑初期値のセキュリティルールでは認証ができたユーザーのみアップロードできるようになっているので、ケースによってセキュリ

FirebaseFunctionsで素のJSを返す

# 実現したいこと

FirebaseFunctionsを使ってリクエスト元やパラメータに合わせたJSファイルを作り返したい

こんな風に使いたい

“`html

“`

# Functionsの実装

`functions/index.js`

“`javascript
exports.hello = functions
.region(‘asia-northeast1’)
.https.onRequest((request, response) => {
// Using query
const name = request.query.name || ‘defaultName’;
// Return alert js
response
.contentType(‘application/javascript; charset=utf

初心者によるプログラミング学習ログ 145日目

# 100日チャレンジの145日目

twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。

100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。

145日目は、

おはようございます
145日目

udemyでjavascript学習
メンターさんのjavascript課題

課題ようやくいい感じに仕上がった…・ω・

ところでデイトラというのも最近気になっています#早起きチャレンジ年末まで毎日webサイトを作り続ける大学生 〜16日目 Ap●le 公式サイトのファーストビューを真似して作ってみる〜

##はじめに
こんにちは！
年末まで毎日webサイトを作っている者です。
今日はゆくゆくwebサイト制作でお金をもらうための練習ということで、Ap●leのファーストビューをソースコードを見ずに動きを見て模倣してみました。（fontだけはソースみました)
扱う技術レベルは低いですが、同じように悩んでる初心者の方を勇気付けられれば幸いです。
今日は16日目。(2019/11/3)
よろしくお願いします。

##サイトURL
https://sin2cos21.github.io/day16.html

##やったこと
Ap●leのファーストビューを真似してみました。
まずは結果からどうぞ (gif)↓

以下順番に説明していきます。

1. レスポンシブなメニューの表示変更の方法
2. 動画の挿入方法と注意点
3. JavaScriptを用いて要素を

元記事を表示

スクラムイベントを実践的に学習する企画のサンプル課題

# このページについて
アジャイル経験の無い(または少ない)社員を対象に、スクラム式のアジャイル体験会を開くことになりました。その取組み課題です。

# 前提

通常業務の隙間を縫って実施します。

* 開発者：4~5名
* 期間　：1週間1Sprint×4回
* 工数　：各自、開発に使える工数は1Sprint 1時間　※スクラムイベントは別
* プログラム経験：新卒または設計/マネジメント中心で実装経験は少ない

開発環境を揃えるのに時間をかけたくないので、HTMLとJavaScriptなら最悪メモ帳でも出来るだろうという発想。

# Sprint#1 お題

※Sprint#1ですべて実装してね、ではなく、バックログ積んでプランニングしてね！ということ。初回はチュートリアルのために、ボリュームを抑えめにする。

## Top画面

|

画像が多いWEBサイトを高速化したい（遅延ロード）

画像の遅延ロードをしてみたので、自分の理解やしたことを、備忘録としてメモ。
**lazyestload.js** という Javascript のライブラリーを使用。

# 参考サイト
以下のサイトを参考にさせていただきました。

これならすごく簡単！ページを高速に表示させるLazy Loadを実装できる超軽量ライブラリ -Lazyestload.js

画像の遅延ロードを簡単に実装できる軽量スクリプト「Lazyestload.js」

# 画像の遅延ロードとは

画像が多いWEBサイトを高速化するための、定番の手法。

WEBサイトのページは、通常は、そのページの画像が全て読み込まれた（ダウンロードされた）後でないと、表示されない。
スクロールしないと見えないような位置にある画像も含め、全てが読み込まれるまで、画面が真っ白になって待たされる。（くるくる回るようなローディングのアニメーションは、この待ち時間を感じさせないようにするもの）

画像の遅延ロードとは、最初にページを表示する時は、画像を読み込まず、後で読み込んでいく手法。

JavaScriptとChromeブラウザで手動スクレイピングする

# 手動スクレイピング？

ブラウザ開発者ツールのコンソールに直接jsコードを書いて、ウェブページからデータを抽出する作業を個人的にそう呼んでいます。データは欲しいけど自動化するまでもないときに手軽に実行できて便利です。

おおまかに以下の流れで欲しいデータを集めます。

1. 要素を指定する
2. 要素をArrayにする
3. 要素のデータを取得する

ブラウザはChromeを前提としています。
他のモダンブラウザでも同様のことができると思いますが検証はしていません。

# 1. 要素を指定する

`document.querySelectorAll`を使用して欲しいデータを持つHTMLエレメントを指定します。

https://developer.mozilla.org/ja/docs/Web/API/Document/querySelectorAll

– 要素名やclass,idを指定して絞り込む

“`js
document.querySelectorAll(‘span’);
document.querySelectorAll(‘.target-class’);
docum

初心者向けWEBアプリ開発のコツ(2)

##はじめに
今日のソースはフロントエンド側の話。。。

WEBアプリ開発においては、JAVASCRIPTの習得が必須。
これはバックエンド＋フロントエンド＝ＷＥＢアプリみたいに、
対で成立するものであって、どっちがどうとか言う問題ではない。

つまりFLASKをPYTHONのライブラリと思っていれば良いという事でなく、
FLASK＝PYTHON＋JAVASCRIPTということ
（ここでHTML,CCSのことは、必要最低限できているのが前提にあるが）

##テンプレート

ルーティングの際に静的ファイルは、STATICというフォルダに入れるらしい
url_forの指定の仕方は、’static’＋ファイル名　で書かないと、だめらしい

実はここで、つまずいていたが、下記のソースを見て明らかになった。

“`html


Reactをすぐ試したいときにCDN（インストールなし）で読み込む方法

Reactの勉強や練習をしよう！

と思ったときに、npmなどでダウンロードするものが色々あるので、
ちょっと面倒だなーと言うときにCDNのみで利用できるようにする方法をメモしました。

“`html