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
From the Wild into the Clouds - Laravel Meetup Talk
neverything
0
170
CDK開発におけるコーディング規約の運用
yamanashi_ren01
2
260
PEPCは何を変えようとしていたのか
ken7253
3
270
Rubyで始める関数型ドメインモデリング
shogo_tksk
0
140
sappoRo.R #12 初心者セッション
kosugitti
0
280
お前もAI鬼にならないか？👹Bolt & Cursor & Supabase & Vercelで人間をやめるぞ、ジョジョー！👺
taishiyade
7
4.2k
Datadog DBMでなにができる？ JDDUG Meetup#7
nealle
0
150
新宿駅構内を三人称視点で探索してみる
satoshi7190
2
120
技術を改善し続ける
gumioji
0
130
バッチを作らなきゃとなったときに考えること
irof
2
530
未経験でSRE、はじめました！ 組織を支える役割と軌跡
curekoshimizu
1
160
PHPのバージョンアップ時にも役立ったAST
matsuo_atsushi
0
230

Featured

See All Featured
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
10
520
Building a Modern Day 
E-commerce SEO Strategy
aleyda
38
7.1k
Building Flexible Design Systems
yeseniaperezcruz
328
38k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
30
4.6k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.4k
A better future with KSS
kneath
238
17k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
6
570
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2k
Testing 201, or: Great Expectations
jmmastey
42
7.2k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
The Pragmatic Product Professional
lauravandoore
32
6.4k
It's Worth the Effort
3n
184
28k

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 ໭Γ஋Λ࢖͏ ม਺ͷείʔϓ