Javascript&jQuery
プログラムには書き方が複数ある
私は新しいプログラミング言語を学ぶとき、最初に5冊程度本を買います。しかし、結局本だけでプログラミングが出来るようになったことはありません。 結局、ネットで検索するんですよね。このブログもそういう人向けに書いています。しかし、どうして結局ネットで調べるのに、わざわざ本を買うのか。 プログラミングには処理としては同じことなのに、書き方がたくさんあります。略して書いたり、書き方が違うと記述順の制約が付いたりするのですが、やってることは同じなんです。それでも書き方が違うんです。特に...
プログラミングの変数名や関数名の命名規則
変数名や関数名を付ける時、結構迷うことありますよね。「作っている時は良いけど、後から見た時、理解できるだろうか。」「他人が見た時、わかりやすいだろうか。」って考えると、少し考え込んでしまいます。 プログラミングには命名規則という物があり、無視してプログラムを作ることも出来るんですが、他人が見た時の可読性を意識すると、命名規則に従うのが吉です。『可読性』はシステムの寿命にも直結するので、軽視はできない問題です。 命名規則には、変数名や関数名にどんな言葉を使うかというルールもあり...
【CSS・javascript】カルーセルの作り方を３パターンで解説！
皆さんはカルーセルってどうやって作りますか？カルーセルっていろんな動き方があって、それぞれ作り方が違うと思うんです。 カルーセルの作り方パターン１：javascript(jQuery)を使って１つずつ要素を入れ替える 私は最初に考えました。『カルーセルエリアの先頭要素をjavascriptを使って一番後ろに移動させればいいんだ！』要素そのものを動かすイメージです。 図解するとこんなイメージです。 このような要素の入れ替えにはjQueryのappendが使えます。使い方は以下の...
【React Native+Expo】Expoでデータベース(SQLite)の使い方
スマホアプリを作る時、データを保存する必要がありますよね。スマホではSQLiteを使う場面が多いかと思います。もちろんExpoにもSQLiteがあって、SQLiteの公式ドキュメントもあります。が、公式ドキュメントの情報量が少ないです。そのため、処理をまとめました。 ExpoでSQLiteを使う準備 通常通り、Expoプロジェクトを作成した上で、コマンドでexpo-sqliteをインストールします。以下のコマンドでインストールします。 $ npx expo install e...
【React Native】ExpoのDocumentPickerの使い方
ExpoのDocumentPickerの公式情報少なすぎない？ Expoの公式ドキュメント DocumentPickerhttps://docs.expo.dev/versions/latest/sdk/document-picker/ インストールコマンドとapp.jsonの設定しか載ってないじゃないか。ちょっと使い方をまとめた物を載せておきます。 まず、ExpoでReactNativeのプロジェクトを作ります 今回は「doc_pick」という名前でプロジェクトを作ります。...
【React Native】React Navigationでエラーが発生する
最近、スマホアプリを作りたいと思って、ReactNative+Expoのお勉強を始めました。学習にあたって様々な書籍を購入したのですが、Youtubeのロックシステムアカデミーさんの動画が一番わかりやすかったです。フェーズごとに細かく説明されており、順序よくuseStateやuseEffectの説明が出てくるので、これからReactNativeの学習を始める方にオススメです。こんな良い動画が執筆時点で数百回しか再生されていないなんて信じられない・・・ https://www....
2Dゲームで狙い撃ちとか追尾ミサイルを作る方法
今まで、業務アプリケーション的な話ばっかりしてたんですけど、趣向を変えて2Dゲームで角度指定して弾を打つ方法とか、追尾ミサイルを作る方法をご紹介します。 ※数学をモリモリ使います。 パソコンの角度計算は基本的に『ラジアン角』を使う ラジアン角ってわかりますか？角度を表す単位の一つで、『角度』が1周360度まであるのに対し、360度はラジアン角で表すと2πとなります。難しいことは置いておいて、ここで覚えるべきことは、たったの2つ！ 角度からラジアン角に変換する方法ラジアン角から...
jQueryで要素が画面に表示された時にアニメーションを動かす
ホームページでイベントを設定した時、ファーストビューでその要素が表示されていない場合、スクロールした時点でアニメーションが終わってしまっているということが発生してしまいます。そこで、アニメーションを設定した要素が【画面内に入った時】をトリガーにして、アニメーションをスタートさせたいと思います。 jQueryで【要素が画面内に入った時】をトリガーにするにはinView.jsを使うのが楽！ javascriptのライブラリ『inView.js』を使用すると、イベント"inview...
Javascript（jQuery）が動かない・反応しない
私は元々アプリケーションプログラマーでした。アプリケーションのプログラムっていうのは基本的にはコンパイラ型言語という種類のプログラミン言語を使っており、プログラムをそのまま実行することは出来ず、コンパイラという変換器を使って実行ファイルに変換します。このコンパイラ型言語の開発環境は、ソースコードを書く『エディタ』と、実行ファイルを作る『コンパイラ』と、エラーをチェックしてくれる『デバッガ』が一体となった統合開発環境というものになっいることが多く、デバッグが非常にしやすかったで...
【React】Gutenbergのオリジナルブロックが編集画面を開き直すと壊れる
最近、ReactでGutenbergのオリジナルブロックを作っているのですが、ブロックを呼び出した時には正常に動作するのに、一度保存してから編集画面を開き直すとブロックが壊れるという現象が発生しました。 最初、なんで？って思っていたんですが、やっと理由がわかりました。 Gutenbergのオリジナルブロックとは WordPressではバージョン5.0くらいから、『Gutenberg』というブロックエディタでページの編集ができるようになりました。 バージョン5.0まではビジュア...