�@

�A�ځF�`ScottGu���̃u���O���`

jQuery�e���v���[�g�ƃf�[�^�E�����L���O�i������jQuery�ւ�Microsoft�̍v���j

Scott Guthrie ���^Chica ��
2010/05/12

�@�{�L���́AMicrosoft�̖{�Е��В��ł���AASP.NET��Silverlight�Ȃǂ̊J���`�[���𗦂���Scott Guthrie�����u���O��|�󂵂����̂ł��B���̋��‚𓾂ē]�ڂ��Ă��܂��B

�@jQuery���C�u�����͏�M�I�ȊJ���҂̃R�~���j�e�B�������Ă��܂��B�����Ă���͍����AWeb��ōł��L���g�p����Ă���JavaScript���C�u�����ł��B

�@2�N�O�AMicrosoft��jQuery�̐��i�T�|�[�g�̒񋟂��J�n���邱�ƁA����э���Visual Studio�̐V�o�[�W�����Ɋ܂߂Ă������Ƃɂ‚������\���܂����B�f�t�H���g�ł́A�V����ASP.NET Web�t�H�[���܂���ASP.NET MVC�̃v���W�F�N�g��VS 2010�ō쐬����ƁA�v���W�F�N�g�Ɏ����I��jQuery���lj�����Ă��邱�Ƃ��m�F�ł��܂��B

�@���T�ԑO�AMIX 2010�J���t�@�����X�ł�2��ڂ̊�u�����ɁAMicrosoft��jQuery�v���W�F�N�g�ւ̍v�����J�n���邱�Ƃ𔭕\���܂����B�������ɁAjQuery���C�u�����̍쐬�҂�jQuery�J���`�[���̃��[�_�[�ł���John Resig�����킽�������̎Q���ɂ‚��ď������AjQuery�̐V�����N���C�A���g���e���v���[�g������API�̑����v���g�^�C�v�ɂ‚��Ęb���܂����B

�@���̃u���O���e�ł́A�킽���̃`�[����jQuery�v���W�F�N�g�ւǂ̂悤�ɍv�����n�߂����ɂ‚��ď����b���A�N���C�A���g�T�C�h�E�e���v���[�g�����f�[�^�E�����L���O�i�f�[�^�E�o�C���f�B���O�j�ȂǁA����̋@�\�ɂ‚��Ă����‚��b���܂��B

jQuery�ւ̍v��

�@jQuery�ɂ͑f���炵���J���҃R�~���j�e�B������A��Ă�v���̂��߂̔��ɊJ���ꂽ���@��񋟂��Ă��܂��BMicrosoft�̓R�~���j�e�B�̂ق��̃����o�[�Ɠ����v���Z�X��jQuery�֍v�����܂��B

�@��Ƃ��ẮAjQuery�̃e���v���[�g���ɑ΂���T�|�[�g�����P���邽�߂�jQuery�R�~���j�e�B�֓����������Ƃ��ɁA�킽���̃`�[���͈ȉ��̃X�e�b�v���̂�܂����B

1. �e���v���[�g���̃T�|�[�g�ւ̒�Ă��쐬���AjQuery�J���҃t�H�[�����ւ��̒�Ă𓊍e���܂����ihttp://forum.jquery.com/topic/jquery-templates-proposal��http://forum.jquery.com/topic/templating-syntax�j

2. �t�H�[�����Ńt�B�[�h�o�b�N���󂯂���AjQuery�`�[���̓e���v���[�g���ɑ΂���v���g�^�C�v���쐬���AGithub�R�[�h�E���|�W�g���ɓ��e���܂����ihttp://github.com/jquery/jquery-tmpl�j

3. �d�l���P���Ă��邽�߂ɁA�e���v���[�g���v���g�^�C�v��Github�ɐV�����t�H�[�N�ifolk�j���쐬���āA���̃v���g�^�C�v�̋c�_���J��Ԃ��܂����B�R�~���j�e�B�̉��l���̂ق��̃����o�[���A���̃e���v���[�g���R�[�h���t�H�[�N���邱�ƂŎd�l�̃t�B�[�h�o�b�N��񋟂��Ă��܂���

�@���̃e���v���[�g���̒�Ăɑ΂��ẮAjQuery�R�~���j�e�B����������̎Q��������ijQuery�t�H�[������100�ȏ�̓��e�j�A���̃e���v���[�g���̒�Ă̎d�l�̓R�~���j�e�B�̃t�B�[�h�o�b�N�Ɋ�Â��Ē������W�J���Ă��܂��B

�@jQuery�`�[���́A���̃e���v���[�g���̒�Ă̏󋵂ɂ‚��āA���ꂪjQuery�R�A�Ɋ܂܂��̂��A���I�ȃv���O�C���ɂȂ�̂��A���ׂċp�������̂��A�Ȃǂ����߂�ŏI����҂ł��B�킽���̃`�[���́A�I�[�v���\�[�X�̃v���Z�X�ɎQ���ł��A�ق��̃R�~���j�e�B�̃����o�[�Ɠ������@�Œ�Ă�v�����ł��邱�Ƃ����ł��܂��B

jQuery�e���v���[�g�E�T�|�[�g

�@�N���C�A���g���̃e���v���[�g�ɂ��AjQuery�J���҂͊ȒP�ɃN���C�A���g���HTML UI�𐶐����ĕ`��ł��܂��B�e���v���[�g�͊J���҂܂��̓f�U�C�i�[������������HTML��錾�I�Ɏw��ł���V���v���ȍ\�����T�|�[�g���܂��B�����ĊJ���҂́A�v���O�����ł��̃e���v���[�g���N���C�A���g��ŋN�����A���S�ȃf�[�^�쓮�ɂ��R���e���c��`��ł���悤��JavaScript�I�u�W�F�N�g�������n���܂��B������JavaScript�I�u�W�F�N�g�̓I�v�V�����ŁA�T�[�o����擾�����f�[�^�Ɋ�Â����Ƃ��ł��܂��B

�@jQuery�̃e���v���[�g���̒�ẮA�R�~���j�e�B�̃t�B�[�h�o�b�N�ɑΉ����ĉ��ǒ��ł��邽�߁A�ŏI�o�[�W�����͈ȍ~�ŏq�ׂĂ���o�[�W�����Ƃ͑S�R�قȂ邩������܂���B���̃u���O���e�ł́A�����_�Ńe���v���[�g���ǂ̂悤�Ɏ����Ďg����̂��A���̊��G���‚���ł��炤���߂̂��ł��B�ihttp://github.com/jquery/jquery-tmpl��jQuery�R�A�E�`�[���̃v���g�^�C�v�A�܂���http://github.com/nje/jquery-tmpl�ł킽���̃`�[������̍ŐV���e���_�E�����[�h�ł��܂��j�B

��jQuery�N���C�A���g�E�e���v���[�g

�@<script type="text/html">�^�O���ɃR���e���c�𖄂ߍ���ŁA�N���C�A���g����jQuery�e���v���[�g���쐬���܂��B�Ⴆ�΁A�ȉ���HTML�ɂ�<div>�e���v���[�g�E�R���e�i�A����јA����ꗗ�𓮓I�ɕ\�������邽�߂Ɏg�p������N���C�A���g����jQuery�gcontactTemplate�h�e���v���[�g�i<script type="text/html">�v�f���j���܂܂�Ă��܂��B


�}1

�@{{= name }}��{{= phone }}���́A��L�̃R���^�N�g�E�e���v���[�g���Ńe���v���[�g�Ɉ����n���ꂽ�gcontact�h�I�u�W�F�N�g�̖��O��d�b�ԍ���\�������邽�߂Ɏg�p����܂��B

�@�e���v���[�g�́AJavaScript�I�u�W�F�N�g�̔z��܂���1�‚̃I�u�W�F�N�g��\������̂Ɏg�p�ł��܂��B�ȉ���JavaScript�R�[�h�́A��L�̃e���v���[�g���g�p���āgcontact�h�I�u�W�F�N�g��JavaScript�z���`�悷����@�������Ă��܂��Brender���\�b�h�͕�����Ƃ��ăf�[�^��`�悵�A�gcontactContainer�hDIV�v�f�ւ��̕������lj����܂��B


�}2

�@�y�[�W�����[�h�����ƁA�A����ꗗ�̓e���v���[�g�ɂ��`�悳��܂��B���̃e���v���[�g�ł̕`��͂��ׂāA�u���E�U���̃N���C�A���g���ŋN���������̂ł��B


�}3

���e���v���[�g�̃R�}���h�Ə����\���̃��W�b�N

�@���݂̃e���v���[�g���̒�Ăł́Aif�Aelse�Aeach�X�e�[�g�����g�Ȃǂ��܂ރe���v���[�g�E�R�}���h�̏�����1�Z�b�g���T�|�[�g���Ă��܂��B�e���v���[�g�E�R�}���h�̐��́A�e���v���[�g�O�ł����ƕ��G�ȃ��W�b�N���z�u�ł���悤�Ɍ̈ӂɏ���������Ă��܂��B

�@�������A����ȏ������e���v���[�g�E�R�}���h�̃Z�b�g�ł����ɕ֗��ł��B�Ⴆ�΁A�e�A����ɓd�b�ԍ���0�ˆȏ゠�����Ƃ��܂��B���̊e�A����͈ȉ��̂悤��JavaScript�z��ŕ\������܂��B


�}4

�@�ȉ��̃e���v���[�g�́Aif��each�e���v���[�g�E�R�}���h���ǂ̂悤�Ɏg���ď����ʂɊe�A����̓d�b�ԍ���\�������ă��[�v�����邩�������Ă��܂��B


�}5

�@�����A�����1�ˆȏ�̓d�b�ԍ�������΁A�e�d�b�ԍ���each�e���v���[�g�E�R�}���h�Ŕ������ĕ\������܂��B


�}6

�@jQuery�`�[���́A�e���v���[�g�E�R�}���h��݌v���Ċg�������������܂����B�V�����e���v���[�g�E�R�}���h���K�v�ȏꍇ�A�ȒP�ɐV�����e���v���[�g�E�R�}���h���f�t�H���g�̃R�}���h�E�Z�b�g�ɒlj��ł��܂��B

�N���C�A���g�̃f�[�^�E�����L���O�E�T�|�[�g

�@ASP.NET�`�[���͍ŋ߁A����1�‚̒�Ăƃv���g�^�C�v��jQuery�t�H�[�����ɒ�o���܂����ihttp://forum.jquery.com/topic/proposal-for-adding-data-linking-to-jquery�j�B���̒�Ă��f�[�^�E�����L���O�iData Linking�j�Ƃ������O�̐V�@�\�ɂ‚��ďq�ׂĂ��܂��B�f�[�^�E�����L���O�́A1�‚̃v���p�e�B���ύX���ꂽ�Ƃ��ɁA�ق��̃v���p�e�B���ύX�����悤�ɁA1�‚̃I�u�W�F�N�g�̃v���p�e�B������1�‚̃I�u�W�F�N�g�̃v���p�e�B�Ƀ����N�ł���悤�ɂ��܂��B�f�[�^�E�����L���O�ɂ��A�ȒP��UI�ƃf�[�^�E�I�u�W�F�N�g�̓������y�[�W���ŕۂĂ܂��B

�@�f�[�^�E�o�C���f�B���O�̊T�O�ɂȂ��݂�����΁A�f�[�^�E�����L���O��������₷���͂��ł��i��Ăł́A���̋@�\���f�[�^�E�����L���O�ƌĂ�ł��܂����A�����jQuery�ɂ��łɃf�[�^�E�o�C���f�B���O�Ƃ܂������֌W�Ȃ�bind���\�b�h�����邽�߂ł��j�B

�@�Ⴆ�΁A�ȉ���HTML��<input>�v�f���y�[�W�ɂ���Ƃ��܂��B


�}7

�@�ȉ���JavaScript�R�[�h�́A��L��2�‚�INPUT�v�f���gname�h����сgphone�h�v���p�e�B������JavaScript�́gcontact�h�I�u�W�F�N�g�̃v���p�e�B�փ����N���܂��B


�}8

�@���̃R�[�h�����s����ƁA�ŏ���INPUT�v�f�i#name�j�̒l�ɘA�����name�v���p�e�B�̒l���ݒ肳��A����INPUT�v�f�i#phone�j�̒l�ɘA�����phone�v���p�e�B�̒l���ݒ肳��܂��Bcontact�I�u�W�F�N�g�̃v���p�e�B��INPUT�v�f�̃v���p�e�B�������N����Ă���̂ŁA1�‚��ύX�����Ƃق��ɂ����f����܂��B

�@contact�I�u�W�F�N�g��INPUT�v�f�Ƀ����N����Ă���̂ŁA�y�[�W�����N�G�X�g�����contact�v���p�e�B�̒l���\������܂��B


�}9

�@�����Ɩʔ������ƂɁA�����N����Ă���contact�I�u�W�F�N�g�̃v���p�e�B���X�V����ƁA��Ƀ����N����Ă���INPUT�v�f�̒l�͎����I�ɕύX����܂��B

�@�Ⴆ�΁A�ȉ��̂悤��jQuery��attr���\�b�h���g�p���āA�gcontact�h �I�u�W�F�N�g�̃v���p�e�B���v���O�����ŏC�����܂��B


�}10

�@�gcontact�h�I�u�W�F�N�g��2�‚�INPUT�v�f�������N���Ă���̂ŁAINPUT�v�f�̒l�͎����I�ɍX�V����܂��iUI�v�f���C������R�[�h�������K�v�͂���܂���j�B


�}11

�@jQuery��attr���\�b�h���g����contact�I�u�W�F�N�g���X�V�������Ƃɂ����ӂ��������B�f�[�^�E�����L���O���@�\�����邽�߂ɂ́AjQuery���\�b�h���g���ăv���p�e�B�̒l���C�����Ȃ���΂Ȃ�܂���B

���o���������N

�@linkBoth���\�b�h���o�����̃f�[�^�E�����L���O���”\�ɂ��܂��Bcontact�I�u�W�F�N�g��INPUT�v�f�͑o�����Ƀ����N����Ă��܂��BINPUT�v�f�̒l���C������Ƃ��Acontact�I�u�W�F�N�g�������I�ɍX�V����܂��B

�@�Ⴆ�Έȉ��̃R�[�h�́A�N���C�A���g�T�C�hJavaScript��click�n���h����HTML�{�^���v�f�ɒlj����܂��B���̃{�^�����N���b�N����ƁAcontact�I�u�W�F�N�g�̃v���p�e�B�̒l��alert�_�C�A���O���g���ĕ\������܂��B


�}12

�@�ȉ��ł�Name��INPUT�v�f�̒l��ύX����Save�{�^�����N���b�N�����Ƃ��̏󋵂������Ă��܂��BINPUT�v�f�������N����Ă���gcontact�h�I�u�W�F�N�g��name�v���p�e�B�������ōX�V����Ă���Ƃ�����m�F���Ă��������B


�}13

�@��L�̗�͖��炩�ɕ��}�ŃV���v���ł��BJavaScript�A���[�g��contact�I�u�W�F�N�g�̐V�����l��\���������ɁA�I�u�W�F�N�g���f�[�^�x�[�X�֕ۑ�����Web�T�[�r�X���Ăяo�����Ƃ�z�����Ă��������B�f�[�^�E�����L���O�̗��_�́AUI�ƃf�[�^�̓������̎d�g�݂���J������āA�f�[�^�ɏW���ł���_�ł��B

���R���o�[�^

�@���݂̃f�[�^�E�����L���O�̒�Ă��R���o�[�^�ƌĂ΂��@�\���T�|�[�g���܂��B�R���o�[�^�ɂ��A�f�[�^�E�����L���O���Ă���ԁA�v���p�e�B�̒l���ȒP�ɕϊ��ł��܂��B

�@�Ⴆ�΁Acontact�I�u�W�F�N�g��phone�v���p�e�B�ɂ��A�W���̕��@�œd�b�ԍ���\���������ꍇ��z�����Ă��������B��̓I�ɂ́A�u�i�j�v�Ȃǂ̓��ʂȕ�����d�b�ԍ��Ɋ܂߂��A�����ȊO�ɉ����܂߂����Ȃ��悤�ȏꍇ�ł��B���̏ꍇ�A�ȉ��̃R�[�h���g�p���āA���̃t�H�[�}�b�g��INPUT�v�f�̒l��ϊ����邽�߂̃R���o�[�^��ڑ��ł��܂��B


�}14

�@��L�ł́AINPUT�v�f��phone�̒l�ƁA�gcontact�h�I�u�W�F�N�g��phone�v���p�e�B�������N����̂Ɏg�p����Ă���linkFrom���\�b�h�ցA�ǂ̂悤�ɃR���o�[�^�@�\�������n����Ă��邩���m�F���Ă��������B���̃R���o�[�^�@�\��phone�v���p�e�B���X�V����O��INPUT�v�f���炷�ׂĂ̐����ȊO�̕�������苎��܂��B�������܁A(206) 555-9999�Ƃ����d�b�ԍ���d�b���̓t�B�[���h�ɓ��͂���ƁA2065559999�Ƃ����l��contact�I�u�W�F�N�g��phone�v���p�e�B�Ɋ��蓖�Ă��܂��B


�}15

�@�܂��ϊ��͋t�̕����ɂ��g�p�ł��܂��B�Ⴆ�΁Aphone�v���p�e�B����d�b�ԍ���\������ہA�W���̓d�b�ԍ��t�H�[�}�b�g�������K�p�ł��܂��B

�e���v���[�g�ƃf�[�^�E�����L���O�̑g�ݍ��킹

�@�e���v���[�g���ƃf�[�^�E�����L���O�̂�����2�‚̒�Ă��o�����ړI�́AWeb�T�C�g��A�v���P�[�V������jQuery�ƈꏏ�ɍ\�z�����ۂɁA���ȒP�Ƀf�[�^��������悤�ɂȂ邱�Ƃł��B�e���v���[�g���ɂ��AAjax�̌Ăяo����ʂ��āA�f�[�^�x�[�X����擾�����f�[�^�x�[�X�̃��R�[�h�̈ꗗ���A���ȒP�ɕ\���ł���悤�ɂȂ�܂��B�f�[�^�E�����L���O�ɂ��A�X�V����V�i���I�Ńf�[�^�ƃ��[�U�[�E�C���^�[�t�F�C�X�̓������ȒP�ɕۂĂ�悤�ɂȂ�܂��B

�@���݁A�錾�I�f�[�^�E�����L���O���T�|�[�g���邽�߂ɁA�f�[�^�E�����L���O�̒�Ă̊g���Ɏ��|�����Ă��܂��B

�@�Ⴆ�΁A�ȉ��̃e���v���[�g���g�p���āAproduct�I�u�W�F�N�g�̔z���\������Ƃ����z�����Ă��������B


�}16

�@{{link name}}��{{link price}}���ɒ��ڂ��Ă��������B�����̎��ɂ��ASPAN�v�f��product�I�u�W�F�N�g�̃v���p�e�B�ԂŐ錾�I�ȃf�[�^�E�����L���O���”\�ɂȂ�܂��B���݂�jQuery�̃e���v���[�g���̃v���g�^�C�v�́A�Ǝ��̃e���v���[�g�E�R�}���h�ł��̍\���̊g�����T�|�[�g���Ă��܂��B���̏ꍇ�A�glink�h�Ƃ������O�̓Ǝ��̃e���v���[�g�E�R�}���h�ɂ��A�f�t�H���g�̃e���v���[�g�̍\�����g�����Ă��܂��B

�@��L�̃e���v���[�g�Ńf�[�^�E�����L���O���g�p���闘�_�́A�gproduct�h�̔w��ɂ���f�[�^���X�V���ꂽ�Ƃ��͏�ɁASPAN�v�f�������I�ɍX�V����邱�Ƃł��B�܂��錾�I�ȃf�[�^�E�����L���O�ɂ��A���ȒP�ɕҏW����ё}���t�H�[�����쐬�ł���悤�ɂȂ�܂��B�Ⴆ�΁A�錾�I�f�[�^�E�����L���O�����̂悤�Ɏg�p���邱�ƂŁA���i��ҏW����t�H�[�����쐬�ł��܂��B


�}17

�@�錾�I�f�[�^�E�����L���O���g�p����e���v���[�g��INPUT�v�f�̒l��ύX����ƁA���‚����̉��ɂ���JavaScript�̃f�[�^�E�I�u�W�F�N�g�������I�ɍX�V����܂��BHTML�t�H�[������X�V���ꂽ�l����J���Ď擾���邽�߂̃R�[�h�������K�v���Ȃ��Ȃ�A����ɒ��ڔw��ɂ���f�[�^�𒼐ڎ�舵����̂ŁA�N���C�A���g���̃R�[�h�����N���[���ŃV���v���ɂȂ�܂��B

��L�̃V�i���I�̓���”\�ȃR�[�h�̃_�E�����[�h

�@��L�V�i���I�̓���”\�ȃR�[�h��́A����ZIP�t�@�C�����_�E�����[�h����Ύ擾�ł��܂��BZIP�t�@�C���ɂ�4�‚̐ÓIHTML�y�[�W���܂܂�Ă��܂��B

  • Listing1_Templating.htm �| ��b�I�ȃe���v���[�g�̐���
  • Listing2_TemplatingConditionals.htm �| if��each�e���v���[�g�E�R�}���h���g�p�����e���v���[�g�̐���
  • Listing3_DataLinking.htm �| �f�[�^�E�����L���O�̐���
  • Listing4_Converters.htm �| �f�[�^�E�����L���O�ŃR���o�[�^���g�p�������

�@�t�@�C���V�X�e���փt�@�C�����𓀂���΁A�e�y�[�W�����s���Ď��ۂɂ��̊T�O���m�F�ł��܂��B

�܂Ƃ�

�@�킽�������̓I�[�v���\�[�X��jQuery�v���W�F�N�g�ɎQ���ł���悤�ɂȂ�A���Ɋ��ł��܂��B�ŏ���2�‚̒�Ăɑ΂��ẮA��܂��̃t�B�[�h�o�b�N����������󂯎��܂����B������������������I�ɍv�����Ă����܂��B�����̋@�\�ɂ��A���ׂĂ̊J���ҁiASP.NET�J���҂��܂ށj���f���炵��Ajax�A�v���P�[�V�������ȒP�ɍ\�z�ł���悤�ɂȂ�΍K���ł��B

�@Hope this helps,

�@Scott

P.S.�m�u���O�ɉ����A����Twitter���g���ĊȒP�ȍX�V�⃊���N���L���s���Ă��܂��Btwitter.com/scottgu�ŁA�킽�����t�H���[���Ă��������nEnd of Article

�@ �@
�@
CfbNXEy[Ww �@�u�`ScottGu���̃u���O���`�v


Insider.NET �t�H�[���� �V���L��
  • ��2��@�Ȍ��ȃR�[�f�B���O�̂��߂� �i2017/7/26�j
    �@�����_���ŋL�q�ł��郁���o�̑����Athrow���Aout�ϐ��A�^�v���ȂǁAC# 7�ɂ͈ȑO�����R�[�h���Ȍ��ɋL�q�ł���悤�ȋ@�\����������Ă���
  • ��1��@Visual Studio Code�f�o�b�O�̊�b�m�� �i2017/7/21�j
    �@Node.js�v���O�������f�o�b�O���Ȃ���AVisual Studio Code�ɓ�������Ă���f�o�b�O�@�\�̊�{�́u�L�v���}�X�^�[���悤
  • ��1��@���ĂȃR�[�f�B���O�̂��߂� �i2017/7/19�j
    �@C# 7�Œlj����ꂽ�V�@�\�̒�����A�u���l���e�����\���̉��P�v�Ɓu���[�J���֐��v���Љ��B�����͕�����₷���R�[�h���L�q����̂Ɏg����
  • Presentation Translator �i2017/7/18�j
    �@Presentation Translator��PowerPoint�p�̃A�h�C���B�v���[���e�[�V�������̎����̕t����A������ł̎��^�����A�X���C�h�̖|����s����
��IT���[���}�K�W���@�V������X�^�b�t�̃R���������[���œ͂��܂��i�����j

���ڂ̃e�[�}

Insider.NET �L�������L���O

�{�� ����