- 1. babelの設定ファイルをTypeScriptで書く
- 2. JavaScriptの配列とオブジェクト操作
- 3. EdgeHTML の browser API 不具合集 (2020年4月)
- 4. Vue.js公式チュートリアルをゆっくり読んでいく2
- 5. 自分やチームのLGTMを可視化するツールを作ってみた
- 6. ムーモ（moomo）の口コミや評判は悪い？実際に使用した方の口コミを調べました
- 7. JavaScript オブジェクト
- 8. asyncとdeferの仕様を誤解していた。
- 9. コロナウィルス対策でリモートワークしてみたらReduxやVuexのメリットが分かった
- 10. 今更ながらReact Nativeに入門してみた①
- 11. 【React Hooks】グローバル状態管理にはContextAPIを使おう
- 12. JavaScript 学習用 関数
- 13. 【JavaScript】DOMの基本を学ぶ
- 14. AtCoderにJavaScriptで挑む方法
- 15. 仮想環境でRails API × Nuxt.jsのアプリケーション開発をしたいが、まずブラウザに表示されない！
- 16. fontawesomeをサクッと組み込むためのライブラリ「wonderful.js」を作ってみた
- 17. 静的サイトジェネレーター Gatsby
- 18. Ajax通信 覚書
- 19. JavaScript : ページの最下部に来た時にイベントを起こす
- 20. Reactのメインコンセプト要点まとめ(2)
babelの設定ファイルをTypeScriptで書く
表題の通りです。
`babel` の設定ファイルといえば `.babelrc` `babel.config.js` での記述が一般的だと思います。これを `babel.config.ts` に記述できるようにします。## 1. 必要モジュールのインストール
とりあえず `webpack` 前提で必要最低限なものだけインストールします。“`
npm i -D webpack webpack-cli typescript ts-node @babel/core @types/babel__core babel-loader @babel/preset-env
“`ほとんど説明するほどのものではないですが、重要なのは `@types/babel__core` です。
ここに設定ファイルで使用する型情報が載っています。## 2. TypeScriptの設定
`tsconfig.json` を書きます。“`tsconfig.json
{
“ts-node”: {
“compilerOptions”: {
“module”: “commonjs”,
JavaScriptの配列とオブジェクト操作
# 配列操作
“`javascript
const a = [1, 2, 3, 4, 5];
const b = [6, 7, 8, 9, 10];//配列をなくす方法
const c = […a, …b];//分割代入
const [d, e, f] = a//rest構文
const [g, h, …i] = aconsole.log(…a); // 1 2 3 4 5
console.log(c); // [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]
console.log(d, e, f); // 1 2 3
console.log(g, h, i); // 1 2 [ 3, 4, 5 ]//値の交換
let [x,y,z] = [1,2,3]
console.log(x,y,z); // 1 2 3[x, y, z] = [y, z, x];
console.log(x, y, z); // 2 3 1
EdgeHTML の browser API 不具合集 (2020年4月)
#概要
Windows 版 Edge (EdgeHTM エンジン) の browser/chrome API の不具合の覚え書き。
Chromium エンジン版 Edge は未検証。
(どうせ Chromium に移行するつもりだったからなのか EdgeHTML は色々ガバガバ。)
※ browser/chrome API のほぼ全ての同期関数は、引数の最後にコールバック関数を渡すことで非同期的にも利用できる。また Chrome・Edge 問わず「同期関数という事になっているが実は非同期関数としてしか使えない関数」が幾つか存在する。MDN (英語版しか読んでいないが) ではそれらに関する記述がほぼ皆無なので要注意。##検証環境
– 2020年4月時点
– Windows 10 Pro x64
– Microsoft Edge 44.18362.449.0 (EdgeHTML 18.18363)
– 下記のモンキーパッチ(?)を適用.
– `chrome` は `browser` と同義“`javascript:background.js/content.js
if(/edge
Vue.js公式チュートリアルをゆっくり読んでいく2
# 前置き
[前回](https://qiita.com/jcong7495/items/f4acac6356902a2387f2)に引き続き、Vue.jsの[公式チュートリアル](https://jp.vuejs.org/v2/guide/index.html)をゆっくり読んでいきます。
チュートリアルに沿ってはいますが、サンプルはよりわかりやすく単純なものに一部変えているところもあります。前回は主にVue.jsの[リアクティブシステム]([https://qiita.com/jcong7495/items/f4acac6356902a2387f2#%E3%83%AA%E3%82%A2%E3%82%AF%E3%83%86%E3%82%A3%E3%83%96%E3%82%B7%E3%82%B9%E3%83%86%E3%83%A0%E3%81%A8%E3%81%AF](https://qiita.com/jcong7495/items/f4acac6356902a2387f2#リアクティブシステムとは))に触れました。今回は、Vue.js上では「ディレクティブ」と呼ばれているVue
自分やチームのLGTMを可視化するツールを作ってみた
## はじめに
[チームの1年間のいいね数をD3.jsを使ってアニメーションで可視化する](https://qiita.com/tonio0720/items/2548d810e37c442aa540)
以前この記事で、チームの~~いいね~~LGTMをD3を使ったアニメーションで可視化するということをやりました。
今回はQiitaのユーザーIDを入力するだけで、同じような可視化ができるQiitaRacerというものを作ったのでご紹介します。## サービス
[Qiita Racer](https://tonio0720.github.io/QiitaRacing/index.html)
※Github Pagesで公開していますソースもこちらに公開しています。
https://github.com/
ムーモ（moomo）の口コミや評判は悪い？実際に使用した方の口コミを調べました
ムーモ（moomo）の口コミや評判は悪い？実際に使用した方の口コミを調べました
実際の所どうなのでしょうか？
詳しい内容はこちらです
JavaScript オブジェクト
#はじめに
皆さん、こんばんは?
yuです?
最近、ここ2日間ぐらい、投稿ができませんでした。
理由として、
転職先を、フロントエンドエンジニアになることを目標に置き、
どのような、言語を学ベば良いのか迷っていました。私なりに考え、それは、JavaScript関連だと思いました。
より一層、追求していこうと思いました。これからも、JavaScriptを中心に投稿していきます。
よろしくお願いします?オブジェクトについて、初めていきます。
#オブジェクト
まず「オブジェクト」を日本語に訳すと、「物」と出てきます。
本来はそうなのですが、Javascriptでは、「データの集まり」と、
理解しましょう。#####オブジェクト文を詳しく見ていきましょう↓?↓
“`js
const Giants = {
sports : “野球”,//プロパティ
color : “オレンジ”,//プロパティ
playing : function() {
document.write(“ボールを投げる。”);//メソッド
}
}
“`上記のようになります。
オブジェクト
asyncとdeferの仕様を誤解していた。
## 解決したい問題
勤務先のWebサイトで、他社製のスクリプトAの実行が完了する前に、自社製のスクリプトBが実行されるとIE11がクラッシュするバグが見つかりました。具体的には以下のように呼び出しています。
なお、A.jsの呼び出し用タグは他社からの指示で1文字たりとも変更できません。“`html
“`クラッシュする原因は「B.jsの作りに問題があり、その問題をIE11だけが踏み抜くから」なのですが、A.jsの実行が完了していればクラッシュは回避できるため、B.jsがA.jsの実行を待てば良いと思い、以下のように書換えました。
“`html
<
コロナウィルス対策でリモートワークしてみたらReduxやVuexのメリットが分かった
## 忘れ物を取りに久々に出社したワイ
ワイ「おはようさん」ハスケル子「おはようございます」
ワイ「なんや、ハスケル子ちゃんしかおらんのかいな」
ハスケル子「はい」
ハスケル子「みなさんリモートワークです」ワイ「コロナウィルスのせいで基本**出社禁止**やもんなぁ」
ワイ「通勤せんでいいのは楽チンやけど」
ワイ「みんなに会ってバカ話ができなくて寂しいわぁ・・・」ハスケル子「やめ太郎さん、あんまり近づかないでください」
ハスケル子「こっち向いて喋るのもやめてください」ワイ「おお、失礼失礼」
ワイ「もしウィルス感染してたら、うつってまうもんな」ハスケル子「いえ、**単純に口が臭いんです**」
ワイ「Oh…」
ワイ「ごめんやで…」## リモートだと、井戸端会議が聞けなくて困る
ワイ「なんか、リモートって結構やりにくくない？」
ハスケル子「私は別に大丈夫ですね」
ワイ「そうかぁ」
ワイ「ワイはなんか、井戸端会議が聞けへんのが困るわ」ハスケル子「井戸端会議ですか」
ワイ「せや」
ワイ「色んなとこでPMさんやら営業さんが」> + 来月くらいに〇
今更ながらReact Nativeに入門してみた①
# はじめに
実は最近、**React Native**なるものに入門してしまいました…。
React Nativeとはなんなのか？といったところの説明から、実際に簡易的なTODOアプリを作成するところまでご紹介できればと思います。
では、早速行ってみましょう〜！
# React Nativeとは何か
React Nativeとは、
**Reactを使って、iOSやAndroidなどのネイティブアプリを開発することができるクロスプラットフォームな開発ができるフレームワーク**です。
公式サイトは[こちら](https://reactnative.dev/)
# なぜReact Nativeで作るか
個人的にメリットだと感じる点はいくつかあります。
1. React(JavaScript)で書ける
2. プラットフォームを意識せず開発できる普段JavaScriptでバックエンドやフロントエンドを書いている自分にとって、同じような感覚でネイティブアプリも作れてしまうのは非常に魅力的です！
また、本来であればiOSならSwift、AndroidならKotlinな
【React Hooks】グローバル状態管理にはContextAPIを使おう
Reactでグローバルな状態管理といえば`Redux`ですが、`Context API`を使えば似たようなことができるので紹介します。
まずは、グローバル状態を定義します。
“`jsx:Global.js
import React, { useState } from ‘react’;export const GlobalContext = React.createContext({});
export const GlobalProvider = ({
children
}) => {
const [someState, setSomeState] = useState(null);
const [someState2, setSomeState2] = useState(null);return (
JavaScript 学習用 関数
### 基礎
“`javascriptfunction sayHello(){
return “Hello”;
}
sayHello();“`
“`javascript
function sayHello(name) {
// ここに戻り値を書いてください
return `Hello ${ name }`;
}
“`### 引数がない場合
“`javascriptfunction sayHello(name) {
// ここに戻り値を書いてください
if (!name) {
return “What is your name?”;
} else {
return “Hello ” + name;
}
}
“`### 文字列を数値に
“`javascriptfunction add(a, b) {
// ここに戻り値を書いてください
return parseInt(a, 10) + parseInt(b, 10);
}
“`### 配列処理
“`javascriptfun
【JavaScript】DOMの基本を学ぶ
##はじめに
Javascriptを学ぶ上で欠かせない**DOM**について、基礎的な部分を固めたいのでまとめました。
学習サイトやなんやらでJavaScriptの文法的な基礎を学んだ後、次は？みたいな人（わたし）が多いと思います。
そんな方のステップアップに繋がるのがDOMなのかなーと思ってるので、DOM操作に慣れていければいいなと。##目次
[DOMとは](#DOMとは)
[DOMで何ができるようになるのか](#DOMで何ができるようになるのか)
[要素の取得をする](#要素の取得をする)
[要素取得のメソッド](#要素取得のメソッド)
[要素にアクセスして変更を加える](#要素にアクセスして変更を加える)
[クラスを操作する](#クラスを操作する)##DOMとは
「**Document Object Model**」の略です。HTMLは**HTML文章**と呼ばれることもあり、文章=Document。
つまり**HTML(XMLなども)オブジェクトとして扱い、それを操作する**ためのモデルです。
その操作をすることを
**DOM API** や **DOM** と呼
AtCoderにJavaScriptで挑む方法
[AtCoder](https://atcodern.jp/)にJavaScript（またはTypeScript）で挑むときに最低限押さえておいた方が良いと思われるポイントを紹介します。競プロ初心者の方が対象です。
## その1: 提出言語にJavaScriptでなくTypeScriptを選択する
JavaScriptでコードを記述する場合でも、提出言語はTypeScriptを選択した方が良いです。
というのも、AtCoderのサポートするJavaScriptランタイムはNode.js v5.12のみであり、これはいまや使いものになりません（例えばアロー関数や分割代入が使えません[^1]）。
[^1]: https://node.green/
TypeScriptもv2.1.6とそれほど新しいわけではありませんが、ES2015が問題なく
仮想環境でRails API × Nuxt.jsのアプリケーション開発をしたいが、まずブラウザに表示されない！
## 自己紹介
– 現在プログラミングの学習中の者です
– 言い回しや知識に関して、諸所間違い等あるかと思います
– その際は、ご指摘いただけますと幸いです## やりたいこと
RailsをAPIとして使用し、Nuxt.jsをフロント側に使用する開発において、
それらを**仮想環境で**開発を開始すること。具体的には、@saongtx7様が書いてくださった
こちらの記事を仮想環境で進めたいと思ったことがきっかけです。**[入門]Rails API × Nuxt SPA × Firebase Authで作る Todo Appチュートリアル**
https://qiita.com/saongtx7/items/d97ef5aec393e704fd3f本当に素晴らしいチュートリアルでした。
この場を借りて感謝申し上げます。## 問題点
私の場合このような問題が起こりました。
#
– Rails側でポート指定をしてもブラウザに表在されない(rails s -b 5000)
– Rails側でポートを指定せずに起動した場合、Nuxt.jsとポート番号が競合する## 結論
fontawesomeをサクッと組み込むためのライブラリ「wonderful.js」を作ってみた
## :dog2: … ステータス（α版）
（機能追加後に随時更新していこうと思っています！が一旦Launchします！）
## :book: 背景
チェックボックスやラジオボタンを手軽に（おしゃれに）組み込めないか考えた時に、
以下の選択肢に遭遇しました。
– iCheck.js
– → Jquery依存だったりする
– CSSでおしゃれに自作
– → コピペといえど大変..（他にもっと簡単な方法があれば教えて下さい….orz）
fontawesomeはアイコン組み込むのになにかと使用されている方が多いのではと思います。
ちょうど、free版にもチェックボックスのアイコンも存在するので組み合わせて使ってお手軽に実装と行こうではないかと考え立ちました。
ちなみに、checkboxの疑似要素(before)を使ってCSSのみでfontawesomeを組み込む方法も紹介されていたのですが、アイコンサイズとラベルのサイズを調整す
静的サイトジェネレーター Gatsby
## 静的サイトジェネレーターとは？
Static Site Generator（SSG）
WebサイトのHTMLファイルを生成するツールのこと
WordPressのような従来CMSの仕組みは、MySQLなどのDBをもとに、サーバーでHTMLを生成して返すものだった
それに対し静的サイトジェネレーターは、コンパイル時にGraphQLやAPIからすべてのデータを取得し全てのHTMLを最初に生成する
さらに、生成されたファイルを、Netlifyなどのホスティングサービスを用いて、サーバーレスで公開する仕組みが主流になっている
## 静的サイトジェネレーターのメリット
+ レスポンスが速い。
Ajax通信 覚書
# 序文
Ajax通信の簡単な覚書のつもりで作成しました。初心者が初心者にもわかりやすいように書いたものなので拙い点は多々あるはずですが、ご容赦ください。# 使用言語
1.JavaScript
2.C## サンプル
“`js
function (method, url, param) {
let defer = $.Deferred();
$.ajax({
type: method,
url: url,
data: param,
success: function (data) {let json = JSON.parse(data);
defer.res
JavaScript : ページの最下部に来た時にイベントを起こす
スクロールがページの一番下に到達したことをJavaScriptで拾うには以下のようにする。
“`JavaScript
$(window).on(‘scroll’, function () {
var doch = $(document).innerHeight(); //ページ全体の高さ
var winh = $(window).innerHeight(); //ウィンドウの高さ
var bottom = doch – winh; //ページ全体の高さ – ウィンドウの高さ = ページの最下部位置
if (bottom <= $(window).scrollTop()) { //一番下までスクロールした時に実行 console.log("最底辺！"); } }); ``` 一番下まで行かずとも「ページの80%」で動作させたいなら、5行目の if 文を以下のようにする。 ```javascript if (bottom * 0.8 <= $(window).scrollTop()) { ```
Reactのメインコンセプト要点まとめ(2)
# この記事の位置づけ
React公式ドキュメントの「メインコンセプト」について、実際にReactの開発を行う中で特に参考になった章を要点の解説付きで纏めたものである。実際にReact公式ドキュメントを読み解いてもらうのが一番だが、時間がない人に要点だけでも読んでもらえるようにしたいと思い、纏めている。公式のメインコンセプトでは、以下の章立てで説明をしている。
1. Hello World
2. JSXの導入
3. 要素のレンダー
4. コンポーネントとprops
5. stateとライフサイクル
6. イベント処理
7. 条件付きレンダー
8. リストとkey
9. フォーム
10. stateのリフトアップ
11. コンポジションvs継承
12. Reactの流儀当記事では、以下の3章分について要点まとめをしている。
4. コンポーネントとprops
5. stateとライフサイクル
6. イベント処理# 出典元資料
React公式ドキュメントの[メインコンセプト](https://ja.reactjs.org/docs/hello-world.html)# メイン
