[RAILS] Introduction de jQuery-jusqu'à ce qu'il puisse être utilisé (enregistrement exécuté en préparation pour une communication asynchrone) haml

• Pour un résumé de ceux qui veulent vérifier toutes les procédures de communication asynchrone de jQuery ici

Préparation à l'introduction

Nous allons introduire jQuery en utilisant le système de gestion des paquets. Le système de gestion de paquets (gestionnaire de paquets) utilisé cette fois est "yarn" installer.

Terminal

% yarn install

Introduction de jQuery

Introduction de jQuery, l'une des bibliothèques JavaScript

Décrivez dans Gemfile.

Gemfile

gem 'jquery-rails'
#Remplissez à la fin

N'oubliez pas d'installer le bundle après avoir écrit la gemme.

Terminal

% bundle install

Après avoir reflété la gemme, redémarrez le serveur.

Prêt à charger JavaScript

Créer un répertoire pour écrire du JavaScript

Créez un fichier nommé "javascripts" dans le dossier des ressources

:file_folder: app 　　:file_folder: assets 　　　　:file_folder: config 　　　　:file_folder: images 　　　　:file_folder: javascripts 　　　　:file_folder: stylesheets

Créer un fichier qui décrit JavaScript

Créez application.js dans le dossier javascripts

:file_folder: app 　　:file_folder: assets 　　　　:file_folder: config 　　　　:file_folder: images 　　　　:file_folder: javascripts 　　　　　　:page_facing_up:application.js 　　　　:file_folder: stylesheets

Charger JavaScript

Vous devez appeler le fichier JavaScript à partir du fichier de vue. Même capacité que css. Ajout de "= javascript_include_tag'application '" à la 9ème ligne.

haml:app/views/layouts/application.html.haml

!!!
%html
  %head
    %meta{:content => "text/html; charset=UTF-8", "http-equiv" => "Content-Type"}/
    %title Sample app
    = csrf_meta_tags
    = csp_meta_tag
    = stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload'
    = javascript_include_tag 'application'
    -# = javascript_pack_tag 'application', 'data-turbolinks-track': 'reload'
    -#La ligne ci-dessus est une description d'une technologie appelée Webpacker. Supprimer si inutile.
  %body
    = yield

Rendez possible l'appel du fichier application.js.

Écrivez "// = link_directory ../javascripts .js" sur la deuxième ligne.

app/assets/config/manifest.js

//= link_tree ../images
//= link_directory ../javascripts .js
//= link_directory ../stylesheets .css

JavaScript devrait maintenant être chargé!

Vérifiez si JavaScript est chargé normalement

Écrivez ce qui suit dans application.js. Archivez le journal de la console.

app/assets/javascripts/application.js

console.log("JavaScript est chargé avec succès");

Recharge la page Ce n'est pas grave si la console dit "JavaScript a été chargé avec succès".

Si vous pouvez confirmer que c'est normal, je l'ai écrit plus tôt Supprimez "console.log (" JavaScript est chargé normalement ");" dans application.js.

Rendre jQuery disponible

Ajoutez les deux lignes suivantes à application.js. Une description de l'utilisation de la gemme mentionnée précédemment appelée jquery-rails.

app/assets/javascripts/application.js

//= require jquery
//= require rails-ujs

Chargement de jQuery ・ ・ ・ // = nécessite jquery Utilisation de JavaScript avec Rails ... // = require rails-ujs

Remarques

Après cela, lors de la création d'un fichier JavaScript directement sous application.js et de son écriture Puisqu'il sera nécessaire de lire tous les fichiers JavaScript dans le répertoire où se trouve application.js, ajoutez "// = require_tree." À la fin.

app/assets/javascripts/application.js

//= require jquery
//= require rails-ujs
//= require_tree .

Par exemple, sample1.js sample2.js fichier JavaScript sample3.js Si vous le créez directement sous application.js Cela signifie qu'il lira tout dans la description précédente.

:file_folder: app 　　:file_folder: assets 　　　　:file_folder: config 　　　　:file_folder: images 　　　　:file_folder: javascripts 　　　　　　:page_facing_up: application.js 　　　　　　:page_facing_up: sample1.js 　　　　　　:page_facing_up: sample2.js 　　　　　　:page_facing_up: sample3.js 　　　　:file_folder: stylesheets

Vérifiez si jQuery fonctionne

Directement sous application.js comme dans l'exemple précédent pour le test de fonctionnement Seul sample1.js crée réellement un fichier. Si le nom du fichier à créer ensuite est décidé, ce nom convient.

Décrivez ce qui suit dans le fichier sample1.js.

app/assets/javascripts/sample1.js

$(function(){
  console.log("jQuery fonctionne correctement")
});

Si tu peux le décrire De plus, si vous rechargez la page et que la console dit "jQuery peut être utilisé correctement", cela fonctionne correctement.

Si vous pouvez le confirmer, supprimez le contenu de sample1.js. Lorsque vous utilisez ce fichier, modifiez le nom.

Memo Lors de l'introduction de jQuery, nous utilisons le système de gestion de paquets "yarn". Il est décrit dans haml.

Je voudrais également savoir ce qui se passerait sans utiliser le système de gestion des paquets.

Un dernier mot

Pour implémenter une communication asynchrone J'ai dû charger JavaScript et introduire jQuery. JavaScript simplifie le code en utilisant une bibliothèque appelée jQuery. Le code écrit ci-dessus serait assez long sans jQuery.

Qu'est-ce que la bibliothèque et quel est chaque mot? Je veux aussi comprendre ce que fait un système de gestion de colis comme le fil. J'espère pouvoir le consulter à nouveau et écrire un article.

Après cela, je suis allé dans Ajax pour implémenter une communication asynchrone. De cette façon, j'ai fait l'article comme une seule introduction parce que je m'attendais à ce qu'il puisse être appliqué à d'autres choses. Je ne sais pas si une autre implémentation est possible à partir de ce stade, Je voulais faire plus.

Liens connexes

Le flux de communication asynchrone est entièrement décrit depuis l'introduction de jQuery [ici]([ttps: //kayoblog.org/programming_myapp_hidoukitushin/)