MBP(はてな)

MacBook Pro,iPhone Xs,React

2021-07-01から1ヶ月間の記事一覧

mstdn.guruのトゥートを表示

Qiitaを元に作成 ReactでQiitaAPIから記事情報を取得して表示 - MBP(はてな)タグ除去 JavaScriptでHTMLタグを削除する正規表現 - Qiita const title = item.content.replace(/<("[^"]*"|'[^']*'|[^'">])*>/g,'') <img class="css-100alwu eyfquo10" src={item.account.avatar} width="40" height="40" loading="lazy" />

ReactNativeとExpo

ReactNative、Expoとは?特徴や使い方を調べてみた | NCDC株式会社iPhone実機で確認するには、 iPhone実機にExpo Goをインストール。 ‎「Expo Go」をApp Storeで$ expo start した後、 iPhone実機のカメラを起動して、QRを読み込み、 Open in Expo Goを開く…

Firestore ルールの書き方

Firestore Security Rules の書き方と守るべき原則 - QiitaCloud Firestore セキュリティ ルールを使ってみる | Firebase

Firebase HostingでReact App

GitHub - hiroyuki12/firebase-hosting-react-pages$ create-react-app で作成したプロジェクトでは最初のページが表示された$ npm install -g firebase-tools$ rm -rf node_modulesして、$ npm installプロジェクトのルートフォルダで、$ firebase loginし…

Zenn ブラウザバックした際に遷移前にスクロールしていたところに戻ってほしい

遷移後あまり下にスクロールせずiPhoneの左端から右にスワイプで戻った時は、先頭に戻らない。ブラウザバックした際に遷移前にスクロールしていたところに戻ってほしい · Issue #308 · zenn-dev/zenn-community · GitHubOpt out of scroll restoration when …

React Native

ReactNativeの開発環境を構築する$ react-native run-ios して、Simulator に表示されるまで時間がかかるので、待つ。$ vi App.js して、 Step One をHello Step One に変更して、保存すると、画面がリロードされる。実機で動かす場合は、 reactNative/ios/r…

Next.js + Electron

Next.jsはReactをベースにしたフロントエンドフレームワークNext.js + Electron がとても簡単になっていた$ npm run コマンドはなく、$ npm dev で起動$ npm run dist する前に、 package.json に name と version の追加が必要。ElectronTypescriptNext-0.0…

ポケモンAPIを使ってGraphQLを今更覚える!

ポケモンAPIを使ってGraphQLを今更覚える! - Qiita

Airbnb 命名規則

[翻訳] Airbnb React/JSX Style Guide - Qiitaファイル名はパスカルケース

ReactでFireStoreにデータ登録、取得して表示

FireStoreの読み書きを無効化するには セキュリティルールで、allow read, write: if false; Firebaseをとりあえず触ってみる人向けメモ - 適当おじさんの適当ブログ FireStoreでコレクションを開始 コレクションIDをarticlesにする title,subtitle,textをst…

Finderで隠しファイル表示

command + shift + .(コマンド + シフト + ピリオド)Finderで隠しファイル、隠しフォルダの表示/非表示 – Born Digital サポート

ReactでFirebaseを使用してEmail・パスワードでの認証機能

デプロイ時は.envファイルを削除して、プラットフォームのキー管理システムを使用する。 APIキーを非表示にする方法 - Qiita // .env REACT_APP_FIREBASE_KEY="your_key" REACT_APP_FIREBASE_DOMAIN="your_app_id.firebaseapp.com" REACT_APP_FIREBASE_PROJE…

Yarn

先にNode.jsをインストール Node.jsをインストール - MBP(はてな)$ npm install -g yarn または、$ npm install --global yarn$ yarn (v1.22.10)npmとは yarnとは - QiitaMac: yarn install - Qiita

Next.js ブログ 検索機能

先にNode.jsをインストール Node.jsをインストール - MBP(はてな)$ npm run devhttp://localhost:3001 【雑メモ】Next.jsのブログにAlgoliaの検索機能を導入した。Kezo Blog を支える技術GitHub - kenzo-tanaka/nextJsBlog: Personal Blog powered by Next.j…

MacでNuxt.js(Nuxt 2)

Nuxt.jsはVue.jsのフレームワーク先にNode.jsをインストール Node.jsをインストール - MBP(はてな)$ npx create-nuxt-app my-nuxt-app $ cd my-nuxt-app $ npm run build $ npm-run start [Nuxt.js入門] 全体像をざっくり掴むためのポイントまとめ - QiitaVu…

Azure無料枠

課金の心配無用、Azureは無料枠専用アカウントで試せる | 日経クロステック(xTECH) Azureの無料試用期間が終了したので、無料プランへ移行してみた - Qiita クレカ不要で本物のAzureを試用できる、無料の学習サイト「Microsoft Learn」がオープン:Microso…

AWSの無料枠

AWSを無料で利用する方法を実際にやってみて注意点まとめてみた。|mc_kurita|note AWS Amplify を使ってみた (Reactアプリの開発環境作成まで) - DENET 技術ブログ AWS Amplify Reactアプリをデプロイするチュートリアルをやってみた - Qiita予算を超えた…

MacでNext.js

Next.jsはReactをベースにしたフロントエンドフレームワーク先にNode.jsをインストール Node.jsをインストール - MBP(はてな)$ npx create-next-app nextjs-blog --use-npm --example "https://github.com/vercel/next-learn/tree/master/basics/learn-start…

goroutine 並行処理を簡単に書ける

他言語プログラマがgolangの基本を押さえる為のまとめ - Qiita

RubyでWEBサーバ

document_root = '~/'$ vi index.html hellohttp://localhost:10080/index.html WEB サーバを作る

Go言語でWebサーバ、BASIC認証

$ go build server.go $ ./server $ curl http://localhost:8080/basic_auth \ -H "accept: application/json" \ -H "Authorization:Basic $(echo -n client_id:client_secret | openssl base64)" すると、 Successful Basic Authentication が表示される。 …

GO言語でTCP/IP通信

$ go build server.go $ ./server$ go build client.go $ ./client GO言語でTCP/IP通信をする - Qiita 他言語プログラマがgolangの基本を押さえる為のまとめ - Qiita

Node.jsでWebサーバ、BASIC認証

先にNode.jsをインストール Node.jsをインストール - MBP(はてな)server.js var http = require("http"); var basic_name = "simple-nodejs_member"; var basic_users = ["QWxhZGRpbjpvcGVuIHNlc2FtZQ=="]; function isUser(_auth) { for (var l=0; l

Node.js APIで認証付きのMockREST APIサーバ

先にNode.jsをインストール Node.jsをインストール - MBP(はてな)($ node auth-api-server.js でエラーが出るため) $ npm install body-parser$ node auth-api-server.jsSafariで http://localhost:3000/books を開くと、認証していないため、 { "status": 4…

Docker Basic認証 Webサーバ

$ BASIC_AUTH_URL=localhost $ curl http://${BASIC_AUTH_URL}:8080/ \ -H "accept: application/json" \ -H "Authorization:Basic $(echo -n username:password | openssl base64)" 検証用にDockerでBasic認証をかけたWebサーバーを作ってみた | Developers…

Go connpass API

Goでconnpass APIを叩いて出力するまでやってみた - RAKUS Developers Blog | ラクス エンジニアブログ

JSON Server

先にNode.jsをインストール Node.jsをインストール - MBP(はてな)なぜか、 $ json-server –watch db.jsonでエラーになるので、 $ json-server db.json& はエスケープが必要。¥&とする。 curl -X POST http://localhost:3000/posts/ -d ‘id=2¥&title=json-ser…

React-Bootstrap Navbar

React-Bootstrapを使えるようにする - Qiita React-Bootstrapで色々使ってみる -Navbar- - Qiita

Reactで世界時計

【初学者向け】Reactで世界時計を作ってみた - Qiita

ReactでQiitaAPIから記事情報を取得して表示

Reactは、UIパーツを構築するためのJavaScriptライブラリプロジェクトを作成 $ npm create vite@latest$ npm install $ npm run dev$ npm run dev したら自動でブラウザを開くように設定ファイルを変更 Vite で最速 React & TypeScript$ vi src/App.jsx して…