なるWeb 
どうも7noteです。プラグインより多機能なお気に入り機能を作成。まずは準備編。
wordpressの投稿にお気に入り機能を実装するため、プラグインの導入を検討したのですが欲しい機能がついているプラグインがなく、
「プラグインがないならもう自作で実装してしまえ！」
と思って、javascript開発経験が浅い頃に3日かけて作成したお気に入り機能です。
書き方など至らぬ所多々あるかもしれませんが、優しく見守ってください。
この記事を読む前に
できるだけド素人でもわかりやすく説明していく予定です。
ですが、本当に1から始めると日が暮れてしまうので、最低限WEBに関する事をある程度理解をされている以下のような方向けの記事になっています。
・HTML・CSS・javascriptの初歩的な書き方を知っている人
・WordPressがなんとなくどういうものか知っている人（wordpressに応用しなければ別にOK）
・ゴリゴリのプロじゃない人
よく出てくる用語集
| 単語・用語 | 説明 |
|---|---|
| WordPress | 代表的なCMSの1つ。サイトのページ管理や記事の投稿などができる。データベースの知識がない人でも簡単に使うことができる。 |
| LocalStorage | 今回の主役。webブラウザ(ローカル環境)にデータを保管できる仕組み。ここにお気に入りしたデータなどを保存する。 |
| JSON | JavaScript Object Notationの略で、データ形式の種類の事。文字列しか扱えない場合に仕様される事が多い（と思う。）人が見ても分かりやすいフォーマットのため、様々なシーンでよく使われる。 |
LocalStorageとは
LocalStorage
別称でwebstoroageなんて呼ばれ方もします。
ホームぺージを表示するには、ホームぺージのデータが格納されているサーバーと、それを表示するためのブラウザが必要になります。主にホームぺージに関わるデータのほとんどははこの2箇所で扱われます。その中で、ブラウザの中にデータを保管しておくことができる仕組みのことをLocalStorageと言います。
似たようなもの
LocalStorageと似ているものでクッキーやセッションと呼ばれるものがあります。
詳しい違いは検索していただければ多くの情報が見つかるので詳しくは説明しませんが、Local Storageは消さない限り半永久的にデータが保存されるということと、個人情報は取扱わない事だけ覚えておきましょう。
※詳しく知りたい方は違いを書かれた記事がありましたので、こちらをどうぞ。
https://qiita.com/pipiox/items/95554673ba3b078ac112
特徴
- データはブラウザに保管される。
- 消さない限り半永久的にデータが保存される。
- 永久保存されるので、個人情報に関するようなデータは取扱わない方が良い。
- 形式は文字列のみ。
- {キー：値}の形で保存できる。
- 複数の値を保持するには、JSON形式に変換する必要がある。
開発に必要なもの
特に特別な何かをインストールしたりせずに扱うことができます。
コマンドプロンプトを立ち上げてなんやかんやをインストールするなどの手順は必要ありません！
ただ、javascriptの記述にjQueryを使用していますので、ご注意ください。
jQueryって何？という方はこちら
「Wordpressで使いたいよ！」という方は、自由にカスタマイズできるWordpressの開発環境を整えてください。
WordPressを使用する場合少しだけphpの記述も必要になるので、基礎的なphpの書き方を理解しておくことをオススメします。
これで準備は整いました。次からは実際にソースを書いていきます。
