Javascript&jQuery
【Javascript＆PHP】無限スクロールの作り方【AJAX】
Googleで検索した際、検索結果がどんどん下に読み込まれていきますよね？この新しい情報が随時読み込みされて、どんどんスクロール量が増えていく動きは『無限スクロール』と呼ばれているそうです。 今回はこの無限スクロールを解説していきます。 大量のコンテンツの見せ方には『ページャー』と『無限スクロール』がある ページャーというのは、1ページに情報が決められた数のみ表示され、それ以上の情報は2ページ目、3ページ目とページめくりしていくことで表示されます。 対して無限スクロールでは、...
即時関数とは
即時関数というものがあります。おそらく、この記事を読んでいる方は『即時関数』というものがあることを知って、どういう場面で使うのか、どういう書き方をするのかが知りたくて調べて来たんじゃないでしょうか？ 即時関数とは 即時関数は、関数を定義して、すぐにその場で関数を実行する構文です。 javascriptでは以下のように記述します。 // 引数の無い即時関数 (function() { // 関数の処理をここに記述 })(); // 引数がある時の即時関数 (function([...
プログラムには書き方が複数ある
私は新しいプログラミング言語を学ぶとき、最初に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...