Uploaded byYusuke Amano

PDF, PPTX2,910 views

Webアプリケーションをもっと楽しく！〜フロントエンドのお仕事〜

近年、フロントエンドエンジニアという新しい職種が注目されています。実際の仕事はどのようなものなのか、フロントエンドの中の人が語ります。

Editor's Notes

#2 \n
#3 \n
#4 \n
#5 \n
#6 &#x300C;&#x3053;&#x308C;&#x3092;&#x3059;&#x308B;&#x306E;&#x304C;&#x30D5;&#x30ED;&#x30F3;&#x30C8;&#x30A8;&#x30F3;&#x30C9;&#x30A8;&#x30F3;&#x30B8;&#x30CB;&#x30A2;&#x300D;&#x3063;&#x3066;&#x3044;&#x3046;&#x8A71;&#x304C;&#x3046;&#x307E;&#x304F;&#x3067;&#x304D;&#x306A;&#x3044;&#x306E;&#x3067;&#x3001;kintone&#x306E;&#x958B;&#x767A;&#x3067;&#x3084;&#x3063;&#x3066;&#x304D;&#x305F;&#x3053;&#x3068;&#x3092;&#x30C0;&#x30A4;&#x30B8;&#x30A7;&#x30B9;&#x30C8;&#x3067;&#x7D39;&#x4ECB;&#x3057;&#x307E;&#x3059;\n
#7 &#x30B5;&#x30A4;&#x30DC;&#x30A6;&#x30BA;&#x304C;&#x30D5;&#x30ED;&#x30F3;&#x30C8;&#x30A8;&#x30F3;&#x30C9;&#x306B;&#x6CE8;&#x529B;&#x3057;&#x59CB;&#x3081;&#x305F;&#x306E;&#x306F;kintone&#x304B;&#x3089;&#x3002;\n&#x306A;&#x306E;&#x3067;&#x3001;&#x30D5;&#x30ED;&#x30F3;&#x30C8;&#x30A8;&#x30F3;&#x30C9;&#x306B;&#x30D5;&#x30EB;&#x30B3;&#x30DF;&#x30C3;&#x30C8;&#x3057;&#x3066;&#x308B;&#x306E;&#x306F;&#x793E;&#x5185;&#x3067;&#x81EA;&#x5206;&#x304C;&#x6700;&#x521D;&#x3060;&#x3068;&#x601D;&#x3046;\n
#8 &#x3080;&#x3057;&#x308D;&#x8272;&#x3093;&#x306A;OS/&#x30B9;&#x30DA;&#x30C3;&#x30AF;&#x3067;&#x52D5;&#x304B;&#x3059;&#x5206;&#x672C;&#x5F53;&#x306B;&#x30B5;&#x30FC;&#x30D0;&#x30B5;&#x30A4;&#x30C9;&#x3092;&#x9811;&#x5F35;&#x3089;&#x306A;&#x3044;&#x3068;&#x3044;&#x3051;&#x306A;&#x304B;&#x3063;&#x305F;\n
#9 \n
#10 &#x914D;&#x5C5E;&#x3055;&#x308C;&#x305F;&#x3070;&#x304B;&#x308A;&#x306E;&#x30DA;&#x30FC;&#x30DA;&#x30FC;&#x3067;&#x4F55;&#x3082;&#x308F;&#x304B;&#x308A;&#x307E;&#x305B;&#x3093;\nUI&#x306E;&#x4E8C;&#x4EBA;&#x306F;&#x3001;&#x793E;&#x5185;&#x3067;&#x4E00;&#x756A;js&#x304C;&#x3067;&#x304D;&#x308B;&#x4EBA;&#x305F;&#x3061;&#x3060;&#x3063;&#x305F;&#x304B;&#x3089;\n
#11 &#x5148;&#x8F29;&#x65B9;&#x306B;&#x3057;&#x3054;&#x304B;&#x308C;&#x3066;&#x305F;&#x6642;&#x4EE3;\n&#x507D;&#x3042;&#x307E;&#x3061;&#x3083;&#x3093;&#x3068;&#x547C;&#x3070;&#x308C;&#x308B;&#x65E5;&#x3005;&#x3082;&#x4E00;&#x77AC;&#x3067;&#x7D42;&#x308F;&#x3063;&#x305F;\n&#x4FFA;&#x3001;&#x4E8C;&#x4EE3;&#x76EE;&#x3042;&#x307E;&#x3061;&#x3083;&#x3093;&#x3068;&#x3057;&#x3066;&#x9811;&#x5F35;&#x308B;&#x3088;&#xFF01;\n
#12 js&#x306E;&#x52C9;&#x5F37;&#x3057;&#x3064;&#x3064;&#x3001;&#x82E5;&#x539F;&#x3055;&#x3093;&#x3068;&#x304C;&#x3080;&#x3057;&#x3083;&#x3089;&#x306B;&#x30B3;&#x30FC;&#x30C9;&#x3092;&#x66F8;&#x304D;&#x307E;&#x304F;&#x3063;&#x305F;\n
#13 &#x4ECA;&#x307E;&#x3067;&#x306F;&#x4F55;&#x3082;&#x8003;&#x3048;&#x305A;js&#x3092;&#x66F8;&#x304D;&#x307E;&#x304F;&#x3063;&#x3066;&#x3044;&#x305F;&#x3051;&#x3069;&#x3001;&#x305D;&#x306E;&#x8CA0;&#x50B5;&#x304C;&#x51FA;&#x3066;&#x304D;&#x305F;\n&#x3067;&#x3082;&#x305D;&#x308C;&#x3092;&#x4E57;&#x308A;&#x8D8A;&#x3048;&#x305F;&#x3053;&#x3068;&#x3067;&#x3059;&#x3054;&#x304F;&#x958B;&#x767A;&#x4F53;&#x5236;&#x304C;&#x9032;&#x5316;&#x3057;&#x305F;\n
#14 &#x4ECA;&#x3067;&#x306F;&#x5272;&#x3068;&#x3069;&#x3053;&#x3067;&#x3082;&#x3084;&#x3063;&#x3066;&#x308B;&#x3053;&#x3068;\n&#x4ECA;&#x306F;500&#x30D5;&#x30A1;&#x30A4;&#x30EB;&#x304F;&#x3089;&#x3044;&#x30ED;&#x30FC;&#x30C9;&#x3059;&#x308B;&#x753B;&#x9762;&#x3082;&#x3042;&#x308B;\n&#x30D7;&#x30ED;&#x30C0;&#x30AF;&#x30C8;&#x3067;ADVANCED&#x5BFE;&#x5FDC;&#x3067;&#x304D;&#x3066;&#x308B;&#x306E;&#x306F;google&#x4EE5;&#x5916;&#x3060;&#x3068;&#x3046;&#x3061;&#x304F;&#x3089;&#x3044;&#x3058;&#x3083;&#x306A;&#x3044;&#x304B;&#x306A;&#xFF1F;\n
#15 &#x30C6;&#x30B9;&#x30C8;&#x306F;&#x81EA;&#x52D5;&#x3067;&#x4F55;&#x5EA6;&#x3082;&#x52D5;&#x304B;&#x305B;&#x308B;&#x3053;&#x3068;&#x304C;&#x5927;&#x4E8B;\n
#16 Ajax&#x30D5;&#x30EB;&#x6D3B;&#x7528;&#x306A;kintone&#x306A;&#x3089;&#x3067;&#x306F;&#x306E;&#x554F;&#x984C;\n&#x4F7F;&#x3044;&#x7D42;&#x308F;&#x3063;&#x305F;&#x30AA;&#x30D6;&#x30B8;&#x30A7;&#x30AF;&#x30C8;&#x304B;&#x3089;&#x30A4;&#x30D9;&#x30F3;&#x30C8;&#x30CF;&#x30F3;&#x30C9;&#x30E9;&#x3084;DOM&#x3078;&#x306E;&#x53C2;&#x7167;&#x3092;&#x5207;&#x308A;&#x307E;&#x304F;&#x308B;\n
#17 var&#x4ED8;&#x3051;&#x5FD8;&#x308C;&#x3066;&#x30B0;&#x30ED;&#x30FC;&#x30D0;&#x30EB;&#x5909;&#x6570;&#x306B;&#x306A;&#x3063;&#x3061;&#x3083;&#x3046;&#x3068;&#x304B;&#x3002;\njslint&#x3068;&#x304B;jshint&#x306F;&#x3046;&#x3061;&#x306E;&#x30B3;&#x30FC;&#x30C7;&#x30A3;&#x30F3;&#x30B0;&#x30B9;&#x30BF;&#x30A4;&#x30EB;&#x306B;&#x306F;&#x5408;&#x308F;&#x306A;&#x304B;&#x3063;&#x305F;\n&#x3053;&#x306E;&#x3068;&#x304D;Closure Linter&#x306F;&#x500B;&#x4EBA;&#x7684;&#x306B;&#x4F7F;&#x3046;&#x7A0B;&#x5EA6;\n
#18 Jenkins&#x306E;&#x30D3;&#x30EB;&#x30C9;&#x30D7;&#x30ED;&#x30BB;&#x30B9;&#x306B;js&#x307E;&#x308F;&#x308A;&#x306E;&#x9759;&#x7684;&#x89E3;&#x6790;&#x3092;&#x8272;&#x3005;&#x5165;&#x308C;&#x305F;\n
#19 &#x5B9F;&#x969B;&#x306B;&#x4F7F;&#x3044;&#x59CB;&#x3081;&#x3066;&#x51FA;&#x3066;&#x304D;&#x305F;&#x554F;&#x984C;&#x70B9;&#x3002;\n&#x5272;&#x3068;&#x6B63;&#x653B;&#x6CD5;&#x3067;&#x5BFE;&#x51E6;&#x3057;&#x305F;\n
#20 CSS&#x62E1;&#x5F35;&#x6587;&#x6CD5;&#x3068;&#x3001;&#x305D;&#x308C;&#x3092;&#x4F7F;&#x3063;&#x305F;&#x30D5;&#x30EC;&#x30FC;&#x30E0;&#x30EF;&#x30FC;&#x30AF;\nCSS&#x306E;&#x958B;&#x767A;&#x52B9;&#x7387;&#x304C;&#x304B;&#x306A;&#x308A;&#x4E0A;&#x304C;&#x3063;&#x305F;\n
#21 &#x4ECA;8&#x4EBA;&#x304F;&#x3089;&#x3044;js&#x66F8;&#x304F;\n&#x3061;&#x3083;&#x3093;&#x3068;&#x52D5;&#x3044;&#x3066;&#x4FDD;&#x5B88;&#x3057;&#x3084;&#x3059;&#x3044;&#x8A2D;&#x8A08;&#x30D1;&#x30BF;&#x30FC;&#x30F3;&#x304C;&#x51FA;&#x6765;&#x3066;&#x304D;&#x305F;\nClosure Templates, Closure Compiler&#x3092;&#x3055;&#x3089;&#x306B;&#x9759;&#x7684;&#x89E3;&#x6790;&#x306B;&#x5FDC;&#x7528;\n
#22 \n
#23 \n
#24 &#x30E2;&#x30D0;&#x30A4;&#x30EB;&#x30A2;&#x30D7;&#x30EA;&#x3082;&#x30AF;&#x30E9;&#x30A4;&#x30A2;&#x30F3;&#x30C8;&#x30B5;&#x30A4;&#x30C9;&#x306E;&#x6280;&#x8853;&#x3067;&#x5B9F;&#x88C5;\n&#x30B5;&#x30FC;&#x30D0;&#x306E;&#x5B9F;&#x88C5;&#x304C;&#x5B89;&#x5B9A;&#x3057;&#x3066;&#x304D;&#x305F;&#x3057;&#x3001;&#x524D;&#x3088;&#x308A;&#x3082;&#x753B;&#x9762;&#x5074;&#x306E;&#x4F5C;&#x308A;&#x8FBC;&#x307F;&#x306B;&#x6CE8;&#x529B;&#x3059;&#x308B;&#x3088;&#x3046;&#x306B;&#x306A;&#x3063;&#x305F;\n
#25 \n
#26 &#x3061;&#x3083;&#x3093;&#x3068;&#x3057;&#x305F;Web&#x30A2;&#x30D7;&#x30EA;&#x3092;&#x4F5C;&#x308B;&#x306A;&#x3089;&#x3053;&#x3046;&#x3044;&#x3046;&#x3068;&#x3053;&#x308D;&#x306E;&#x77E5;&#x8B58;&#x304C;&#x5FC5;&#x8981;\n&#x7BC4;&#x56F2;&#x304C;&#x5E83;&#x3044;&#x306E;&#x3068;&#x3001;&#x307E;&#x3068;&#x3081;&#x3066;&#x4F53;&#x7CFB;&#x7684;&#x306B;&#x5B66;&#x3079;&#x308B;&#x30EA;&#x30BD;&#x30FC;&#x30B9;&#x304C;&#x307B;&#x3068;&#x3093;&#x3069;&#x306A;&#x3044;&#x306E;&#x3067;&#x5F90;&#x3005;&#x306B;&#x8EAB;&#x306B;&#x3064;&#x3051;&#x3066;&#x3044;&#x304F;&#x3057;&#x304B;&#x306A;&#x3044;\n
#27 \n
#28 \n
#29 \n
#30 \n
#31 \n
#32 \n
#33 \n
#34 \n
#35 \n

Webアプリケーションをもっと楽しく！ 〜フロントエンドのお仕事〜

More Related Content

Viewers also liked

More from Yusuke Amano

Editor's Notes

Webアプリケーションをもっと楽しく！〜フロントエンドのお仕事〜