はじめに GatsbyJS やってみる ホスティング 完成 おわりに はじめに 自分のホームページや、就職活動などでポートフォリオサイト作りたいなと思った事ありませんか？ この記事では、React製の静的サイトジェネレータであるGatsbyJSを紹介させていただき、実…

Babelとは なぜ必要なのか JavaScript Engine ECMAScript Babelの機能 Babelを実行するために必要なもの @babel/cli @babel/core Babel Plugins Babel Presets Babelの変換には3つの段階 Parsing Transformation Code Generat プラグイン arrow-functions bl…

宮崎大学アドベントカレンダー2019 6日目の記事です。 qiita.com はじめに 使用技術 作ったもの 機能 環境構築 実装 ページを作っていく コンポーネントを作っていく レイアウト用のコンポーネント Firebaseにデータを追加・取得・削除するコンポーネント Ne…

宮崎大学アドベントカレンダー2019 5日目の記事です qiita.com はじめに Adobe XD Cocoda! ノンデザイナーズ・デザインブック Themes - iOS - Human Interface Guidelines - Apple Developer ColorDrop おわりに はじめに 様々なWebサイトやアプリのUIを見て…

はじめに 解決策 参考資料 はじめに Opencvのtraincascadeでカスケード分類器を作ろうとやってみた時に、以下のようなエラーがでてきたのでその対応をメモします。 PARAMETERS: cascadeDirName: ./cascade/bunrui/ vecFileName: ./vec/t_RGB.vec bgFileName:…

はじめに テストって何？ Jest Enzyme 環境構築 実際にテストしてみる Jestによるテストの書き方メモ テスト実行のながれ 子コンポーネントの存在を確認 setStateで値が更新されているか確認 子コンポーネントで受け取ったpropsがレンダリングされているか確…

はじめに 2019年テーマ 登壇資料 学び TypeScriptがデファクトスタンダードであると肌で感じることができた フロントエンドの歴史を知ることで今の技術の嬉しみがわかった テストの必要性や書き方・考え方を得ることができた フロントエンドでのセキュリティ…

はじめに Dockerのインストール docker-composeのインストール Visual Studio Codeの拡張機能をインストール LaTeX Workshop Remote - Containers おわりに はじめに 企業から読書レポートの課題が出たのをきっかけに、 Cloud LaTeXは卒論時期にとても動作が…

はじめに 対応 おわりに はじめに Next.js, Reactで開発しているプロジェクトをビルドした時に下記のようなエラーが出たのでその対応をメモします。 > Build error occurred Error:Module did not self-register. at Object.Module._extensions..node (inter…

はじめに 使ったもの Firebaseプロジェクトを作成 データベースを構築する データを取得して表示する データを追加する データを削除する はじめに 今回は、FirebaseのデータをReactで取得し表示する方法を書きます また、選択したIDのデータを表示、データ…

Next.js サーバサイドレンダリング クライアントサイドレンダリング プロジェクト作成 コンポーネントを利用する Next.js Next.jsはReactをサーバサイドでレンダリングし表示する。 また、これを使うことでReactで作ったSPAを複数ページのWebサイトとして 作…

はじめに Redux Persist インストール Redux Persistを実装する index.js 使用オブジェクトのインポート Redux Persistの設定 persistReducerの作成 store, persistorの作成 PersistGate App.js Message.js Button.js はじめに React Reduxを使ってみる - BL…

はじめに 前回の記事(React Reduxを使ってみる - 坂本研のゼミ室)で create-react-appコマンドで環境構築を行いましたが、 今回はこういった環境構築を行わず開発できるCodeSandboxを紹介します。 CodeSandboxとは オープンソースのオンラインエディタです。…

Reduxとは 特徴 インストール Reduxのインストール React Reduxのインストール Reduxで用意するもの Store Provider Reducer 実際に使っていく create-react-appコマンドで雛形を作る サーバーを起動する ディレクトリ構造 index.js Store.js stateの用意 Re…

LogRocket 使い方 最後に LogRocket JavaScriptコードでユーザの行動分析を動画で確認できるサービス logrocket.com 使い方 公式サイトにアクセスしてトップページからユーザ登録する プロジェクト名を入力する タグが表示されるのでコピーする Webサイト(今…

正規表現とは preg_match() 車のナンバー「35-10」が含まれているか調べる 任意の１文字を含むパターン 任意の１文字が指定範囲のある場合 文字クラス定義の中で使うメタ文字 定義済みの文字クラス 先頭一致と終端一致 選択肢 繰り返し サブパターンで電話番…

MAMPとは MAMPのダウンロード MAMPのインストール MAMPを開く php.initの設定(タイムゾーンの変更) MAMPのPHPにパスを通す php.init (設定ファイル) PHPのバージョン確認 MySQLの操作 MySQLにパスを通す PHPを実行してみる MAMPとは MAMPとは、「Macintosh+A…

min.t min.t（ミント）は、拡散しないツイートまとめサイト Togetterをよりプライベートに使いたい人向けのシンプルなサービス min.togetter.com 実際に使ってみた キーワード(URLも対応)を入れてツイートを検索 まとめたいツイートをドラッグして移動 タイ…

はじめに GitHub ActionsにCI/CD機能が追加されたので、 CI/CD機能と現在使っているCircleCI(SaasのCI/CD)についてメモ程度にまとめ はじめに CI/CDとは CircleCI GitHub Actions CI/CDとは CI/CDとは、Continuous Integration/Continuous Deliveryの略 ソフ…

今回は、データベースの設計を実装していく。 データベースの設計 realtime database 口コミを保存する機能を実装していく データベースの設計 realtime database realtime databaseはデータとアプリケーションをリアルタイムで同期する事ができる 今回は、…

今回はVue.jsとFirebaseを使って、認証機能までやっていく。 Firebase Vueプロジェクトの作成 vue-routerによるページ遷移の作成 Firebaseでプロジェクトを作成 メール / パスワードによる認証 まとめ 続き 参考にさせてもらったサイト Firebase Firebaseと…

動けばOK感覚を脱するために、 CSSの詳細度についてメモします。 CSS 詳細度 (Specificity) !important インライン記述 IDセレクタ クラスセレクタ、属性セレクタ、擬似クラス 要素セレクタ、擬似要素 ユニバーサルセレクタ 詳細度の計算 CSS CSS (Cascading…

Vue.jsの一歩としてToDoリストを作ってみました。 下準備する HTML部分 Vueインスタンス 完成 最後に 下準備する 今回は、CDNを使っています。(2019/07/01) <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script> HTML部分 setTodayで日付を表示 v-forでtodos配列から一つずつオブジェクトを取得していく チェッ…

開発規模が大きくなり複雑になってくるので同じ処理をまとめる。 componentを用いて処理をまとめる 書式 実装 手順 componentを用いて処理をまとめる コンポーネント作成方法は、「グローバルに登録」「ローカルに登録」の2種類ありますが、今回はローカルに…

React Nativeでアプリを作ってみようと取り組んで、AsyncStorageで躓いたのでメモ React Native AsyncStorage 最後に React Native React Nativeは、JavaScriptのみを使用してモバイルアプリを構築できます。 Reactと同じデザインを使用しているため、宣言型…

Kinectを用いたプログラミングのメモとして... Kinect for Windows コントローラーを使わずにジェスチャーなどで操作を可能にする周辺機器。 主な機能として、画像・深度の取得、関節・音の検知がある。 Kinectは以前生産終了となったが、Azure Kinect DK と…

まずは、Vue.jsのライブラリをCDNでインストールする v-bindを使って画像を表示する v-bind：データでHTMLの要素の属性を指定できる <img v-bind:src="プロパティ名"></img> v-bindを使ってimg要素のsrcを指定する imageNameには後で表示する画像名を入れる Vueインスタンス Vueインスタンスのdata…

Vue.jsとは JavaScriptのフレームワーク 手軽にSPAを作れる 詳しくは jp.vuejs.org 手順 Vue.jsのライブラリをCDNでインストール (バーションは2019/3/28現在) VueとHTMLを繋げる要素を作る Vueインスタンス作成 elオプション どのHTML要素と繋げるか dataオ…