プログラミング初心者の私がQiitaでいただいた金言
## この記事について
この記事は、プログラミング初心者の私が他のユーザーさんからいただいたコメントで、
是非紹介したいコメントがあったので、同じくプログラミング初心者で悩んでいる人達に
共有するために書いております。
# 当時の状況
商社に勤めていましたが、転職に向けて日々の仕事とは別に興味があったプログラミング
を独学で学習している真っ最中でした。
自分の書いたコードがどうしても正常に動作せず、原因と対処方法を検索しては試すので
すが、解決の糸口が掴めず、なかなか進まない苛立ちと焦りが募っていました。
結局、自己解決を諦めて、何が原因かの見通しも立っていない漠然とした状況で、失礼か
とも思いましたがQiitaに助けを求めて質問をいたしました。
# 質問した結果…
質問したその日にデバッグ方法について回答が来ました。
①var_dumpメソッド（プログラムがどのように処理されているか確認するため
に処理結果や経路を確認）
②executeメソッド（SQLが正しく処理されているかも確認するために、戻り値を入手）
③errorInfoメソッド（直近のエラー情報を取得）
①
# コード
– 成功すれば`true`、失敗すれば`false`が返ってくる
– `fs`ではなく`original-fs`を使用
– バージョンアップで既存のモジュールが使えなくなるなど、保守性を考えて、デフォルトの`http`または`https`でダウンロード
– 今回は`GoogleDrive`に保存したasarファイルを`DriveToWeb`でホスティングしていたため、asarファイルのように容量が大きいと`303`が返ってくるので再帰でもう一度リクエストを送っている
https://teratail.com/questions/cy6vyydt1hnbn7
“`asarDownLoad.js
const https = require(‘https’)
const originalfs = require(‘original-fs’)
/**
* http.get
* asarのダウンロード・置き換え
* @param {*} url ダウンロードするファイルのURL
* @param {*} outURL 出力するファイルのURL
*/
const
正確に扱える最大の整数
Number.MAX_SAFE_INTEGER
9007199254740991
正確に扱える最小の整数
Number.MIN_SAFE_INTEGER
-9007199254740991
Number.MIN_SAFE_INTEGERからNumber.MAX_SAFE_INTEGER以外の範囲では計算結果に誤差が生じる。
0以外の数値型
“以外の文字列型
配列型
オブジェクト型
これらをifの条件式として扱う場合はtrue扱いになる。
“`javascript
//アラートが表示されるパターン
const userName = ‘Hitsuji’;
if(userName){
alert(`こんにちは${userName}さん`)
}
“`
“`javascript
//アラートが表示されるパターン
const address = ”;
if(address){
alert(`あなたは${userName}ですね？`):
}
“`
!を付与すると真偽値が逆になる
“`javascript
//falseが変える
const flg =
‘JavaScript’.includes(‘a’);
console.log(!flg);
“`
!!を２回加えるとデータ型がbooleanになる
“`javascript
//結果: true
console.log(!!’Hitsuji’):
“`
function 関数名(…引数) ||
(…引数) => {}
## 不特定数の引数を受け取る関数を作りたい
不特定多数の引数を受け取るには「…引数」のように「…」を用いる。
受け取った引数は引数[0],引数[1]のようにインデックスを使用して使用可能。残余引数という。
渡した引数を全て加算してreturnする関数はこちら。
“`javascript
function calcSum(…prices){
let result = 0;
for(const value of prices){
result += value;
}
return result;
}
const result1 = calcSum(10,20)
“`
# if文
■もし条件式1ならば処理1を実行する
“`JavaScript
if (条件式1) {
処理1
}
“`
■もし条件式1ならば処理1を実行、違う場合は処理2をする
“`JavaScript
if (条件式1) {
処理1
} else {
処理2
}
“`
■もし条件式1ならば処理1を実行、
条件式1には当てはまらないが、条件式2に当てはまれば処理2を実行、
違う場合は処理3をする
“`JavaScript
if (条件式1) {
処理1
} else if (条件式2) {
処理2
} else {
処理3
}
“`
# 三項演算子
■if文のショートカットとしてよく用いられます。
“`javascript
(条件式) ? “true(trueに変換できる値)” : “false(falseに変換できる値)”
“`
※条件式を囲んでいる()は必須ではないです。
例えば、以下の様なif文があったとします。
“`javascript
const price = 1000;
if (price < 500) {
conso
自分はあまりコードは書きません。
色々記法があって忘れがちなのでメモします。
### アロー関数
#### アロー関数のメリット
##### 1.関数を簡略化できる
##### 2.thisを束縛できる
アロー関数の例
“`javascript
const CalcSum = (a,b,c) => {
const result = a + b + c;
return result;
}
“`
“`javascript
const myFuntion1 = (a) => {
return a + 2;
})
“`
“`javascript
const myFunction2 = a => {
return a + 2;
});
“`
“`javascript
const myFunction3 = (a) => a + 2;
“`
## 概要
奇妙なコードを書けたので紹介します。
“`javascript
[‘constructor’][‘constructor’][‘constructor’](‘return this’)()[‘console’][‘log’](‘Hello JavaScript!’)
// > Hello JavaScript!
“`
`unsafe-eval` がOFF、 `static` でない環境でしか動作しません。
## 説明
“`javascript
[‘constructor’]
// Array: [‘constructor’]
“`
要素が `’constructor’` の配列のリテラルです。
“`javascript
[‘constructor’][‘constructor’]
// Array()
“`
配列の `constructor` プロパティを参照します。配列オブジェクトのコンストラクタは `Array` オブジェクトです。
“`javascript
[‘constructor’][‘constructor’][‘construc
TypeScriptとは
=
TypeScriptとはJavaScriptが既存で持っている機能を全て含んだ上で、より機能が拡張して作られたプログラミング言語です。
TypeScriptは「AltJS」のひとつであり、次世代のJavaScriptの最有力候補です。AltJSとは、「Alternative JavaScript」の略称で「JavaScriptの代わりになるもの」という意味が込められた造語です。JavaScriptより優れた機能を持ち、コンパイル（トランスパイル）後はJavaScriptのコードが生成される言語のことです。
TypeScriptについて知っておきたい事
=
先程の記述した通り、TypeScriptはプログラミング言語であると同時にJavaScriptに変換するコンパイラでもあります。つまり、最終的にブラウザで実行されるものは、通常のJavaScriptです。つまり、TypeScriptを使うのは、コードを書いているときだけです。
TypeScriptはJavaScriptの機能を拡張して作られ
NCMBとMonacaを使ってデモアプリを作ってみます。今回はDeepL APIを使った翻訳アプリです。翻訳結果をNCMBのデータストアに保存し、後で確認できるようにします。データストアにデータを保存したり、逆に取り出すのはよくあるケースなので、様々な場面で応用できるはずです。
[前回は画面の説明とSDKの導入まで紹介しました](https://qiita.com/goofmint/items/2af6873af4b6bb4350d1)。今回はDeepL APIを使った翻訳処理と、データをNCMBに保存するまでを解説します。
## コードについて
今回のコードは[NCMBMania/monaca_translation_app: MonacaとNCMB、DeepL APIを使った翻訳アプリです](https://github.com/NCMBMania/monaca_translation_app)にアップロードしてあります。実装時の参考にしてください。
## 翻訳処理について
翻訳画面を再掲します。翻訳するボタンを押すと `addTranslate` 関数が実行される仕組み
# はじめに
javascriptで、FileReaderオブジェクトを使ってアップロードしたファイルのプレビュー機能を作っているときに、onload処理が待てども待てども発火しないという事件がありました。
この機能の開発は、基本的に他の場所にある機能の移植で終わる物だったので、特に調べもせず書き進めた結果です。
ハマって観念して調べたその過程で、非同期処理がどういうものなのかストンと腑に落ちたので、アウトプットします。
# 結論
結論から書くと、ハマった原因は入れ子違いでした。あー。。。
# 問題のコード
“`javascript
// インスタンス作成
const reader = new FileReader();
// 頑なに発火しないonloadの関数
// 正常に終わった時の処理
reader.onload = e => {
let profileImage = e.target.result;
};
// エラー処理
reader.onerror = function(e) {
switch (e.target.error.code) {
cas
# レポートは面倒
※ 読み飛ばしOK
学生のみなさんならヘッドバンギング並みにうなずいてくれると思いますが、レポートは面倒です。
私のレポート遍歴を簡単に振り返ると、最初は手書きでした。が、文章の追加が難しい、間違ったところを消すのが面倒、表作成が面倒、式を書くのが面倒、ペンを握るのが面倒、と問題だらけでした。
しばらくしてWordを使い始めたところ、文章の追加や間違ったところの削除が非常に簡単になり感動しました。しかし数式は相変わらず面倒です。ラテン文字なんて膨大な数の中から探さないといけないし、「=」の位置が合わないからいまいち美しくないし・・・。
そしてLaTeXを使うようになりました。これなら式も表もきれいに表示できるし、何よりキーボードからあまり手を放したくない自分としてはコマンドでラテン文字や分数などを作れるのは魅力的でした。
が、これも壁にぶつかります。というのも、独特の記法が多くて面倒という壁です。LaTexの長所の一つは文書形式を細かく設定できることです(実際に二段組みやsectionの書式変更、概要や引用の機能を使って前刷りを作ったこともあります)が、正直レポー
## はじめに
アプリケーションの開発時にはlog出力は必須となると思います。今回は、そのlogの種類としてはどんなものがありその役割は何か？を理解しつつ、実際にlogger（アプリケーションログ出力用、アクセスログ出力用）を作成していくという事をやってみました。
ソースコード全体は以下。
https://github.com/yuta-katayama-23/post-restaurant-reviews/commit/cc3a7131cad714f6e3a95e5c81ce4adf78f6c6aa
https://github.com/yuta-katayama-23/post-restaurant-reviews/commit/6175b44c94e97f35668a5df2f521c26e53b2ceb3
## ログ出力するmiddlewareを実装する
### 結論
※以下ではES Modulesを利用しているが、ES Modulesを利用しない場合には、importの部分を”const appRoot = require(‘app-root-path’);”にするな
## これなに？
JavaScriptにおける named exportとdefault exportの違い
Reactでの利用例
moduleを使う時に都度調べていたのですが、全然覚えないのでメモ
## default export
1ファイルから1つだけexportする時
defaultという名前でexportされる
“`js
// アロー関数の場合のdefault export
const hoge = () => {
// 処理
}
export default hoge;
“`
“`js
// 名前付き関数の場合のdefault export
// つまり関数宣言のdefault export
export default function hoge() {
// 処理
}
“`
## named export
1つのファイルから複数のmoduleをexportする時に使用
“`js
export const tee = () => {
// 処理
}
export const baru = () => {
// 処理
}
“`
“`
個人的な備忘録です。
# やりたいこと
– 特定の遷移元からしか、ページを表示できないようにしたい
– vue-router のように、「from」の情報を取得したい
– userRouter には遷移元の情報がない
– document.referrer では正確な情報が取得できない
# 環境
– Next: 11.1.3
– React: 17.0.2
# パターン1：Contextを使用したパターン
“`tsx:hooks/historyContext.ts
import { createContext } from ‘react’;
export const HistoryContext = createContext([”, ”]);
“`
“`tsx:pages/_app.tsx
import { useEffect, useState } from ‘react’;
import { HistoryContext } from ‘hooks’;
import type { AppProps } from ‘next/app’;
im
Reactの環境構築記事は沢山存在しているが、数年前の記事そのままでやっても、どこかしらでエラーがでてしまい上手くいかなかったりする。
自分用に最新版を作ってみた。
参考記事(2018年)：https://qiita.com/olt/items/11eb99a8961007ceb52f
ファイル構成は以下の通り
“`
react_app/
├ package.json
├ webpack.config.js
├ index.html
├ App.js
“`
## アプリケーションディレクトリの作成
`react_app`という名前のディレクトリ上で作業を行う
“`terminal
mkdir react_app
“`
`react_app`へ移動する
“`terminal
cd react_app
“`
## package.jsonを作成
`npm init -y`で、多くの項目がデフォルト値に設定された状態のpackage.jsonが作成できる。
package.jsonファイルを作成
“`json:package.json
{
“name”
## この記事の内容
JavaScript の `fetch` を利用してサーバからデータを取得する方法の復習
## 開発環境
|項目|内容|備考|
|—|—|—|
|PC|MacBook Air （2020 M1）||
|ブラウザ|Chrome||
|エディタ|Visual Studio Code||
## 今回開発したもの
– 郵便番号から住所を検索する Web アプリ
## ユースケース
### シナリオ
#### アクター
郵便番号から住所を検索したいユーザ
#### 前提条件
上記ユーザは、Web を利用できる環境にある
#### 正常シナリオ
1. ユーザは、ブラウザを利用して Web アプリ 《郵便番号から住所検索》 にアクセスする
2. システムは、ブラウザにアプリ画面を表示する
3. ユーザは、アプリの入力欄に郵便番号（７桁）を入力し、［検索］ ボタンをクリックする
4. システムは、3. で入力された郵便番号に紐づく住所をブラウザに表示する
#### 異常シナリオ（一部）
3. a. ユーザは、アプリの入力欄に存在しない郵便番号を入力し、［検
