Upgrade to Pro — share decks privately, control downloads, hide ads and more …

今さら聞けない！Webデザイナーのためのプログラミング講座

Toshiyuki TAKAHASHI
May 20, 2016
Programming
1
290

 今さら聞けない！Webデザイナーのためのプログラミング講座

2015.1.25 に開催した「今さら聞けない！Webデザイナーのためのプログラミング講座」のスライドです

Toshiyuki TAKAHASHI

May 20, 2016
Tweet

More Decks by Toshiyuki TAKAHASHI

See All by Toshiyuki TAKAHASHI
第11回 AED-LABO 解説用スライド
gautt
1
590
今さら聞けない！デザイナーのためのGit超入門
gautt
2
260
10倍ラクするアピアランス入門
gautt
2
590

Other Decks in Programming

See All in Programming
Open source software: how to live long and go far
gaelvaroquaux
0
640
Domain-Driven Transformation
hschwentner
2
1.9k
1年目の私に伝えたい！テストコードを怖がらなくなるためのヒント/Tips for not being afraid of test code
push_gawa
0
220
仕様変更に耐えるための"今の"DRY原則を考える / Rethinking the "Don't repeat yourself" for resilience to specification changes
mkmk884
4
710
チームリードになって変わったこと
isaka1022
0
200
Honoとフロントエンドの 型安全性について
yodaka
7
1.3k
ファインディLT_ポケモン対戦の定量的分析
fufufukakaka
0
740
PHPのバージョンアップ時にも役立ったAST
matsuo_atsushi
0
120
責務と認知負荷を整える! 抽象レベルを意識した関心の分離
yahiru
7
740
Kubernetes History Inspector(KHI)を触ってみた
bells17
0
230
クリーンアーキテクチャから見る依存の向きの大切さ
shimabox
2
490
『GO』アプリ バックエンドサーバのコスト削減
mot_techtalk
0
150

Featured

See All Featured
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.4k
The Invisible Side of Design
smashingmag
299
50k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.6k
Rails Girls Zürich Keynote
gr2m
94
13k
A Philosophy of Restraint
colly
203
16k
Gamification - CAS2011
davidbonilla
80
5.1k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.2k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.3k
Music & Morning Musume
bryan
46
6.3k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k

Transcript

  1. ࠓ͞Βฉ͚ͳ͍ʂ 8FCσβΠφʔͷͨΊͷ ϓϩάϥϛϯάߨ࠲ AED LABO 2015.1.25. sun. TOSHIYUKI TAKAHASHI (GRAPHIC

    ARTS UNIT )

  2. ʠίϯϐϡʔλ͕ߦ͏΂͖ॲཧΛॱংཱͯͯهड़ͨ͠΋ͷʡ ग़యɿϓϩάϥϜͱ͸ʤίϯϐϡʔλϓϩάϥϜʥʲQSPHSBNʳҙຯղઆઆ໌ఆٛɿ*5༻ޠࣙయʢIUUQFXPSETKQX&&"%&#&"&"IUNMʣ ϓϩάϥϜͱ͸

  3. ͭΊͷॲཧ ࣮ߦ ͭΊͷॲཧ ͭΊͷॲཧ ͭΊͷॲཧ ʜʜ ࣮ߦ ࣮ߦ ࣮ߦ ͋Β͔͡ΊܾΊΒΕͨॲཧΛ্͔Βॱ൪ʹ࣮ߦ͍ͯ͘͠

    ϓϩάϥϜͱ͸

  4. ͭΊͷॲཧ" ʜʜ ͭΊͷॲཧ" ࣮ߦ ࣮ߦ ͭΊͷॲཧ ࣮ߦ ͭΊͷॲཧ ࣮ߦ ৚݅

    A B ϓϩάϥϜͱ͸

  5. ࣮ߦ ࣮ߦ ͭΊͷॲཧ# ͭΊͷॲཧ# ʜʜ ͭΊͷॲཧ ࣮ߦ ͭΊͷॲཧ ࣮ߦ ৚݅

    A B ϓϩάϥϜͱ͸

  6. ͭΊͷॲཧ" ʜʜ ͭΊͷॲཧ" ͭΊͷॲཧ ͭΊͷॲཧ ͭΊͷॲཧ# ͭΊͷॲཧ# ʜʜ ৚݅ʹΑͬͯॲཧΛৼΓ෼͚Δ ৚݅

    A B ϓϩάϥϜͱ͸

  7. ྫྷଂݿΛ։͚Δ த਎Λ֬ೝ͢Δ ڇ೑͕͋Δ ಲ೑͕͋Δ ܲ೑͕͋Δ ϏʔϑεςʔΩ ϙʔΫιςʔ άϦϧνΩϯ ങ͍ʹߦ͘ ೑͕͋Δ͔

    NO YES ༦৯ͷϝχϡʔΛܾΊΔͱ͖ͷྲྀΕ

  8. ը૾ग़యɿ઒࡚ࢢɿΧϞ਍அςετʢIUUQXXXDJUZLBXBTBLJKQQBHFIUNMʣ ਍அνϟʔτ΍઎͍νϟʔτ͸ҰछͷʮϓϩάϥϜʯͱݴ͑Δ

  9. զʑ͕࿩͢ݴ༿͕ࠃʹΑͬͯҟͳΔΑ͏ʹ ϓϩάϥϜݴޠʹ΋͍͔ͭ͘ͷछྨ͕͋Γ·͢

  10. Web Design (Front End) JavaScript / PHP … Web Development

    Ruby / Python / Perl / Scala … Application Development Java / C++ / Objective-C / Swift … ओͳϓϩάϥϜݴޠͷछྨ ΋ͪΖΜɺ͜ͷଞʹ΋ͨ͘͞ΜͷϓϩάϥϜݴޠ͕ଘࡏ͠·͢

  11. ΢ΣϒσβΠφʔతʹೃછΈ͕͋Δͷ͸ίί ओͳϓϩάϥϜݴޠͷछྨ Web Design (Front End) JavaScript / PHP …

    Web Development Ruby / Python / Perl / Scala Application Development Java / C++ / Objective-C / Swift

  12. ݴޠͷ࢓༷΍จ๏ͳͲΛ֮͑Δͷ΋େ੾͕ͩɺ ॲཧͷߟ͑ํʢΞϧΰϦζϜʣΛ֮͑Δํ͕େ੾ ϓϩάϥϜతͳࢥߟΛ͢Δʹ͸

  13. ࠺ʮڇೕΛ̍ύοΫങ͖ͬͯͯɻཛ͕͋ͬͨΒ͓̒ͭئ͍ʯ ͠͹Βͯ͘͠ɺ෉͕ʬڇೕΛ̒ύοΫʭങͬͯؼ୐ ࠺ʮͳΜͰڇೕΛ̒ύοΫ΋ങ͖ͬͯͨͷΑʯ ෉ʮͩͬͯཛ͕͔͋ͬͨΒʯ ͋Δ࠺͕ϓϩάϥϚʔͷ෉ʹങ͍෺ΛཔΜͩΒʜʜ ͓લ͸ҰମԿΛݴ͍ͬͯΔͷͩ

  14.        WBSڇೕͷݸ਺ JG ཛ

    \ ڇೕͷݸ਺ ^FMTF\ ڇೕͷݸ਺ ^ ڇೕΛങ͏ ڇೕͷݸ਺  ˞+BWB4DSJQUͷ৔߹ ࠺ͷ͓ئ͍͸෉ʹ͸͜͏ฉ͍͑ͯ͜Δ

  15. ίʔυΛॻ͘͜ͱ ϓϩάϥϜతͳࢥߟΛ͢Δʹ͸ ϓϩάϥϜ

  16. ΞϧΰϦζϜʢ࢓૊Έ΍खॱʣ Λߟ͑Δ͜ͱ ϓϩάϥϜ ϓϩάϥϜతͳࢥߟΛ͢Δʹ͸

  17. Hands on ΍ͬͯΈΑ͏

  18. ࣮ߦ؀ڥ w DPOTPMFMPH μΠΞϩάදࣔ w BMFSU w DPOpSN w QSPNQU

    ม਺ σʔλܕ ԋࢉࢠ w ࢉज़ԋࢉࢠ w ୅ೖԋࢉࢠ w ൺֱԋࢉࢠ w ࿦ཧԋࢉࢠ ؔ਺ w GVODUJPO w Ҿ਺ w ໭Γ஋ w ଈ࣌ؔ਺ w ແ໊ؔ਺ ม਺ͷείʔϓ ഑ྻ ࿈૝഑ྻʢϋογϡʣ ৚݅෼ذ w JG w JGʜFMTF w JGʜFMTFJG w ൺֱԋࢉࢠ w TXJUDI ܁Γฦ͠ w XIJMF w EPʜXIJMF w GPS w GPSʜJO ࠓ೔΍Γ͍ͨ͜ͱ

  19. ΢Σϒϒϥ΢β w (PPHMF$ISPNFɺ4BGBSJ ΤσΟλ w ͓޷͖ͳ΋ͷʢ65'Λѻ͑Δ΋ͷʣ w σϞ͸4VCMJNF5FYUΛ࢖༻ ίʔυΛॻ͘৔ॴ w

    )5.-ͷTDSJQUཁૉ಺ w ֎෦KTϑΝΠϧ ݴޠ w +BWB4DSJQU ࣮ߦ؀ڥ

  20. DPOTPMFMPH σόοΨͷ8FCίϯιʔϧʹϝοηʔδΛग़ྗ (PPHMF$ISPNFɿදࣔˠ։ൃ؅ཧˠ+BWB4DSJQUίϯιʔϧ 4BGBSJɿ։ൃˠΤϥʔίϯιʔϧΛදࣔ 'JSFGPYɿπʔϧˠ8FC։ൃˠ8FCίϯιʔϧ *&ɿʦ'ʧͰ։ൃऀπʔϧΛ։͖ɺʦίϯιʔϧʧλϒΛબ୒ ࣮ߦ؀ڥ

  21. Show dialog box μΠΞϩάϘοΫεදࣔ

  22. BMFSU ܯࠂμΠΞϩάΛදࣔ μΠΞϩάϘοΫεදࣔ

  23. DPOpSN ֬ೝμΠΞϩάΛදࣔ μΠΞϩάϘοΫεදࣔ

  24. QSPNQU จࣈೖྗՄೳͳμΠΞϩάΛදࣔ μΠΞϩάϘοΫεදࣔ

  25. Variable ม਺

  26. ஋Λࣗ༝ʹೖΕସ͑Ͱ͖ΔೖΕ෺ ʁ  ͍͋͏ USVF ม਺ ม਺

  27. ม਺Λ࠷ॳʹ࢖͏ͱ͖͸ʮWBSʯͰએݴ͢Δ WBSม਺໊ ม਺

  28. ม਺ͷதʹ஋ΛೖΕΔʹ͸ʮʯΛ࢖͏ ม਺໊஋ ͜ͷΠίʔϧ͸ʮ୅ೖԋࢉࢠʯͱ͍͏ ୅ೖ ม਺

  29. Data type σʔλܕ

  30. σʔλܕ σʔλʹ͸ʮܕʯ͕͋Δ

  31. σʔλܕ จࣈͷ͜ͱ γϯάϧΫΦʔςʔγϣϯ͔μϒϧΫΦʔςʔγϣϯͰׅΔ 4USJOHܕ จࣈྻ

  32. σʔλܕ ਺ࣈͷ͜ͱ +BWB4DSJQUͰ͸੔਺΋খ਺ʢුಈখ਺఺ʣ΋۠ผ͠ͳ͍ /VNCFSܕ ਺஋

  33. σʔλܕ USVFʢਅʣɺGBMTFʢِʣͷͲͪΒ͔ ओʹ৚݅൑ఆͳͲͰ࢖͏ CPPMFBOܕ ࿦ཧ஋

  34. Expressions and operators ԋࢉࢠ

  35. ਺஋ͷܭࢉʹ࢖͏ ࢉज़ԋࢉࢠ ԋࢉࢠ

  36. ม਺ʹ஋Λ୅ೖ͢Δͱ͖ʹ࢖͏ ୅ೖԋࢉࢠ ԋࢉࢠ

  37. ෳ਺ͷର৅Λൺֱ͢Δͱ͖ʹ࢖͏ ൺֱԋࢉࢠ ԋࢉࢠ

  38. ৚݅ͷਅِΛ͢Δͱ͖ʹ࢖͏ ࿦ཧԋࢉࢠ ԋࢉࢠ

  39. Array ഑ྻ

  40. ෳ਺ͷม਺Ληοτʹͨ͠Α͏ͳ΋ͷ  ஋ ஋ ഑ྻ     ஋

    ஋ ஋ ม਺ ม਺ ม਺ ม਺ ม਺ ഑ྻ

  41. ࠷ॳʹ࢖͏ͱ͖͸ʮOFX"SSBZ ʯͰ࡞੒͢Δ ม਺໊OFX"SSBZ ഑ྻ

  42. ͜ͷΑ͏ʹলུͯ͠ॻ͘͜ͱ΋Ͱ͖Δ ม਺໊<> OFX"SSBZ ͱಉ͡ ഑ྻ

  43. ஋Λ୅ೖ͢Δͱ͖͸ม਺໊ʹʦ൪߸ʧΛ෇͚Δ ม਺໊<O>஋ ͜ͷ൪߸ͷ͜ͱΛΩʔͱݺͿ ୅ೖ ഑ྻ

  44. Associative array ࿈૝഑ྻ

  45. ൪߸Ͱ͸ͳ͘ΩʔϫʔυͰ؅ཧ͢Δ഑ྻ OBNF ࢁాଠ࿠ ࿈૝഑ྻ BHF TFY IFJHIU XFJHIU ม਺ ม਺

    ม਺ ม਺ ม਺  உ   ࿈૝഑ྻ

  46. ࠷ॳʹ࢖͏ͱ͖͸ʮOFX0CKFDU ʯͰ࡞੒͢Δ ม਺໊OFX0CKFDU ࿈૝഑ྻ

  47. ม਺໊\^ ͜ͷΑ͏ʹলུͯ͠ॻ͘͜ͱ΋Ͱ͖Δ OFX0CKFDU ͱಉ͡ ࿈૝഑ྻ

  48. ม਺໊<LFZ>஋ ม਺໊LFZ஋ ஋Λ୅ೖ͢Δͱ͖͸ม਺໊ʹʦʡΩʔʧΛ෇͚Δ ·ͨ͸ɺม਺໊ʹυοτ۠੾ΓͰΩʔΛࢦఆͯ͠΋0, ୅ೖ ୅ೖ ࿈૝഑ྻ

  49. Conditional branch ৚݅෼ذ

  50. JG ΋ͬͱ΋جຊతͳ৚݅෼ذ ৚݅෼ذ

  51. JG ৚݅ \ ৚͕݅ਅͷͱ͖ͷॲཧ ^ ৚݅෼ذ

  52. JGʜFMTF ύλʔϯΛ෼ذ͢Δ ৚݅෼ذ

  53. JG ৚݅ \ ৚͕݅ਅͷͱ͖ͷॲཧ ^FMTF\ ৚ِ͕݅ͱ͖ͷॲཧ ^ ৚݅෼ذ

  54. JGʜFMTFJG ͭҎ্ͷύλʔϯΛ෼ذ͢Δ ৚݅෼ذ

  55. JG ৚݅" \ ৚݅"͕ਅͷͱ͖ͷॲཧ ^FMTFJG ৚݅# \ ৚݅#͕ਅͱ͖ͷॲཧ ^FMTF\ ͢΂ِ͕ͯͱ͖ͷॲཧ

    ^ ৚݅෼ذ

  56. TXJUDI ม਺ͷ஋ʹΑͬͯॲཧΛ෼ذ ৚݅෼ذ

  57. TXJUDI ม਺ \ DBTF" ม਺ͷ஋͕"ͷͱ͖ͷॲཧ DBTF# ม਺ͷ஋͕#ͷͱ͖ͷॲཧ EFGBVMU ͲΕʹ΋౰ͯ͸·Βͳ͍ͱ͖ͷॲཧ ^

    ৚݅෼ذ

  58. Repeat ܁Γฦ͠

  59. XIJMF ৚݅Λຬ͍ͨͯ͠Δؒ܁Γฦ͢ ܁Γฦ͠

  60. XIJMF ৚݅ \ ܁Γฦ͢ॲཧ ^ ͜ͷ৚݅Λຬ͍ͨͯ͠Δؒͣͬͱ܁Γฦ͞ΕΔ ܁Γฦ͠

  61. EPʜXIJMF ৚݅Λຬ͍ͨͯ͠Δؒ܁Γฦ͢ʢ࠷௿ճ͸࣮ߦ͢Δʣ ܁Γฦ͠

  62. EP\ ܁Γฦ͢ॲཧ ^XIJMF ৚݅ ແ৚݅ʹճ͚ͩ͸࣮ߦ ͋ͱ͸͜ͷ৚݅Λຬ͍ͨͯ͠Δؒͣͬͱ܁Γฦ͞ΕΔ ܁Γฦ͠

  63. GPS Ұఆճ਺ͷॲཧΛ܁Γฦ͢ ܁Γฦ͠

  64. GPS WBSJJOJ  \ ܁Γฦ͢ॲཧ ^ ͜͜ʹ܁Γฦ͢ճ਺Λࢦఆ͢Δ ܁Γฦ͠

  65. GPSʜJO ഑ྻΛ૸ࠪ͢Δʢ഑ྻཁૉͷݸ਺෼܁Γฦ͢ʣ ܁Γฦ͠

  66. GPS WBSม਺໊JO഑ྻ໊ \ ܁Γฦ͢ॲཧ ^ ΩʔΛ֨ೲ͢ΔͨΊͷม਺໊Λࢦఆ ૸͍ࠪͨ͠഑ྻ ܁Γฦ͠

  67. Function ؔ਺

  68. Α͘࢖͏ॲཧʹ໊લΛ͚͍ͭͯͭͰ΋ݺͼग़ͤΔΑ͏ʹ͢Δ ʮ)FMMPʯͱ දࣔ͢Δॲཧ ؔ਺໊ʮIFMMPʯ IFMMP )FMMP IFMMP IFMMP )FMMP )FMMP

    ؔ਺

  69. GVODUJPOؔ਺໊ \ ॲཧ ^ ʮGVODUJPOʯʹଓ͍ͯؔ਺໊Λࢦఆ͢Δ ؔ਺

  70. Ҿ਺ ࣮ߦଆ͔Βؔ਺ʹ౉͢஋ ؔ਺

  71. ؔ਺ʹରͯ͠೚ҙͷσʔλΛ౉͢ ม਺ ʮNFTTBHFʯ Λදࣔ͢Δॲཧ ؔ਺໊ʮUBML NFTTBHF ʯ UBML )FMMP )FMMP

    UBML )FZ UBML ΍͋ʂ )FZ ΍͋ʂ ؔ਺

  72. ؔ਺໊ͷ͋ͱͷ ಺ʹҾ਺໊Λࢦఆ͓ͯ͘͠ GVODUJPOؔ਺໊ Ҿ਺໊ \ ॲཧ ^ ͜͜ʹҾ਺໊Λࢦఆ͓ͯ͘͠ ؔ਺

  73. ෳ਺ͷҾ਺Λࢦఆ͢Δ͜ͱ΋Մೳ GVODUJPOؔ਺໊ Ҿ਺ Ҿ਺ ʜ \ ॲཧ ^ ΧϯϚͰ۠੾ͬͯෳ਺ࢦఆ ؔ਺

  74. ໭Γ஋ ؔ਺͔Β࣮ߦଆʹฦ͢஋ ؔ਺

  75. ࣮ߦଆʹରͯؔ͠਺͔Β೚ҙͷσʔλΛฦ͢ ໭Γ஋ʹ ʮ)FMMPʯͱ͍͏ จࣈྻΛࢦఆ ؔ਺໊ʮHFU ʯ HFU )FMMP HFU )FMMP

    HFU )FMMP ؔ਺

  76. ʮSFUVSOʯʹଓ͍ͯ໭͢஋Λࢦఆ͢Δ GVODUJPOؔ਺໊ \ SFUVSO໭Γ஋ ^ ࣮ߦଆʹ໭͢஋ ؔ਺

  77. ʮSFUVSOʯ͸ؔ਺Λڧ੍ऴྃ͢ΔͨΊɺҎ߱ͷॲཧ͸࣮ߦ͞Εͳ͍ GVODUJPOؔ਺໊ \ ॲཧ" SFUVSO ॲཧ# ^ ॲཧ#͸࣮ߦ͞Εͳ͍ ؔ਺

  78. Scope of variables ม਺ͷείʔϓ

  79. ม਺͸ʮWBSʯͰએݴ͢ΔҐஔͰ༗ޮͳൣғ͕ҟͳΔ WBSม਺໊ ม਺ͷείʔϓ

  80. WBSOBNF5BSP GVODUJPOUFTU \ DPOTPMFMPH OBNF  ^ UFTU  DPOTPMFMPH

    OBNF  ؔ਺ͷ֎ଆͰએݴ͞Εͨม਺͸શମͰࢀরͰ͖Δ ม਺ͷείʔϓ

  81. WBSOBNF5BSP GVODUJPOUFTU \ DPOTPMFMPH OBNF  ^ UFTU  DPOTPMFMPH

    OBNF  ม਺ͷείʔϓ

  82. WBSOBNF5BSP GVODUJPOUFTU \ DPOTPMFMPH OBNF  ^ UFTU  DPOTPMFMPH

    OBNF  ม਺ͷείʔϓ

  83. WBSOBNF5BSP GVODUJPOUFTU \ DPOTPMFMPH OBNF  ^ UFTU  DPOTPMFMPH

    OBNF  5BSP ม਺ͷείʔϓ

  84. WBSOBNF5BSP GVODUJPOUFTU \ DPOTPMFMPH OBNF  ^ UFTU  DPOTPMFMPH

    OBNF  5BSP ม਺ͷείʔϓ

  85. GVODUJPOUFTU \ WBSOBNF5BSP DPOTPMFMPH OBNF  ^ UFTU  DPOTPMFMPH

    OBNF  ؔ਺ͷதͰએݴ͞Εͨม਺͸ͦͷؔ਺಺Ͱ͔͠ࢀরͰ͖ͳ͍ ม਺ͷείʔϓ

  86. GVODUJPOUFTU \ WBSOBNF5BSP DPOTPMFMPH OBNF  ^ UFTU  DPOTPMFMPH

    OBNF  ม਺ͷείʔϓ

  87. GVODUJPOUFTU \ WBSOBNF5BSP DPOTPMFMPH OBNF  ^ UFTU  DPOTPMFMPH

    OBNF  ม਺ͷείʔϓ

  88. GVODUJPOUFTU \ WBSOBNF5BSP DPOTPMFMPH OBNF  ^ UFTU  DPOTPMFMPH

    OBNF  5BSP ม਺ͷείʔϓ

  89. GVODUJPOUFTU \ WBSOBNF5BSP DPOTPMFMPH OBNF  ^ UFTU  DPOTPMFMPH

    OBNF  &SSPS ม਺ͷείʔϓ

  90. GVODUJPOUFTU \ WBSOBNF5BSP DPOTPMFMPH OBNF  SFUVSOOBNF ^ WBSVTFSUFTU 

    DPOTPMFMPH VTFS  5BSP ໭Γ஋Λ࢖͏ ม਺ͷείʔϓ